le-kit 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-CHzu3ydp.js → index-pT2cVC5w.js} +10 -4
- package/dist/cjs/index-pT2cVC5w.js.map +1 -0
- package/dist/cjs/index.cjs.js +4 -2
- package/dist/cjs/le-box.cjs.entry.js +4 -4
- package/dist/cjs/le-button_13.cjs.entry.js +204 -30
- package/dist/cjs/le-card.cjs.entry.js +4 -4
- package/dist/cjs/le-combobox.cjs.entry.js +3 -3
- package/dist/cjs/le-header-placeholder.cjs.entry.js +1 -1
- package/dist/cjs/le-kit.cjs.js +4 -2
- package/dist/cjs/le-kit.cjs.js.map +1 -1
- package/dist/cjs/le-multiselect.cjs.entry.js +3 -3
- package/dist/cjs/le-number-input.cjs.entry.js +4 -4
- package/dist/cjs/le-round-progress.cjs.entry.js +3 -3
- package/dist/cjs/le-segmented-control.cjs.entry.js +3 -3
- package/dist/cjs/le-stack.cjs.entry.js +4 -4
- package/dist/cjs/le-tab-bar.cjs.entry.js +3 -3
- package/dist/cjs/le-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/le-tab.cjs.entry.js +7 -4
- package/dist/cjs/le-tabs.cjs.entry.js +4 -4
- package/dist/cjs/le-tag.cjs.entry.js +3 -3
- package/dist/cjs/le-text.cjs.entry.js +4 -4
- package/dist/cjs/le-turntable.cjs.entry.js +3 -3
- package/dist/cjs/loader.cjs.js +3 -1
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{utils-CYOKcOW8.js → utils-ByTskwtC.js} +3 -3
- package/dist/cjs/{utils-CYOKcOW8.js.map → utils-ByTskwtC.js.map} +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/le-button/le-button.js +8 -6
- package/dist/collection/components/le-button/le-button.js.map +1 -1
- package/dist/collection/components/le-component/le-component.js +2 -0
- package/dist/collection/components/le-component/le-component.js.map +1 -1
- package/dist/collection/components/le-current-heading/le-current-heading.css +1 -0
- package/dist/collection/dist/components/assets/custom-elements.json +787 -791
- package/dist/components/assets/custom-elements.json +787 -791
- package/dist/components/le-box.js +14 -14
- package/dist/components/le-box.js.map +1 -1
- package/dist/components/le-button2.js +97 -89
- package/dist/components/le-button2.js.map +1 -1
- package/dist/components/le-card.js +14 -14
- package/dist/components/le-card.js.map +1 -1
- package/dist/components/le-collapse.js +15 -14
- package/dist/components/le-collapse.js.map +1 -1
- package/dist/components/le-combobox.js +14 -14
- package/dist/components/le-combobox.js.map +1 -1
- package/dist/components/le-current-heading.js +5 -5
- package/dist/components/le-current-heading.js.map +1 -1
- package/dist/components/le-dropdown-base2.js +6 -6
- package/dist/components/le-dropdown-base2.js.map +1 -1
- package/dist/components/le-header-placeholder.js +3 -3
- package/dist/components/le-header.js +16 -14
- package/dist/components/le-header.js.map +1 -1
- package/dist/components/le-multiselect.js +15 -15
- package/dist/components/le-multiselect.js.map +1 -1
- package/dist/components/le-number-input.js +14 -14
- package/dist/components/le-number-input.js.map +1 -1
- package/dist/components/le-popover2.js +168 -5
- package/dist/components/le-popover2.js.map +1 -1
- package/dist/components/le-round-progress.js +5 -5
- package/dist/components/le-round-progress.js.map +1 -1
- package/dist/components/le-scroll-progress.js +5 -5
- package/dist/components/le-scroll-progress.js.map +1 -1
- package/dist/components/le-segmented-control.js +15 -15
- package/dist/components/le-segmented-control.js.map +1 -1
- package/dist/components/le-stack.js +14 -14
- package/dist/components/le-stack.js.map +1 -1
- package/dist/components/le-tab-bar.js +15 -15
- package/dist/components/le-tab-bar.js.map +1 -1
- package/dist/components/le-tab-panel.js +14 -14
- package/dist/components/le-tab-panel.js.map +1 -1
- package/dist/components/le-tab2.js +17 -14
- package/dist/components/le-tab2.js.map +1 -1
- package/dist/components/le-tabs.js +15 -15
- package/dist/components/le-tabs.js.map +1 -1
- package/dist/components/le-tag2.js +14 -14
- package/dist/components/le-tag2.js.map +1 -1
- package/dist/components/le-text.js +14 -14
- package/dist/components/le-text.js.map +1 -1
- package/dist/components/le-turntable.js +5 -5
- package/dist/components/le-turntable.js.map +1 -1
- package/dist/docs.json +8 -8
- package/dist/esm/{index-hmBwv43R.js → index-CNv6tzAt.js} +10 -4
- package/dist/esm/index-CNv6tzAt.js.map +1 -0
- package/dist/esm/index.js +4 -2
- package/dist/esm/le-box.entry.js +4 -4
- package/dist/esm/le-box.entry.js.map +1 -1
- package/dist/esm/le-button_13.entry.js +204 -30
- package/dist/esm/le-card.entry.js +4 -4
- package/dist/esm/le-card.entry.js.map +1 -1
- package/dist/esm/le-combobox.entry.js +3 -3
- package/dist/esm/le-combobox.entry.js.map +1 -1
- package/dist/esm/le-header-placeholder.entry.js +1 -1
- package/dist/esm/le-kit.js +5 -3
- package/dist/esm/le-kit.js.map +1 -1
- package/dist/esm/le-multiselect.entry.js +3 -3
- package/dist/esm/le-multiselect.entry.js.map +1 -1
- package/dist/esm/le-number-input.entry.js +4 -4
- package/dist/esm/le-number-input.entry.js.map +1 -1
- package/dist/esm/le-round-progress.entry.js +3 -3
- package/dist/esm/le-round-progress.entry.js.map +1 -1
- package/dist/esm/le-segmented-control.entry.js +3 -3
- package/dist/esm/le-segmented-control.entry.js.map +1 -1
- package/dist/esm/le-stack.entry.js +4 -4
- package/dist/esm/le-stack.entry.js.map +1 -1
- package/dist/esm/le-tab-bar.entry.js +3 -3
- package/dist/esm/le-tab-bar.entry.js.map +1 -1
- package/dist/esm/le-tab-panel.entry.js +3 -3
- package/dist/esm/le-tab-panel.entry.js.map +1 -1
- package/dist/esm/le-tab.entry.js +7 -4
- package/dist/esm/le-tab.entry.js.map +1 -1
- package/dist/esm/le-tabs.entry.js +4 -4
- package/dist/esm/le-tabs.entry.js.map +1 -1
- package/dist/esm/le-tag.entry.js +3 -3
- package/dist/esm/le-tag.entry.js.map +1 -1
- package/dist/esm/le-text.entry.js +4 -4
- package/dist/esm/le-text.entry.js.map +1 -1
- package/dist/esm/le-turntable.entry.js +3 -3
- package/dist/esm/le-turntable.entry.js.map +1 -1
- package/dist/esm/loader.js +4 -2
- package/dist/esm/{utils-DRTFlnxz.js → utils-BzC2tvPX.js} +3 -3
- package/dist/esm/{utils-DRTFlnxz.js.map → utils-BzC2tvPX.js.map} +1 -1
- package/dist/le-kit/dist/components/assets/custom-elements.json +787 -791
- package/dist/le-kit/index.esm.js +1 -1
- package/dist/le-kit/le-kit.esm.js +1 -1
- package/dist/le-kit/le-kit.esm.js.map +1 -1
- package/dist/le-kit/p-269fb44f.entry.js +2 -0
- package/dist/le-kit/p-269fb44f.entry.js.map +1 -0
- package/dist/le-kit/p-31c3649c.entry.js +2 -0
- package/dist/le-kit/p-31c3649c.entry.js.map +1 -0
- package/dist/le-kit/p-3829f572.entry.js +2 -0
- package/dist/le-kit/p-3829f572.entry.js.map +1 -0
- package/dist/le-kit/p-629c5e13.entry.js +2 -0
- package/dist/le-kit/p-629c5e13.entry.js.map +1 -0
- package/dist/le-kit/p-684adc9f.entry.js +2 -0
- package/dist/le-kit/p-684adc9f.entry.js.map +1 -0
- package/dist/le-kit/p-7d316315.entry.js +2 -0
- package/dist/le-kit/p-7d316315.entry.js.map +1 -0
- package/dist/le-kit/p-8a78110f.entry.js +2 -0
- package/dist/le-kit/p-8a78110f.entry.js.map +1 -0
- package/dist/le-kit/p-8afe6862.entry.js +2 -0
- package/dist/le-kit/p-8afe6862.entry.js.map +1 -0
- package/dist/le-kit/p-95cf203e.entry.js +2 -0
- package/dist/le-kit/p-95cf203e.entry.js.map +1 -0
- package/dist/le-kit/p-9ba2bfb3.entry.js +2 -0
- package/dist/le-kit/p-9ba2bfb3.entry.js.map +1 -0
- package/dist/le-kit/{p-hmBwv43R.js → p-CNv6tzAt.js} +2 -2
- package/dist/le-kit/p-CNv6tzAt.js.map +1 -0
- package/dist/le-kit/{p-txKmCJHv.js → p-W4FbLlut.js} +2 -2
- package/dist/le-kit/{p-txKmCJHv.js.map → p-W4FbLlut.js.map} +1 -1
- package/dist/le-kit/p-aaec0169.entry.js +2 -0
- package/dist/le-kit/p-aaec0169.entry.js.map +1 -0
- package/dist/le-kit/p-b3531106.entry.js +2 -0
- package/dist/le-kit/p-b3531106.entry.js.map +1 -0
- package/dist/le-kit/p-c83a1255.entry.js +2 -0
- package/dist/le-kit/p-c83a1255.entry.js.map +1 -0
- package/dist/le-kit/p-d2a5d431.entry.js +2 -0
- package/dist/le-kit/p-d2a5d431.entry.js.map +1 -0
- package/dist/le-kit/p-deef1f4d.entry.js +2 -0
- package/dist/le-kit/p-deef1f4d.entry.js.map +1 -0
- package/dist/le-kit/p-e07d4b78.entry.js +2 -0
- package/dist/le-kit/p-e4618b36.entry.js +2 -0
- package/dist/le-kit/p-e4618b36.entry.js.map +1 -0
- package/dist/types/components/le-button/le-button.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/stencil-public-runtime.d.ts +43 -0
- package/package.json +1 -1
- package/dist/cjs/index-CHzu3ydp.js.map +0 -1
- package/dist/cjs/le-box.entry.cjs.js.map +0 -1
- package/dist/cjs/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-card.entry.cjs.js.map +0 -1
- package/dist/cjs/le-combobox.entry.cjs.js.map +0 -1
- package/dist/cjs/le-header-placeholder.entry.cjs.js.map +0 -1
- package/dist/cjs/le-multiselect.entry.cjs.js.map +0 -1
- package/dist/cjs/le-number-input.entry.cjs.js.map +0 -1
- package/dist/cjs/le-round-progress.entry.cjs.js.map +0 -1
- package/dist/cjs/le-segmented-control.entry.cjs.js.map +0 -1
- package/dist/cjs/le-stack.entry.cjs.js.map +0 -1
- package/dist/cjs/le-tab-bar.entry.cjs.js.map +0 -1
- package/dist/cjs/le-tab-panel.entry.cjs.js.map +0 -1
- package/dist/cjs/le-tab.entry.cjs.js.map +0 -1
- package/dist/cjs/le-tabs.entry.cjs.js.map +0 -1
- package/dist/cjs/le-tag.entry.cjs.js.map +0 -1
- package/dist/cjs/le-text.entry.cjs.js.map +0 -1
- package/dist/cjs/le-turntable.entry.cjs.js.map +0 -1
- package/dist/esm/index-hmBwv43R.js.map +0 -1
- package/dist/esm/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.js.map +0 -1
- package/dist/le-kit/le-box.entry.esm.js.map +0 -1
- package/dist/le-kit/le-button.le-checkbox.le-collapse.le-component.le-current-heading.le-dropdown-base.le-header.le-popover.le-popup.le-scroll-progress.le-select.le-slot.le-string-input.entry.esm.js.map +0 -1
- package/dist/le-kit/le-card.entry.esm.js.map +0 -1
- package/dist/le-kit/le-combobox.entry.esm.js.map +0 -1
- package/dist/le-kit/le-header-placeholder.entry.esm.js.map +0 -1
- package/dist/le-kit/le-multiselect.entry.esm.js.map +0 -1
- package/dist/le-kit/le-number-input.entry.esm.js.map +0 -1
- package/dist/le-kit/le-round-progress.entry.esm.js.map +0 -1
- package/dist/le-kit/le-segmented-control.entry.esm.js.map +0 -1
- package/dist/le-kit/le-stack.entry.esm.js.map +0 -1
- package/dist/le-kit/le-tab-bar.entry.esm.js.map +0 -1
- package/dist/le-kit/le-tab-panel.entry.esm.js.map +0 -1
- package/dist/le-kit/le-tab.entry.esm.js.map +0 -1
- package/dist/le-kit/le-tabs.entry.esm.js.map +0 -1
- package/dist/le-kit/le-tag.entry.esm.js.map +0 -1
- package/dist/le-kit/le-text.entry.esm.js.map +0 -1
- package/dist/le-kit/le-turntable.entry.esm.js.map +0 -1
- package/dist/le-kit/p-13a4dc1d.entry.js +0 -2
- package/dist/le-kit/p-13a4dc1d.entry.js.map +0 -1
- package/dist/le-kit/p-1a9e65d0.entry.js +0 -2
- package/dist/le-kit/p-1a9e65d0.entry.js.map +0 -1
- package/dist/le-kit/p-2708dc65.entry.js +0 -2
- package/dist/le-kit/p-2708dc65.entry.js.map +0 -1
- package/dist/le-kit/p-2b96a5bd.entry.js +0 -2
- package/dist/le-kit/p-32cbb683.entry.js +0 -2
- package/dist/le-kit/p-32cbb683.entry.js.map +0 -1
- package/dist/le-kit/p-476e1886.entry.js +0 -2
- package/dist/le-kit/p-476e1886.entry.js.map +0 -1
- package/dist/le-kit/p-67d702f9.entry.js +0 -2
- package/dist/le-kit/p-67d702f9.entry.js.map +0 -1
- package/dist/le-kit/p-6884e3e8.entry.js +0 -2
- package/dist/le-kit/p-6884e3e8.entry.js.map +0 -1
- package/dist/le-kit/p-704ad5e0.entry.js +0 -2
- package/dist/le-kit/p-704ad5e0.entry.js.map +0 -1
- package/dist/le-kit/p-88f9aa40.entry.js +0 -2
- package/dist/le-kit/p-88f9aa40.entry.js.map +0 -1
- package/dist/le-kit/p-8dd8a487.entry.js +0 -2
- package/dist/le-kit/p-8dd8a487.entry.js.map +0 -1
- package/dist/le-kit/p-97b7658a.entry.js +0 -2
- package/dist/le-kit/p-97b7658a.entry.js.map +0 -1
- package/dist/le-kit/p-c0925e92.entry.js +0 -2
- package/dist/le-kit/p-c0925e92.entry.js.map +0 -1
- package/dist/le-kit/p-c2494a0d.entry.js +0 -2
- package/dist/le-kit/p-c2494a0d.entry.js.map +0 -1
- package/dist/le-kit/p-ded51018.entry.js +0 -2
- package/dist/le-kit/p-ded51018.entry.js.map +0 -1
- package/dist/le-kit/p-e3db7974.entry.js +0 -2
- package/dist/le-kit/p-e3db7974.entry.js.map +0 -1
- package/dist/le-kit/p-f9b03aec.entry.js +0 -2
- package/dist/le-kit/p-f9b03aec.entry.js.map +0 -1
- package/dist/le-kit/p-hmBwv43R.js.map +0 -1
- /package/dist/le-kit/{p-2b96a5bd.entry.js.map → p-e07d4b78.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-card.entry.js","sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n display: block;\n \n /* Component-specific tokens that map to global tokens */\n --le-card-bg: var(--le-color-surface);\n --le-card-border-radius: var(--le-radius-lg);\n --le-card-shadow: var(--le-shadow-md);\n --le-card-shadow-elevated: var(--le-shadow-lg);\n --le-card-shadow-hover: var(--le-shadow-xl);\n --le-card-padding: var(--le-space-md);\n --le-card-border-color: var(--le-color-border);\n --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n background: var(--le-card-bg);\n border-radius: var(--le-card-border-radius);\n overflow: hidden;\n color: var(--le-color-text);\n box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n border: 1px solid var(--le-card-border-color);\n box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n cursor: pointer;\n transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n transform: translateY(-2px);\n box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n outline: 2px solid var(--le-color-border-focus);\n outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n padding: var(--le-card-padding);\n padding-bottom: 0;\n}\n\n.card-header:empty {\n display: none;\n}\n\n.card-content {\n padding: var(--le-card-padding);\n}\n\n.card-footer {\n padding: var(--le-card-padding);\n padding-top: 0;\n}\n\n.card-footer:empty {\n display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-card',\n styleUrl: 'le-card.default.css',\n shadow: true,\n})\nexport class LeCard {\n @Element() el: HTMLElement;\n\n /**\n * Card variant style\n * @allowedValues default | outlined | elevated\n */\n @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n /**\n * Whether the card is interactive (clickable)\n */\n @Prop() interactive: boolean = false;\n\n render() {\n return (\n <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n <div class=\"card\" part=\"card\">\n <div class=\"card-header\" part=\"header\">\n <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n <slot name=\"header\"></slot>\n </le-slot>\n </div>\n\n <div class=\"card-content\" part=\"content\">\n <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n <slot></slot>\n </le-slot>\n </div>\n\n <div class=\"card-footer\" part=\"footer\">\n <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n <slot name=\"footer\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,
|
|
1
|
+
{"version":3,"file":"le-card.entry.js","sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n display: block;\n \n /* Component-specific tokens that map to global tokens */\n --le-card-bg: var(--le-color-surface);\n --le-card-border-radius: var(--le-radius-lg);\n --le-card-shadow: var(--le-shadow-md);\n --le-card-shadow-elevated: var(--le-shadow-lg);\n --le-card-shadow-hover: var(--le-shadow-xl);\n --le-card-padding: var(--le-space-md);\n --le-card-border-color: var(--le-color-border);\n --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n background: var(--le-card-bg);\n border-radius: var(--le-card-border-radius);\n overflow: hidden;\n color: var(--le-color-text);\n box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n border: 1px solid var(--le-card-border-color);\n box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n cursor: pointer;\n transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n transform: translateY(-2px);\n box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n outline: 2px solid var(--le-color-border-focus);\n outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n padding: var(--le-card-padding);\n padding-bottom: 0;\n}\n\n.card-header:empty {\n display: none;\n}\n\n.card-content {\n padding: var(--le-card-padding);\n}\n\n.card-footer {\n padding: var(--le-card-padding);\n padding-top: 0;\n}\n\n.card-footer:empty {\n display: none;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-card',\n styleUrl: 'le-card.default.css',\n shadow: true,\n})\nexport class LeCard {\n @Element() el: HTMLElement;\n\n /**\n * Card variant style\n * @allowedValues default | outlined | elevated\n */\n @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n /**\n * Whether the card is interactive (clickable)\n */\n @Prop() interactive: boolean = false;\n\n render() {\n return (\n <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n <div class=\"card\" part=\"card\">\n <div class=\"card-header\" part=\"header\">\n <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n <slot name=\"header\"></slot>\n </le-slot>\n </div>\n\n <div class=\"card-content\" part=\"content\">\n <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n <slot></slot>\n </le-slot>\n </div>\n\n <div class=\"card-footer\" part=\"footer\">\n <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n <slot name=\"footer\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2wCAA2wC,CAAC;;MCgC/xC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
|
|
2
2
|
|
|
3
|
-
const leComboboxCss =
|
|
3
|
+
const leComboboxCss = () => `:host{display:inline-block;min-width:200px;--le-combobox-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.combobox-trigger{display:flex;align-items:center;width:100%;background:var(--le-combobox-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);border-radius:var(--le-combobox-border-radius, 0.375rem);transition:border-color 0.15s ease, box-shadow 0.15s ease}.combobox-trigger:hover:not(.is-disabled),:host(:focus-within) .combobox-trigger:not(.is-disabled){border-color:var(--le-combobox-border-color)}.combobox-trigger:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.combobox-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.combobox-input{flex:1;border:none;outline:none}.combobox-input::part(container){border:none}.combobox-input::part(container):focus-within{outline:none !important}.combobox-input::placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.combobox-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.combobox-input:disabled{cursor:not-allowed}.combobox-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;margin-right:0.25rem;color:var(--le-color-primary, #3b82f6);background:transparent;border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.combobox-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.combobox-clear svg{width:0.875rem;height:0.875rem}.combobox-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:100%;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.combobox-arrow svg{width:1rem;height:1rem}.combobox-trigger.is-open .combobox-arrow{transform:rotate(180deg)}:host([size='small']) .combobox-trigger{--le-combobox-height:2rem}:host([size='small']) .combobox-input{--le-combobox-padding-x:0.5rem;--le-combobox-font-size:0.75rem}:host([size='large']) .combobox-trigger{--le-combobox-height:3rem}:host([size='large']) .combobox-input{--le-combobox-padding-x:1rem;--le-combobox-font-size:1rem}`;
|
|
4
4
|
|
|
5
5
|
const LeCombobox = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -229,7 +229,7 @@ const LeCombobox = class {
|
|
|
229
229
|
"options": ["handleOptionsChange"]
|
|
230
230
|
}; }
|
|
231
231
|
};
|
|
232
|
-
LeCombobox.style = leComboboxCss;
|
|
232
|
+
LeCombobox.style = leComboboxCss();
|
|
233
233
|
|
|
234
234
|
export { LeCombobox as le_combobox };
|
|
235
235
|
//# sourceMappingURL=le-combobox.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-combobox.entry.js","sources":["src/components/le-combobox/le-combobox.css?tag=le-combobox&encapsulation=shadow","src/components/le-combobox/le-combobox.tsx"],"sourcesContent":["/**\n * le-combobox component styles\n *\n * CSS Custom Properties:\n * --le-combobox-padding-x\n * --le-combobox-font-size\n * --le-combobox-border-radius\n * --le-combobox-border-color\n * --le-combobox-bg\n * --le-combobox-color\n */\n\n:host {\n display: inline-block;\n min-width: 200px;\n --le-combobox-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n/* Trigger wrapper */\n.combobox-trigger {\n display: flex;\n align-items: center;\n width: 100%;\n background: var(--le-combobox-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);\n border-radius: var(--le-combobox-border-radius, 0.375rem);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.combobox-trigger:hover:not(.is-disabled),\n:host(:focus-within) .combobox-trigger:not(.is-disabled) {\n border-color: var(--le-combobox-border-color);\n}\n\n.combobox-trigger:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.combobox-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n/* Input */\n.combobox-input {\n flex: 1;\n border: none;\n outline: none;\n}\n.combobox-input::part(container) {\n border: none;\n}\n.combobox-input::part(container):focus-within {\n outline: none !important;\n}\n\n.combobox-input::placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n.combobox-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n.combobox-input:disabled {\n cursor: not-allowed;\n}\n\n/* Clear button */\n.combobox-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n margin-right: 0.25rem;\n color: var(--le-color-primary, #3b82f6);\n background: transparent;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.combobox-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.combobox-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.combobox-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 2rem;\n height: 100%;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.combobox-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.combobox-trigger.is-open .combobox-arrow {\n transform: rotate(180deg);\n}\n\n/* Size variants */\n:host([size='small']) .combobox-trigger {\n --le-combobox-height: 2rem;\n}\n\n:host([size='small']) .combobox-input {\n --le-combobox-padding-x: 0.5rem;\n --le-combobox-font-size: 0.75rem;\n}\n\n:host([size='large']) .combobox-trigger {\n --le-combobox-height: 3rem;\n}\n\n:host([size='large']) .combobox-input {\n --le-combobox-padding-x: 1rem;\n --le-combobox-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n * placeholder=\"Search...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n * placeholder=\"Type or select...\"\n * allow-custom\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n tag: 'le-combobox',\n styleUrl: 'le-combobox.css',\n shadow: true,\n})\nexport class LeCombobox {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected value.\n */\n @Prop({ mutable: true }) value?: LeOptionValue;\n\n /**\n * Placeholder text for the input.\n */\n @Prop() placeholder: string = 'Type to search...';\n\n /**\n * Whether the combobox is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the combobox.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether to allow custom values not in the options list.\n */\n @Prop() allowCustom: boolean = false;\n\n /**\n * Minimum characters before showing filtered results.\n */\n @Prop() minSearchLength: number = 0;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected value changes.\n */\n @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n /**\n * Emitted when the input value changes (for custom values).\n */\n @Event() leInput: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @Listen('click', { target: 'window' })\n handleWindowClick(event: MouseEvent) {\n if (!this.el.contains(event.target as Node)) {\n this.dropdownEl?.hide();\n }\n }\n\n @State() private inputValue: string = '';\n @State() private selectedOption?: LeOption;\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOption();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private updateSelectedOption() {\n if (this.value !== undefined) {\n this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n if (this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (this.allowCustom) {\n this.inputValue = this.value.toString();\n }\n } else {\n this.selectedOption = undefined;\n this.inputValue = '';\n }\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query || query.length < this.minSearchLength) return true;\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n this.value = e.detail.value;\n this.selectedOption = e.detail.option;\n this.inputValue = e.detail.option.label;\n this.leChange.emit(e.detail);\n };\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.leClose.emit();\n\n // If custom values not allowed, reset input to selected option\n if (!this.allowCustom && this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (!this.allowCustom && !this.selectedOption) {\n this.inputValue = '';\n }\n };\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.inputValue = target.value;\n\n // Emit input event for custom values\n if (this.allowCustom) {\n this.leInput.emit({ value: this.inputValue });\n }\n\n // Open dropdown when typing\n if (!this.open && this.inputValue.length >= this.minSearchLength) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputFocus = () => {\n if (!this.disabled) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.dropdownEl?.show();\n }\n break;\n\n case 'Enter':\n if (this.allowCustom && this.inputValue && !this.open) {\n // Accept custom value\n this.value = this.inputValue;\n this.leChange.emit({\n value: this.inputValue,\n option: { label: this.inputValue, value: this.inputValue },\n });\n }\n break;\n\n case 'Escape':\n if (this.open) {\n this.dropdownEl?.hide();\n }\n break;\n }\n };\n\n private handleClear = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = undefined;\n this.selectedOption = undefined;\n this.inputValue = '';\n this.inputEl?.focus();\n this.leChange.emit({\n value: '',\n option: { label: '', value: '' },\n });\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Focuses the input element.\n */\n @Method()\n async focusInput() {\n this.inputEl?.focus();\n }\n\n render() {\n const hasValue = this.inputValue.length > 0;\n\n return (\n <le-component component=\"le-combobox\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.parsedOptions}\n value={this.value}\n disabled={this.disabled}\n filterFn={this.filterOption}\n filterQuery={this.inputValue}\n emptyText={this.emptyText}\n fullWidth={this.fullWidth}\n closeOnClickOutside={false}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n <le-string-input\n mode=\"default\"\n hideDescription={true}\n inputRef={el => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox-input\"\n value={this.inputValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n onInput={this.handleInputChange}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleInputKeyDown}\n />\n {hasValue && !this.disabled && (\n <button\n type=\"button\"\n class=\"combobox-clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"combobox-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </le-dropdown-base>\n\n {/* Hidden input for form submission */}\n {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,mvEAAmvE;;MC6C5vE,UAAU,GAAA,MAAA;;;;;;;;;AAGrB;;AAEG;IACK,OAAO,GAAwB,EAAE;AAEzC;;AAEG;AACsB,IAAA,KAAK;AAE9B;;AAEG;IACK,WAAW,GAAW,mBAAmB;AAEjD;;AAEG;IACsB,QAAQ,GAAY,KAAK;AAElD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACsB,IAAI,GAAiC,QAAQ;AAEtE;;AAEG;IACK,WAAW,GAAY,KAAK;AAEpC;;AAEG;IACK,eAAe,GAAW,CAAC;AAEnC;;AAEG;IACK,SAAS,GAAW,kBAAkB;AAE9C;;AAEG;IACqC,IAAI,GAAY,KAAK;AAE7D;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,MAAM;AAEf;;AAEG;AACM,IAAA,OAAO;AAGhB,IAAA,iBAAiB,CAAC,KAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AAC3C,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;;IAIV,UAAU,GAAW,EAAE;AACvB,IAAA,cAAc;AAEvB,IAAA,UAAU;AACV,IAAA,OAAO;IAGf,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;;IAI7B,mBAAmB,GAAA;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG7B,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;;AAG7B,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;AACpC,YAAA,IAAI;gBACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;AAC/B,YAAA,MAAM;AACN,gBAAA,OAAO,EAAE;;;QAGb,OAAO,IAAI,CAAC,OAAO;;IAGb,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;;AACtC,iBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;;;aAEpC;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,SAAS;AAC/B,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;;AAIhB,IAAA,YAAY,GAAG,CAAC,MAAgB,EAAE,KAAa,KAAa;QAClE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AAAE,YAAA,OAAO,IAAI;AAC9D,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE;QACvC,QACE,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;AAChD,aAAC,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC;AAEtE,KAAC;AAEO,IAAA,kBAAkB,GAAG,CAAC,CAAoC,KAAI;QACpE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC3B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM;QACrC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC9B,KAAC;IAEO,kBAAkB,GAAG,MAAK;AAChC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;QAGnB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;;aACtC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AACpD,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAExB,KAAC;AAEO,IAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;AACvC,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK;;AAG9B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;;;AAI/C,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE;AAChE,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAE3B,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAE3B,KAAC;AAEO,IAAA,kBAAkB,GAAG,CAAC,CAAgB,KAAI;QAChD,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,oBAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;gBAEzB;AAEF,YAAA,KAAK,OAAO;AACV,gBAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;AAErD,oBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU;AAC5B,oBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;wBACjB,KAAK,EAAE,IAAI,CAAC,UAAU;AACtB,wBAAA,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;AAC3D,qBAAA,CAAC;;gBAEJ;AAEF,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,oBAAA,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;gBAEzB;;AAEN,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,CAAa,KAAI;QACtC,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,QAAA,IAAI,CAAC,cAAc,GAAG,SAAS;AAC/B,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,QAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;AACjC,SAAA,CAAC;AACJ,KAAC;AAED;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE;;AAG/B;;AAEG;AAEH,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;;IAGvB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QAE3C,QACE,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,SAAS,EAAC,aAAa,EAAA,EACnC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,mBAAmB,EAAE,KAAK,EAC1B,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,gBAAgB,EAAE,IAAI,CAAC,kBAAkB,EACzC,iBAAiB,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAE3C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,EAAA,EAC3E,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,SAAS,EACd,eAAe,EAAE,IAAI,EACrB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,SAAS,EAAA,eAAA,EACR,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EACzB,mBAAA,EAAA,MAAM,EACxB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,CAAA,EACD,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EACd,YAAA,EAAA,OAAO,EAClB,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACzE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oBAAoB,EAAG,CAAA,CAC3B,CACC,CACV,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAA,EACzE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,cAAc,GAAG,CACrB,CACD,CACH,CACW,EAGlB,IAAI,CAAC,IAAI,IAAI,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,CAAI,CAC9E;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"le-combobox.entry.js","sources":["src/components/le-combobox/le-combobox.css?tag=le-combobox&encapsulation=shadow","src/components/le-combobox/le-combobox.tsx"],"sourcesContent":["/**\n * le-combobox component styles\n *\n * CSS Custom Properties:\n * --le-combobox-padding-x\n * --le-combobox-font-size\n * --le-combobox-border-radius\n * --le-combobox-border-color\n * --le-combobox-bg\n * --le-combobox-color\n */\n\n:host {\n display: inline-block;\n min-width: 200px;\n --le-combobox-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n:host([full-width]) {\n width: 100%;\n}\n\n/* Trigger wrapper */\n.combobox-trigger {\n display: flex;\n align-items: center;\n width: 100%;\n background: var(--le-combobox-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);\n border-radius: var(--le-combobox-border-radius, 0.375rem);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.combobox-trigger:hover:not(.is-disabled),\n:host(:focus-within) .combobox-trigger:not(.is-disabled) {\n border-color: var(--le-combobox-border-color);\n}\n\n.combobox-trigger:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.combobox-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n/* Input */\n.combobox-input {\n flex: 1;\n border: none;\n outline: none;\n}\n.combobox-input::part(container) {\n border: none;\n}\n.combobox-input::part(container):focus-within {\n outline: none !important;\n}\n\n.combobox-input::placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n.combobox-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n.combobox-input:disabled {\n cursor: not-allowed;\n}\n\n/* Clear button */\n.combobox-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n margin-right: 0.25rem;\n color: var(--le-color-primary, #3b82f6);\n background: transparent;\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.combobox-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.combobox-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.combobox-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 2rem;\n height: 100%;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.combobox-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.combobox-trigger.is-open .combobox-arrow {\n transform: rotate(180deg);\n}\n\n/* Size variants */\n:host([size='small']) .combobox-trigger {\n --le-combobox-height: 2rem;\n}\n\n:host([size='small']) .combobox-input {\n --le-combobox-padding-x: 0.5rem;\n --le-combobox-font-size: 0.75rem;\n}\n\n:host([size='large']) .combobox-trigger {\n --le-combobox-height: 3rem;\n}\n\n:host([size='large']) .combobox-input {\n --le-combobox-padding-x: 1rem;\n --le-combobox-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n Listen,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A combobox component with searchable dropdown.\n *\n * Combines a text input with a dropdown list, allowing users to\n * filter options by typing or select from the list.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic combobox\n * ```html\n * <le-combobox\n * placeholder=\"Search...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-combobox>\n * ```\n *\n * @example Allow custom values\n * ```html\n * <le-combobox\n * placeholder=\"Type or select...\"\n * allow-custom\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-combobox>\n * ```\n */\n@Component({\n tag: 'le-combobox',\n styleUrl: 'le-combobox.css',\n shadow: true,\n})\nexport class LeCombobox {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected value.\n */\n @Prop({ mutable: true }) value?: LeOptionValue;\n\n /**\n * Placeholder text for the input.\n */\n @Prop() placeholder: string = 'Type to search...';\n\n /**\n * Whether the combobox is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the combobox.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Whether to allow custom values not in the options list.\n */\n @Prop() allowCustom: boolean = false;\n\n /**\n * Minimum characters before showing filtered results.\n */\n @Prop() minSearchLength: number = 0;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected value changes.\n */\n @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n /**\n * Emitted when the input value changes (for custom values).\n */\n @Event() leInput: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @Listen('click', { target: 'window' })\n handleWindowClick(event: MouseEvent) {\n if (!this.el.contains(event.target as Node)) {\n this.dropdownEl?.hide();\n }\n }\n\n @State() private inputValue: string = '';\n @State() private selectedOption?: LeOption;\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOption();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private updateSelectedOption() {\n if (this.value !== undefined) {\n this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n if (this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (this.allowCustom) {\n this.inputValue = this.value.toString();\n }\n } else {\n this.selectedOption = undefined;\n this.inputValue = '';\n }\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query || query.length < this.minSearchLength) return true;\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n this.value = e.detail.value;\n this.selectedOption = e.detail.option;\n this.inputValue = e.detail.option.label;\n this.leChange.emit(e.detail);\n };\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.leClose.emit();\n\n // If custom values not allowed, reset input to selected option\n if (!this.allowCustom && this.selectedOption) {\n this.inputValue = this.selectedOption.label;\n } else if (!this.allowCustom && !this.selectedOption) {\n this.inputValue = '';\n }\n };\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.inputValue = target.value;\n\n // Emit input event for custom values\n if (this.allowCustom) {\n this.leInput.emit({ value: this.inputValue });\n }\n\n // Open dropdown when typing\n if (!this.open && this.inputValue.length >= this.minSearchLength) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputFocus = () => {\n if (!this.disabled) {\n this.dropdownEl?.show();\n }\n };\n\n private handleInputKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!this.open) {\n this.dropdownEl?.show();\n }\n break;\n\n case 'Enter':\n if (this.allowCustom && this.inputValue && !this.open) {\n // Accept custom value\n this.value = this.inputValue;\n this.leChange.emit({\n value: this.inputValue,\n option: { label: this.inputValue, value: this.inputValue },\n });\n }\n break;\n\n case 'Escape':\n if (this.open) {\n this.dropdownEl?.hide();\n }\n break;\n }\n };\n\n private handleClear = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = undefined;\n this.selectedOption = undefined;\n this.inputValue = '';\n this.inputEl?.focus();\n this.leChange.emit({\n value: '',\n option: { label: '', value: '' },\n });\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Focuses the input element.\n */\n @Method()\n async focusInput() {\n this.inputEl?.focus();\n }\n\n render() {\n const hasValue = this.inputValue.length > 0;\n\n return (\n <le-component component=\"le-combobox\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.parsedOptions}\n value={this.value}\n disabled={this.disabled}\n filterFn={this.filterOption}\n filterQuery={this.inputValue}\n emptyText={this.emptyText}\n fullWidth={this.fullWidth}\n closeOnClickOutside={false}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div slot=\"trigger\" class={{ 'combobox-trigger': true, 'is-open': this.open }}>\n <le-string-input\n mode=\"default\"\n hideDescription={true}\n inputRef={el => (this.inputEl = el)}\n type=\"text\"\n class=\"combobox-input\"\n value={this.inputValue}\n placeholder={this.placeholder}\n disabled={this.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-autocomplete=\"list\"\n onInput={this.handleInputChange}\n onFocus={this.handleInputFocus}\n onKeyDown={this.handleInputKeyDown}\n />\n {hasValue && !this.disabled && (\n <button\n type=\"button\"\n class=\"combobox-clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"combobox-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </le-dropdown-base>\n\n {/* Hidden input for form submission */}\n {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
package/dist/esm/le-kit.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CNv6tzAt.js';
|
|
2
|
+
export { s as setNonce } from './index-CNv6tzAt.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
|
-
Stencil Client Patch Browser v4.
|
|
5
|
+
Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
var patchBrowser = () => {
|
|
@@ -19,3 +19,5 @@ patchBrowser().then(async (options) => {
|
|
|
19
19
|
return bootstrapLazy([["le-button_13",[[769,"le-collapse",{"open":[1540],"scrollDown":[516,"scroll-down"],"noFading":[516,"no-fading"],"collapseOnHeaderShrink":[516,"collapse-on-header-shrink"],"headerShrunk":[32]},[[8,"leHeaderShrinkChange","handleHeaderShrink"]],{"open":["onOpenChange"],"headerShrunk":["onDrivenStateChange"]}],[769,"le-header",{"isStatic":[516,"static"],"sticky":[516],"fixed":[516],"revealOnScroll":[513,"reveal-on-scroll"],"shrinkOffset":[513,"shrink-offset"],"expandOnHover":[516,"expand-on-hover"],"revealed":[32],"shrunk":[32],"placeholderHeight":[32],"hoverActive":[32]},[[9,"scroll","onWindowScroll"],[9,"resize","onWindowResize"]],{"revealOnScroll":["onBehaviorPropsChange"],"shrinkOffset":["onBehaviorPropsChange"],"fixed":["onBehaviorPropsChange"],"sticky":["onBehaviorPropsChange"],"isStatic":["onBehaviorPropsChange"]}],[769,"le-current-heading",{"selector":[1],"activeText":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"selector":["onSelectorChange"]}],[769,"le-scroll-progress",{"trackScrollProgress":[513,"track-scroll-progress"],"progress":[32]},[[9,"scroll","onScroll"],[9,"resize","onResize"]],{"trackScrollProgress":["onTrackChange"]}],[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-multiselect",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-segmented-control",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-tab-bar",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-combobox",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-number-input",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-header-placeholder",[[256,"le-header-placeholder"]]],["le-round-progress",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-tab",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
//# sourceMappingURL=le-kit.js.map
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=le-kit.js.map
|
package/dist/esm/le-kit.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-kit.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.
|
|
1
|
+
{"version":3,"file":"le-kit.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
|
|
2
2
|
|
|
3
|
-
const leMultiselectCss =
|
|
3
|
+
const leMultiselectCss = () => `:host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}`;
|
|
4
4
|
|
|
5
5
|
const LeMultiselect = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -298,7 +298,7 @@ const LeMultiselect = class {
|
|
|
298
298
|
"showSelectAll": ["handleShowSelectAllChange"]
|
|
299
299
|
}; }
|
|
300
300
|
};
|
|
301
|
-
LeMultiselect.style = leMultiselectCss;
|
|
301
|
+
LeMultiselect.style = leMultiselectCss();
|
|
302
302
|
|
|
303
303
|
export { LeMultiselect as le_multiselect };
|
|
304
304
|
//# sourceMappingURL=le-multiselect.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n display: inline-block;\n min-width: 250px;\n\n --le-multiselect-min-height: 0;\n --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n width: 100%;\n min-height: var(--le-multiselect-min-height);\n padding: var(--le-multiselect-padding);\n line-height: var(--le-line-height-tight);\n background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n border-radius: var(--le-multiselect-border-radius, 0.375rem);\n cursor: pointer;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n:host([full-width]) {\n width: 100%;\n}\n\n.multiselect-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n flex: 1;\n min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: transparent;\n color: var(--le-color-primary, #3b82f6);\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1rem;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n outline: none !important;\n}\n.search-input {\n --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.75rem;\n color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n --le-multiselect-min-height: 2rem;\n --le-multiselect-padding: 0.25rem 0.375rem;\n --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n --le-multiselect-min-height: 3rem;\n --le-multiselect-padding: 0.5rem 0.625rem;\n --le-multiselect-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n} from '@stencil/core';\nimport {\n LeOption,\n LeOptionValue,\n LeMultiOptionSelectDetail,\n LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n * placeholder=\"Select options...\"\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n * max-selections=\"3\"\n * options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n * searchable\n * placeholder=\"Search and select...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n tag: 'le-multiselect',\n styleUrl: 'le-multiselect.css',\n shadow: true,\n})\nexport class LeMultiselect {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected values.\n */\n @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n /**\n * Placeholder text when no options are selected.\n */\n @Prop() placeholder: string = 'Select options...';\n\n /**\n * Whether the multiselect is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the multiselect.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Maximum number of selections allowed.\n */\n @Prop() maxSelections?: number;\n\n /**\n * Labels for the \"Select All\" option.\n */\n @State() private selectAllLabel: string = 'Select All';\n @State() private deselectAllLabel: string = 'Deselect All';\n\n /**\n * Whether to show a \"Select All\" option.\n * Also accepts a string or array of strings to customize the label(s).\n */\n @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n /**\n * Whether the input is searchable.\n */\n @Prop() searchable: boolean = false;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected values change.\n */\n @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @State() private selectedOptions: LeOption[] = [];\n @State() private searchQuery: string = '';\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('showSelectAll')\n handleShowSelectAllChange(newValue: boolean | string | string[]) {\n if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n this.showSelectAll = false;\n } else if (typeof newValue === 'boolean') {\n this.showSelectAll = newValue;\n } else if (Array.isArray(newValue)) {\n this.showSelectAll = true;\n this.selectAllLabel = newValue[0];\n this.deselectAllLabel = newValue[1] || newValue[0];\n } else if (typeof newValue === 'string') {\n this.showSelectAll = true;\n try {\n const parsed = JSON.parse(newValue);\n if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n this.selectAllLabel = parsed[0];\n this.deselectAllLabel = parsed[1] || parsed[0];\n } else {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n } catch {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n }\n }\n\n componentWillLoad() {\n this.updateSelectedOptions();\n this.handleShowSelectAllChange(this.showSelectAll);\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private get effectiveOptions(): LeOption[] {\n let options = [...this.parsedOptions];\n\n // Add \"Select All\" option if enabled\n if (this.showSelectAll && options.length > 0) {\n const allSelected =\n this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n options = [\n {\n label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n value: '__select_all__',\n iconStart: allSelected ? '✕' : '⇣',\n },\n ...options,\n ];\n }\n\n return options;\n }\n\n private updateSelectedOptions() {\n const valueArray = Array.isArray(this.value) ? this.value : [];\n this.selectedOptions = this.parsedOptions.filter(opt =>\n valueArray.includes(opt.value ?? opt.label),\n );\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query) return true;\n // Always show \"Select All\" option\n if (option.value === '__select_all__') return true;\n\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n const { value } = e.detail;\n\n const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n if (enabledOptions.length === 0) return;\n\n // Handle \"Select All\" option\n if (value === '__select_all__') {\n if (this.selectedOptions.length === enabledOptions.length) {\n // Deselect all\n this.value = [];\n } else {\n // Select all (respect maxSelections)\n const selectableOptions = this.maxSelections\n ? enabledOptions.slice(0, this.maxSelections)\n : enabledOptions;\n this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n }\n this.emitChange();\n return;\n }\n\n const isSelected = this.value.includes(value);\n\n if (isSelected) {\n // Remove from selection\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n } else {\n // Add to selection (if not at max)\n if (this.maxSelections && this.value.length >= this.maxSelections) {\n return; // Don't add more\n }\n this.value = [...this.value, value];\n }\n\n this.emitChange();\n\n // Clear search after szelection\n this.searchQuery = '';\n };\n\n private emitChange() {\n this.leChange.emit({\n values: this.value,\n options: this.selectedOptions,\n });\n }\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n\n // Focus search input if searchable\n if (this.searchable) {\n setTimeout(() => {\n this.inputEl?.focus();\n }, 50);\n }\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.searchQuery = '';\n this.leClose.emit();\n };\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.dropdownEl?.toggle();\n }\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault();\n this.dropdownEl?.show();\n }\n };\n\n private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n e.stopPropagation();\n const value = option.value ?? option.label;\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n this.emitChange();\n };\n\n private handleSearchInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchQuery = target.value;\n };\n\n private handleClearAll = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Clears all selections.\n */\n @Method()\n async clearSelection() {\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n }\n\n private renderTags() {\n if (this.selectedOptions.length === 0) {\n return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n }\n\n return (\n <div class=\"multiselect-tags\">\n {this.selectedOptions.map(option => (\n <le-tag\n key={option.value ?? option.label}\n label={option.label}\n icon={option.iconStart}\n size={this.size === 'large' ? 'medium' : 'small'}\n dismissible\n disabled={this.disabled}\n onLeDismiss={e => this.handleTagDismiss(option, e)}\n mode=\"default\"\n />\n ))}\n </div>\n );\n }\n\n render() {\n const hasSelections = this.selectedOptions.length > 0;\n const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n return (\n <le-component component=\"le-multiselect\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.effectiveOptions}\n value={this.value}\n multiple={true}\n disabled={this.disabled}\n filterFn={this.searchable ? this.filterOption : undefined}\n filterQuery={this.searchQuery}\n emptyText={this.emptyText}\n showCheckboxes={true}\n fullWidth={this.fullWidth}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div\n slot=\"trigger\"\n class={{\n 'multiselect-trigger': true,\n 'has-selections': hasSelections,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n }}\n tabIndex={this.disabled ? -1 : 0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {this.renderTags()}\n\n <div class=\"multiselect-actions\">\n {hasSelections && !this.disabled && (\n <button\n type=\"button\"\n class=\"multiselect-clear\"\n onClick={this.handleClearAll}\n aria-label=\"Clear all\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"multiselect-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </div>\n\n {/* Search input shown in dropdown header */}\n {this.searchable && this.open && (\n <div class=\"multiselect-search\" slot=\"header\">\n <le-string-input\n mode=\"default\"\n inputRef={el => (this.inputEl = el)}\n class=\"search-input\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchInput}\n />\n </div>\n )}\n </le-dropdown-base>\n\n {/* Hidden inputs for form submission */}\n {this.name &&\n this.value.map(val => (\n <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n ))}\n\n {/* Status message */}\n {atMaxSelections && (\n <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n )}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n display: inline-block;\n min-width: 250px;\n\n --le-multiselect-min-height: 0;\n --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n width: 100%;\n min-height: var(--le-multiselect-min-height);\n padding: var(--le-multiselect-padding);\n line-height: var(--le-line-height-tight);\n background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n border-radius: var(--le-multiselect-border-radius, 0.375rem);\n cursor: pointer;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n:host([full-width]) {\n width: 100%;\n}\n\n.multiselect-trigger.is-open {\n border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n cursor: not-allowed;\n background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n flex: 1;\n min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n background: transparent;\n color: var(--le-color-primary, #3b82f6);\n border: none;\n border-radius: 0.25rem;\n cursor: pointer;\n opacity: 0.6;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n opacity: 1;\n background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1rem;\n color: var(--le-color-primary, #3b82f6);\n transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n width: 1rem;\n height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n outline: none !important;\n}\n.search-input {\n --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.75rem;\n color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n --le-multiselect-min-height: 2rem;\n --le-multiselect-padding: 0.25rem 0.375rem;\n --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n --le-multiselect-min-height: 3rem;\n --le-multiselect-padding: 0.5rem 0.625rem;\n --le-multiselect-font-size: 1rem;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Method,\n Element,\n Watch,\n h,\n} from '@stencil/core';\nimport {\n LeOption,\n LeOptionValue,\n LeMultiOptionSelectDetail,\n LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n * placeholder=\"Select options...\"\n * options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n * max-selections=\"3\"\n * options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n * searchable\n * placeholder=\"Search and select...\"\n * options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n tag: 'le-multiselect',\n styleUrl: 'le-multiselect.css',\n shadow: true,\n})\nexport class LeMultiselect {\n @Element() el: HTMLElement;\n\n /**\n * The options to display in the dropdown.\n */\n @Prop() options: LeOption[] | string = [];\n\n /**\n * The currently selected values.\n */\n @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n /**\n * Placeholder text when no options are selected.\n */\n @Prop() placeholder: string = 'Select options...';\n\n /**\n * Whether the multiselect is disabled.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether selection is required.\n */\n @Prop() required: boolean = false;\n\n /**\n * Name attribute for form submission.\n */\n @Prop() name?: string;\n\n /**\n * Whether the multiselect should take full width of its container.\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /**\n * Size variant of the multiselect.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Maximum number of selections allowed.\n */\n @Prop() maxSelections?: number;\n\n /**\n * Labels for the \"Select All\" option.\n */\n @State() private selectAllLabel: string = 'Select All';\n @State() private deselectAllLabel: string = 'Deselect All';\n\n /**\n * Whether to show a \"Select All\" option.\n * Also accepts a string or array of strings to customize the label(s).\n */\n @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n /**\n * Whether the input is searchable.\n */\n @Prop() searchable: boolean = false;\n\n /**\n * Text to show when no options match the search.\n */\n @Prop() emptyText: string = 'No results found';\n\n /**\n * Whether the dropdown is currently open.\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Emitted when the selected values change.\n */\n @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n /**\n * Emitted when the dropdown opens.\n */\n @Event() leOpen: EventEmitter<void>;\n\n /**\n * Emitted when the dropdown closes.\n */\n @Event() leClose: EventEmitter<void>;\n\n @State() private selectedOptions: LeOption[] = [];\n @State() private searchQuery: string = '';\n\n private dropdownEl?: HTMLLeDropdownBaseElement;\n private inputEl?: HTMLInputElement;\n\n @Watch('value')\n handleValueChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('options')\n handleOptionsChange() {\n this.updateSelectedOptions();\n }\n\n @Watch('showSelectAll')\n handleShowSelectAllChange(newValue: boolean | string | string[]) {\n if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n this.showSelectAll = false;\n } else if (typeof newValue === 'boolean') {\n this.showSelectAll = newValue;\n } else if (Array.isArray(newValue)) {\n this.showSelectAll = true;\n this.selectAllLabel = newValue[0];\n this.deselectAllLabel = newValue[1] || newValue[0];\n } else if (typeof newValue === 'string') {\n this.showSelectAll = true;\n try {\n const parsed = JSON.parse(newValue);\n if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n this.selectAllLabel = parsed[0];\n this.deselectAllLabel = parsed[1] || parsed[0];\n } else {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n } catch {\n this.selectAllLabel = newValue;\n this.deselectAllLabel = newValue;\n }\n }\n }\n\n componentWillLoad() {\n this.updateSelectedOptions();\n this.handleShowSelectAllChange(this.showSelectAll);\n }\n\n private get parsedOptions(): LeOption[] {\n if (typeof this.options === 'string') {\n try {\n return JSON.parse(this.options);\n } catch {\n return [];\n }\n }\n return this.options;\n }\n\n private get effectiveOptions(): LeOption[] {\n let options = [...this.parsedOptions];\n\n // Add \"Select All\" option if enabled\n if (this.showSelectAll && options.length > 0) {\n const allSelected =\n this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n options = [\n {\n label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n value: '__select_all__',\n iconStart: allSelected ? '✕' : '⇣',\n },\n ...options,\n ];\n }\n\n return options;\n }\n\n private updateSelectedOptions() {\n const valueArray = Array.isArray(this.value) ? this.value : [];\n this.selectedOptions = this.parsedOptions.filter(opt =>\n valueArray.includes(opt.value ?? opt.label),\n );\n }\n\n private filterOption = (option: LeOption, query: string): boolean => {\n if (!query) return true;\n // Always show \"Select All\" option\n if (option.value === '__select_all__') return true;\n\n const searchLower = query.toLowerCase();\n return (\n option.label.toLowerCase().includes(searchLower) ||\n (option.description?.toLowerCase().includes(searchLower) ?? false)\n );\n };\n\n private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n const { value } = e.detail;\n\n const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n if (enabledOptions.length === 0) return;\n\n // Handle \"Select All\" option\n if (value === '__select_all__') {\n if (this.selectedOptions.length === enabledOptions.length) {\n // Deselect all\n this.value = [];\n } else {\n // Select all (respect maxSelections)\n const selectableOptions = this.maxSelections\n ? enabledOptions.slice(0, this.maxSelections)\n : enabledOptions;\n this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n }\n this.emitChange();\n return;\n }\n\n const isSelected = this.value.includes(value);\n\n if (isSelected) {\n // Remove from selection\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n } else {\n // Add to selection (if not at max)\n if (this.maxSelections && this.value.length >= this.maxSelections) {\n return; // Don't add more\n }\n this.value = [...this.value, value];\n }\n\n this.emitChange();\n\n // Clear search after szelection\n this.searchQuery = '';\n };\n\n private emitChange() {\n this.leChange.emit({\n values: this.value,\n options: this.selectedOptions,\n });\n }\n\n private handleDropdownOpen = () => {\n this.open = true;\n this.leOpen.emit();\n\n // Focus search input if searchable\n if (this.searchable) {\n setTimeout(() => {\n this.inputEl?.focus();\n }, 50);\n }\n };\n\n private handleDropdownClose = () => {\n this.open = false;\n this.searchQuery = '';\n this.leClose.emit();\n };\n\n private handleTriggerClick = () => {\n if (!this.disabled) {\n this.dropdownEl?.toggle();\n }\n };\n\n private handleTriggerKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault();\n this.dropdownEl?.show();\n }\n };\n\n private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n e.stopPropagation();\n const value = option.value ?? option.label;\n this.value = this.value.filter(v => v !== value);\n this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n this.emitChange();\n };\n\n private handleSearchInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n this.searchQuery = target.value;\n };\n\n private handleClearAll = (e: MouseEvent) => {\n e.stopPropagation();\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n };\n\n /**\n * Opens the dropdown.\n */\n @Method()\n async showDropdown() {\n await this.dropdownEl?.show();\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async hideDropdown() {\n await this.dropdownEl?.hide();\n }\n\n /**\n * Clears all selections.\n */\n @Method()\n async clearSelection() {\n this.value = [];\n this.selectedOptions = [];\n this.emitChange();\n }\n\n private renderTags() {\n if (this.selectedOptions.length === 0) {\n return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n }\n\n return (\n <div class=\"multiselect-tags\">\n {this.selectedOptions.map(option => (\n <le-tag\n key={option.value ?? option.label}\n label={option.label}\n icon={option.iconStart}\n size={this.size === 'large' ? 'medium' : 'small'}\n dismissible\n disabled={this.disabled}\n onLeDismiss={e => this.handleTagDismiss(option, e)}\n mode=\"default\"\n />\n ))}\n </div>\n );\n }\n\n render() {\n const hasSelections = this.selectedOptions.length > 0;\n const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n return (\n <le-component component=\"le-multiselect\">\n <le-dropdown-base\n ref={el => (this.dropdownEl = el)}\n options={this.effectiveOptions}\n value={this.value}\n multiple={true}\n disabled={this.disabled}\n filterFn={this.searchable ? this.filterOption : undefined}\n filterQuery={this.searchQuery}\n emptyText={this.emptyText}\n showCheckboxes={true}\n fullWidth={this.fullWidth}\n onLeOptionSelect={this.handleOptionSelect}\n onLeDropdownOpen={this.handleDropdownOpen}\n onLeDropdownClose={this.handleDropdownClose}\n >\n <div\n slot=\"trigger\"\n class={{\n 'multiselect-trigger': true,\n 'has-selections': hasSelections,\n 'is-open': this.open,\n 'is-disabled': this.disabled,\n }}\n tabIndex={this.disabled ? -1 : 0}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n >\n {this.renderTags()}\n\n <div class=\"multiselect-actions\">\n {hasSelections && !this.disabled && (\n <button\n type=\"button\"\n class=\"multiselect-clear\"\n onClick={this.handleClearAll}\n aria-label=\"Clear all\"\n tabIndex={-1}\n >\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </button>\n )}\n <span class=\"multiselect-arrow\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" />\n </svg>\n </span>\n </div>\n </div>\n\n {/* Search input shown in dropdown header */}\n {this.searchable && this.open && (\n <div class=\"multiselect-search\" slot=\"header\">\n <le-string-input\n mode=\"default\"\n inputRef={el => (this.inputEl = el)}\n class=\"search-input\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchInput}\n />\n </div>\n )}\n </le-dropdown-base>\n\n {/* Hidden inputs for form submission */}\n {this.name &&\n this.value.map(val => (\n <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n ))}\n\n {/* Status message */}\n {atMaxSelections && (\n <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n )}\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-
|
|
2
|
-
import { c as classnames } from './utils-
|
|
1
|
+
import { r as registerInstance, d as createEvent, c as getElement, h } from './index-CNv6tzAt.js';
|
|
2
|
+
import { c as classnames } from './utils-BzC2tvPX.js';
|
|
3
3
|
|
|
4
|
-
const leNumberInputCss =
|
|
4
|
+
const leNumberInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}`;
|
|
5
5
|
|
|
6
6
|
const LeNumberInput = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -194,7 +194,7 @@ const LeNumberInput = class {
|
|
|
194
194
|
"value": ["valueChanged"]
|
|
195
195
|
}; }
|
|
196
196
|
};
|
|
197
|
-
LeNumberInput.style = leNumberInputCss;
|
|
197
|
+
LeNumberInput.style = leNumberInputCss();
|
|
198
198
|
|
|
199
199
|
export { LeNumberInput as le_number_input };
|
|
200
200
|
//# sourceMappingURL=le-number-input.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n display: block;\n --le-input-bg: var(--le-color-surface, #ffffff);\n --le-input-color: var(--le-color-text-primary, #333333);\n --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n --le-input-radius: var(--le-radius-sm, 4px);\n --le-input-padding: 2px 6px;\n --le-input-height: 1.5rem;\n --le-input-label-color: var(--le-color-text-primary, #333333);\n --le-input-desc-color: var(--le-color-text-secondary, #666666);\n --le-input-placeholder-color: #999999;\n --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.le-input-label {\n display: block;\n font-size: 0.9em;\n font-weight: 500;\n color: var(--le-input-label-color);\n margin-bottom: 2px;\n}\n\n.le-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: var(--le-input-bg);\n border: var(--le-input-border);\n border-radius: var(--le-input-radius);\n transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n opacity: 0.6;\n background-color: rgba(0,0,0,0.05);\n cursor: not-allowed;\n}\n\ninput {\n flex: 1;\n width: 100%;\n height: calc(var(--le-input-height) - 2px);\n padding: var(--le-input-padding);\n border: none;\n background: transparent;\n color: var(--le-input-color);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n text-align: right; /* Aligned to end */\n -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput::placeholder {\n color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--le-color-border, #cccccc);\n height: 100%;\n}\n\n.le-input-control-btn {\n --le-button-border-radius: 0;\n --le-button-padding-x: 0;\n --le-button-padding-y: 0;\n --le-button-small-font-size: 9.5px;\n --le-button-small-padding: 0 0.2rem;\n --le-button-icon-aspect-ratio: 2;\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50%;\n cursor: pointer;\n background: none;\n border: none;\n color: var(--le-input-desc-color);\n font-size: 10px;\n line-height: 1;\n}\n\n.le-input-control-btn:hover {\n background-color: rgba(0,0,0,0.05);\n color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n font-size: 0.85em;\n color: var(--le-input-desc-color);\n margin-top: 2px;\n}\n\n.le-input-error {\n font-size: 0.85em;\n color: var(--le-input-error-color);\n margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n tag: 'le-number-input',\n styleUrl: 'le-number-input.css',\n shadow: true,\n})\nexport class LeNumberInput {\n @Element() el: HTMLElement;\n\n /**\n * The value of the input\n */\n @Prop({ mutable: true, reflect: true }) value: number;\n\n /**\n * The name of the input\n */\n @Prop() name: string;\n\n /**\n * Label for the input\n */\n @Prop() label: string;\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string;\n\n /**\n * Minimum allowed value\n */\n @Prop() min?: number;\n\n /**\n * Maximum allowed value\n */\n @Prop() max?: number;\n\n /**\n * Step value for increment/decrement\n */\n @Prop() step: number = 1;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Icon for the start icon\n */\n @Prop() iconStart?: string;\n\n /**\n * Whether to show the spinner controls\n */\n @Prop() showSpinners: boolean = true;\n\n /**\n * External ID for linking with external systems\n */\n @Prop() externalId: string;\n\n /**\n * Internal validation state\n */\n @State() private isValid: boolean = true;\n @State() private validationMessage: string = '';\n\n /**\n * Emitted when the value changes (on blur or Enter)\n */\n @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n /**\n * Emitted when the input value changes (on keystroke/spin)\n */\n @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n @Watch('value')\n valueChanged() {\n this.validate();\n }\n\n private validate() {\n if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n this.isValid = false;\n this.validationMessage = 'This field is required';\n return;\n }\n\n if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n if (this.min !== undefined && this.value < this.min) {\n this.isValid = false;\n this.validationMessage = `Value must be at least ${this.min}`;\n return;\n }\n if (this.max !== undefined && this.value > this.max) {\n this.isValid = false;\n this.validationMessage = `Value must be at most ${this.max}`;\n return;\n }\n }\n\n this.isValid = true;\n this.validationMessage = '';\n }\n\n private emitChange() {\n this.leChange.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private emitInput() {\n this.leInput.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private updateValue(newValue: number) {\n if (this.disabled || this.readonly) return;\n \n // Round to avoid floating point errors\n const precision = this.step.toString().split('.')[1]?.length || 0;\n const rounded = parseFloat(newValue.toFixed(precision));\n \n this.value = rounded;\n this.validate();\n this.emitInput();\n }\n\n private handleInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const val = parseFloat(input.value);\n \n if (input.value === '') {\n this.value = undefined;\n } else if (!isNaN(val)) {\n this.value = val;\n }\n \n this.validate();\n this.emitInput();\n };\n\n private handleChange = () => {\n this.validate();\n this.emitChange();\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (this.disabled || this.readonly) return;\n\n let multiplier = 1;\n if (ev.shiftKey) multiplier = 10;\n if (ev.altKey) multiplier = 0.1;\n\n const current = this.value || 0;\n\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.updateValue(current + (this.step * multiplier));\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.updateValue(current - (this.step * multiplier));\n }\n };\n\n private handleWheel = (ev: WheelEvent) => {\n if (this.disabled || this.readonly) return;\n // Only handle if input is focused to prevent accidental scrolling\n if (document.activeElement !== ev.target) return;\n\n ev.preventDefault();\n const current = this.value || 0;\n \n if (ev.deltaY < 0) {\n this.updateValue(current + this.step);\n } else {\n this.updateValue(current - this.step);\n }\n };\n\n private increment = (ev: Event) => {\n ev.preventDefault(); // Prevent focus loss\n const current = this.value || 0;\n this.updateValue(current + this.step);\n // Trigger change event for buttons as they are \"final\" actions usually\n this.emitChange();\n };\n\n private decrement = (ev: Event) => {\n ev.preventDefault();\n const current = this.value || 0;\n this.updateValue(current - this.step);\n this.emitChange();\n };\n\n render() {\n return (\n <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n <div class=\"le-input-wrapper\">\n {this.label && (\n <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n )}\n \n <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n {this.iconStart && (\n <span class=\"icon-start\">{this.iconStart}</span>\n )}\n \n <input\n id={this.name}\n type=\"number\"\n name={this.name}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onKeyDown={this.handleKeyDown}\n onWheel={this.handleWheel}\n />\n \n {this.showSpinners && (\n <div class=\"le-input-controls\">\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\"\n icon-only\n class=\"le-input-control-btn\" \n onClick={this.increment}\n disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↑</span>\n </le-button>\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\" \n icon-only \n class=\"le-input-control-btn\" \n onClick={this.decrement}\n disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↓</span>\n </le-button>\n </div>\n )}\n </div>\n\n {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n <div class=\"le-input-description\">\n <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n <slot name=\"description\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n display: block;\n --le-input-bg: var(--le-color-surface, #ffffff);\n --le-input-color: var(--le-color-text-primary, #333333);\n --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n --le-input-radius: var(--le-radius-sm, 4px);\n --le-input-padding: 2px 6px;\n --le-input-height: 1.5rem;\n --le-input-label-color: var(--le-color-text-primary, #333333);\n --le-input-desc-color: var(--le-color-text-secondary, #666666);\n --le-input-placeholder-color: #999999;\n --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.le-input-label {\n display: block;\n font-size: 0.9em;\n font-weight: 500;\n color: var(--le-input-label-color);\n margin-bottom: 2px;\n}\n\n.le-input-container {\n position: relative;\n display: flex;\n align-items: center;\n background: var(--le-input-bg);\n border: var(--le-input-border);\n border-radius: var(--le-input-radius);\n transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n outline: 2px solid var(--le-color-focus);\n outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n opacity: 0.6;\n background-color: rgba(0,0,0,0.05);\n cursor: not-allowed;\n}\n\ninput {\n flex: 1;\n width: 100%;\n height: calc(var(--le-input-height) - 2px);\n padding: var(--le-input-padding);\n border: none;\n background: transparent;\n color: var(--le-input-color);\n font-family: inherit;\n font-size: inherit;\n outline: none;\n text-align: right; /* Aligned to end */\n -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput::placeholder {\n color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--le-color-border, #cccccc);\n height: 100%;\n}\n\n.le-input-control-btn {\n --le-button-border-radius: 0;\n --le-button-padding-x: 0;\n --le-button-padding-y: 0;\n --le-button-small-font-size: 9.5px;\n --le-button-small-padding: 0 0.2rem;\n --le-button-icon-aspect-ratio: 2;\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 50%;\n cursor: pointer;\n background: none;\n border: none;\n color: var(--le-input-desc-color);\n font-size: 10px;\n line-height: 1;\n}\n\n.le-input-control-btn:hover {\n background-color: rgba(0,0,0,0.05);\n color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n font-size: 0.85em;\n color: var(--le-input-desc-color);\n margin-top: 2px;\n}\n\n.le-input-error {\n font-size: 0.85em;\n color: var(--le-input-error-color);\n margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n tag: 'le-number-input',\n styleUrl: 'le-number-input.css',\n shadow: true,\n})\nexport class LeNumberInput {\n @Element() el: HTMLElement;\n\n /**\n * The value of the input\n */\n @Prop({ mutable: true, reflect: true }) value: number;\n\n /**\n * The name of the input\n */\n @Prop() name: string;\n\n /**\n * Label for the input\n */\n @Prop() label: string;\n\n /**\n * Placeholder text\n */\n @Prop() placeholder: string;\n\n /**\n * Minimum allowed value\n */\n @Prop() min?: number;\n\n /**\n * Maximum allowed value\n */\n @Prop() max?: number;\n\n /**\n * Step value for increment/decrement\n */\n @Prop() step: number = 1;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Icon for the start icon\n */\n @Prop() iconStart?: string;\n\n /**\n * Whether to show the spinner controls\n */\n @Prop() showSpinners: boolean = true;\n\n /**\n * External ID for linking with external systems\n */\n @Prop() externalId: string;\n\n /**\n * Internal validation state\n */\n @State() private isValid: boolean = true;\n @State() private validationMessage: string = '';\n\n /**\n * Emitted when the value changes (on blur or Enter)\n */\n @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n /**\n * Emitted when the input value changes (on keystroke/spin)\n */\n @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n @Watch('value')\n valueChanged() {\n this.validate();\n }\n\n private validate() {\n if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n this.isValid = false;\n this.validationMessage = 'This field is required';\n return;\n }\n\n if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n if (this.min !== undefined && this.value < this.min) {\n this.isValid = false;\n this.validationMessage = `Value must be at least ${this.min}`;\n return;\n }\n if (this.max !== undefined && this.value > this.max) {\n this.isValid = false;\n this.validationMessage = `Value must be at most ${this.max}`;\n return;\n }\n }\n\n this.isValid = true;\n this.validationMessage = '';\n }\n\n private emitChange() {\n this.leChange.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private emitInput() {\n this.leInput.emit({\n value: this.value,\n name: this.name,\n externalId: this.externalId,\n isValid: this.isValid\n });\n }\n\n private updateValue(newValue: number) {\n if (this.disabled || this.readonly) return;\n \n // Round to avoid floating point errors\n const precision = this.step.toString().split('.')[1]?.length || 0;\n const rounded = parseFloat(newValue.toFixed(precision));\n \n this.value = rounded;\n this.validate();\n this.emitInput();\n }\n\n private handleInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const val = parseFloat(input.value);\n \n if (input.value === '') {\n this.value = undefined;\n } else if (!isNaN(val)) {\n this.value = val;\n }\n \n this.validate();\n this.emitInput();\n };\n\n private handleChange = () => {\n this.validate();\n this.emitChange();\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (this.disabled || this.readonly) return;\n\n let multiplier = 1;\n if (ev.shiftKey) multiplier = 10;\n if (ev.altKey) multiplier = 0.1;\n\n const current = this.value || 0;\n\n if (ev.key === 'ArrowUp') {\n ev.preventDefault();\n this.updateValue(current + (this.step * multiplier));\n } else if (ev.key === 'ArrowDown') {\n ev.preventDefault();\n this.updateValue(current - (this.step * multiplier));\n }\n };\n\n private handleWheel = (ev: WheelEvent) => {\n if (this.disabled || this.readonly) return;\n // Only handle if input is focused to prevent accidental scrolling\n if (document.activeElement !== ev.target) return;\n\n ev.preventDefault();\n const current = this.value || 0;\n \n if (ev.deltaY < 0) {\n this.updateValue(current + this.step);\n } else {\n this.updateValue(current - this.step);\n }\n };\n\n private increment = (ev: Event) => {\n ev.preventDefault(); // Prevent focus loss\n const current = this.value || 0;\n this.updateValue(current + this.step);\n // Trigger change event for buttons as they are \"final\" actions usually\n this.emitChange();\n };\n\n private decrement = (ev: Event) => {\n ev.preventDefault();\n const current = this.value || 0;\n this.updateValue(current - this.step);\n this.emitChange();\n };\n\n render() {\n return (\n <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n <div class=\"le-input-wrapper\">\n {this.label && (\n <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n )}\n \n <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n {this.iconStart && (\n <span class=\"icon-start\">{this.iconStart}</span>\n )}\n \n <input\n id={this.name}\n type=\"number\"\n name={this.name}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onKeyDown={this.handleKeyDown}\n onWheel={this.handleWheel}\n />\n \n {this.showSpinners && (\n <div class=\"le-input-controls\">\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\"\n icon-only\n class=\"le-input-control-btn\" \n onClick={this.increment}\n disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↑</span>\n </le-button>\n <le-button\n mode=\"default\"\n variant=\"clear\" \n size=\"small\" \n icon-only \n class=\"le-input-control-btn\" \n onClick={this.decrement}\n disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n tabindex=\"-1\"\n >\n <span slot=\"icon-only\">↓</span>\n </le-button>\n </div>\n )}\n </div>\n\n {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n <div class=\"le-input-description\">\n <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n <slot name=\"description\"></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as getElement, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as getElement, h } from './index-CNv6tzAt.js';
|
|
2
2
|
|
|
3
|
-
const leRoundProgressCss =
|
|
3
|
+
const leRoundProgressCss = () => `.round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}`;
|
|
4
4
|
|
|
5
5
|
const LeRoundProgress = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -98,7 +98,7 @@ const LeRoundProgress = class {
|
|
|
98
98
|
"paths": ["updateProgressBackgrounds"]
|
|
99
99
|
}; }
|
|
100
100
|
};
|
|
101
|
-
LeRoundProgress.style = leRoundProgressCss;
|
|
101
|
+
LeRoundProgress.style = leRoundProgressCss();
|
|
102
102
|
|
|
103
103
|
export { LeRoundProgress as le_round_progress };
|
|
104
104
|
//# sourceMappingURL=le-round-progress.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /**\n * Component lifecycles\n *\n * Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n */\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI * diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /**\n * Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n */\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /**\n * Returns the circular path for the progress stroke\n * and additional paths in the background\n */\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths || !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,
|
|
1
|
+
{"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n position: relative;\n}\n\n.round-progress {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n}\n\n.round-progress--progress {\n filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n fill: none;\n stroke: var(--progress-color, #999);\n stroke-width: var(--progress-width, 4);\n stroke-linecap: var(--progress-linecap, round);\n animation: progress--circle 0.5s ease-out forwards;\n transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n 0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n fill: none;\n stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'le-round-progress',\n styleUrl: 'le-round-progress.css',\n shadow: true,\n})\nexport class LeRoundProgress {\n // host element\n @Element() el: HTMLElement;\n\n // progress value coming from an attribute\n @Prop() value: number = 0;\n @Watch('value')\n updateValue(newValue: string) {\n this.value = parseFloat(newValue);\n }\n\n // padding value coming from an attribute\n @Prop() padding: number = 0;\n @Watch('padding')\n updatePadding(newValue: string) {\n this.padding = parseFloat(newValue);\n this.calcParams();\n }\n\n // the progress backgrounds can be as many as needed\n // but it should be JSON format: double quotes and strict commas\n @Prop() paths: string;\n @Watch('paths')\n updateProgressBackgrounds(newValue: string) {\n this.progressPaths = JSON.parse(newValue);\n }\n progressPaths: any[];\n\n @State() params: {\n width: number;\n diameter: number;\n circumference: number;\n };\n\n /**\n * Component lifecycles\n *\n * Before the component is loaded, we need to calculate and update params\n * using the component size (width of the round progress)\n * and progress width (max of )\n */\n componentWillLoad() {\n if (typeof this.paths === 'string') {\n this.updateProgressBackgrounds(this.paths);\n }\n this.calcParams();\n }\n\n calcParams() {\n // get element width\n const width = this.el.getBoundingClientRect().width;\n const diameter = width - this.padding;\n // calc circumference — we'll need it later to calc the stroke paths\n const circumference = Math.PI * diameter;\n\n this.params = { width, diameter, circumference };\n }\n\n /**\n * Returns the viewPath attribute value for the SVG\n * based on the width of the parent element\n */\n getViewBox() {\n return '0 0 ' + this.params.width + ' ' + this.params.width;\n }\n\n /**\n * Returns the circular path for the progress stroke\n * and additional paths in the background\n */\n getPath() {\n return (\n 'M' +\n this.params.width / 2 +\n ' ' +\n (this.params.width - this.params.diameter) / 2 +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 ' +\n this.params.diameter +\n ' a ' +\n this.params.diameter / 2 +\n ' ' +\n this.params.diameter / 2 +\n ' 0 0 1 0 -' +\n this.params.diameter\n );\n }\n\n getStrokeDashArray() {\n return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n }\n\n getPaths() {\n if (!this.progressPaths || !this.progressPaths.length) {\n return null;\n }\n let paths = [];\n this.progressPaths.forEach(bg => {\n paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n });\n return (\n <svg viewBox={this.getViewBox()} class=\"round-progress\">\n {paths}\n </svg>\n );\n }\n\n render() {\n return (\n <div class=\"round-progress--container\">\n {this.getPaths()}\n <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n </svg>\n <slot />\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|