├── .editorconfig ├── LICENSE ├── README.md ├── packages ├── behaviour │ └── collapse │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ ├── bs-accordion.css.js │ │ ├── bs-accordion.js │ │ ├── bs-collapsable.css.js │ │ ├── bs-collapsable.js │ │ ├── bs-collapse-mixin.js │ │ ├── bs-collapse-multi-toggle.js │ │ ├── bs-collapse-toggle.js │ │ └── index.js │ │ └── yarn.lock ├── components │ ├── alert │ │ ├── .gitignore │ │ ├── README.md │ │ ├── custom-elements.json │ │ ├── demo.html │ │ ├── demo │ │ │ └── alert-demo.js │ │ ├── docs │ │ │ ├── additional_content.png │ │ │ ├── dismissable_alert.png │ │ │ └── plain_alert.png │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-alert-dismiss.css.js │ │ │ ├── bs-alert-dismiss.js │ │ │ ├── bs-alert-hr.css.js │ │ │ ├── bs-alert-hr.js │ │ │ ├── bs-alert-link.css.js │ │ │ ├── bs-alert-link.js │ │ │ ├── bs-alert.css.js │ │ │ ├── bs-alert.js │ │ │ └── index.js │ │ ├── test │ │ │ ├── bs-alert-dismiss.test.js │ │ │ ├── bs-alert-link.test.js │ │ │ └── bs-alert.test.js │ │ ├── tsconfig.json │ │ ├── types │ │ │ ├── bs-alert-dismiss.css.d.ts │ │ │ ├── bs-alert-dismiss.d.ts │ │ │ ├── bs-alert-hr.css.d.ts │ │ │ ├── bs-alert-hr.d.ts │ │ │ ├── bs-alert-link.css.d.ts │ │ │ ├── bs-alert-link.d.ts │ │ │ ├── bs-alert.css.d.ts │ │ │ ├── bs-alert.d.ts │ │ │ └── index.d.ts │ │ └── yarn.lock │ ├── badge │ │ ├── .gitignore │ │ ├── README.md │ │ ├── custom-elements.json │ │ ├── demo.html │ │ ├── demo │ │ │ └── badge-demo.js │ │ ├── docs │ │ │ ├── badge_button.png │ │ │ ├── badge_context.png │ │ │ ├── badge_context_pills.png │ │ │ ├── badge_headings.png │ │ │ └── badge_links.png │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-badge-link.css.js │ │ │ ├── bs-badge-link.js │ │ │ ├── bs-badge-reboot.css.js │ │ │ ├── bs-badge.css.js │ │ │ ├── bs-badge.js │ │ │ └── index.js │ │ ├── tsconfig.json │ │ ├── types │ │ │ ├── bs-badge-link.css.d.ts │ │ │ ├── bs-badge-link.d.ts │ │ │ ├── bs-badge-reboot.css.d.ts │ │ │ ├── bs-badge.css.d.ts │ │ │ ├── bs-badge.d.ts │ │ │ └── index.d.ts │ │ └── yarn.lock │ ├── breadcrumb │ │ ├── .gitignore │ │ ├── README.md │ │ ├── custom-elements.json │ │ ├── demo.html │ │ ├── demo │ │ │ └── breadcrumb-demo.js │ │ ├── docs │ │ │ ├── breadcrumb_custom_divider.png │ │ │ └── breadcrumb_default_divider.png │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-breadcrumb-item.css.js │ │ │ ├── bs-breadcrumb-item.js │ │ │ ├── bs-breadcrumb-reboot.css.js │ │ │ ├── bs-breadcrumb.css.js │ │ │ ├── bs-breadcrumb.js │ │ │ └── index.js │ │ ├── test │ │ │ ├── bs-breadcrumb-item.test.js │ │ │ └── bs-breadcrumb.test.js │ │ ├── tsconfig.json │ │ ├── types │ │ │ ├── bs-breadcrumb-item.css.d.ts │ │ │ ├── bs-breadcrumb-item.d.ts │ │ │ ├── bs-breadcrumb-reboot.css.d.ts │ │ │ ├── bs-breadcrumb.css.d.ts │ │ │ ├── bs-breadcrumb.d.ts │ │ │ └── index.d.ts │ │ └── yarn.lock │ ├── button-group │ │ ├── .gitignore │ │ ├── README.md │ │ ├── custom-elements.json │ │ ├── demo.html │ │ ├── demo │ │ │ └── button-group-demo.js │ │ ├── docs │ │ │ ├── button_group.png │ │ │ ├── button_group_dropdown.png │ │ │ ├── button_group_sizes.png │ │ │ ├── button_group_vertical.png │ │ │ ├── toolbar_button_group.png │ │ │ └── toolbar_with_input.png │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-button-group-direction.css.js │ │ │ ├── bs-button-group-reboot.css.js │ │ │ ├── bs-button-group-size.css.js │ │ │ ├── bs-button-group.css.js │ │ │ ├── bs-button-group.js │ │ │ ├── bs-button-toolbar.css.js │ │ │ ├── bs-button-toolbar.js │ │ │ └── index.js │ │ ├── test │ │ │ ├── bs-button-group.test.js │ │ │ └── bs-button-toolbar.test.js │ │ ├── tsconfig.json │ │ ├── types │ │ │ ├── bs-button-group-direction.css.d.ts │ │ │ ├── bs-button-group-reboot.css.d.ts │ │ │ ├── bs-button-group-size.css.d.ts │ │ │ ├── bs-button-group.css.d.ts │ │ │ ├── bs-button-group.d.ts │ │ │ ├── bs-button-toolbar.css.d.ts │ │ │ ├── bs-button-toolbar.d.ts │ │ │ └── index.d.ts │ │ └── yarn.lock │ ├── button │ │ ├── .gitignore │ │ ├── README.md │ │ ├── custom-elements.json │ │ ├── demo.html │ │ ├── demo │ │ │ └── button-demo.js │ │ ├── docs │ │ │ ├── button_active.png │ │ │ ├── button_blocks.png │ │ │ ├── button_contexts.png │ │ │ ├── button_disabled.png │ │ │ ├── button_outlines.png │ │ │ ├── button_sizes.png │ │ │ └── button_variations.png │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-button-input.js │ │ │ ├── bs-button-link.js │ │ │ ├── bs-button-mixin.js │ │ │ ├── bs-button.js │ │ │ ├── css │ │ │ │ ├── bs-button-block.css.js │ │ │ │ ├── bs-button-common.css.js │ │ │ │ ├── bs-button-danger.css.js │ │ │ │ ├── bs-button-dark.css.js │ │ │ │ ├── bs-button-info.css.js │ │ │ │ ├── bs-button-light.css.js │ │ │ │ ├── bs-button-link.css.js │ │ │ │ ├── bs-button-primary.css.js │ │ │ │ ├── bs-button-reboot.js │ │ │ │ ├── bs-button-secondary.css.js │ │ │ │ ├── bs-button-size.css.js │ │ │ │ ├── bs-button-success.css.js │ │ │ │ └── bs-button-warning.css.js │ │ │ └── index.js │ │ ├── test │ │ │ ├── bs-button-input.test.js │ │ │ ├── bs-button-link.test.js │ │ │ └── bs-button.test.js │ │ ├── tsconfig.json │ │ ├── types │ │ │ ├── bs-button-input.d.ts │ │ │ ├── bs-button-link.d.ts │ │ │ ├── bs-button-mixin.d.ts │ │ │ ├── bs-button.d.ts │ │ │ ├── css │ │ │ │ ├── bs-button-block.css.d.ts │ │ │ │ ├── bs-button-common.css.d.ts │ │ │ │ ├── bs-button-danger.css.d.ts │ │ │ │ ├── bs-button-dark.css.d.ts │ │ │ │ ├── bs-button-info.css.d.ts │ │ │ │ ├── bs-button-light.css.d.ts │ │ │ │ ├── bs-button-link.css.d.ts │ │ │ │ ├── bs-button-primary.css.d.ts │ │ │ │ ├── bs-button-reboot.d.ts │ │ │ │ ├── bs-button-secondary.css.d.ts │ │ │ │ ├── bs-button-size.css.d.ts │ │ │ │ ├── bs-button-success.css.d.ts │ │ │ │ └── bs-button-warning.css.d.ts │ │ │ └── index.d.ts │ │ └── yarn.lock │ ├── card │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-card-body.css.js │ │ │ ├── bs-card-body.js │ │ │ ├── bs-card-columns.css.js │ │ │ ├── bs-card-columns.js │ │ │ ├── bs-card-deck.css.js │ │ │ ├── bs-card-deck.js │ │ │ ├── bs-card-footer.css.js │ │ │ ├── bs-card-footer.js │ │ │ ├── bs-card-group.css.js │ │ │ ├── bs-card-group.js │ │ │ ├── bs-card-header.css.js │ │ │ ├── bs-card-header.js │ │ │ ├── bs-card-img.css.js │ │ │ ├── bs-card-img.js │ │ │ ├── bs-card-link.css.js │ │ │ ├── bs-card-link.js │ │ │ ├── bs-card-links.css.js │ │ │ ├── bs-card-links.js │ │ │ ├── bs-card-overlay.css.js │ │ │ ├── bs-card-overlay.js │ │ │ ├── bs-card-subtitle.css.js │ │ │ ├── bs-card-subtitle.js │ │ │ ├── bs-card-text.css.js │ │ │ ├── bs-card-text.js │ │ │ ├── bs-card-title.css.js │ │ │ ├── bs-card-title.js │ │ │ ├── bs-card.css.js │ │ │ ├── bs-card.js │ │ │ ├── helper │ │ │ │ ├── bs-card-links-helper.js │ │ │ │ └── bs-card-list-group-helper.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── carousel │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-carousel-caption.css.js │ │ │ ├── bs-carousel-caption.js │ │ │ ├── bs-carousel-control-next.css.js │ │ │ ├── bs-carousel-control-next.js │ │ │ ├── bs-carousel-control-prev.css.js │ │ │ ├── bs-carousel-control-prev.js │ │ │ ├── bs-carousel-indicator.css.js │ │ │ ├── bs-carousel-indicator.js │ │ │ ├── bs-carousel-indicators.css.js │ │ │ ├── bs-carousel-indicators.js │ │ │ ├── bs-carousel-item.css.js │ │ │ ├── bs-carousel-item.js │ │ │ ├── bs-carousel.css.js │ │ │ ├── bs-carousel.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── dropdown │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-dropdown-divider.css.js │ │ │ ├── bs-dropdown-divider.js │ │ │ ├── bs-dropdown-header.css.js │ │ │ ├── bs-dropdown-header.js │ │ │ ├── bs-dropdown-item-button.js │ │ │ ├── bs-dropdown-item-link.js │ │ │ ├── bs-dropdown-item-mixin.js │ │ │ ├── bs-dropdown-item-text.css.js │ │ │ ├── bs-dropdown-item-text.js │ │ │ ├── bs-dropdown-item.css.js │ │ │ ├── bs-dropdown-menu.css.js │ │ │ ├── bs-dropdown-menu.js │ │ │ ├── bs-dropdown-nav.css.js │ │ │ ├── bs-dropdown-split.css.js │ │ │ ├── bs-dropdown-toggle.css.js │ │ │ ├── bs-dropdown.css.js │ │ │ ├── bs-dropdown.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── form │ │ ├── .gitignore │ │ ├── demo.html │ │ ├── demo │ │ │ └── form-demo.js │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-form-check-group.css.js │ │ │ ├── bs-form-check-group.js │ │ │ ├── bs-form-check-label.css.js │ │ │ ├── bs-form-check-label.js │ │ │ ├── bs-form-checkbox-input.css.js │ │ │ ├── bs-form-checkbox-input.js │ │ │ ├── bs-form-control-size.css.js │ │ │ ├── bs-form-control.css.js │ │ │ ├── bs-form-fieldset.js │ │ │ ├── bs-form-file-input.js │ │ │ ├── bs-form-group.css.js │ │ │ ├── bs-form-group.js │ │ │ ├── bs-form-help-text.js │ │ │ ├── bs-form-input-feedback.css.js │ │ │ ├── bs-form-input-feedback.js │ │ │ ├── bs-form-input-mixin.js │ │ │ ├── bs-form-input-plaintext.css.js │ │ │ ├── bs-form-input-plaintext.js │ │ │ ├── bs-form-input.js │ │ │ ├── bs-form-label.css.js │ │ │ ├── bs-form-label.js │ │ │ ├── bs-form-radio-group.js │ │ │ ├── bs-form-radio-input.css.js │ │ │ ├── bs-form-radio-input.js │ │ │ ├── bs-form-range.js │ │ │ ├── bs-form-row.css.js │ │ │ ├── bs-form-row.js │ │ │ ├── bs-form-select.css.js │ │ │ ├── bs-form-select.js │ │ │ ├── bs-form-textarea.js │ │ │ ├── bs-form.css.js │ │ │ ├── bs-form.js │ │ │ └── index.js │ │ ├── test │ │ │ ├── bs-form-input-plaintext.test.js │ │ │ └── bs-form-input.test.js │ │ └── yarn.lock │ ├── input-group │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-input-group-append.css.js │ │ │ ├── bs-input-group-append.js │ │ │ ├── bs-input-group-large.css.js │ │ │ ├── bs-input-group-prepend.css.js │ │ │ ├── bs-input-group-prepend.js │ │ │ ├── bs-input-group-small.css.js │ │ │ ├── bs-input-group-text.css.js │ │ │ ├── bs-input-group-text.js │ │ │ ├── bs-input-group.css.js │ │ │ ├── bs-input-group.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── jumbotron │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-jumbotron.css.js │ │ │ ├── bs-jumbotron.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── list-group │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-list-group-action-flush.css.js │ │ │ ├── bs-list-group-action-flush.js │ │ │ ├── bs-list-group-action.css.js │ │ │ ├── bs-list-group-action.js │ │ │ ├── bs-list-group-badge-item.js │ │ │ ├── bs-list-group-common.css.js │ │ │ ├── bs-list-group-flush.css.js │ │ │ ├── bs-list-group-flush.js │ │ │ ├── bs-list-group-item-action-button.js │ │ │ ├── bs-list-group-item-action-common.css.js │ │ │ ├── bs-list-group-item-action-link.js │ │ │ ├── bs-list-group-item-common.css.js │ │ │ ├── bs-list-group-item.js │ │ │ ├── bs-list-group.css.js │ │ │ ├── bs-list-group.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── media-object │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-media-body.js │ │ │ ├── bs-media-group.css.js │ │ │ ├── bs-media-group.js │ │ │ ├── bs-media.css.js │ │ │ ├── bs-media.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── modal │ │ ├── .gitignore │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-modal-body.css.js │ │ │ ├── bs-modal-body.js │ │ │ ├── bs-modal-footer.css.js │ │ │ ├── bs-modal-footer.js │ │ │ ├── bs-modal-header.css.js │ │ │ ├── bs-modal-header.js │ │ │ ├── bs-modal.css.js │ │ │ ├── bs-modal.js │ │ │ └── index.js │ │ ├── test │ │ │ └── bs-modal.test.js │ │ └── yarn.lock │ ├── navbar │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-navbar-brand-link.css.js │ │ │ ├── bs-navbar-brand-link.js │ │ │ ├── bs-navbar-brand.css.js │ │ │ ├── bs-navbar-brand.js │ │ │ ├── bs-navbar-collapse.css.js │ │ │ ├── bs-navbar-collapse.js │ │ │ ├── bs-navbar-dark-color.css.js │ │ │ ├── bs-navbar-expand-lg.css.js │ │ │ ├── bs-navbar-expand-md.css.js │ │ │ ├── bs-navbar-expand-sm.css.js │ │ │ ├── bs-navbar-expand-xs.css.js │ │ │ ├── bs-navbar-light-color.css.js │ │ │ ├── bs-navbar-link.css.js │ │ │ ├── bs-navbar-link.js │ │ │ ├── bs-navbar-nav.css.js │ │ │ ├── bs-navbar-nav.js │ │ │ ├── bs-navbar-text.css.js │ │ │ ├── bs-navbar-text.js │ │ │ ├── bs-navbar-toggler-icon.css.js │ │ │ ├── bs-navbar-toggler-icon.js │ │ │ ├── bs-navbar-toggler.css.js │ │ │ ├── bs-navbar-toggler.js │ │ │ ├── bs-navbar.css.js │ │ │ ├── bs-navbar.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── navs │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-nav-item.css.js │ │ │ ├── bs-nav-item.js │ │ │ ├── bs-nav-link.css.js │ │ │ ├── bs-nav-link.js │ │ │ ├── bs-nav.css.js │ │ │ ├── bs-nav.js │ │ │ └── index.js │ │ └── yarn.lock │ ├── pagination │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ │ ├── bs-page-item.css.js │ │ │ ├── bs-page-item.js │ │ │ ├── bs-page-link.css.js │ │ │ ├── bs-page-link.js │ │ │ ├── bs-pagination.css.js │ │ │ ├── bs-pagination.js │ │ │ └── index.js │ │ └── yarn.lock │ └── progress │ │ ├── .gitignore │ │ ├── package.json │ │ ├── src │ │ ├── bs-progress-bar.css.js │ │ ├── bs-progress-bar.js │ │ ├── bs-progress.css.js │ │ ├── bs-progress.js │ │ └── index.js │ │ └── yarn.lock ├── content │ ├── .gitignore │ ├── package.json │ ├── src │ │ ├── bs-content-code.css.js │ │ ├── bs-content-figures.css.js │ │ ├── bs-content-images.css.js │ │ ├── bs-content-reboot.css.js │ │ ├── bs-content-table.css.js │ │ ├── bs-content-typography.css.js │ │ └── index.js │ └── yarn.lock ├── layout │ ├── .gitignore │ ├── package.json │ ├── src │ │ ├── bs-column-lg.css.js │ │ ├── bs-column-md.css.js │ │ ├── bs-column-sm.css.js │ │ ├── bs-column-xl.css.js │ │ ├── bs-column-xs.css.js │ │ ├── bs-column.js │ │ ├── bs-container.css.js │ │ ├── bs-container.js │ │ ├── bs-row.css.js │ │ ├── bs-row.js │ │ └── index.js │ └── yarn.lock ├── theme │ ├── .gitignore │ ├── package.json │ ├── src │ │ ├── default-theme-css.js │ │ └── index.js │ └── yarn.lock └── utilities │ ├── .gitignore │ ├── package.json │ ├── src │ ├── bs-bg-colors.css.js │ ├── bs-border.css.js │ ├── bs-clearfix.css.js │ ├── bs-display.css.js │ ├── bs-embed.css.js │ ├── bs-flex-align-content.css.js │ ├── bs-flex-align-items.css.js │ ├── bs-flex-align-self.css.js │ ├── bs-flex-direction.css.js │ ├── bs-flex-display.css.js │ ├── bs-flex-justify.css.js │ ├── bs-flex-offset.css.js │ ├── bs-flex-order.css.js │ ├── bs-flex-wrap.css.js │ ├── bs-float.css.js │ ├── bs-position.css.js │ ├── bs-screenreader.css.js │ ├── bs-sizing.css.js │ ├── bs-spacing.css.js │ ├── bs-text-colors.css.js │ ├── bs-text.css.js │ ├── bs-vertical-align.css.js │ ├── bs-visibility.css.js │ └── index.js │ └── yarn.lock └── pre_publish_checklist.txt /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 4 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | 22 | [*.json] 23 | indent_size = 4 24 | 25 | [package.json] 26 | indent_size = 2 27 | 28 | [*.{html,js,md}] 29 | block_comment_start = /** 30 | block_comment = * 31 | block_comment_end = */ 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 nik-christou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /coverage 3 | /pkg 4 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /test 3 | /pkg 4 | /coverage 5 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const { createDefaultConfig } = require('@open-wc/testing-karma'); 3 | const merge = require('deepmerge'); 4 | 5 | module.exports = config => { 6 | config.set( 7 | merge(createDefaultConfig(config), { 8 | files: [ 9 | { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' } 10 | ], 11 | plugins: [ 12 | require.resolve('@open-wc/karma-esm'), // load plugin 13 | 'karma-*', // fallback: resolve any karma- plugins 14 | ], 15 | 16 | frameworks: ['esm'], 17 | 18 | esm: { 19 | nodeResolve: true, // if you are using 'bare module imports' you will need this option 20 | compatibility: 'all', // set compatibility mode to all 21 | }, 22 | }), 23 | ); 24 | return config; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/bs-accordion.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsAccordionCss = css` 5 | 6 | :host ::slotted(bs-card:first-of-type) { 7 | --bs-card-border-bottom: 0; 8 | --bs-card-border-bottom-right-radius: 0; 9 | --bs-card-border-bottom-left-radius: 0; 10 | } 11 | 12 | :host ::slotted(bs-card:not(:first-of-type):not(:last-of-type)) { 13 | --bs-card-border-bottom: 0; 14 | --bs-card-border-top-right-radius: 0; 15 | --bs-card-border-top-left-radius: 0; 16 | --bs-card-border-bottom-right-radius: 0; 17 | --bs-card-border-bottom-left-radius: 0; 18 | } 19 | 20 | :host ::slotted(bs-card:last-of-type) { 21 | --bs-card-border-top-left-radius: 0; 22 | --bs-card-border-top-right-radius: 0; 23 | } 24 | `; 25 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/bs-collapsable.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCollapsableCss = css` 5 | 6 | :host { 7 | display: block; 8 | height: auto; 9 | transition-property: var(--bs-collapsable-transition-property, height); 10 | transition-duration: var(--bs-collapsable-transition-duration, 0.35s); 11 | transition-timing-function: var(--bs-collapsable-transition-timing-function, ease); 12 | } 13 | 14 | :host([transitioning]) { 15 | position: relative; 16 | } 17 | 18 | @media screen and (prefers-reduced-motion: reduce) { 19 | :host { 20 | transition: none; 21 | } 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/bs-collapse-mixin.js: -------------------------------------------------------------------------------- 1 | 2 | const BsCollapseMixin = (superClass) => class extends superClass { 3 | 4 | firstUpdated() { 5 | this.addEventListener('bs-collapse-toggle', event => this._toggleCollapsable(event)); 6 | this.addEventListener('bs-collapse-multi-toggle', event => this._multiToggleCollapsable(event)); 7 | } 8 | 9 | _toggleCollapsable(event) { 10 | 11 | const target = event.detail.target; 12 | 13 | if(!target) { 14 | return; 15 | } 16 | 17 | const collapsableElement = this.shadowRoot.querySelector(`bs-collapsable#${target}`); 18 | 19 | if(collapsableElement) { 20 | collapsableElement.toggle(); 21 | } 22 | } 23 | 24 | _multiToggleCollapsable(event) { 25 | 26 | const multiTarget = event.detail.multiTarget; 27 | 28 | if(!multiTarget) { 29 | return; 30 | } 31 | 32 | const collapsableElements = this.shadowRoot.querySelectorAll(`bs-collapsable.${multiTarget}`); 33 | 34 | for (let index = 0; index < collapsableElements.length; index++) { 35 | 36 | const collapsableElement = collapsableElements[index]; 37 | 38 | if(collapsableElement) { 39 | collapsableElement.toggle(); 40 | } 41 | } 42 | } 43 | }; 44 | 45 | export { BsCollapseMixin }; -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/bs-collapse-multi-toggle.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | 4 | export class BsCollapseMultiToggle extends LitElement { 5 | 6 | // TODO: replace the multitarget attribute with a data-multi-target attribute !!! 7 | 8 | static get properties() { 9 | return { 10 | multiTarget: {type: String, reflect: true} 11 | }; 12 | } 13 | 14 | render() { 15 | return html` 16 | 17 | `; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.multiTarget = ''; 23 | } 24 | 25 | firstUpdated() { 26 | this.addEventListener('bs-button-click', event => this._handleMultiToggleCollapse(event)); 27 | } 28 | 29 | _handleMultiToggleCollapse() { 30 | 31 | if(!this.multiTarget) { 32 | return; 33 | } 34 | 35 | const multiToggleCollapseEvent = new CustomEvent('bs-collapse-multi-toggle', { 36 | bubbles: true, 37 | composed: true, 38 | detail: { 39 | multiTarget: this.multiTarget 40 | } 41 | }); 42 | 43 | this.dispatchEvent(multiToggleCollapseEvent); 44 | } 45 | }; 46 | 47 | if(!window.customElements.get("bs-collapse-multi-toggle")) 48 | window.customElements.define('bs-collapse-multi-toggle', BsCollapseMultiToggle); 49 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/bs-collapse-toggle.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | 4 | export class BsCollapseToggle extends LitElement { 5 | 6 | // TODO: replace the target attribute with data-target attribute !!! 7 | 8 | static get properties() { 9 | return { 10 | target: {type: String, reflect: true} 11 | }; 12 | } 13 | 14 | render() { 15 | return html` 16 | 17 | `; 18 | } 19 | 20 | constructor() { 21 | super(); 22 | this.target = ''; 23 | } 24 | 25 | firstUpdated() { 26 | this.addEventListener('bs-button-click', event => this._handleToggleCollapse(event)); 27 | } 28 | 29 | _handleToggleCollapse() { 30 | 31 | if(!this.target) { 32 | return; 33 | } 34 | 35 | const toggleCollapseEvent = new CustomEvent('bs-collapse-toggle', { 36 | bubbles: true, 37 | composed: true, 38 | detail: { 39 | target: this.target 40 | } 41 | }); 42 | 43 | this.dispatchEvent(toggleCollapseEvent); 44 | } 45 | }; 46 | 47 | if(!window.customElements.get("bs-collapse-toggle")) 48 | window.customElements.define('bs-collapse-toggle', BsCollapseToggle); 49 | -------------------------------------------------------------------------------- /packages/behaviour/collapse/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsAccordion } from './bs-accordion.js'; 3 | export { BsAccordionCss } from './bs-accordion.css.js'; 4 | export { BsCollapsable } from './bs-collapsable.js'; 5 | export { BsCollapsableCss } from './bs-collapsable.css.js'; 6 | export { BsCollapseMixin } from './bs-collapse-mixin.js'; 7 | export { BsCollapseToggle } from './bs-collapse-toggle.js'; 8 | export { BsCollapseMultiToggle } from './bs-collapse-multi-toggle.js'; 9 | -------------------------------------------------------------------------------- /packages/components/alert/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /coverage 3 | /pkg 4 | -------------------------------------------------------------------------------- /packages/components/alert/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/alert/docs/additional_content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/alert/docs/additional_content.png -------------------------------------------------------------------------------- /packages/components/alert/docs/dismissable_alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/alert/docs/dismissable_alert.png -------------------------------------------------------------------------------- /packages/components/alert/docs/plain_alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/alert/docs/plain_alert.png -------------------------------------------------------------------------------- /packages/components/alert/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const coverage = process.argv.find(arg => arg.includes('--coverage')); 3 | 4 | module.exports = config => { 5 | config.set({ 6 | basePath: "", 7 | autoWatch: false, 8 | colors: true, 9 | logLevel: config.LOG_INFO, 10 | singleRun: true, 11 | concurrency: Infinity, 12 | 13 | frameworks: ['esm', 'mocha'], 14 | 15 | plugins: [ 16 | 'karma-mocha', 17 | '@open-wc/karma-esm', 18 | 'karma-chrome-launcher', 19 | 'karma-mocha-reporter', 20 | 'karma-coverage-istanbul-reporter' 21 | ], 22 | 23 | browsers: ['ChromeHeadlessNoSandbox'], 24 | 25 | customLaunchers: { 26 | ChromeHeadlessNoSandbox: { 27 | base: 'ChromeHeadless', 28 | flags: ['--no-sandbox', '--disable-setuid-sandbox'], 29 | } 30 | }, 31 | 32 | esm: { 33 | coverage, 34 | nodeResolve: true 35 | }, 36 | 37 | files: [ 38 | require.resolve('axe-core/axe.min.js'), 39 | { pattern: "test/**/*.test.js", type: "module", included: true }, 40 | { pattern: "src/**/*.js", type: "module", included: false }, 41 | ], 42 | 43 | reporters: coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'], 44 | 45 | restartOnFileChange: true, 46 | 47 | mochaReporter: { 48 | showDiff: true, 49 | }, 50 | 51 | client: { 52 | mocha: { 53 | reporter: 'html' 54 | } 55 | } 56 | 57 | }); 58 | }; 59 | -------------------------------------------------------------------------------- /packages/components/alert/src/bs-alert-dismiss.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsAlertDismissCss = css` 4 | .close { 5 | border: 0; 6 | float: right; 7 | font-size: 1.5rem; 8 | font-weight: 700; 9 | line-height: 1; 10 | color: #000; 11 | text-shadow: 0 1px 0 #fff; 12 | opacity: 0.5; 13 | background-color: transparent; 14 | -webkit-appearance: none; 15 | top: 0; 16 | right: 0; 17 | color: inherit; 18 | position: absolute; 19 | padding: 0.75rem 1.25rem; 20 | } 21 | 22 | .close:not(:disabled):not(.disabled):hover, 23 | .close:not(:disabled):not(.disabled):focus { 24 | color: #000; 25 | text-decoration: none; 26 | opacity: 0.75; 27 | cursor: pointer; 28 | } 29 | `; 30 | -------------------------------------------------------------------------------- /packages/components/alert/src/bs-alert-dismiss.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit-element"; 2 | import { BsAlertDismissCss } from "./bs-alert-dismiss.css.js"; 3 | 4 | /** 5 | * Alert dismiss component 6 | * 7 | * @element bs-alert-dismiss 8 | * 9 | * @fires close.button.click - Fired when the button is clicked 10 | */ 11 | export class BsAlertDismiss extends LitElement { 12 | static get styles() { 13 | return BsAlertDismissCss; 14 | } 15 | 16 | render() { 17 | return html` 18 | 21 | `; 22 | } 23 | 24 | firstUpdated() { 25 | const buttonElement = this.shadowRoot.querySelector("button"); 26 | buttonElement.addEventListener("click", _ => this._handleClick()); 27 | } 28 | 29 | _handleClick() { 30 | const closeButtonClickEvent = new CustomEvent("close.button.click", { 31 | bubbles: true, 32 | composed: true 33 | }); 34 | 35 | this.dispatchEvent(closeButtonClickEvent); 36 | } 37 | } 38 | 39 | if (!window.customElements.get("bs-alert-dismiss")) 40 | window.customElements.define("bs-alert-dismiss", BsAlertDismiss); 41 | -------------------------------------------------------------------------------- /packages/components/alert/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsAlert } from "./bs-alert.js"; 2 | export { BsAlertCss } from "./bs-alert.css.js"; 3 | export { BsAlertHr } from "./bs-alert-hr.js"; 4 | export { BsAlertHrCss } from "./bs-alert-hr.css.js"; 5 | export { BsAlertLink } from "./bs-alert-link.js"; 6 | export { BsAlertLinkCss } from "./bs-alert-link.css.js"; 7 | export { BsAlertDismiss } from "./bs-alert-dismiss.js"; 8 | export { BsAlertDismissCss } from "./bs-alert-dismiss.css.js"; 9 | -------------------------------------------------------------------------------- /packages/components/alert/test/bs-alert-dismiss.test.js: -------------------------------------------------------------------------------- 1 | import sinon from 'sinon/pkg/sinon-esm.js'; 2 | import { html, fixture, aTimeout } from '@open-wc/testing'; 3 | 4 | import '../src/bs-alert-dismiss.js'; 5 | 6 | describe('bs-alert-dismiss', () => { 7 | 8 | it('button_clickOccured_eventIsFired', async () => { 9 | 10 | // given 11 | const alertDismissTemplate = html` 12 | 13 | `; 14 | 15 | const bsAlertDismiss = await fixture(alertDismissTemplate); 16 | const buttonElement = bsAlertDismiss.shadowRoot.querySelector('button'); 17 | 18 | const closeButtonClickSpy = sinon.spy(); 19 | bsAlertDismiss.addEventListener('close.button.click', closeButtonClickSpy); 20 | 21 | // when 22 | buttonElement.click(); 23 | await aTimeout(500); 24 | 25 | // then 26 | sinon.assert.calledOnce(closeButtonClickSpy); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /packages/components/alert/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowJs": true, 8 | "checkJs": true, 9 | "declaration": true, 10 | "noEmit": false, 11 | "emitDeclarationOnly": true, 12 | "declarationDir": "./types", 13 | "strict": false, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": true, 16 | "noUnusedLocals": true 17 | }, 18 | "include": ["src/**/*.js"], 19 | "exclude": ["test/**/*.js"] 20 | } -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert-dismiss.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsAlertDismissCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert-dismiss.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Alert dismiss component 3 | * 4 | * @element bs-alert-dismiss 5 | * 6 | * @fires close.button.click - Fired when the button is clicked 7 | */ 8 | export class BsAlertDismiss extends LitElement { 9 | static get styles(): import("lit-element").CSSResult; 10 | render(): import("lit-element").TemplateResult; 11 | firstUpdated(): void; 12 | _handleClick(): void; 13 | } 14 | import { LitElement } from "lit-element"; 15 | 16 | declare global { 17 | interface HTMLElementTagNameMap { 18 | "bs-alert-dismiss": BsAlertDismiss 19 | } 20 | } -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert-hr.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsAlertHrCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert-hr.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Alert hr component 3 | * 4 | * @element bs-alert-hr 5 | * 6 | * @attribute {primary|secondary|success|info|warning|danger|light|dark} context - 7 | * Indicates the styling context to use 8 | * 9 | * @cssproperty --alert-hr-bd-top-color - The hr top border color. default: rgba(0, 0, 0, 0.1) 10 | * @cssproperty --alert-hr-primary-bd-top-color - The hr primary context top border color. default: #9fcdff 11 | * @cssproperty --alert-hr-secondary-bd-top-color - The hr secondary context top border color. default: #c8cbcf 12 | * @cssproperty --alert-hr-success-bd-top-color - The hr success context top border color. default: #b1dfbb 13 | * @cssproperty --alert-hr-info-bd-top-color - The hr info context top border color. default: #abdde5 14 | * @cssproperty --alert-hr-warning-bd-top-color - The hr warning context top border color. default: #ffe8a1 15 | * @cssproperty --alert-hr-danger-bd-top-color - The hr danger context top border color. default: #f1b0b7 16 | * @cssproperty --alert-hr-light-bd-top-color - The hr light context top border color. default: #ececf6 17 | * @cssproperty --alert-hr-dark-bd-top-color - The hr dark context top border color. default: #b9bbbe 18 | */ 19 | export class BsAlertHr extends LitElement { 20 | static get styles(): import("lit-element").CSSResult[]; 21 | render(): import("lit-element").TemplateResult; 22 | } 23 | import { LitElement } from "lit-element"; 24 | 25 | declare global { 26 | interface HTMLElementTagNameMap { 27 | "bs-alert-hr": BsAlertHr 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert-link.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsAlertLinkCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/alert/types/bs-alert.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsAlertCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/alert/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { BsAlert } from "./bs-alert.js"; 2 | export { BsAlertCss } from "./bs-alert.css.js"; 3 | export { BsAlertHr } from "./bs-alert-hr.js"; 4 | export { BsAlertHrCss } from "./bs-alert-hr.css.js"; 5 | export { BsAlertLink } from "./bs-alert-link.js"; 6 | export { BsAlertLinkCss } from "./bs-alert-link.css.js"; 7 | export { BsAlertDismiss } from "./bs-alert-dismiss.js"; 8 | export { BsAlertDismissCss } from "./bs-alert-dismiss.css.js"; 9 | -------------------------------------------------------------------------------- /packages/components/badge/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/badge/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/badge/docs/badge_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/badge/docs/badge_button.png -------------------------------------------------------------------------------- /packages/components/badge/docs/badge_context.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/badge/docs/badge_context.png -------------------------------------------------------------------------------- /packages/components/badge/docs/badge_context_pills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/badge/docs/badge_context_pills.png -------------------------------------------------------------------------------- /packages/components/badge/docs/badge_headings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/badge/docs/badge_headings.png -------------------------------------------------------------------------------- /packages/components/badge/docs/badge_links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/badge/docs/badge_links.png -------------------------------------------------------------------------------- /packages/components/badge/src/bs-badge-reboot.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsBadgeRebootCss = css` 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | :host, 11 | :host::before, 12 | :host::after { 13 | box-sizing: border-box; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/badge/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsBadge } from "./bs-badge.js"; 2 | export { BsBadgeCss } from "./bs-badge.css.js"; 3 | export { BsBadgeLink } from "./bs-badge-link.js"; 4 | export { BsBadgeLinkCss } from "./bs-badge-link.css.js"; 5 | -------------------------------------------------------------------------------- /packages/components/badge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowJs": true, 8 | "checkJs": true, 9 | "declaration": true, 10 | "noEmit": false, 11 | "emitDeclarationOnly": true, 12 | "declarationDir": "./types", 13 | "strict": false, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": true, 16 | "noUnusedLocals": true 17 | }, 18 | "include": ["src/**/*.js"], 19 | "exclude": ["test/**/*.js"] 20 | } -------------------------------------------------------------------------------- /packages/components/badge/types/bs-badge-link.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBadgeLinkCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/badge/types/bs-badge-reboot.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBadgeRebootCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/badge/types/bs-badge.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBadgeCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/badge/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { BsBadge } from "./bs-badge.js"; 2 | export { BsBadgeCss } from "./bs-badge.css.js"; 3 | export { BsBadgeLink } from "./bs-badge-link.js"; 4 | export { BsBadgeLinkCss } from "./bs-badge-link.css.js"; 5 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/docs/breadcrumb_custom_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/breadcrumb/docs/breadcrumb_custom_divider.png -------------------------------------------------------------------------------- /packages/components/breadcrumb/docs/breadcrumb_default_divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/breadcrumb/docs/breadcrumb_default_divider.png -------------------------------------------------------------------------------- /packages/components/breadcrumb/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const coverage = process.argv.find(arg => arg.includes('--coverage')); 3 | 4 | module.exports = config => { 5 | config.set({ 6 | basePath: "", 7 | autoWatch: false, 8 | colors: true, 9 | logLevel: config.LOG_INFO, 10 | singleRun: true, 11 | concurrency: Infinity, 12 | 13 | frameworks: ['esm', 'mocha'], 14 | 15 | plugins: [ 16 | 'karma-mocha', 17 | '@open-wc/karma-esm', 18 | 'karma-chrome-launcher', 19 | 'karma-mocha-reporter', 20 | 'karma-coverage-istanbul-reporter' 21 | ], 22 | 23 | browsers: ['ChromeHeadlessNoSandbox'], 24 | 25 | customLaunchers: { 26 | ChromeHeadlessNoSandbox: { 27 | base: 'ChromeHeadless', 28 | flags: ['--no-sandbox', '--disable-setuid-sandbox'], 29 | } 30 | }, 31 | 32 | esm: { 33 | coverage, 34 | nodeResolve: true 35 | }, 36 | 37 | files: [ 38 | require.resolve('axe-core/axe.min.js'), 39 | { pattern: "test/**/*.test.js", type: "module", included: true }, 40 | { pattern: "src/**/*.js", type: "module", included: false }, 41 | ], 42 | 43 | reporters: coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'], 44 | 45 | restartOnFileChange: true, 46 | 47 | mochaReporter: { 48 | showDiff: true, 49 | }, 50 | 51 | client: { 52 | mocha: { 53 | reporter: 'html' 54 | } 55 | } 56 | 57 | }); 58 | }; 59 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/src/bs-breadcrumb-reboot.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsBreadcrumbRebootCss = css` 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | :host, 11 | :host::before, 12 | :host::after { 13 | box-sizing: border-box; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/src/bs-breadcrumb.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsBreadcrumbCss = css` 4 | :host { 5 | display: var(--breadcrumb-display, flex); 6 | flex-wrap: var(--breadcrumb-flex-wrap, wrap); 7 | padding-top: var(--breadcrumb-padding-top, 0.75rem); 8 | padding-bottom: var(--breadcrumb-padding-bottom, 0.75rem); 9 | padding-right: var(--breadcrumb-padding-right, 1rem); 10 | padding-left: var(--breadcrumb-padding-left, 1rem); 11 | margin-bottom: var(--breadcrumb-margin-bottom, 1rem); 12 | background-color: var(--breadcrumb-bg-color, #e9ecef); 13 | border-radius: var(--breadcrumb-border-radius, 0.25rem); 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsBreadcrumb } from "./bs-breadcrumb.js"; 2 | export { BsBreadcrumbCss } from "./bs-breadcrumb.css.js"; 3 | export { BsBreadcrumbItem } from "./bs-breadcrumb-item.js"; 4 | export { BsBreadcrumbItemCss } from "./bs-breadcrumb-item.css.js"; 5 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/test/bs-breadcrumb-item.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture } from '@open-wc/testing'; 2 | 3 | import '../src/bs-breadcrumb.js'; 4 | 5 | describe('bs-breadcrumb-item', () => { 6 | 7 | it('bs-breadcrum-item_notActive_renderedAsLink', async () => { 8 | 9 | // given 10 | const title = 'Home'; 11 | const href = '/home'; 12 | 13 | const breadcrumbItemTemplate = html` 14 | 15 | `; 16 | 17 | // when 18 | const bsBreadcrumbItem = await fixture(breadcrumbItemTemplate); 19 | 20 | // then 21 | chai.assert.shadowDom.equal(bsBreadcrumbItem, `${title}`); 22 | }); 23 | 24 | it('bs-breadcrum-item_isActive_renderedAsText', async () => { 25 | 26 | // given 27 | const title = 'Home'; 28 | 29 | const breadcrumbItemTemplate = html` 30 | 31 | `; 32 | 33 | // when 34 | const bsBreadcrumbItem = await fixture(breadcrumbItemTemplate); 35 | 36 | // then 37 | chai.assert.shadowDom.equal(bsBreadcrumbItem, `${title}`); 38 | }); 39 | }); -------------------------------------------------------------------------------- /packages/components/breadcrumb/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowJs": true, 8 | "checkJs": true, 9 | "declaration": true, 10 | "noEmit": false, 11 | "emitDeclarationOnly": true, 12 | "declarationDir": "./types", 13 | "strict": false, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": true, 16 | "noUnusedLocals": true 17 | }, 18 | "include": ["src/**/*.js"], 19 | "exclude": ["test/**/*.js"] 20 | } -------------------------------------------------------------------------------- /packages/components/breadcrumb/types/bs-breadcrumb-item.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBreadcrumbItemCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/types/bs-breadcrumb-reboot.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBreadcrumbRebootCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/types/bs-breadcrumb.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsBreadcrumbCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumb/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { BsBreadcrumb } from "./bs-breadcrumb.js"; 2 | export { BsBreadcrumbCss } from "./bs-breadcrumb.css.js"; 3 | export { BsBreadcrumbItem } from "./bs-breadcrumb-item.js"; 4 | export { BsBreadcrumbItemCss } from "./bs-breadcrumb-item.css.js"; 5 | -------------------------------------------------------------------------------- /packages/components/button-group/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/button-group/custom-elements.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "experimental", 3 | "tags": [ 4 | { 5 | "name": "bs-button-group", 6 | "attributes": [ 7 | { 8 | "name": "direction", 9 | "type": "string", 10 | "default": "\"horizontal\"" 11 | } 12 | ], 13 | "properties": [ 14 | { 15 | "name": "direction", 16 | "attribute": "direction", 17 | "type": "string", 18 | "default": "\"horizontal\"" 19 | } 20 | ] 21 | }, 22 | { 23 | "name": "bs-button-toolbar" 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /packages/components/button-group/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/components/button-group/docs/button_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/button_group.png -------------------------------------------------------------------------------- /packages/components/button-group/docs/button_group_dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/button_group_dropdown.png -------------------------------------------------------------------------------- /packages/components/button-group/docs/button_group_sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/button_group_sizes.png -------------------------------------------------------------------------------- /packages/components/button-group/docs/button_group_vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/button_group_vertical.png -------------------------------------------------------------------------------- /packages/components/button-group/docs/toolbar_button_group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/toolbar_button_group.png -------------------------------------------------------------------------------- /packages/components/button-group/docs/toolbar_with_input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button-group/docs/toolbar_with_input.png -------------------------------------------------------------------------------- /packages/components/button-group/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const coverage = process.argv.find(arg => arg.includes('--coverage')); 3 | 4 | module.exports = config => { 5 | config.set({ 6 | basePath: "", 7 | autoWatch: false, 8 | colors: true, 9 | logLevel: config.LOG_INFO, 10 | singleRun: true, 11 | concurrency: Infinity, 12 | 13 | frameworks: ['esm', 'mocha'], 14 | 15 | plugins: [ 16 | 'karma-mocha', 17 | '@open-wc/karma-esm', 18 | 'karma-chrome-launcher', 19 | 'karma-mocha-reporter', 20 | 'karma-coverage-istanbul-reporter' 21 | ], 22 | 23 | browsers: ['ChromeHeadlessNoSandbox'], 24 | 25 | customLaunchers: { 26 | ChromeHeadlessNoSandbox: { 27 | base: 'ChromeHeadless', 28 | flags: ['--no-sandbox', '--disable-setuid-sandbox'], 29 | } 30 | }, 31 | 32 | esm: { 33 | coverage, 34 | nodeResolve: true 35 | }, 36 | 37 | files: [ 38 | require.resolve('axe-core/axe.min.js'), 39 | { pattern: "test/**/*.test.js", type: "module", included: true }, 40 | { pattern: "src/**/*.js", type: "module", included: false }, 41 | ], 42 | 43 | reporters: coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'], 44 | 45 | restartOnFileChange: true, 46 | 47 | mochaReporter: { 48 | showDiff: true, 49 | }, 50 | 51 | client: { 52 | mocha: { 53 | reporter: 'html' 54 | } 55 | } 56 | 57 | }); 58 | }; 59 | -------------------------------------------------------------------------------- /packages/components/button-group/src/bs-button-group-reboot.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsButtonGroupRebootCss = css` 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | :host, 11 | :host::before, 12 | :host::after { 13 | box-sizing: border-box; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/button-group/src/bs-button-group.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsButtonGroupCss = css` 4 | :host { 5 | position: var(--btn-group-position, relative); 6 | display: var(--btn-group-display, inline-flex); 7 | vertical-align: var(--btn-group-vertical-align, middle); 8 | --btn-position: var(--btn-group-btn-position, relative); 9 | --btn-flex: var(--btn-group-btn-flex, 0 1 auto); 10 | --btn-z-index-hover: var(--btn-group-btn-z-index-hover, 1); 11 | --btn-z-index-active: var(--btn-group-btn-z-index-active, 1); 12 | } 13 | `; 14 | -------------------------------------------------------------------------------- /packages/components/button-group/src/bs-button-toolbar.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsButtonToolbarCss = css` 4 | :host { 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: flex-start; 8 | --bs-input-group-width: auto; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /packages/components/button-group/src/bs-button-toolbar.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit-element"; 2 | import { BsButtonToolbarCss } from "./bs-button-toolbar.css.js"; 3 | import { BsButtonGroupRebootCss } from "./bs-button-group-reboot.css.js"; 4 | 5 | export class BsButtonToolbar extends LitElement { 6 | static get styles() { 7 | return [BsButtonGroupRebootCss, BsButtonToolbarCss]; 8 | } 9 | 10 | render() { 11 | return html` 12 | 13 | `; 14 | } 15 | 16 | /** 17 | * The aria role is added to the host element 18 | * 19 | * @param {Map} _updatedProperties the Map with updated properties 20 | * @return {void} 21 | */ 22 | firstUpdated(_updatedProperties) { 23 | super.firstUpdated(_updatedProperties); 24 | this._addAriaRole(); 25 | } 26 | 27 | /** 28 | * Adds an arial role attribute with value of 'toolbar' 29 | * 30 | * @return {void} 31 | */ 32 | _addAriaRole() { 33 | this.setAttribute("role", "toolbar"); 34 | } 35 | } 36 | 37 | if (!window.customElements.get("bs-button-toolbar")) 38 | window.customElements.define("bs-button-toolbar", BsButtonToolbar); 39 | -------------------------------------------------------------------------------- /packages/components/button-group/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsButtonGroup } from "./bs-button-group.js"; 2 | export { BsButtonToolbar } from "./bs-button-toolbar.js"; 3 | export { BsButtonToolbarCss } from "./bs-button-toolbar.css.js"; 4 | export { BsButtonGroupSizeCss } from "./bs-button-group-size.css.js"; 5 | export { BsButtonGroupRebootCss } from "./bs-button-group-reboot.css.js"; 6 | export { BsButtonGroupDirectionCss } from "./bs-button-group-direction.css.js"; 7 | -------------------------------------------------------------------------------- /packages/components/button-group/test/bs-button-group.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture } from '@open-wc/testing'; 2 | 3 | import '../src/bs-button-group.js'; 4 | 5 | describe('', () => { 6 | 7 | it('bs-button-group_isAccessibleByDefault', async () => { 8 | 9 | // given 10 | const buttonGroupTemplate = html` 11 | 12 | `; 13 | 14 | // when 15 | const bsButtonGroup = await fixture(buttonGroupTemplate); 16 | 17 | // then 18 | chai.assert.isAccessible(bsButtonGroup); 19 | }); 20 | 21 | it('bs-button-group_hasCorrectAriaRole', async () => { 22 | 23 | // given 24 | const buttonGroupTemplate = html` 25 | 26 | `; 27 | 28 | // when 29 | const bsButtonGroup = await fixture(buttonGroupTemplate); 30 | 31 | // then 32 | chai.expect(bsButtonGroup).to.have.attribute('role', 'group'); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /packages/components/button-group/test/bs-button-toolbar.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture } from '@open-wc/testing'; 2 | 3 | import '../src/bs-button-toolbar.js'; 4 | 5 | describe('', () => { 6 | 7 | it('bs-button-toolbar_isAccessibleByDefault', async () => { 8 | 9 | // given 10 | const buttonToolbarTemplate = html` 11 | 12 | `; 13 | 14 | // when 15 | const bsButtonToolbar = await fixture(buttonToolbarTemplate); 16 | 17 | // then 18 | chai.assert.isAccessible(bsButtonToolbar); 19 | }); 20 | 21 | it('bs-button-toolbar_hasCorrectAriaRole', async () => { 22 | 23 | // given 24 | const buttonToolbarTemplate = html` 25 | 26 | `; 27 | 28 | // when 29 | const bsButtonToolbar = await fixture(buttonToolbarTemplate); 30 | 31 | // then 32 | chai.expect(bsButtonToolbar).to.have.attribute('role', 'toolbar'); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /packages/components/button-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowJs": true, 8 | "checkJs": true, 9 | "declaration": true, 10 | "noEmit": false, 11 | "emitDeclarationOnly": true, 12 | "declarationDir": "./types", 13 | "strict": false, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": true, 16 | "noUnusedLocals": true 17 | }, 18 | "include": ["src/**/*.js"], 19 | "exclude": ["test/**/*.js"] 20 | } -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-group-direction.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonGroupDirectionCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-group-reboot.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonGroupRebootCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-group-size.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonGroupSizeCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-group.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonGroupCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-group.d.ts: -------------------------------------------------------------------------------- 1 | export class BsButtonGroup extends LitElement { 2 | static get properties(): { 3 | direction: { 4 | type: StringConstructor; 5 | reflect: boolean; 6 | }; 7 | }; 8 | static get styles(): import("lit-element").CSSResult[]; 9 | render(): import("lit-element").TemplateResult; 10 | direction: string; 11 | /** 12 | * The aria role is added to the host element 13 | * 14 | * @param {Map} _updatedProperties the Map with updated properties 15 | * @return {void} 16 | */ 17 | firstUpdated(_updatedProperties: Map): void; 18 | /** 19 | * Adds an arial role attribute with value of 'group' 20 | * 21 | * @return {void} 22 | */ 23 | _addAriaRole(): void; 24 | } 25 | import { LitElement } from "lit-element"; 26 | 27 | declare global { 28 | interface HTMLElementTagNameMap { 29 | "bs-button-group": BsButtonGroup 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-toolbar.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonToolbarCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button-group/types/bs-button-toolbar.d.ts: -------------------------------------------------------------------------------- 1 | export class BsButtonToolbar extends LitElement { 2 | static get styles(): import("lit-element").CSSResult[]; 3 | render(): import("lit-element").TemplateResult; 4 | /** 5 | * The aria role is added to the host element 6 | * 7 | * @param {Map} _updatedProperties the Map with updated properties 8 | * @return {void} 9 | */ 10 | firstUpdated(_updatedProperties: Map): void; 11 | /** 12 | * Adds an arial role attribute with value of 'toolbar' 13 | * 14 | * @return {void} 15 | */ 16 | _addAriaRole(): void; 17 | } 18 | import { LitElement } from "lit-element"; 19 | 20 | declare global { 21 | interface HTMLElementTagNameMap { 22 | "bs-button-toolbar": BsButtonToolbar 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/components/button-group/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { BsButtonGroup } from "./bs-button-group.js"; 2 | export { BsButtonToolbar } from "./bs-button-toolbar.js"; 3 | export { BsButtonToolbarCss } from "./bs-button-toolbar.css.js"; 4 | export { BsButtonGroupSizeCss } from "./bs-button-group-size.css.js"; 5 | export { BsButtonGroupRebootCss } from "./bs-button-group-reboot.css.js"; 6 | export { BsButtonGroupDirectionCss } from "./bs-button-group-direction.css.js"; 7 | -------------------------------------------------------------------------------- /packages/components/button/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/button/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/components/button/docs/button_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_active.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_blocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_blocks.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_contexts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_contexts.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_disabled.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_outlines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_outlines.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_sizes.png -------------------------------------------------------------------------------- /packages/components/button/docs/button_variations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nik-christou/lit-element-bootstrap/aea06a55c794109b17aaff2b66a5e69e52a5d715/packages/components/button/docs/button_variations.png -------------------------------------------------------------------------------- /packages/components/button/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const coverage = process.argv.find(arg => arg.includes('--coverage')); 3 | 4 | module.exports = config => { 5 | config.set({ 6 | basePath: "", 7 | autoWatch: false, 8 | colors: true, 9 | logLevel: config.LOG_INFO, 10 | singleRun: true, 11 | concurrency: Infinity, 12 | 13 | frameworks: ['esm', 'mocha'], 14 | 15 | plugins: [ 16 | 'karma-mocha', 17 | '@open-wc/karma-esm', 18 | 'karma-chrome-launcher', 19 | 'karma-mocha-reporter', 20 | 'karma-coverage-istanbul-reporter' 21 | ], 22 | 23 | browsers: ['ChromeHeadlessNoSandbox'], 24 | 25 | customLaunchers: { 26 | ChromeHeadlessNoSandbox: { 27 | base: 'ChromeHeadless', 28 | flags: ['--no-sandbox', '--disable-setuid-sandbox'], 29 | } 30 | }, 31 | 32 | esm: { 33 | coverage, 34 | nodeResolve: true 35 | }, 36 | 37 | files: [ 38 | require.resolve('axe-core/axe.min.js'), 39 | { pattern: "test/**/*.test.js", type: "module", included: true }, 40 | { pattern: "src/**/*.js", type: "module", included: false }, 41 | ], 42 | 43 | reporters: coverage ? ['mocha', 'coverage-istanbul'] : ['mocha'], 44 | 45 | restartOnFileChange: true, 46 | 47 | mochaReporter: { 48 | showDiff: true, 49 | }, 50 | 51 | client: { 52 | mocha: { 53 | reporter: 'html' 54 | } 55 | } 56 | 57 | }); 58 | }; 59 | -------------------------------------------------------------------------------- /packages/components/button/src/css/bs-button-block.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsButtonBlockCss = css` 4 | bs-button[block], 5 | bs-button-link[block], 6 | bs-button-input[block] { 7 | display: block; 8 | --btn-width: 100%; 9 | } 10 | 11 | bs-button[block]:not(:first-child), 12 | bs-button-link[block]:not(:first-child), 13 | bs-button-input[block]:not(:first-child) { 14 | margin-top: 0.5rem; 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /packages/components/button/src/css/bs-button-link.css.js: -------------------------------------------------------------------------------- 1 | import { css } from "lit-element"; 2 | 3 | export const BsButtonLinkCss = css` 4 | bs-button[context="link"], 5 | bs-button-link[context="link"], 6 | bs-button-input[context="link"] { 7 | --btn-text-color: var(--btn-link-text-color, #007bff); 8 | --btn-bg-color: var(--btn-link-bg-color, transparent); 9 | --btn-font-weight: var(--btn-link-font-weight, 400); 10 | 11 | --btn-text-color-hover: var(--btn-link-text-color-hover, #0056b3); 12 | --btn-bg-color-hover: var(--btn-link-bg-color-hover, transparent); 13 | --btn-bd-color-hover: var(--btn-link-bd-color-hover, transparent); 14 | --btn-text-decoration-hover: var( 15 | --btn-link-text-decoration-hover, 16 | underline 17 | ); 18 | 19 | --btn-text-color-disabled: var(--btn-link-text-color-disabled, #6c757d); 20 | --btn-pointer-events-disabled: var( 21 | --btn-link-pointer-events-disabled, 22 | none 23 | ); 24 | 25 | --btn-text-decoration-focus: var( 26 | --btn-link-text-decoration-focus, 27 | underline 28 | ); 29 | --btn-box-shadow-focus: var(--btn-link-box-shadow-focus, none); 30 | --btn-bd-color-focus: var(--btn--link-bd-color-focus, transparent); 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/button/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsButton } from "./bs-button.js"; 2 | export { BsButtonLink } from "./bs-button-link.js"; 3 | export { BsButtonInput } from "./bs-button-input.js"; 4 | export { BsButtonMixin } from "./bs-button-mixin.js"; 5 | export { BsButtonBlockCss } from "./css/bs-button-block.css.js"; 6 | export { BsButtonCommonCss } from "./css/bs-button-common.css.js"; 7 | export { BsButtonDangerCss } from "./css/bs-button-danger.css.js"; 8 | export { BsButtonDarkCss } from "./css/bs-button-dark.css.js"; 9 | export { BsButtonInfoCss } from "./css/bs-button-info.css.js"; 10 | export { BsButtonSizeCss } from "./css/bs-button-size.css.js"; 11 | export { BsButtonLightCss } from "./css/bs-button-light.css.js"; 12 | export { BsButtonLinkCss } from "./css/bs-button-link.css.js"; 13 | export { BsButtonPrimaryCss } from "./css/bs-button-primary.css.js"; 14 | export { BsButtonSecondaryCss } from "./css/bs-button-secondary.css.js"; 15 | export { BsButtonSuccessCss } from "./css/bs-button-success.css.js"; 16 | export { BsButtonWarningCss } from "./css/bs-button-warning.css.js"; 17 | -------------------------------------------------------------------------------- /packages/components/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "lib": ["es2017", "dom"], 7 | "allowJs": true, 8 | "checkJs": true, 9 | "declaration": true, 10 | "noEmit": false, 11 | "emitDeclarationOnly": true, 12 | "declarationDir": "./types", 13 | "strict": false, 14 | "noImplicitAny": false, 15 | "noImplicitReturns": true, 16 | "noUnusedLocals": true 17 | }, 18 | "include": ["src/**/*.js"], 19 | "exclude": ["test/**/*.js"] 20 | } -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-block.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonBlockCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-common.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonCommonCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-danger.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonDangerCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-dark.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonDarkCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-info.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonInfoCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-light.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonLightCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-link.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonLinkCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-primary.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonPrimaryCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-reboot.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonRebootCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-secondary.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonSecondaryCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-size.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonSizeCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-success.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonSuccessCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/css/bs-button-warning.css.d.ts: -------------------------------------------------------------------------------- 1 | export const BsButtonWarningCss: import("lit-element").CSSResult; 2 | -------------------------------------------------------------------------------- /packages/components/button/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export { BsButton } from "./bs-button.js"; 2 | export { BsButtonLink } from "./bs-button-link.js"; 3 | export { BsButtonInput } from "./bs-button-input.js"; 4 | export { BsButtonMixin } from "./bs-button-mixin.js"; 5 | export { BsButtonBlockCss } from "./css/bs-button-block.css.js"; 6 | export { BsButtonCommonCss } from "./css/bs-button-common.css.js"; 7 | export { BsButtonDangerCss } from "./css/bs-button-danger.css.js"; 8 | export { BsButtonDarkCss } from "./css/bs-button-dark.css.js"; 9 | export { BsButtonInfoCss } from "./css/bs-button-info.css.js"; 10 | export { BsButtonSizeCss } from "./css/bs-button-size.css.js"; 11 | export { BsButtonLightCss } from "./css/bs-button-light.css.js"; 12 | export { BsButtonLinkCss } from "./css/bs-button-link.css.js"; 13 | export { BsButtonPrimaryCss } from "./css/bs-button-primary.css.js"; 14 | export { BsButtonSecondaryCss } from "./css/bs-button-secondary.css.js"; 15 | export { BsButtonSuccessCss } from "./css/bs-button-success.css.js"; 16 | export { BsButtonWarningCss } from "./css/bs-button-warning.css.js"; 17 | -------------------------------------------------------------------------------- /packages/components/card/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/card", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 card component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "@lit-element-bootstrap/utilities": "^1.0.0-alpha.4", 21 | "lit-element": "^2.2.1" 22 | }, 23 | "devDependencies": { 24 | "@pika/pack": "^0.5.0", 25 | "@pika/plugin-build-web": "^0.6.1", 26 | "@pika/plugin-bundle-web": "^0.6.1", 27 | "@pika/plugin-standard-pkg": "^0.6.1" 28 | }, 29 | "@pika/pack": { 30 | "pipeline": [ 31 | [ 32 | "@pika/plugin-standard-pkg" 33 | ], 34 | [ 35 | "@pika/plugin-build-web" 36 | ], 37 | [ 38 | "@pika/plugin-bundle-web", 39 | { 40 | "entrypoint": "unpkg" 41 | } 42 | ] 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-body.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardBodyCss = css` 5 | 6 | :host { 7 | flex: 1 1 auto; 8 | padding: 1.25rem; 9 | display: block; 10 | } 11 | 12 | :host > ::slotted([name="card-text"]:last-child) { 13 | margin-bottom: 0; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-columns.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardColumnsCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | :host ::slotted(bs-card) { 11 | margin-bottom: 0.75rem; 12 | } 13 | 14 | @media (min-width: 576px) { 15 | 16 | :host { 17 | -webkit-column-count: var(--card-column-count, 3); 18 | -moz-column-count: var(--card-column-count, 3); 19 | column-count: var(--card-column-count, 3); 20 | -webkit-column-gap: var(--card-column-gap, 1.25rem); 21 | -moz-column-gap: var(--card-column-gap, 1.25rem); 22 | column-gap: var(--card-column-gap, 1.25rem); 23 | orphans: 1; 24 | widows: 1; 25 | } 26 | 27 | :host ::slotted(bs-card) { 28 | display: inline-block; 29 | width: 100%; 30 | } 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-columns.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardColumnsCss } from './bs-card-columns.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardColumns extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardColumnsCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-columns")) 23 | window.customElements.define('bs-card-columns', BsCardColumns); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-deck.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardDeckCss = css` 5 | 6 | :host { 7 | display: flex; 8 | flex-direction: column; 9 | } 10 | 11 | :host ::slotted(bs-card) { 12 | margin-bottom: 15px; 13 | } 14 | 15 | @media (min-width: 576px) { 16 | 17 | :host { 18 | flex-flow: row wrap; 19 | margin-right: -15px; 20 | margin-left: -15px; 21 | } 22 | 23 | :host ::slotted(bs-card) { 24 | display: flex; 25 | flex: 1 0 0%; 26 | flex-direction: column; 27 | margin-right: 15px; 28 | margin-bottom: 0; 29 | margin-left: 15px; 30 | } 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-deck.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardDeckCss } from './bs-card-deck.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardDeck extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardDeckCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-deck")) 23 | window.customElements.define('bs-card-deck', BsCardDeck); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-footer.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardFooterCss = css` 5 | 6 | :host { 7 | padding: 0.75rem 1.25rem; 8 | background-color: rgba(0, 0, 0, 0.03); 9 | border-top: 1px solid rgba(0, 0, 0, 0.125); 10 | border-bottom-left-radius: var(--card-footer-bottom-left-border-radius); 11 | border-bottom-right-radius: var(--card-footer-bottom-right-border-radius); 12 | } 13 | 14 | :host ::slotted(*:last-child) { 15 | border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); 16 | } 17 | `; 18 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-footer.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardFooterCss } from './bs-card-footer.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardFooter extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardFooterCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-footer")) 23 | window.customElements.define('bs-card-footer', BsCardFooter); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-group.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html} from 'lit-element'; 3 | import { BsCardGroupCss } from './bs-card-group.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardGroup extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardGroupCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-group")) 23 | window.customElements.define('bs-card-group', BsCardGroup); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-header.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardHeaderCss = css` 5 | 6 | :host { 7 | padding: 0.75rem 1.25rem; 8 | margin-bottom: 0; 9 | background-color: rgba(0, 0, 0, 0.03); 10 | border-bottom: 1px solid rgba(0, 0, 0, 0.125); 11 | border-top-left-radius: var(--card-header-top-left-border-radius); 12 | border-top-right-radius: var(--card-header-top-right-border-radius); 13 | } 14 | 15 | :host:first-child { 16 | border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; 17 | } 18 | 19 | :host ::slotted(*) + .list-group .list-group-item:first-child { 20 | border-top: 0; 21 | } 22 | 23 | :host ::slotted(bs-nav[tabs]) { 24 | --bs-nav-margin-right: -0.625rem; 25 | --bs-nav-margin-bottom: -0.75rem; 26 | --bs-nav-margin-left: -0.625rem; 27 | --bs-nav-border-bottom: 0; 28 | --nav-link-active-background-color: #fff; 29 | } 30 | 31 | :host ::slotted(bs-nav[pills]) { 32 | --bs-nav-margin-right: -0.625rem; 33 | --bs-nav-margin-left: -0.625rem; 34 | } 35 | `; 36 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-header.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardHeaderCss } from './bs-card-header.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardHeader extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardHeaderCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-header")) 23 | window.customElements.define('bs-card-header', BsCardHeader); 24 | 25 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-img.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardImgCss = css` 5 | 6 | :host { 7 | display: block; 8 | width: 100%; 9 | } 10 | 11 | :host ::slotted(img), :host ::slotted(svg) { 12 | width: var(--bs-img-width, 100%); 13 | height: var(--bs-img-height); 14 | display: block; 15 | } 16 | 17 | :host([position="top"]) ::slotted(img), 18 | :host([position="top"]) ::slotted(svg) { 19 | border-top-left-radius: var(--card-img-top-left-border-radius, calc(0.25rem - 1px)); 20 | border-top-right-radius: var(--card-img-top-right-border-radius, calc(0.25rem - 1px)); 21 | } 22 | 23 | :host([position="bottom"]) ::slotted(img), 24 | :host([position="bottom"]) ::slotted(svg) { 25 | border-bottom-left-radius: var(--card-img-bottom-left-border-radius, calc(0.25rem - 1px)); 26 | border-bottom-right-radius: var(--card-img-bottom-right-border-radius, calc(0.25rem - 1px)); 27 | } 28 | 29 | :host([position="overlay"]) :slotted(img), 30 | :host([position="overlay"]) :slotted(svg) { 31 | border-radius: calc(0.25rem - 1px); 32 | } 33 | 34 | :host(:not([position="top"]):not([position="bottom"]):not([position="overlay"])) :slotted(img), 35 | :host(:not([position="top"]):not([position="bottom"]):not([position="overlay"])) :slotted(svg) { 36 | border-radius: calc(0.25rem - 1px); 37 | } 38 | `; 39 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-img.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsCardImgCss } from './bs-card-img.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardImg extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | position: String 11 | }; 12 | } 13 | 14 | static get styles() { 15 | return [ 16 | BsContentRebootCss, 17 | BsCardImgCss 18 | ]; 19 | } 20 | 21 | render() { 22 | return html` 23 | 24 | `; 25 | } 26 | }; 27 | 28 | if (!window.customElements.get("bs-card-img")) 29 | window.customElements.define('bs-card-img', BsCardImg); 30 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-link.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardLinkCss = css` 5 | 6 | a { 7 | margin-left: var(--card-link-left-margin, 1.25rem); 8 | } 9 | 10 | a:hover { 11 | color: #0056b3; 12 | text-decoration: none; 13 | } 14 | `; 15 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-link.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardLinkCss } from './bs-card-link.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardLink extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | label: String, 11 | target: String 12 | }; 13 | } 14 | 15 | static get styles() { 16 | return [ 17 | BsContentRebootCss, 18 | BsCardLinkCss 19 | ]; 20 | } 21 | 22 | render() { 23 | return html` 24 | ${this.label} 25 | `; 26 | } 27 | 28 | constructor() { 29 | super(); 30 | this.label = ''; 31 | this.target = '#'; 32 | } 33 | }; 34 | 35 | if (!window.customElements.get("bs-card-link")) 36 | window.customElements.define('bs-card-link', BsCardLink); 37 | 38 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-links.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardLinksCss = css` 5 | 6 | :host ::slotted(*):hover { 7 | color: red; 8 | text-decoration: underline; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-links.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { configureCardLinks } from './helper/bs-card-links-helper.js'; 4 | import { BsCardLinksCss } from './bs-card-links.css.js'; 5 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 6 | 7 | export class BsCardLinks extends LitElement { 8 | 9 | static get styles() { 10 | return [ 11 | BsContentRebootCss, 12 | BsCardLinksCss 13 | ]; 14 | } 15 | 16 | render() { 17 | return html` 18 | 19 | `; 20 | } 21 | 22 | firstUpdated() { 23 | const slotElement = this.shadowRoot.querySelector('slot'); 24 | const slotNodes = slotElement.assignedNodes(); 25 | 26 | configureCardLinks(slotNodes); 27 | } 28 | }; 29 | 30 | if (!window.customElements.get("bs-card-links")) 31 | window.customElements.define('bs-card-links', BsCardLinks); 32 | 33 | 34 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-overlay.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardOverlayCss = css` 5 | 6 | :host { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | padding: 1.25rem; 13 | } 14 | `; 15 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-overlay.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardOverlayCss } from './bs-card-overlay.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardOverlay extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardOverlayCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | 19 | 20 | 21 | 22 | `; 23 | } 24 | }; 25 | 26 | if (!window.customElements.get("bs-card-overlay")) 27 | window.customElements.define('bs-card-overlay', BsCardOverlay); 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-subtitle.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardSubtitleCss = css` 5 | 6 | :host { 7 | margin-top: -0.375rem; 8 | margin-bottom: 0; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-subtitle.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardSubtitleCss } from './bs-card-subtitle.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardSubtitle extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardSubtitleCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-subtitle")) 23 | window.customElements.define('bs-card-subtitle', BsCardSubtitle); 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-text.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardTextCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | :host > ::slotted(*:last-child) { 11 | margin-bottom: 0; 12 | } 13 | `; 14 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-text.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsCardTextCss } from './bs-card-text.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardText extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardTextCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-text")) 23 | window.customElements.define('bs-card-text', BsCardText); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-title.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCardTitleCss = css` 5 | 6 | :host { 7 | margin-bottom: 0.75rem; 8 | } 9 | `; 10 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card-title.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsCardTitleCss } from './bs-card-title.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCardTitle extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCardTitleCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-card-title")) 23 | window.customElements.define('bs-card-title', BsCardTitle); 24 | -------------------------------------------------------------------------------- /packages/components/card/src/bs-card.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCardCss } from './bs-card.css.js'; 4 | import { BsTextCss } from '@lit-element-bootstrap/utilities/bs-text.css.js'; 5 | import { BsSizingCss } from '@lit-element-bootstrap/utilities/bs-sizing.css.js'; 6 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 7 | import { configureFlushListGroupBorders } from './helper/bs-card-list-group-helper.js'; 8 | 9 | export class BsCard extends LitElement { 10 | 11 | static get styles() { 12 | return [ 13 | BsContentRebootCss, 14 | BsSizingCss, 15 | BsTextCss, 16 | BsCardCss 17 | ]; 18 | } 19 | 20 | render() { 21 | return html` 22 | 23 | 24 | 25 | 26 | 27 | `; 28 | } 29 | 30 | firstUpdated() { 31 | const contentSlotElement = this.shadowRoot.querySelector('slot#content'); 32 | const slotNodes = contentSlotElement.assignedNodes(); 33 | configureFlushListGroupBorders(slotNodes); 34 | } 35 | }; 36 | 37 | if (!window.customElements.get("bs-card")) 38 | window.customElements.define('bs-card', BsCard); 39 | 40 | -------------------------------------------------------------------------------- /packages/components/carousel/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/carousel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/carousel", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 carousel component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "@pika/pack": "^0.5.0", 24 | "@pika/plugin-build-web": "^0.6.1", 25 | "@pika/plugin-bundle-web": "^0.6.1", 26 | "@pika/plugin-standard-pkg": "^0.6.1" 27 | }, 28 | "@pika/pack": { 29 | "pipeline": [ 30 | [ 31 | "@pika/plugin-standard-pkg" 32 | ], 33 | [ 34 | "@pika/plugin-build-web" 35 | ], 36 | [ 37 | "@pika/plugin-bundle-web", 38 | { 39 | "entrypoint": "unpkg" 40 | } 41 | ] 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-caption.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselCaptionCss = css` 5 | 6 | :host { 7 | position: absolute; 8 | right: 15%; 9 | bottom: 20px; 10 | left: 15%; 11 | z-index: 10; 12 | padding-top: 20px; 13 | padding-bottom: 20px; 14 | color: #fff; 15 | text-align: center; 16 | } 17 | `; 18 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-caption.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCarouselCaptionCss } from './bs-carousel-caption.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCarouselCaption extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCarouselCaptionCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-carousel-caption")) 23 | window.customElements.define('bs-carousel-caption', BsCarouselCaption); 24 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-control-next.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselControlNextCss = css` 5 | 6 | .carousel-control-next { 7 | position: absolute; 8 | top: 0; 9 | bottom: 0; 10 | z-index: 1; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 15%; 15 | color: #fff; 16 | text-align: center; 17 | opacity: 0.5; 18 | cursor: pointer; 19 | right: 0; 20 | } 21 | 22 | .carousel-control-next:hover, 23 | .carousel-control-next:focus { 24 | color: #fff; 25 | text-decoration: none; 26 | outline: 0; 27 | opacity: 0.9; 28 | } 29 | 30 | .icon { 31 | display: inline-block; 32 | width: 20px; 33 | height: 20px; 34 | background: no-repeat 50%/100% 100%; 35 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 8 8%27%3E%3Cpath d=%27M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z%27/%3E%3C/svg%3E"); 36 | } 37 | `; 38 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-control-next.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCarouselControlNextCss } from './bs-carousel-control-next.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCarouselControlNext extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCarouselControlNextCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | 19 | 20 | `; 21 | } 22 | 23 | firstUpdated() { 24 | const nextLink = this.shadowRoot.querySelector('a.carousel-control-next'); 25 | nextLink.addEventListener('click', event => this._handleClickEvent(event)); 26 | } 27 | 28 | _handleClickEvent(event) { 29 | 30 | event.preventDefault(); 31 | 32 | const nextControlClickEvent = new CustomEvent('bs-carousel-control-next-click', { 33 | bubbles: true, 34 | composed: true 35 | }); 36 | 37 | this.dispatchEvent(nextControlClickEvent); 38 | } 39 | }; 40 | 41 | if (!window.customElements.get("bs-carousel-control-next")) 42 | window.customElements.define('bs-carousel-control-next', BsCarouselControlNext); 43 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-control-prev.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselControlPrevCss = css` 5 | 6 | .carousel-control-prev { 7 | position: absolute; 8 | top: 0; 9 | bottom: 0; 10 | z-index: 1; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | width: 15%; 15 | color: #fff; 16 | text-align: center; 17 | opacity: 0.5; 18 | cursor: pointer; 19 | left: 0; 20 | } 21 | 22 | .carousel-control-prev:hover, 23 | .carousel-control-prev:focus { 24 | color: #fff; 25 | text-decoration: none; 26 | outline: 0; 27 | opacity: 0.9; 28 | } 29 | 30 | .icon { 31 | display: inline-block; 32 | width: 20px; 33 | height: 20px; 34 | background: no-repeat 50%/100% 100%; 35 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 8 8%27%3E%3Cpath d=%27M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z%27/%3E%3C/svg%3E"); 36 | } 37 | `; 38 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-control-prev.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCarouselControlPrevCss } from './bs-carousel-control-prev.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCarouselControlPrev extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsCarouselControlPrevCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | 19 | 20 | `; 21 | } 22 | 23 | firstUpdated() { 24 | const prevLink = this.shadowRoot.querySelector('a.carousel-control-prev'); 25 | prevLink.addEventListener('click', event => this._handleClickEvent(event)); 26 | } 27 | 28 | _handleClickEvent(event) { 29 | 30 | event.preventDefault(); 31 | 32 | const prevControlClickEvent = new CustomEvent('bs-carousel-control-prev-click', { 33 | bubbles: true, 34 | composed: true 35 | }); 36 | 37 | this.dispatchEvent(prevControlClickEvent); 38 | } 39 | }; 40 | 41 | if (!window.customElements.get("bs-carousel-control-prev")) 42 | window.customElements.define('bs-carousel-control-prev', BsCarouselControlPrev); 43 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-indicator.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselIndicatorCss = css` 5 | 6 | :host { 7 | position: relative; 8 | flex: 0 1 auto; 9 | width: 30px; 10 | height: 3px; 11 | margin-right: 3px; 12 | margin-left: 3px; 13 | text-indent: -999px; 14 | cursor: pointer; 15 | background-color: rgba(255, 255, 255, 0.5); 16 | } 17 | 18 | :host([active]) { 19 | background-color: #fff; 20 | } 21 | 22 | :host::before { 23 | position: absolute; 24 | top: -10px; 25 | left: 0; 26 | display: inline-block; 27 | width: 100%; 28 | height: 10px; 29 | content: ""; 30 | } 31 | 32 | :host::after { 33 | position: absolute; 34 | bottom: -10px; 35 | left: 0; 36 | display: inline-block; 37 | width: 100%; 38 | height: 10px; 39 | content: ""; 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-indicator.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement } from 'lit-element'; 3 | import { BsCarouselIndicatorCss } from './bs-carousel-indicator.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCarouselIndicator extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | index: Number, 11 | active: {type: Boolean, reflect: true} 12 | }; 13 | } 14 | 15 | static get styles() { 16 | return [ 17 | BsContentRebootCss, 18 | BsCarouselIndicatorCss 19 | ]; 20 | } 21 | 22 | constructor() { 23 | super(); 24 | this.index = 0; 25 | this.active = false; 26 | } 27 | 28 | firstUpdated() { 29 | this.addEventListener('click', event => this._handleClickEvent(event)); 30 | } 31 | 32 | _handleClickEvent(event) { 33 | 34 | event.preventDefault(); 35 | 36 | const indicatorClickEvent = new CustomEvent('bs-carousel-indicator-click', { 37 | bubbles: true, 38 | composed: true, 39 | detail: { 40 | index: this.index 41 | } 42 | }); 43 | 44 | this.dispatchEvent(indicatorClickEvent); 45 | } 46 | }; 47 | 48 | if (!window.customElements.get("bs-carousel-indicator")) 49 | window.customElements.define('bs-carousel-indicator', BsCarouselIndicator); 50 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-indicators.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselIndicatorsCss = css` 5 | 6 | :host { 7 | position: absolute; 8 | right: 0; 9 | bottom: 10px; 10 | left: 0; 11 | z-index: 15; 12 | display: flex; 13 | justify-content: center; 14 | padding-left: 0; 15 | margin-right: 15%; 16 | margin-left: 15%; 17 | margin-bottom: 1rem; 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel-item.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsCarouselItemCss } from './bs-carousel-item.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsCarouselItem extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | next: { type: Boolean, reflect: true }, 11 | prev: { type: Boolean, reflect: true }, 12 | fade: { type: Boolean, reflect: true }, 13 | active: { type: Boolean, reflect: true } 14 | }; 15 | } 16 | 17 | static get styles() { 18 | return [ 19 | BsContentRebootCss, 20 | BsCarouselItemCss 21 | ]; 22 | } 23 | 24 | render() { 25 | return html` 26 | 27 | 28 | `; 29 | } 30 | 31 | constructor() { 32 | super(); 33 | this.next = false; 34 | this.prev = false; 35 | this.fade = false; 36 | this.active = false; 37 | } 38 | }; 39 | 40 | if (!window.customElements.get("bs-carousel-item")) 41 | window.customElements.define('bs-carousel-item', BsCarouselItem); 42 | -------------------------------------------------------------------------------- /packages/components/carousel/src/bs-carousel.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsCarouselCss = css` 5 | 6 | :host { 7 | display: block; 8 | position: relative; 9 | } 10 | 11 | :host(:hover), 12 | :host(:focus) { 13 | color: #fff; 14 | text-decoration: none; 15 | outline: 0; 16 | } 17 | 18 | .carousel-inner { 19 | position: relative; 20 | width: 100%; 21 | overflow: hidden; 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /packages/components/carousel/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsCarousel } from './bs-carousel.js'; 3 | export { BsCarouselCss } from './bs-carousel.css.js'; 4 | export { BsCarouselItem } from './bs-carousel-item.js'; 5 | export { BsCarouselItemCss } from './bs-carousel-item.css.js'; 6 | export { BsCarouselCaption } from './bs-carousel-caption.js'; 7 | export { BsCarouselCaptionCss } from './bs-carousel-caption.css.js'; 8 | export { BsCarouselIndicator } from './bs-carousel-indicator.js'; 9 | export { BsCarouselIndicatorCss } from './bs-carousel-indicator.css.js'; 10 | export { BsCarouselIndicators } from './bs-carousel-indicators.js'; 11 | export { BsCarouselIndicatorsCss } from './bs-carousel-indicators.css.js'; 12 | export { BsCarouselControlPrev } from './bs-carousel-control-prev.js'; 13 | export { BsCarouselControlPrevCss } from './bs-carousel-control-prev.css.js'; 14 | export { BsCarouselControlNext } from './bs-carousel-control-next.js'; 15 | export { BsCarouselControlNextCss } from './bs-carousel-control-next.css.js'; 16 | -------------------------------------------------------------------------------- /packages/components/dropdown/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg -------------------------------------------------------------------------------- /packages/components/dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/dropdown", 3 | "version": "1.0.0-alpha.4", 4 | "description": "Bootstrap v4.1.3 dropdown component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1", 21 | "popper.js": "^1.15.0" 22 | }, 23 | "devDependencies": { 24 | "@pika/pack": "^0.5.0", 25 | "@pika/plugin-build-web": "^0.6.1", 26 | "@pika/plugin-bundle-web": "^0.6.1", 27 | "@pika/plugin-standard-pkg": "^0.6.1" 28 | }, 29 | "@pika/pack": { 30 | "pipeline": [ 31 | [ 32 | "@pika/plugin-standard-pkg" 33 | ], 34 | [ 35 | "@pika/plugin-build-web" 36 | ], 37 | [ 38 | "@pika/plugin-bundle-web", 39 | { 40 | "entrypoint": "unpkg" 41 | } 42 | ] 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-divider.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsDropdownDividerCss = css` 5 | 6 | :host { 7 | display: block; 8 | height: 0; 9 | margin: 0.5rem 0; 10 | overflow: hidden; 11 | border-top: 1px solid #e9ecef; 12 | } 13 | `; -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-divider.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsDropdownDividerCss } from './bs-dropdown-divider.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsDropdownDivider extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsDropdownDividerCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-dropdown-divider")) 23 | window.customElements.define('bs-dropdown-divider', BsDropdownDivider); -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-header.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsDropdownHeaderCss = css` 5 | 6 | :host { 7 | display: block; 8 | padding: 0.5rem 1.5rem; 9 | margin-bottom: 0; 10 | font-size: 0.875rem; 11 | color: #6c757d; 12 | white-space: nowrap; 13 | } 14 | `; -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-header.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsDropdownHeaderCss } from './bs-dropdown-header.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsDropdownHeader extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsDropdownHeaderCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if (!window.customElements.get("bs-dropdown-header")) 23 | window.customElements.define('bs-dropdown-header', BsDropdownHeader); -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-item-button.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsDropdownItemMixin } from './bs-dropdown-item-mixin.js'; 4 | 5 | export class BsDropdownItemButton extends BsDropdownItemMixin(LitElement) { 6 | 7 | static get styles() { 8 | return [super.styles]; 9 | } 10 | 11 | render() { 12 | return html` 13 | 14 | `; 15 | } 16 | }; 17 | 18 | if (!window.customElements.get("bs-dropdown-item-button")) 19 | window.customElements.define('bs-dropdown-item-button', BsDropdownItemButton); -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-item-link.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsDropdownItemMixin } from './bs-dropdown-item-mixin.js'; 4 | 5 | export class BsDropdownItemLink extends BsDropdownItemMixin(LitElement) { 6 | 7 | static get properties() { 8 | return { 9 | href: String, 10 | target: String 11 | }; 12 | } 13 | 14 | static get styles() { 15 | return [super.styles]; 16 | } 17 | 18 | render() { 19 | return html` 20 | ${this.title} 21 | `; 22 | } 23 | 24 | constructor() { 25 | super(); 26 | this.href = ''; 27 | this.target = '_self'; 28 | } 29 | }; 30 | 31 | if (!window.customElements.get("bs-dropdown-item-link")) 32 | window.customElements.define('bs-dropdown-item-link', BsDropdownItemLink); -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-item-text.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsDropdownItemTextCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | .dropdown-item-text { 11 | display: block; 12 | padding: 0.25rem 1.5rem; 13 | color: #212529; 14 | } 15 | `; -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-item-text.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsDropdownItemTextCss } from './bs-dropdown-item-text.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsDropdownItemText extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsDropdownItemTextCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | 19 | 20 | `; 21 | } 22 | }; 23 | 24 | if (!window.customElements.get("bs-dropdown-item-text")) 25 | window.customElements.define('bs-dropdown-item-text', BsDropdownItemText); -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown-item.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsDropdownItemCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | .dropdown-item { 11 | display: block; 12 | width: 100%; 13 | padding: 0.25rem 1.5rem; 14 | clear: both; 15 | font-weight: 400; 16 | color: #212529; 17 | text-align: inherit; 18 | white-space: nowrap; 19 | background-color: transparent; 20 | border: 0; 21 | } 22 | 23 | .dropdown-item.hover { 24 | color: #16181b; 25 | text-decoration: none; 26 | background-color: #f8f9fa; 27 | } 28 | 29 | .dropdown-item:hover, 30 | .dropdown-item:focus { 31 | color: #16181b; 32 | text-decoration: none; 33 | background-color: #f8f9fa; 34 | } 35 | 36 | :host([active]) .dropdown-item, 37 | :host:active .dropdown-item { 38 | color: #fff; 39 | text-decoration: none; 40 | background-color: #007bff; 41 | } 42 | 43 | :host([disabled]) .dropdown-item, 44 | :host:disabled .dropdown-item { 45 | color: #6c757d; 46 | background-color: transparent; 47 | } 48 | `; -------------------------------------------------------------------------------- /packages/components/dropdown/src/bs-dropdown.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsDropdownCss = css` 5 | 6 | :host { 7 | position: relative; 8 | display: var(--dropdown-display, flex); 9 | } 10 | `; -------------------------------------------------------------------------------- /packages/components/dropdown/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsDropdown } from './bs-dropdown.js'; 3 | export { BsDropdownCss } from './bs-dropdown.css.js'; 4 | export { BsDropdownMenu } from './bs-dropdown-menu.js'; 5 | export { BsDropdownMenuCss } from './bs-dropdown-menu.css.js'; 6 | export { BsDropdownItemText } from './bs-dropdown-item-text.js'; 7 | export { BsDropdownItemTextCss } from './bs-dropdown-item-text.css.js'; 8 | export { BsDropdownItemMixin } from './bs-dropdown-item-mixin.js'; 9 | export { BsDropdownItemLink } from './bs-dropdown-item-link.js'; 10 | export { BsDropdownItemButton } from './bs-dropdown-item-button.js'; 11 | export { BsDropdownHeader } from './bs-dropdown-header.js'; 12 | export { BsDropdownHeaderCss } from './bs-dropdown-header.css.js'; 13 | export { BsDropdownDivider } from './bs-dropdown-divider.js'; 14 | export { BsDropdownDividerCss } from './bs-dropdown-divider.css.js'; -------------------------------------------------------------------------------- /packages/components/form/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | /coverage 4 | -------------------------------------------------------------------------------- /packages/components/form/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LitElement Bootstrap 4 Component Library 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/components/form/karma.conf.js: -------------------------------------------------------------------------------- 1 | 2 | const { createDefaultConfig } = require('@open-wc/testing-karma'); 3 | const merge = require('deepmerge'); 4 | 5 | module.exports = config => { 6 | config.set( 7 | merge(createDefaultConfig(config), { 8 | files: [ 9 | { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' } 10 | ], 11 | plugins: [ 12 | require.resolve('@open-wc/karma-esm'), // load plugin 13 | 'karma-*', // fallback: resolve any karma- plugins 14 | ], 15 | 16 | frameworks: ['esm'], 17 | 18 | esm: { 19 | nodeResolve: true, // if you are using 'bare module imports' you will need this option 20 | compatibility: 'all', // set compatibility mode to all 21 | }, 22 | }), 23 | ); 24 | return config; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-check-group.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormCheckGroupCss = css` 5 | 6 | :host { 7 | position: relative; 8 | display: block; 9 | padding-left: 1.25rem; 10 | } 11 | 12 | :host([inline]) { 13 | display: -ms-inline-flexbox; 14 | display: inline-flex; 15 | align-items: center; 16 | padding-left: 0; 17 | margin-right: 0.75rem; 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-check-label.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormCheckLabelCss = css` 5 | 6 | label { 7 | margin-bottom: 0; 8 | } 9 | 10 | :host([disabled]) label { 11 | color: #6c757d; 12 | } 13 | 14 | :host([valid]) label { 15 | color: #28a745; 16 | } 17 | 18 | :host([invalid]) label { 19 | color: #dc3545; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-checkbox-input.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormCheckboxInputCss = css` 5 | 6 | input { 7 | position: var(--bs-form-checkbox-input-position, absolute); 8 | margin-top: var(--bs-form-checkbox-input-margin-top, 0.3rem); 9 | margin-left: var(--bs-form-checkbox-input-margin-left, -1.25rem); 10 | } 11 | 12 | :host([inline]) { 13 | display: inline-flex; 14 | } 15 | 16 | :host([inline]) input { 17 | position: static; 18 | margin-top: 0; 19 | margin-right: 0.3125rem; 20 | margin-left: 0; 21 | } 22 | 23 | @media (min-width: 576px) { 24 | 25 | :host([inline]) input { 26 | position: relative; 27 | margin-top: 0; 28 | margin-right: 0.25rem; 29 | margin-left: 0; 30 | } 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-control-size.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormControlSizeCss = css` 5 | 6 | :host([sm]) .form-control { 7 | height: calc(1.8125rem + 2px); 8 | padding: 0.25rem 0.5rem; 9 | font-size: 0.875rem; 10 | line-height: 1.5; 11 | border-radius: 0.2rem; 12 | } 13 | 14 | :host([lg]) .form-control { 15 | height: calc(2.875rem + 2px); 16 | padding: 0.5rem 1rem; 17 | font-size: 1.25rem; 18 | line-height: 1.5; 19 | border-radius: 0.3rem; 20 | } 21 | `; -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-file-input.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | 5 | export class BsFormFileInput extends LitElement { 6 | 7 | static get properties() { 8 | return { 9 | placeholder: {type: String, reflect: true} 10 | }; 11 | } 12 | 13 | static get styles() { 14 | return [ 15 | BsContentRebootCss, 16 | css` 17 | .form-control-file { 18 | display: block; 19 | width: 100%; 20 | } 21 | ` 22 | ]; 23 | } 24 | 25 | render() { 26 | return html` 27 | 31 | `; 32 | } 33 | 34 | constructor() { 35 | super(); 36 | this.placeholder = ''; 37 | } 38 | 39 | setFocus() { 40 | const inputElement = this.shadowRoot.querySelector('input'); 41 | inputElement.focus(); 42 | } 43 | }; 44 | 45 | if(!window.customElements.get('bs-form-file-input')) 46 | window.customElements.define('bs-form-file-input', BsFormFileInput); -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-group.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormGroupCss = css` 5 | 6 | :host { 7 | display: block; 8 | margin-bottom: 1rem; 9 | } 10 | 11 | :host([row]) { 12 | display: -ms-flexbox; 13 | display: flex; 14 | -ms-flex-wrap: wrap; 15 | flex-wrap: wrap; 16 | margin-right: -15px; 17 | margin-left: -15px; 18 | } 19 | 20 | @media (min-width: 576px) { 21 | 22 | :host([inline]) { 23 | display: -ms-flexbox; 24 | display: flex; 25 | -ms-flex: 0 0 auto; 26 | flex: 0 0 auto; 27 | -ms-flex-flow: row wrap; 28 | flex-flow: row wrap; 29 | -ms-flex-align: center; 30 | align-items: center; 31 | margin-bottom: 0; 32 | } 33 | } 34 | `; 35 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-help-text.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsTextColorCss } from '@lit-element-bootstrap/utilities/bs-text-colors.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsFormHelpText extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsTextColorCss, 12 | css` 13 | .form-text { 14 | display: block; 15 | margin-top: 0.25rem; 16 | } 17 | ` 18 | ]; 19 | } 20 | 21 | render() { 22 | return html` 23 | 24 | 25 | 26 | `; 27 | } 28 | }; 29 | 30 | if(!window.customElements.get('bs-form-help-text')) 31 | window.customElements.define('bs-form-help-text', BsFormHelpText); -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-input-feedback.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormInputFeedbackCss = css` 5 | 6 | :host { 7 | display: none; 8 | } 9 | 10 | :host([valid]) { 11 | display: block; 12 | width: 100%; 13 | margin-top: .25rem; 14 | font-size: 80%; 15 | color: #28a745; 16 | } 17 | 18 | :host([invalid]) { 19 | display: block; 20 | width: 100%; 21 | margin-top: .25rem; 22 | font-size: 80%; 23 | color: #dc3545; 24 | } 25 | `; 26 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-input-plaintext.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormInputPlaintextCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | input { 11 | display: block; 12 | width: 100%; 13 | padding-top: 0.375rem; 14 | padding-bottom: 0.375rem; 15 | margin-bottom: 0; 16 | line-height: 1.5; 17 | color: #212529; 18 | background-color: transparent; 19 | border: solid transparent; 20 | border-width: 1px 0; 21 | } 22 | 23 | :host([sm]) input, 24 | :host([lg]) input { 25 | padding-right: 0; 26 | padding-left: 0; 27 | } 28 | 29 | @media (min-width: 576px) { 30 | 31 | :host([inline]) input { 32 | display: inline-block; 33 | } 34 | } 35 | `; 36 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-input-plaintext.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { ifDefined } from 'lit-html/directives/if-defined'; 4 | import { BsFormInputMixin } from './bs-form-input-mixin.js'; 5 | import { BsFormControlSizeCss } from './bs-form-control-size.css.js'; 6 | import { BsFormInputPlaintextCss } from './bs-form-input-plaintext.css.js'; 7 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 8 | 9 | export class BsFormInputPlaintext extends BsFormInputMixin(LitElement) { 10 | 11 | static get styles() { 12 | return [ 13 | BsContentRebootCss, 14 | BsFormControlSizeCss, 15 | BsFormInputPlaintextCss 16 | ]; 17 | } 18 | 19 | render() { 20 | return html` 21 | 32 | `; 33 | } 34 | }; 35 | 36 | if(!window.customElements.get('bs-form-input-plaintext')) 37 | window.customElements.define('bs-form-input-plaintext', BsFormInputPlaintext); -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-label.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormLabelCss = css` 5 | 6 | :host([column]) { 7 | padding-top: calc(0.375rem + 1px); 8 | padding-bottom: calc(0.375rem + 1px); 9 | margin-bottom: 0; 10 | font-size: inherit; 11 | line-height: 1.5; 12 | } 13 | 14 | :host([column-lg]) { 15 | padding-top: calc(0.5rem + 1px); 16 | padding-bottom: calc(0.5rem + 1px); 17 | font-size: 1.25rem; 18 | line-height: 1.5; 19 | } 20 | 21 | :host([column-sm]) { 22 | padding-top: calc(0.25rem + 1px); 23 | padding-bottom: calc(0.25rem + 1px); 24 | font-size: 0.875rem; 25 | line-height: 1.5; 26 | } 27 | 28 | @media (min-width: 576px) { 29 | 30 | :host([inline]) { 31 | display: -ms-flexbox; 32 | display: flex; 33 | -ms-flex-align: center; 34 | align-items: center; 35 | -ms-flex-pack: center; 36 | justify-content: center; 37 | margin-bottom: 0; 38 | } 39 | } 40 | `; 41 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-radio-input.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormRadioInputCss = css` 5 | 6 | input { 7 | position: var(--bs-form-radio-input-position, absolute); 8 | margin-top: var(--bs-form-radio-input-margin-top, 0.3rem); 9 | margin-left: var(--bs-form-radio-input-margin-left, -1.25rem); 10 | } 11 | 12 | :host([inline]) { 13 | display: inline-flex; 14 | } 15 | 16 | :host([inline]) input { 17 | position: static; 18 | margin-top: 0; 19 | margin-right: 0.3125rem; 20 | margin-left: 0; 21 | } 22 | 23 | @media (min-width: 576px) { 24 | 25 | :host([inline]) input { 26 | position: relative; 27 | margin-top: 0; 28 | margin-right: 0.25rem; 29 | margin-left: 0; 30 | } 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-range.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | 5 | export class BsFormRange extends LitElement { 6 | 7 | static get styles() { 8 | return [ 9 | BsContentRebootCss, 10 | css` 11 | :host { 12 | display: block; 13 | } 14 | 15 | .form-control-range { 16 | display: block; 17 | width: 100%; 18 | } 19 | ` 20 | ]; 21 | } 22 | 23 | render() { 24 | return html` 25 | 26 | `; 27 | } 28 | }; 29 | 30 | if(!window.customElements.get('bs-form-range')) 31 | window.customElements.define('bs-form-range', BsFormRange); -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-row.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormRowCss = css` 5 | 6 | :host { 7 | display: flex; 8 | flex-wrap: wrap; 9 | margin-right: -5px; 10 | margin-left: -5px; 11 | } 12 | 13 | ::slotted(bs-column) { 14 | padding-right: 5px !important; 15 | padding-left: 5px !important; 16 | } 17 | 18 | /* 19 | * the below assumes that the bs-form-group 20 | * has column attributes like md-6 21 | */ 22 | 23 | ::slotted(bs-form-group) { 24 | padding-right: 5px !important; 25 | padding-left: 5px !important; 26 | } 27 | `; 28 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-row.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsFormRowCss } from './bs-form-row.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsFormRow extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsFormRowCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-form-row')) 23 | window.customElements.define('bs-form-row', BsFormRow); -------------------------------------------------------------------------------- /packages/components/form/src/bs-form-select.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormSelectCss = css` 5 | 6 | :host { 7 | display: block; 8 | } 9 | 10 | select.form-control:focus::-ms-value { 11 | color: #495057; 12 | background-color: #fff; 13 | } 14 | 15 | select.form-control[size], 16 | select.form-control[multiple] { 17 | height: auto; 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /packages/components/form/src/bs-form.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFormCss = css` 5 | 6 | :host(:not([inline])) { 7 | display: block; 8 | } 9 | 10 | :host([inline]) { 11 | display: flex; 12 | flex-flow: row wrap; 13 | align-items: center; 14 | } 15 | 16 | :host([inline]) form { 17 | display: flex; 18 | flex-flow: row wrap; 19 | align-items: center; 20 | } 21 | 22 | @media (min-width: 576px) { 23 | :host([inline]) { 24 | --bs-form-control-display: inline-block; 25 | --bs-form-control-width: auto; 26 | --bs-form-control-vertical-align: middle; 27 | --bs-input-group-width: auto; 28 | } 29 | } 30 | `; 31 | -------------------------------------------------------------------------------- /packages/components/input-group/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg -------------------------------------------------------------------------------- /packages/components/input-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/input-group", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 input group component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "@pika/pack": "^0.5.0", 24 | "@pika/plugin-build-web": "^0.6.1", 25 | "@pika/plugin-bundle-web": "^0.6.1", 26 | "@pika/plugin-standard-pkg": "^0.6.1" 27 | }, 28 | "@pika/pack": { 29 | "pipeline": [ 30 | [ 31 | "@pika/plugin-standard-pkg" 32 | ], 33 | [ 34 | "@pika/plugin-build-web" 35 | ], 36 | [ 37 | "@pika/plugin-bundle-web", 38 | { 39 | "entrypoint": "unpkg" 40 | } 41 | ] 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/input-group/src/bs-input-group-text.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsInputGroupTextCss } from './bs-input-group-text.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsInputGroupText extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsInputGroupTextCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-input-group-text')) 23 | window.customElements.define('bs-input-group-text', BsInputGroupText); -------------------------------------------------------------------------------- /packages/components/input-group/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsInputGroup } from './bs-input-group.js'; 2 | export { BsInputGroupCss } from './bs-input-group.css.js'; 3 | export { BsInputGroupText } from './bs-input-group-text.js'; 4 | export { BsInputGroupTextCss } from './bs-input-group-text.css.js'; 5 | export { BsInputGroupAppend } from './bs-input-group-append.js'; 6 | export { BsInputGroupAppendCss } from './bs-input-group-append.css.js'; 7 | export { BsInputGroupPrepend } from './bs-input-group-prepend.js'; 8 | export { BsInputGroupPrependCss } from './bs-input-group-prepend.css.js'; 9 | export { BsInputGroupLargeCss } from './bs-input-group-large.css.js'; 10 | export { BsInputGroupSmallCss } from './bs-input-group-small.css.js'; -------------------------------------------------------------------------------- /packages/components/jumbotron/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/jumbotron/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/jumbotron", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 jumbotron component in LitElement", 5 | "main": "index.js", 6 | "module": "index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "@pika/pack": "^0.5.0", 24 | "@pika/plugin-build-web": "^0.6.1", 25 | "@pika/plugin-bundle-web": "^0.6.1", 26 | "@pika/plugin-standard-pkg": "^0.6.1" 27 | }, 28 | "@pika/pack": { 29 | "pipeline": [ 30 | [ 31 | "@pika/plugin-standard-pkg" 32 | ], 33 | [ 34 | "@pika/plugin-build-web" 35 | ], 36 | [ 37 | "@pika/plugin-bundle-web", 38 | { 39 | "entrypoint": "unpkg" 40 | } 41 | ] 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/jumbotron/src/bs-jumbotron.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsJumbotronCss = css` 4 | 5 | :host { 6 | display: block; 7 | padding: 2rem 1rem; 8 | margin-bottom: 2rem; 9 | background-color: #e9ecef; 10 | border-radius: 0.3rem; 11 | } 12 | 13 | @media (min-width: 576px) { 14 | :host { 15 | padding: 4rem 2rem; 16 | } 17 | } 18 | 19 | :host([fluid]) { 20 | padding-right: 0; 21 | padding-left: 0; 22 | border-radius: 0; 23 | } 24 | `; 25 | -------------------------------------------------------------------------------- /packages/components/jumbotron/src/bs-jumbotron.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsJumbotronCss } from './bs-jumbotron.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsJumbotron extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsJumbotronCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-jumbotron')) 23 | window.customElements.define('bs-jumbotron', BsJumbotron); 24 | -------------------------------------------------------------------------------- /packages/components/jumbotron/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsJumbotron } from './bs-jumbotron.js'; 2 | export { BsJumbotronCss } from './bs-jumbotron.css.js'; 3 | -------------------------------------------------------------------------------- /packages/components/list-group/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/list-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/list-group", 3 | "version": "1.0.0-alpha.3", 4 | "description": "Bootstrap v4.1.3 list-group component in LitElement", 5 | "main": "index.js", 6 | "module": "index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "@lit-element-bootstrap/utilities": "^1.0.0-alpha.4", 21 | "lit-element": "^2.2.1" 22 | }, 23 | "devDependencies": { 24 | "@pika/pack": "^0.5.0", 25 | "@pika/plugin-build-web": "^0.6.1", 26 | "@pika/plugin-bundle-web": "^0.6.1", 27 | "@pika/plugin-standard-pkg": "^0.6.1" 28 | }, 29 | "@pika/pack": { 30 | "pipeline": [ 31 | [ 32 | "@pika/plugin-standard-pkg" 33 | ], 34 | [ 35 | "@pika/plugin-build-web" 36 | ], 37 | [ 38 | "@pika/plugin-bundle-web", 39 | { 40 | "entrypoint": "unpkg" 41 | } 42 | ] 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-action-flush.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsListGroupActionFlushCss = css` 5 | 6 | div ::slotted(*) { 7 | --list-group-item-border-right: 0px; 8 | --list-group-item-border-left: 0px; 9 | --list-group-item-border-radius-bottom-right: 0; 10 | --list-group-item-border-radius-bottom-left: 0; 11 | --list-group-item-border-radius-top-left: 0; 12 | --list-group-item-border-radius-top-right: 0; 13 | } 14 | 15 | div ::slotted(*:first-child) { 16 | --list-group-item-border-top: var(--flush-list-group-item-top-border, 0); 17 | --list-group-item-border-radius-top-left: var(--flush-list-group-item-top-left-radius, 0); 18 | --list-group-item-border-radius-top-right: var(--flush-list-group-item-top-right-radius, 0); 19 | } 20 | 21 | div ::slotted(*:last-child) { 22 | --list-group-item-border-bottom: var(--flush-list-group-item-bottom-border, 0); 23 | --list-group-item-border-radius-bottom-left: var(--flush-list-group-item-bottom-left-radius , 0); 24 | --list-group-item-border-radius-bottom-right: var(--flush-list-group-item-bottom-right-radius , 0); 25 | } 26 | `; 27 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-action.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsListGroupActionCss = css` 5 | 6 | div ::slotted(*:first-child) { 7 | --list-group-item-border-radius-top-left: 0.25rem; 8 | --list-group-item-border-radius-top-right: 0.25rem; 9 | } 10 | 11 | div ::slotted(*:last-child) { 12 | margin-bottom: 0; 13 | --list-group-item-border-radius-bottom-left: 0.25rem; 14 | --list-group-item-border-radius-bottom-right: 0.25rem; 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-common.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsListGroupCommonCss = css` 5 | 6 | .list-group { 7 | display: flex; 8 | flex-direction: column; 9 | padding-left: 0; 10 | margin-bottom: 0; 11 | max-width: var(--list-group-max-width, 400px); 12 | } 13 | `; -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-flush.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsListGroupFlushCss = css` 5 | 6 | ul ::slotted(*) { 7 | --list-group-item-border-right: 0px; 8 | --list-group-item-border-left: 0px; 9 | --list-group-item-border-radius-bottom-right: 0; 10 | --list-group-item-border-radius-bottom-left: 0; 11 | --list-group-item-border-radius-top-left: 0; 12 | --list-group-item-border-radius-top-right: 0; 13 | } 14 | 15 | ul ::slotted(*:first-child) { 16 | --list-group-item-border-top: var(--flush-list-group-item-top-border, 0); 17 | --list-group-item-border-radius-top-left: var(--flush-list-group-item-top-left-radius, 0); 18 | --list-group-item-border-radius-top-right: var(--flush-list-group-item-top-right-radius, 0); 19 | } 20 | 21 | ul ::slotted(*:last-child) { 22 | --list-group-item-border-bottom: var(--flush-list-group-item-bottom-border, 0); 23 | --list-group-item-border-radius-bottom-left: var(--flush-list-group-item-bottom-left-radius, 0); 24 | --list-group-item-border-radius-bottom-right: var(--flush-list-group-item-bottom-right-radius, 0); 25 | } 26 | `; 27 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-flush.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsListGroupFlushCss } from './bs-list-group-flush.css.js'; 4 | import { BsListGroupCommonCss } from './bs-list-group-common.css.js'; 5 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 6 | 7 | export class BsListGroupFlush extends LitElement { 8 | 9 | static get styles() { 10 | return [ 11 | BsContentRebootCss, 12 | BsListGroupCommonCss, 13 | BsListGroupFlushCss 14 | ]; 15 | } 16 | 17 | render() { 18 | return html` 19 |
    20 | 21 |
22 | `; 23 | } 24 | }; 25 | 26 | if(!window.customElements.get('bs-list-group-flush')) 27 | window.customElements.define('bs-list-group-flush', BsListGroupFlush); 28 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group-item.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsListGroupItemCommonCss } from './bs-list-group-item-common.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsListGroupItem extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsListGroupItemCommonCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 |
  • 18 | 19 |
    • 20 | `; 21 | } 22 | }; 23 | 24 | if(!window.customElements.get('bs-list-group-item')) 25 | window.customElements.define('bs-list-group-item', BsListGroupItem); 26 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsListGroupCss = css` 5 | 6 | ul ::slotted(*:first-child) { 7 | --list-group-item-border-radius-top-left: 0.25rem; 8 | --list-group-item-border-radius-top-right: 0.25rem; 9 | } 10 | 11 | ul ::slotted(*:last-child) { 12 | margin-bottom: 0; 13 | --list-group-item-border-radius-bottom-left: 0.25rem; 14 | --list-group-item-border-radius-bottom-right: 0.25rem; 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /packages/components/list-group/src/bs-list-group.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsListGroupCss } from './bs-list-group.css.js'; 4 | import { BsListGroupCommonCss } from './bs-list-group-common.css.js'; 5 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 6 | 7 | export class BsListGroup extends LitElement { 8 | 9 | static get styles() { 10 | return [ 11 | BsContentRebootCss, 12 | BsListGroupCommonCss, 13 | BsListGroupCss 14 | ]; 15 | } 16 | 17 | render() { 18 | return html` 19 |
      20 | 21 |
    22 | `; 23 | } 24 | }; 25 | 26 | if(!window.customElements.get('bs-list-group')) 27 | window.customElements.define('bs-list-group', BsListGroup); 28 | -------------------------------------------------------------------------------- /packages/components/list-group/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsListGroupActionFlush } from './bs-list-group-action-flush.js'; 3 | export { BsListGroupActionFlushCss } from './bs-list-group-action-flush.css.js'; 4 | export { BsListGroupAction } from './bs-list-group-action.js'; 5 | export { BsListGroupActionCss } from './bs-list-group-action.css.js'; 6 | export { BsListGroupBadgeItem } from './bs-list-group-badge-item.js'; 7 | export { BsListGroupCommonCss } from './bs-list-group-common.css.js'; 8 | export { BsListGroupFlushCss } from './bs-list-group-flush.css.js'; 9 | export { BsListGroupFlush } from './bs-list-group-flush.js'; 10 | export { BsListGroupItemActionButton } from './bs-list-group-item-action-button.js'; 11 | export { BsListGroupItemActionLink } from './bs-list-group-item-action-link.js'; 12 | export { BsListGroupItemActionCommonCss } from './bs-list-group-item-action-common.css.js'; 13 | export { BsListGroupItem } from './bs-list-group-item.js'; 14 | export { BsListGroupCss } from './bs-list-group.css.js'; 15 | export { BsListGroup } from './bs-list-group.js'; 16 | -------------------------------------------------------------------------------- /packages/components/media-object/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/media-object/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/media-object", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 media-object component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | 23 | "devDependencies": { 24 | "@pika/pack": "^0.5.0", 25 | "@pika/plugin-build-web": "^0.6.1", 26 | "@pika/plugin-bundle-web": "^0.6.1", 27 | "@pika/plugin-standard-pkg": "^0.6.1" 28 | }, 29 | "@pika/pack": { 30 | "pipeline": [ 31 | [ 32 | "@pika/plugin-standard-pkg" 33 | ], 34 | [ 35 | "@pika/plugin-build-web" 36 | ], 37 | [ 38 | "@pika/plugin-bundle-web", 39 | { 40 | "entrypoint": "unpkg" 41 | } 42 | ] 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/components/media-object/src/bs-media-body.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html, css } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | 5 | export class BsMediaBody extends LitElement { 6 | 7 | static get styles() { 8 | return [ 9 | BsContentRebootCss, 10 | css` 11 | :host { 12 | flex: 1; 13 | } 14 | ` 15 | ]; 16 | } 17 | 18 | render() { 19 | return html` 20 | 21 | `; 22 | } 23 | }; 24 | 25 | if(!window.customElements.get('bs-media-body')) 26 | window.customElements.define('bs-media-body', BsMediaBody); 27 | 28 | -------------------------------------------------------------------------------- /packages/components/media-object/src/bs-media-group.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsMediaGroupCss = css` 4 | 5 | :host { 6 | margin-top: 0; 7 | margin-bottom: 1rem; 8 | } 9 | `; 10 | -------------------------------------------------------------------------------- /packages/components/media-object/src/bs-media-group.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsMediaGroupCss } from './bs-media-group.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsMediaGroup extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsMediaGroupCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-media-group')) 23 | window.customElements.define('bs-media-group', BsMediaGroup); 24 | 25 | -------------------------------------------------------------------------------- /packages/components/media-object/src/bs-media.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsMediaCss = css` 4 | 5 | :host { 6 | display: flex; 7 | align-items: flex-start; 8 | } 9 | `; 10 | -------------------------------------------------------------------------------- /packages/components/media-object/src/bs-media.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsMediaCss } from './bs-media.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsMedia extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsMediaCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-media')) 23 | window.customElements.define('bs-media', BsMedia); 24 | 25 | -------------------------------------------------------------------------------- /packages/components/media-object/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsMedia } from './bs-media.js'; 2 | export { BsMediaCss } from './bs-media.css.js'; 3 | export { BsMediaBody } from './bs-media-body.js'; 4 | export { BsMediaGroup } from './bs-media-group.js'; 5 | export { BsMediaGroupCss } from './bs-media-group.css.js'; 6 | -------------------------------------------------------------------------------- /packages/components/modal/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/modal/karma.conf.js: -------------------------------------------------------------------------------- 1 | const { createDefaultConfig } = require('@open-wc/testing-karma'); 2 | const merge = require('deepmerge'); 3 | 4 | module.exports = config => { 5 | config.set( 6 | merge(createDefaultConfig(config), { 7 | files: [ 8 | // runs all files ending with .test in the test folder, 9 | // can be overwritten by passing a --grep flag. examples: 10 | // 11 | // npm run test -- --grep test/foo/bar.test.js 12 | // npm run test -- --grep test/bar/* 13 | { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' }, 14 | ], 15 | 16 | esm: { 17 | nodeResolve: true, 18 | }, 19 | }), 20 | ); 21 | return config 22 | }; 23 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-body.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsModalBodyCss = css` 4 | 5 | .modal-body { 6 | position: relative; 7 | flex: 1 1 auto; 8 | padding: 1rem; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-body.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsModalBodyCss } from './bs-modal-body.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsModalBody extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsModalBodyCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 |
    18 | 19 |
    20 | `; 21 | } 22 | }; 23 | 24 | if(!window.customElements.get('bs-modal-body')) 25 | window.customElements.define('bs-modal-body', BsModalBody); 26 | 27 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-footer.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsModalFooterCss = css` 4 | 5 | .modal-footer { 6 | display: flex; 7 | align-items: center; 8 | justify-content: flex-end; 9 | padding: 1rem; 10 | border-top: 1px solid #e9ecef; 11 | } 12 | 13 | :host ::slotted(:not(:first-child)) { 14 | margin-left: .25rem; 15 | } 16 | 17 | :host ::slotted(:not(:last-child)) { 18 | margin-right: .25rem; 19 | } 20 | `; 21 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-footer.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsModalFooterCss } from './bs-modal-footer.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsModalFooter extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsModalFooterCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 |
    18 | 19 |
    20 | `; 21 | } 22 | }; 23 | 24 | if(!window.customElements.get('bs-modal-footer')) 25 | window.customElements.define('bs-modal-footer', BsModalFooter); 26 | 27 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-header.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsModalHeaderCss = css` 4 | 5 | .modal-header { 6 | display: flex; 7 | align-items: flex-start; 8 | justify-content: space-between; 9 | padding: 1rem; 10 | border-bottom: 1px solid #e9ecef; 11 | border-top-left-radius: 0.3rem; 12 | border-top-right-radius: 0.3rem; 13 | } 14 | 15 | bs-close-button { 16 | --bs-close-button-padding: 1rem; 17 | --bs-close-button-margin: -1rem -1rem -1rem auto; 18 | } 19 | 20 | .modal-title { 21 | margin-bottom: 0; 22 | line-height: 1.5; 23 | } 24 | `; 25 | -------------------------------------------------------------------------------- /packages/components/modal/src/bs-modal-header.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsModalHeaderCss } from './bs-modal-header.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | import '@lit-element-bootstrap/button/bs-close-button.js'; 7 | 8 | export class BsModalHeader extends LitElement { 9 | 10 | static get styles() { 11 | return [ 12 | BsContentRebootCss, 13 | BsModalHeaderCss 14 | ]; 15 | } 16 | 17 | render() { 18 | return html` 19 |
    20 |
    21 | 22 |
    23 | 24 |
    25 | `; 26 | } 27 | 28 | firstUpdated() { 29 | this.addEventListener('close-button-click', () => this._handleCloseEvent()); 30 | } 31 | 32 | _handleCloseEvent() { 33 | 34 | const modalDismissEvent = new CustomEvent('bs-modal-dismiss', { 35 | bubbles: true, 36 | composed: true 37 | }); 38 | 39 | this.dispatchEvent(modalDismissEvent); 40 | } 41 | }; 42 | 43 | if(!window.customElements.get('bs-modal-header')) 44 | window.customElements.define('bs-modal-header', BsModalHeader); 45 | -------------------------------------------------------------------------------- /packages/components/modal/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsModal } from './bs-modal.js'; 2 | export { BsModalCss } from './bs-modal.css.js'; 3 | export { BsModalBody } from './bs-modal-body.js'; 4 | export { BsModalBodyCss } from './bs-modal-body.css.js'; 5 | export { BsModalFooter } from './bs-modal-footer.js'; 6 | export { BsModalFooterCss } from './bs-modal-footer.css.js'; 7 | export { BsModalHeader } from './bs-modal-header.js'; 8 | export { BsModalHeaderCss } from './bs-modal-header.css.js'; 9 | -------------------------------------------------------------------------------- /packages/components/modal/test/bs-modal.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect, oneEvent } from '@open-wc/testing' 2 | import '../src/index.js' 3 | 4 | describe('', () => { 5 | it('does not close when clicked', async () => { 6 | // given 7 | const modal = await fixture(html` 8 | 9 | 10 | 11 | `); 12 | modal.open(); 13 | const body = modal.querySelector('bs-modal-body'); 14 | 15 | // when 16 | body.click(); 17 | 18 | // then 19 | expect(modal.opened).to.be.true 20 | }); 21 | 22 | it('does not prevent click events from children', async () => { 23 | // given 24 | const modal = await fixture(html` 25 | 26 | 27 | 28 | 29 | `); 30 | const button = modal.querySelector('button'); 31 | 32 | // when 33 | setTimeout(() => button.click()); 34 | const ev = await oneEvent(modal, 'click'); 35 | 36 | // then 37 | expect(ev).to.be.ok 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /packages/components/navbar/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/navbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/navbar", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 navbar component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "@lit-element-bootstrap/utilities": "^1.0.0-alpha.4", 21 | "lit-element": "^2.2.1" 22 | }, 23 | "devDependencies": { 24 | "@pika/pack": "^0.5.0", 25 | "@pika/plugin-build-web": "^0.6.1", 26 | "@pika/plugin-bundle-web": "^0.6.1", 27 | "@pika/plugin-standard-pkg": "^0.6.1" 28 | }, 29 | "@pika/pack": { 30 | "pipeline": [ 31 | [ 32 | "@pika/plugin-standard-pkg" 33 | ], 34 | [ 35 | "@pika/plugin-build-web" 36 | ], 37 | [ 38 | "@pika/plugin-bundle-web", 39 | { 40 | "entrypoint": "unpkg" 41 | } 42 | ] 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-brand-link.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarBrandLinkCss = css` 5 | 6 | :host { 7 | display: inline-block; 8 | padding-top: 0.3125rem; 9 | padding-bottom: 0.3125rem; 10 | margin-right: 1rem; 11 | font-size: 1.25rem; 12 | line-height: inherit; 13 | white-space: nowrap; 14 | } 15 | 16 | a { 17 | color: var(--navbar-brand-color); 18 | } 19 | 20 | a:hover { 21 | color: var(--navbar-brand-link-hover-color); 22 | text-decoration: none; 23 | } 24 | 25 | a:focus { 26 | color: var(--navbar-brand-link-focus-color); 27 | text-decoration: none; 28 | } 29 | `; -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-brand-link.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarBrandLinkCss } from './bs-navbar-brand-link.css.js'; 4 | import { BsSpacingCss } from '@lit-element-bootstrap/utilities/bs-spacing.css.js'; 5 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 6 | import { BsContentTypographyCss } from '@lit-element-bootstrap/content/bs-content-typography.css.js'; 7 | 8 | export class BsNavbarBrandLink extends LitElement { 9 | 10 | static get properties() { 11 | return { 12 | href: String, 13 | target: String 14 | }; 15 | } 16 | 17 | static get styles() { 18 | return [ 19 | BsContentRebootCss, 20 | BsContentTypographyCss, 21 | BsSpacingCss, 22 | BsNavbarBrandLinkCss 23 | ]; 24 | } 25 | 26 | render() { 27 | return html` 28 | 29 | 30 | 31 | `; 32 | } 33 | 34 | constructor() { 35 | super(); 36 | this.href = ''; 37 | this.target = '_self'; 38 | } 39 | }; 40 | 41 | if(!window.customElements.get('bs-navbar-brand-link')) 42 | window.customElements.define('bs-navbar-brand-link', BsNavbarBrandLink); 43 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-brand.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarBrandCss = css` 5 | 6 | :host span { 7 | display: inline-block; 8 | padding-top: 0.3125rem; 9 | padding-bottom: 0.3125rem; 10 | margin-right: 1rem; 11 | font-size: 1.25rem; 12 | line-height: inherit; 13 | white-space: nowrap; 14 | } 15 | 16 | span { 17 | color: var(--navbar-brand-color); 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-brand.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarBrandCss } from './bs-navbar-brand.css.js'; 4 | import { BsSpacingCss } from '@lit-element-bootstrap/utilities/bs-spacing.css.js'; 5 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 6 | import { BsContentTypographyCss } from '@lit-element-bootstrap/content/bs-content-typography.css.js'; 7 | 8 | export class BsNavbarBrand extends LitElement { 9 | 10 | static get styles() { 11 | return [ 12 | BsContentRebootCss, 13 | BsContentTypographyCss, 14 | BsSpacingCss, 15 | BsNavbarBrandCss 16 | ]; 17 | } 18 | 19 | render() { 20 | return html` 21 | 22 | 23 | 24 | `; 25 | } 26 | }; 27 | 28 | if(!window.customElements.get('bs-navbar-brand')) 29 | window.customElements.define('bs-navbar-brand', BsNavbarBrand); 30 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-collapse.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarCollapseCss = css` 5 | 6 | :host { 7 | flex-grow: 1; 8 | height: 0; 9 | overflow: hidden; 10 | align-items: center; 11 | transition: height 0.35s ease; 12 | display: var(--navbar-collapse-display); 13 | flex-basis: var(--navbar-collapse-flex-basis, 100%); 14 | } 15 | 16 | :host([transitioning]) { 17 | position: relative; 18 | } 19 | 20 | @media screen and (prefers-reduced-motion: reduce) { 21 | :host { 22 | transition: none; 23 | } 24 | } 25 | 26 | @media (min-width: 992px) { 27 | 28 | :host { 29 | height: auto; 30 | overflow: inherit; 31 | } 32 | } 33 | `; 34 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-dark-color.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarDarkColorCss = css` 5 | 6 | :host([navbar-dark]) { 7 | 8 | --navbar-brand-color: #fff; 9 | --navbar-brand-link-hover-color: #fff; 10 | --navbar-brand-link-focus-color: #fff; 11 | 12 | --nav-link-color: rgba(255, 255, 255, 0.5); 13 | --nav-link-active-color: #fff; 14 | --nav-link-disabled-color: rgba(255, 255, 255, 0.25); 15 | --nav-link-hover-color: rgba(255, 255, 255, 0.75); 16 | --nav-link-focus-color: rgba(255, 255, 255, 0.75); 17 | 18 | --dropdown-nav-link-color: rgba(0,0,0, 0.5); 19 | --dropdown-nav-link-hover-border-color: transparent; 20 | --dropdown-nav-link-hover-color: rgba(0, 0, 0, 0.7); 21 | 22 | --navbar-toggler-color: rgba(255, 255, 255, 0.5); 23 | --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); 24 | 25 | --navbar-toggler-icon-background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 30 30%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%28255, 255, 255, 0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E"); 26 | 27 | --navbar-text-color: rgba(255, 255, 255, 0.5); 28 | --navbar-text-link-color: #fff; 29 | --navbar-text-link-hover-color: color: #fff; 30 | --navbar-text-link-focus-color: color: #fff; 31 | } 32 | `; -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-light-color.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarLightColorCss = css` 5 | 6 | :host([navbar-light]) { 7 | 8 | --navbar-brand-color: rgba(0, 0, 0, 0.9); 9 | --navbar-brand-link-hover-color: rgba(0, 0, 0, 0.9); 10 | --navbar-brand-link-focus-color: rgba(0, 0, 0, 0.9); 11 | 12 | --nav-link-active-color: rgba(0,0,0, 0.9); 13 | --nav-link-color: rgba(0,0,0, 0.5); 14 | --nav-link-disabled-color: rgba(0, 0, 0, 0.3); 15 | --nav-link-hover-color: rgba(0, 0, 0, 0.7); 16 | 17 | --dropdown-nav-link-color: rgba(0,0,0, 0.5); 18 | --dropdown-nav-link-hover-border-color: transparent; 19 | --dropdown-nav-link-hover-color: rgba(0, 0, 0, 0.7); 20 | 21 | --navbar-toggler-color: rgba(0, 0, 0, 0.5); 22 | --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); 23 | 24 | --navbar-toggler-icon-background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=%270 0 30 30%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath stroke=%27rgba%280,0,0,0.5%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E"); 25 | 26 | --navbar-text-color: rgba(0, 0, 0, 0.5); 27 | --navbar-text-link-color: rgba(0, 0, 0, 0.9); 28 | --navbar-text-link-hover-color: rgba(0, 0, 0, 0.9); 29 | --navbar-text-link-focus-color: rgba(0, 0, 0, 0.9); 30 | } 31 | `; -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-link.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarLinkCss = css` 5 | 6 | :host { 7 | display: inline-block; 8 | padding-top: 0.5rem; 9 | padding-bottom: 0.5rem; 10 | } 11 | 12 | a { 13 | color: var(--navbar-text-link-color, rgba(0, 0, 0, 0.9)); 14 | } 15 | 16 | a:hover { 17 | color: var(--navbar-text-link-hover-color, rgba(0, 0, 0, 0.9)); 18 | } 19 | 20 | a:focus { 21 | color: var(--navbar-text-link-focus-color, rgba(0, 0, 0, 0.9)); 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-link.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarLinkCss } from './bs-navbar-link.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNavbarLink extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | href: String, 11 | target: String 12 | }; 13 | } 14 | 15 | static get styles() { 16 | return [ 17 | BsContentRebootCss, 18 | BsNavbarLinkCss 19 | ]; 20 | } 21 | 22 | render() { 23 | return html` 24 | 25 | 26 | 27 | `; 28 | } 29 | 30 | constructor() { 31 | super(); 32 | this.href = ''; 33 | this.target = '_self'; 34 | } 35 | }; 36 | 37 | if(!window.customElements.get('bs-navbar-link')) 38 | window.customElements.define('bs-navbar-link', BsNavbarLink); 39 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-nav.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarNavCss = css` 5 | 6 | :host { 7 | display: flex; 8 | flex-direction: var(--navbar-nav-flex-direction, column); 9 | padding-left: 0; 10 | margin-bottom: 0; 11 | list-style: none; 12 | } 13 | 14 | :host ::slotted(bs-dropdown) { 15 | position: static; 16 | float: none; 17 | } 18 | `; 19 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-nav.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarNavCss } from './bs-navbar-nav.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNavbarNav extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsNavbarNavCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-navbar-nav')) 23 | window.customElements.define('bs-navbar-nav', BsNavbarNav); 24 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-text.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarTextCss = css` 5 | 6 | :host { 7 | display: inline-block; 8 | padding-top: 0.5rem; 9 | padding-bottom: 0.5rem; 10 | } 11 | 12 | span { 13 | color: var(--navbar-text-color, rgba(0, 0, 0, 0.5)); 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-text.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarTextCss } from './bs-navbar-text.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNavbarText extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsNavbarTextCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-navbar-text')) 23 | window.customElements.define('bs-navbar-text', BsNavbarText); 24 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-toggler-icon.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarTogglerIconCss = css` 5 | 6 | :host { 7 | display: inline-block; 8 | width: 1.5em; 9 | height: 1.5em; 10 | vertical-align: middle; 11 | content: ""; 12 | background: no-repeat center center; 13 | background-size: 100% 100%; 14 | background-image: var(--navbar-toggler-icon-background-image); 15 | font-size: 1.25rem; 16 | line-height: 1; 17 | color: rgba(0,0,0,0.5); 18 | } 19 | `; 20 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-toggler-icon.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement } from 'lit-element'; 3 | import { BsNavbarTogglerIconCss } from './bs-navbar-toggler-icon.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNavbarTogglerIcon extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsNavbarTogglerIconCss 12 | ]; 13 | } 14 | }; 15 | 16 | if(!window.customElements.get('bs-navbar-toggler-icon')) 17 | window.customElements.define('bs-navbar-toggler-icon', BsNavbarTogglerIcon); 18 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-toggler.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarTogglerCss = css` 5 | 6 | button { 7 | padding: var(--navbar-toggler-padding, 0.25rem 0.75rem); 8 | font-size: var(--navbar-toggler-font-size, 1.25rem); 9 | line-height: 1; 10 | border: var(--navbar-toggler-border, 1px solid transparent); 11 | border-top-left-radius: 0.25rem; 12 | border-top-right-radius: 0.25rem; 13 | border-bottom-right-radius: 0.25rem; 14 | border-bottom-left-radius: 0.25rem; 15 | background-color: transparent; 16 | color: var(--navbar-toggler-color); 17 | border-color: var(--navbar-toggler-border-color); 18 | } 19 | 20 | button:focus { 21 | text-decoration: none; 22 | outline: var(--navbar-toggler-outline-focus); 23 | } 24 | 25 | button:hover { 26 | text-decoration: none; 27 | } 28 | 29 | button:not(:disabled):not(.disabled) { 30 | cursor: pointer; 31 | } 32 | `; 33 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar-toggler.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavbarTogglerCss } from './bs-navbar-toggler.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNavbarToggler extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsNavbarTogglerCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 20 | `; 21 | } 22 | 23 | firstUpdated() { 24 | const toggleButton = this.shadowRoot.querySelector('button'); 25 | toggleButton.addEventListener('click', event => this._handleToggleButtonClickEvent(event)); 26 | } 27 | 28 | _handleToggleButtonClickEvent(event) { 29 | 30 | event.stopPropagation(); 31 | event.preventDefault(); 32 | 33 | const btnClickedEvent = new CustomEvent('bs-navbar-toggler-click', {bubbles: true, composed: true}); 34 | this.dispatchEvent(btnClickedEvent); 35 | } 36 | }; 37 | 38 | if(!window.customElements.get('bs-navbar-toggler')) 39 | window.customElements.define('bs-navbar-toggler', BsNavbarToggler); 40 | -------------------------------------------------------------------------------- /packages/components/navbar/src/bs-navbar.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavbarCss = css` 5 | 6 | :host { 7 | position: relative; 8 | display: flex; 9 | flex-wrap: wrap; 10 | align-items: center; 11 | justify-content: space-between; 12 | padding: 0.5rem 1rem; 13 | } 14 | 15 | :host ::slotted(bs-container) { 16 | display: flex; 17 | flex-wrap: wrap; 18 | align-items: center; 19 | justify-content: space-between; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /packages/components/navbar/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsNavbarBrandLinkCss } from './bs-navbar-brand-link.css.js'; 2 | export { BsNavbarBrandLink } from './bs-navbar-brand-link.js'; 3 | export { BsNavbarBrandCss } from './bs-navbar-brand.css.js'; 4 | export { BsNavbarBrand } from './bs-navbar-brand.js'; 5 | export { BsNavbarCollapseCss } from './bs-navbar-collapse.css.js'; 6 | export { BsNavbarCollapse } from './bs-navbar-collapse.js'; 7 | export { BsNavbarDarkColorCss } from './bs-navbar-dark-color.css.js'; 8 | export { BsNavbarExpandLargeCss } from './bs-navbar-expand-lg.css.js'; 9 | export { BsNavbarExpandMediumCss } from './bs-navbar-expand-md.css.js'; 10 | export { BsNavbarExpandSmallCss } from './bs-navbar-expand-sm.css.js'; 11 | export { BsNavbarExpandExtraSmallCss } from './bs-navbar-expand-xs.css.js'; 12 | export { BsNavbarLightColorCss } from './bs-navbar-light-color.css.js'; 13 | export { BsNavbarLinkCss } from './bs-navbar-link.css.js'; 14 | export { BsNavbarLink } from './bs-navbar-link.js'; 15 | export { BsNavbarNavCss } from './bs-navbar-nav.css.js'; 16 | export { BsNavbarNav } from './bs-navbar-nav.js'; 17 | export { BsNavbarTextCss } from './bs-navbar-text.css.js'; 18 | export { BsNavbarText } from './bs-navbar-text.js'; 19 | export { BsNavbarTogglerIconCss } from './bs-navbar-toggler-icon.css.js'; 20 | export { BsNavbarTogglerIcon } from './bs-navbar-toggler-icon.js'; 21 | export { BsNavbarTogglerCss } from './bs-navbar-toggler.css.js'; 22 | export { BsNavbarToggler } from './bs-navbar-toggler.js'; 23 | export { BsNavbarCss } from './bs-navbar.css.js'; 24 | export { BsNavbar } from './bs-navbar.js'; 25 | -------------------------------------------------------------------------------- /packages/components/navs/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/navs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/navs", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 navigation menu link component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "@pika/pack": "^0.5.0", 24 | "@pika/plugin-build-web": "^0.6.1", 25 | "@pika/plugin-bundle-web": "^0.6.1", 26 | "@pika/plugin-standard-pkg": "^0.6.1" 27 | }, 28 | "@pika/pack": { 29 | "pipeline": [ 30 | [ 31 | "@pika/plugin-standard-pkg" 32 | ], 33 | [ 34 | "@pika/plugin-build-web" 35 | ], 36 | [ 37 | "@pika/plugin-bundle-web", 38 | { 39 | "entrypoint": "unpkg" 40 | } 41 | ] 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/navs/src/bs-nav-item.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsNavItemCss = css` 5 | 6 | :host { 7 | margin-bottom: var(--nav-item-margin-bottom); 8 | } 9 | 10 | :host([show]) { 11 | --dropdown-nav-link-color: #fff; 12 | --dropdown-nav-link-hover-color: #fff; 13 | --dropdown-nav-link-background-color: #007bff; 14 | } 15 | `; 16 | -------------------------------------------------------------------------------- /packages/components/navs/src/bs-nav.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsNavCss } from './bs-nav.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsNav extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsNavCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-nav')) 23 | window.customElements.define('bs-nav', BsNav); 24 | -------------------------------------------------------------------------------- /packages/components/navs/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsNav } from './bs-nav.js'; 3 | export { BsNavLink } from './bs-nav-link.js'; 4 | export { BsNavItem } from './bs-nav-item.js'; -------------------------------------------------------------------------------- /packages/components/pagination/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/pagination", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 pagination component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "scripts": { 16 | "pika:build": "pika build" 17 | }, 18 | "publishConfig": { 19 | "access": "public" 20 | }, 21 | "dependencies": { 22 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 23 | "lit-element": "^2.2.1" 24 | }, 25 | "devDependencies": { 26 | "@pika/pack": "^0.5.0", 27 | "@pika/plugin-build-web": "^0.6.1", 28 | "@pika/plugin-bundle-web": "^0.6.1", 29 | "@pika/plugin-standard-pkg": "^0.6.1" 30 | }, 31 | "@pika/pack": { 32 | "pipeline": [ 33 | [ 34 | "@pika/plugin-standard-pkg" 35 | ], 36 | [ 37 | "@pika/plugin-build-web" 38 | ], 39 | [ 40 | "@pika/plugin-bundle-web", 41 | { 42 | "entrypoint": "unpkg" 43 | } 44 | ] 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-page-item.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsPageItemCss = css` 4 | 5 | :host(:first-child) ::slotted(bs-page-link) { 6 | margin-left: 0; 7 | border-top-left-radius: 0.25rem; 8 | border-bottom-left-radius: 0.25rem; 9 | } 10 | 11 | :host(:last-child) ::slotted(bs-page-link) { 12 | border-top-right-radius: 0.25rem; 13 | border-bottom-right-radius: 0.25rem; 14 | } 15 | 16 | :host([active]) ::slotted(bs-page-link) { 17 | z-index: 1; 18 | --bs-page-link-color: #fff; 19 | background-color: #007bff; 20 | border-color: #007bff; 21 | } 22 | 23 | :host([disabled]) ::slotted(bs-page-link) { 24 | --bs-page-link-color: #6c757d; 25 | pointer-events: none; 26 | cursor: auto; 27 | background-color: #fff; 28 | border-color: #dee2e6; 29 | } 30 | `; 31 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-page-item.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsPageItemCss } from './bs-page-item.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsPageItem extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | active: {type: Boolean, reflect: true}, 11 | disabled: {type: Boolean, reflect: true} 12 | }; 13 | } 14 | 15 | static get styles() { 16 | return [ 17 | BsContentRebootCss, 18 | BsPageItemCss 19 | ]; 20 | } 21 | 22 | render() { 23 | return html` 24 | 25 | `; 26 | } 27 | 28 | constructor() { 29 | super(); 30 | this.active = false; 31 | this.disabled = false; 32 | } 33 | }; 34 | 35 | if(!window.customElements.get('bs-page-item')) 36 | window.customElements.define('bs-page-item', BsPageItem); 37 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-page-link.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsPageLinkCss = css` 4 | 5 | :host { 6 | position: relative; 7 | display: block; 8 | padding: var(--bs-page-link-padding, 0.5rem 0.75rem); 9 | margin-left: -1px; 10 | line-height: var(--bs-page-link-line-height, 1.25); 11 | background-color: #fff; 12 | border: 1px solid #dee2e6; 13 | font-size: var(--bs-page-link-font-size); 14 | border-top-left-radius: var(--bs-page-link-radius-top-left); 15 | border-bottom-left-radius: var(--bs-page-link-radius-bottom-left); 16 | border-top-right-radius: var(--bs-page-link-radius-top-right); 17 | border-bottom-right-radius: var(--bs-page-link-radius-bottom-right); 18 | } 19 | 20 | :host a { 21 | color: var(--bs-page-link-color, #007bff); 22 | } 23 | 24 | :host(:hover) { 25 | z-index: 2; 26 | color: #0056b3; 27 | background-color: #e9ecef; 28 | border-color: #dee2e6; 29 | } 30 | 31 | :host(:hover) a { 32 | text-decoration: none; 33 | } 34 | 35 | :host(:focus) { 36 | z-index: 2; 37 | outline: 0; 38 | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); 39 | } 40 | 41 | :host(:not([disabled])) { 42 | cursor: pointer; 43 | } 44 | `; 45 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-page-link.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsPageLinkCss } from './bs-page-link.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsPageLink extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | href: String, 11 | target: String, 12 | disabled: {type: Boolean, reflect: true} 13 | }; 14 | } 15 | 16 | static get styles() { 17 | return [ 18 | BsContentRebootCss, 19 | BsPageLinkCss 20 | ]; 21 | } 22 | 23 | render() { 24 | return html` 25 | 26 | `; 27 | } 28 | 29 | constructor() { 30 | super(); 31 | this.href = ''; 32 | this.target = '_self'; 33 | this.disabled = false; 34 | } 35 | }; 36 | 37 | if(!window.customElements.get('bs-page-link')) 38 | window.customElements.define('bs-page-link', BsPageLink); 39 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-pagination.css.js: -------------------------------------------------------------------------------- 1 | import { css } from 'lit-element'; 2 | 3 | export const BsPaginationCss = css` 4 | 5 | :host { 6 | display: flex; 7 | padding-left: 0; 8 | list-style: none; 9 | border-radius: 0.25rem; 10 | } 11 | 12 | :host([large]) { 13 | --bs-page-link-padding: 0.75rem 1.5rem; 14 | --bs-page-link-font-size: 1.25rem; 15 | --bs-page-link-line-height: 1.5; 16 | } 17 | 18 | :host([large]) ::slotted(bs-page-item:first-child) { 19 | --bs-page-link-radius-top-left: 0.3rem; 20 | --bs-page-link-radius-bottom-left: 0.3rem; 21 | } 22 | 23 | :host([large]) ::slotted(bs-page-item:last-child) { 24 | --bs-page-link-radius-top-right: 0.3rem; 25 | --bs-page-link-radius-bottom-right: 0.3rem; 26 | } 27 | 28 | :host([small]) { 29 | --bs-page-link-padding: 0.25rem 0.5rem; 30 | --bs-page-link-font-size: 0.875rem; 31 | --bs-page-link-line-height: 1.5; 32 | } 33 | 34 | :host([small]) ::slotted(bs-page-item:first-child) { 35 | --bs-page-link-radius-top-left: 0.2rem; 36 | --bs-page-link-radius-bottom-left: 0.2rem; 37 | } 38 | 39 | :host([small]) ::slotted(bs-page-item:last-child) { 40 | --bs-page-link-radius-top-right: 0.2rem; 41 | --bs-page-link-radius-bottom-right: 0.2rem; 42 | } 43 | `; 44 | -------------------------------------------------------------------------------- /packages/components/pagination/src/bs-pagination.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsPaginationCss } from './bs-pagination.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsPagination extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | small: {type: Boolean, reflect: true}, 11 | large: {type: Boolean, reflect: true} 12 | }; 13 | } 14 | 15 | static get styles() { 16 | return [ 17 | BsContentRebootCss, 18 | BsPaginationCss 19 | ]; 20 | } 21 | 22 | render() { 23 | return html` 24 | 25 | `; 26 | } 27 | 28 | constructor() { 29 | super(); 30 | this.small = false; 31 | this.large = false; 32 | } 33 | }; 34 | 35 | if(!window.customElements.get('bs-pagination')) 36 | window.customElements.define('bs-pagination', BsPagination); 37 | -------------------------------------------------------------------------------- /packages/components/pagination/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsPageItemCss } from './bs-page-item.css.js'; 2 | export { BsPageItem } from './bs-page-item.js'; 3 | export { BsPageLinkCss } from './bs-page-link.css.js'; 4 | export { BsPageLink } from './bs-page-link.js'; 5 | export { BsPaginationCss } from './bs-pagination.css.js'; 6 | export { BsPagination } from './bs-pagination.js'; 7 | -------------------------------------------------------------------------------- /packages/components/progress/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/components/progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/progress", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 progress component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "scripts": { 19 | "pika:build": "pika build" 20 | }, 21 | "dependencies": { 22 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 23 | "lit-element": "^2.2.1" 24 | }, 25 | "devDependencies": { 26 | "@pika/pack": "^0.5.0", 27 | "@pika/plugin-build-web": "^0.6.1", 28 | "@pika/plugin-bundle-web": "^0.6.1", 29 | "@pika/plugin-standard-pkg": "^0.6.1" 30 | }, 31 | "@pika/pack": { 32 | "pipeline": [ 33 | [ 34 | "@pika/plugin-standard-pkg" 35 | ], 36 | [ 37 | "@pika/plugin-build-web" 38 | ], 39 | [ 40 | "@pika/plugin-bundle-web", 41 | { 42 | "entrypoint": "unpkg" 43 | } 44 | ] 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/components/progress/src/bs-progress-bar.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsProgressBarCss = css` 5 | 6 | :host { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | color: #fff; 11 | text-align: center; 12 | white-space: nowrap; 13 | background-color: #007bff; 14 | transition: width 0.6s ease; 15 | } 16 | 17 | @media screen and (prefers-reduced-motion: reduce) { 18 | :host { 19 | transition: none; 20 | } 21 | } 22 | 23 | :host([striped]) { 24 | background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 25 | background-size: 1rem 1rem; 26 | } 27 | 28 | :host([animated]) { 29 | -webkit-animation: progress-bar-stripes 1s linear infinite; 30 | animation: progress-bar-stripes 1s linear infinite; 31 | } 32 | 33 | @-webkit-keyframes progress-bar-stripes { 34 | from { 35 | background-position: 1rem 0; 36 | } 37 | to { 38 | background-position: 0 0; 39 | } 40 | } 41 | 42 | @keyframes progress-bar-stripes { 43 | from { 44 | background-position: 1rem 0; 45 | } 46 | to { 47 | background-position: 0 0; 48 | } 49 | } 50 | `; 51 | -------------------------------------------------------------------------------- /packages/components/progress/src/bs-progress-bar.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsProgressBarCss } from './bs-progress-bar.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsProgressBar extends LitElement { 7 | 8 | static get properties() { 9 | return { 10 | striped: {type: Boolean, reflect: true}, 11 | animated: {type: Boolean, reflect: true}, 12 | completed: {type: Number, reflect: true, attribute: 'completed'} 13 | }; 14 | } 15 | 16 | static get styles() { 17 | return [ 18 | BsContentRebootCss, 19 | BsProgressBarCss 20 | ]; 21 | } 22 | 23 | render() { 24 | return html` 25 | 26 | `; 27 | } 28 | 29 | constructor() { 30 | super(); 31 | this.striped = false; 32 | this.animated = false; 33 | this.completed = 0; 34 | } 35 | 36 | updated(changedProperties) { 37 | 38 | super.updated(); 39 | 40 | if (changedProperties.has('completed')) { 41 | this._percentCompletedChanged(); 42 | } 43 | } 44 | 45 | _percentCompletedChanged() { 46 | 47 | if(this.completed) { 48 | this.shadowRoot.host.style.width = `${this.completed}%`; 49 | } 50 | } 51 | }; 52 | 53 | if(!window.customElements.get('bs-progress-bar')) 54 | window.customElements.define('bs-progress-bar', BsProgressBar); 55 | -------------------------------------------------------------------------------- /packages/components/progress/src/bs-progress.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsProgressCss = css` 5 | 6 | :host { 7 | display: flex; 8 | height: 1rem; 9 | overflow: hidden; 10 | font-size: 0.75rem; 11 | background-color: #e9ecef; 12 | border-radius: 0.25rem; 13 | } 14 | `; 15 | -------------------------------------------------------------------------------- /packages/components/progress/src/bs-progress.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsProgressCss } from './bs-progress.css.js'; 4 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 5 | 6 | export class BsProgress extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsProgressCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-progress')) 23 | window.customElements.define('bs-progress', BsProgress); 24 | -------------------------------------------------------------------------------- /packages/components/progress/src/index.js: -------------------------------------------------------------------------------- 1 | export { BsProgressBarCss } from './bs-progress-bar.css.js'; 2 | export { BsProgressBar } from './bs-progress-bar.js'; 3 | export { BsProgressCss } from './bs-progress.css.js'; 4 | export { BsProgress } from './bs-progress.js'; 5 | -------------------------------------------------------------------------------- /packages/content/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/content/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/content", 3 | "version": "1.0.0-alpha.3", 4 | "description": "Bootstrap v4.1.3 content elements in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "dependencies": { 19 | "lit-element": "^2.2.1" 20 | }, 21 | "devDependencies": { 22 | "@pika/pack": "^0.5.0", 23 | "@pika/plugin-build-web": "^0.6.1", 24 | "@pika/plugin-bundle-web": "^0.6.1", 25 | "@pika/plugin-standard-pkg": "^0.6.1" 26 | }, 27 | "scripts": { 28 | "pika:build": "pika build" 29 | }, 30 | "@pika/pack": { 31 | "pipeline": [ 32 | [ 33 | "@pika/plugin-standard-pkg" 34 | ], 35 | [ 36 | "@pika/plugin-build-web" 37 | ], 38 | [ 39 | "@pika/plugin-bundle-web", 40 | { 41 | "entrypoint": "unpkg" 42 | } 43 | ] 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/content/src/bs-content-code.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsContentCodeCss = css` 5 | 6 | code { 7 | font-size: 87.5%; 8 | color: #e83e8c; 9 | word-break: break-word; 10 | } 11 | 12 | a > code { 13 | color: inherit; 14 | } 15 | 16 | kbd { 17 | padding: 0.2rem 0.4rem; 18 | font-size: 87.5%; 19 | color: #fff; 20 | background-color: #212529; 21 | border-radius: 0.2rem; 22 | } 23 | 24 | kbd kbd { 25 | padding: 0; 26 | font-size: 100%; 27 | font-weight: 700; 28 | } 29 | 30 | pre { 31 | display: block; 32 | font-size: 87.5%; 33 | color: #212529; 34 | } 35 | 36 | pre code { 37 | font-size: inherit; 38 | color: inherit; 39 | word-break: normal; 40 | } 41 | 42 | .pre-scrollable { 43 | max-height: 340px; 44 | overflow-y: scroll; 45 | } 46 | `; -------------------------------------------------------------------------------- /packages/content/src/bs-content-figures.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsContentFiguresCss = css` 5 | 6 | .figure { 7 | display: inline-block; 8 | } 9 | 10 | .figure-img { 11 | margin-bottom: 0.5rem; 12 | line-height: 1; 13 | } 14 | 15 | .figure-caption { 16 | font-size: 90%; 17 | color: #6c757d; 18 | } 19 | `; -------------------------------------------------------------------------------- /packages/content/src/bs-content-images.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsContentImageCss = css` 5 | 6 | .img-fluid { 7 | max-width: 100%; 8 | height: auto; 9 | } 10 | 11 | .img-thumbnail { 12 | padding: 0.25rem; 13 | background-color: #fff; 14 | border: 1px solid #dee2e6; 15 | border-radius: 0.25rem; 16 | max-width: 100%; 17 | height: auto; 18 | } 19 | `; -------------------------------------------------------------------------------- /packages/content/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsContentCodeCss } from './bs-content-code.css.js'; 3 | export { BsContenTableCss } from './bs-content-table.css.js'; 4 | export { BsContentImageCss } from './bs-content-images.css.js'; 5 | export { BsContentRebootCss } from './bs-content-reboot.css.js'; 6 | export { BsContentFiguresCss } from './bs-content-figures.css.js'; 7 | export { BsContentTypographyCss } from './bs-content-typography.css.js'; 8 | -------------------------------------------------------------------------------- /packages/layout/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/layout", 3 | "version": "1.0.0-alpha.4", 4 | "description": "Bootstrap v4.1.3 grid layout elements in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap/", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "dependencies": { 19 | "@lit-element-bootstrap/content": "^1.0.0-alpha.3", 20 | "lit-element": "^2.2.1" 21 | }, 22 | "devDependencies": { 23 | "@pika/pack": "^0.5.0", 24 | "@pika/plugin-build-web": "^0.6.1", 25 | "@pika/plugin-bundle-web": "^0.6.1", 26 | "@pika/plugin-standard-pkg": "^0.6.1" 27 | }, 28 | "scripts": { 29 | "pika:build": "pika build" 30 | }, 31 | "@pika/pack": { 32 | "pipeline": [ 33 | [ 34 | "@pika/plugin-standard-pkg" 35 | ], 36 | [ 37 | "@pika/plugin-build-web" 38 | ], 39 | [ 40 | "@pika/plugin-bundle-web", 41 | { 42 | "entrypoint": "unpkg" 43 | } 44 | ] 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/layout/src/bs-column.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | 5 | import { BsColumnExtraSmallCss } from './bs-column-xs.css.js'; 6 | import { BsColumnSmallCss } from './bs-column-sm.css.js'; 7 | import { BsColumnMediumCss } from './bs-column-md.css.js'; 8 | import { BsColumnLargeCss } from './bs-column-lg.css.js'; 9 | import { BsColumnExtraLargeCss } from './bs-column-xl.css.js'; 10 | 11 | export class BsColumn extends LitElement { 12 | 13 | static get styles() { 14 | return [ 15 | BsContentRebootCss, 16 | BsColumnExtraSmallCss, 17 | BsColumnSmallCss, 18 | BsColumnMediumCss, 19 | BsColumnLargeCss, 20 | BsColumnExtraLargeCss 21 | ]; 22 | } 23 | 24 | render() { 25 | return html` 26 | 27 | `; 28 | } 29 | }; 30 | 31 | if(!window.customElements.get('bs-column')) 32 | window.customElements.define('bs-column', BsColumn); 33 | -------------------------------------------------------------------------------- /packages/layout/src/bs-container.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsContainerCss = css` 5 | 6 | :host { 7 | width: 100%; 8 | display: block; 9 | padding-right: 15px; 10 | padding-left: 15px; 11 | margin-right: auto; 12 | margin-left: auto; 13 | } 14 | 15 | @media (min-width: 576px) { 16 | :host:not([fluid]) { 17 | max-width: 540px; 18 | } 19 | } 20 | 21 | @media (min-width: 768px) { 22 | :host:not([fluid]) { 23 | max-width: 720px; 24 | } 25 | } 26 | 27 | @media (min-width: 992px) { 28 | :host:not([fluid]) { 29 | max-width: 960px; 30 | } 31 | } 32 | 33 | @media (min-width: 1200px) { 34 | :host:not([fluid]) { 35 | max-width: 1140px; 36 | } 37 | } 38 | 39 | :host([fluid]) { 40 | width: 100%; 41 | display: block; 42 | padding-right: 15px; 43 | padding-left: 15px; 44 | margin-right: auto; 45 | margin-left: auto; 46 | } 47 | `; 48 | -------------------------------------------------------------------------------- /packages/layout/src/bs-container.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | import { BsContainerCss } from './bs-container.css.js'; 5 | 6 | export class BsContainer extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsContainerCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-container')) 23 | window.customElements.define('bs-container', BsContainer); 24 | 25 | -------------------------------------------------------------------------------- /packages/layout/src/bs-row.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsRowCss = css` 5 | 6 | :host { 7 | display: flex; 8 | flex-wrap: wrap; 9 | margin-right: -15px; 10 | margin-left: -15px; 11 | } 12 | 13 | :host([no-gutters]) { 14 | margin-right: 0; 15 | margin-left: 0; 16 | } 17 | 18 | :host([no-gutters]) ::slotted(*) { 19 | padding-right: 0; 20 | padding-left: 0; 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /packages/layout/src/bs-row.js: -------------------------------------------------------------------------------- 1 | 2 | import { LitElement, html } from 'lit-element'; 3 | import { BsContentRebootCss } from '@lit-element-bootstrap/content/bs-content-reboot.css.js'; 4 | import { BsRowCss } from './bs-row.css.js'; 5 | 6 | export class BsRow extends LitElement { 7 | 8 | static get styles() { 9 | return [ 10 | BsContentRebootCss, 11 | BsRowCss 12 | ]; 13 | } 14 | 15 | render() { 16 | return html` 17 | 18 | `; 19 | } 20 | }; 21 | 22 | if(!window.customElements.get('bs-row')) 23 | window.customElements.define('bs-row', BsRow); 24 | -------------------------------------------------------------------------------- /packages/layout/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsRow } from './bs-row.js'; 3 | export { BsRowCss } from './bs-row.css.js'; 4 | export { BsColumn } from './bs-column.js'; 5 | export { BsContainer } from './bs-container.js'; 6 | export { BsContainerCss } from './bs-container.css.js'; 7 | export { BsColumnExtraSmallCss } from './bs-column-xs.css.js'; 8 | export { BsColumnSmallCss } from './bs-column-sm.css.js'; 9 | export { BsColumnMediumCss } from './bs-column-md.css.js'; 10 | export { BsColumnLargeCss } from './bs-column-lg.css.js'; 11 | export { BsColumnExtraLargeCss } from './bs-column-xl.css.js'; 12 | -------------------------------------------------------------------------------- /packages/theme/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/theme", 3 | "version": "1.0.0-alpha.2", 4 | "description": "Bootstrap v4.1.3 theme element in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 13 | }, 14 | "license": "MIT", 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "dependencies": { 19 | "lit-element": "^2.2.1" 20 | }, 21 | "devDependencies": { 22 | "@pika/pack": "^0.5.0", 23 | "@pika/plugin-build-web": "^0.6.1", 24 | "@pika/plugin-bundle-web": "^0.6.1", 25 | "@pika/plugin-standard-pkg": "^0.6.1" 26 | }, 27 | "scripts": { 28 | "pika:build": "pika build" 29 | }, 30 | "@pika/pack": { 31 | "pipeline": [ 32 | [ 33 | "@pika/plugin-standard-pkg" 34 | ], 35 | [ 36 | "@pika/plugin-build-web" 37 | ], 38 | [ 39 | "@pika/plugin-bundle-web", 40 | { 41 | "entrypoint": "unpkg" 42 | } 43 | ] 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/theme/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { DefaultThemeCss } from './default-theme-css'; -------------------------------------------------------------------------------- /packages/utilities/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /pkg 3 | -------------------------------------------------------------------------------- /packages/utilities/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@lit-element-bootstrap/utilities", 3 | "version": "1.0.0-alpha.4", 4 | "description": "Bootstrap v4.1.3 css utilities component in LitElement", 5 | "main": "src/index.js", 6 | "module": "src/index.js", 7 | "type": "module", 8 | "author": "Nikolas Christou", 9 | "license": "MIT", 10 | "homepage": "https://github.com/nik-christou/lit-element-bootstrap", 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/nik-christou/lit-element-bootstrap" 14 | }, 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "dependencies": { 19 | "lit-element": "^2.2.1" 20 | }, 21 | "scripts": { 22 | "pika:build": "pika build" 23 | }, 24 | "@pika/pack": { 25 | "pipeline": [ 26 | [ 27 | "@pika/plugin-standard-pkg" 28 | ], 29 | [ 30 | "@pika/plugin-build-web" 31 | ], 32 | [ 33 | "@pika/plugin-bundle-web", 34 | { 35 | "entrypoint": "unpkg" 36 | } 37 | ] 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/utilities/src/bs-clearfix.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsClearfixCss = css` 5 | 6 | .clearfix::after { 7 | display: block; 8 | clear: both; 9 | content: ""; 10 | } 11 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-embed.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsEmbeddedCss = css` 5 | 6 | .embed-responsive { 7 | position: relative; 8 | display: block; 9 | width: 100%; 10 | padding: 0; 11 | overflow: hidden; 12 | } 13 | 14 | .embed-responsive::before { 15 | display: block; 16 | content: ""; 17 | } 18 | 19 | .embed-responsive .embed-responsive-item, 20 | .embed-responsive iframe, 21 | .embed-responsive embed, 22 | .embed-responsive object, 23 | .embed-responsive video { 24 | position: absolute; 25 | top: 0; 26 | bottom: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | border: 0; 31 | } 32 | 33 | .embed-responsive-21by9::before { 34 | padding-top: 42.857143%; 35 | } 36 | 37 | .embed-responsive-16by9::before { 38 | padding-top: 56.25%; 39 | } 40 | 41 | .embed-responsive-4by3::before { 42 | padding-top: 75%; 43 | } 44 | 45 | .embed-responsive-1by1::before { 46 | padding-top: 100%; 47 | } 48 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-flex-display.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsFlexDisplayCss = css` 5 | 6 | .d-flex { 7 | display: flex !important; 8 | } 9 | 10 | .d-inline-flex { 11 | display: inline-flex !important; 12 | } 13 | 14 | @media (min-width: 576px) { 15 | 16 | .d-sm-flex { 17 | display: flex !important; 18 | } 19 | 20 | .d-sm-inline-flex { 21 | display: inline-flex !important; 22 | } 23 | } 24 | 25 | @media (min-width: 768px) { 26 | 27 | .d-md-flex { 28 | display: flex !important; 29 | } 30 | 31 | .d-md-inline-flex { 32 | display: inline-flex !important; 33 | } 34 | } 35 | 36 | @media (min-width: 992px) { 37 | 38 | .d-lg-flex { 39 | display: flex !important; 40 | } 41 | 42 | .d-lg-inline-flex { 43 | display: inline-flex !important; 44 | } 45 | } 46 | 47 | @media (min-width: 1200px) { 48 | 49 | .d-xl-flex { 50 | display: flex !important; 51 | } 52 | 53 | .d-xl-inline-flex { 54 | display: inline-flex !important; 55 | } 56 | } 57 | 58 | @media print { 59 | 60 | .d-print-flex { 61 | display: flex !important; 62 | } 63 | 64 | .d-print-inline-flex { 65 | display: inline-flex !important; 66 | } 67 | } 68 | `; 69 | -------------------------------------------------------------------------------- /packages/utilities/src/bs-position.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsPositionCss = css` 5 | 6 | .position-static { 7 | position: static !important; 8 | } 9 | 10 | .position-relative { 11 | position: relative !important; 12 | } 13 | 14 | .position-absolute { 15 | position: absolute !important; 16 | } 17 | 18 | .position-fixed { 19 | position: fixed !important; 20 | } 21 | 22 | .position-sticky { 23 | position: -webkit-sticky !important; 24 | position: sticky !important; 25 | } 26 | 27 | .fixed-top { 28 | position: fixed; 29 | top: 0; 30 | right: 0; 31 | left: 0; 32 | z-index: 1030; 33 | } 34 | 35 | .fixed-bottom { 36 | position: fixed; 37 | right: 0; 38 | bottom: 0; 39 | left: 0; 40 | z-index: 1030; 41 | } 42 | 43 | @supports ((position: -webkit-sticky) or (position: sticky)) { 44 | .sticky-top { 45 | position: -webkit-sticky; 46 | position: sticky; 47 | top: 0; 48 | z-index: 1020; 49 | } 50 | } 51 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-screenreader.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsScreenreaderCss = css` 5 | 6 | .sr-only { 7 | position: absolute; 8 | width: 1px; 9 | height: 1px; 10 | padding: 0; 11 | overflow: hidden; 12 | clip: rect(0, 0, 0, 0); 13 | white-space: nowrap; 14 | border: 0; 15 | } 16 | 17 | .sr-only-focusable:active, 18 | .sr-only-focusable:focus { 19 | position: static; 20 | width: auto; 21 | height: auto; 22 | overflow: visible; 23 | clip: auto; 24 | white-space: normal; 25 | } 26 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-sizing.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsSizingCss = css` 5 | 6 | :host([w-25]), .w-25 { 7 | width: 25% !important; 8 | } 9 | 10 | :host([w-50]), .w-50 { 11 | width: 50% !important; 12 | } 13 | 14 | :host([w-75]), .w-75 { 15 | width: 75% !important; 16 | } 17 | 18 | :host([w-100]), .w-100 { 19 | width: 100% !important; 20 | } 21 | 22 | :host([w-auto]), .w-auto { 23 | width: auto !important; 24 | } 25 | 26 | :host([h-25]), .h-25 { 27 | height: 25% !important; 28 | } 29 | 30 | :host([h-50]), .h-50 { 31 | height: 50% !important; 32 | } 33 | 34 | :host([h-75]), .h-75 { 35 | height: 75% !important; 36 | } 37 | 38 | :host([h-100]), .h-100 { 39 | height: 100% !important; 40 | } 41 | 42 | :host([h-auto]), .h-auto { 43 | height: auto !important; 44 | } 45 | 46 | :host([mw-100]), .mw-100 { 47 | max-width: 100% !important; 48 | } 49 | 50 | :host([mh-100]), .mh-100 { 51 | max-height: 100% !important; 52 | } 53 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-vertical-align.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsVerticalAlignCss = css` 5 | 6 | .align-baseline { 7 | vertical-align: baseline !important; 8 | } 9 | 10 | .align-top { 11 | vertical-align: top !important; 12 | } 13 | 14 | .align-middle { 15 | vertical-align: middle !important; 16 | } 17 | 18 | .align-bottom { 19 | vertical-align: bottom !important; 20 | } 21 | 22 | .align-text-bottom { 23 | vertical-align: text-bottom !important; 24 | } 25 | 26 | .align-text-top { 27 | vertical-align: text-top !important; 28 | } 29 | `; -------------------------------------------------------------------------------- /packages/utilities/src/bs-visibility.css.js: -------------------------------------------------------------------------------- 1 | 2 | import { css } from 'lit-element'; 3 | 4 | export const BsVisibilityCss = css` 5 | 6 | .visible { 7 | visibility: visible !important; 8 | } 9 | 10 | .invisible { 11 | visibility: hidden !important; 12 | } 13 | `; -------------------------------------------------------------------------------- /packages/utilities/src/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { BsTextCss } from './bs-text.css.js'; 3 | export { BsFloatCss } from './bs-float.css.js'; 4 | export { BsSizingCss } from './bs-sizing.css.js'; 5 | export { BsBordersCss } from './bs-border.css.js'; 6 | export { BsEmbeddedCss } from './bs-embed.css.js'; 7 | export { BsDisplayCss } from './bs-display.css.js'; 8 | export { BsClearfixCss } from './bs-clearfix.css.js'; 9 | export { BsPositionCss } from './bs-position.css.js'; 10 | export { BsSpacingCss } from './bs-spacing.css.js'; 11 | export { BsTextColorCss } from './bs-text-colors.css.js'; 12 | export { BsVerticalAlignCss } from './bs-vertical-align.css.js'; 13 | export { BsVisibilityCss } from './bs-visibility.css.js'; 14 | export { BsBackgroundColorsCss } from './bs-bg-colors.css.js'; 15 | export { BsScreenreaderCss } from './bs-screenreader.css.js'; 16 | 17 | export { BsFlexWrapCss } from './bs-flex-wrap.css.js'; 18 | export { BsFlexOrderCss } from './bs-flex-order.css.js'; 19 | export { BsFlexOffsetCss } from './bs-flex-offset.css.js'; 20 | export { BsFlexDisplayCss } from './bs-flex-display.css.js'; 21 | export { BsFlexJustifyCss } from './bs-flex-justify.css.js'; 22 | export { BsFlexDirectionCss } from './bs-flex-direction.css.js'; 23 | export { BsFlexAlignSelfCss } from './bs-flex-align-self.css.js'; 24 | export { BsFlexAlignItemsCss } from './bs-flex-align-items.css.js'; 25 | export { BsFlexAlignContentCss } from './bs-flex-align-content.css.js'; 26 | --------------------------------------------------------------------------------