le-kit 0.5.3 → 0.6.0
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/LLM_CONTEXT.md +95 -34
- package/package.json +3 -1
- package/readme.md +2 -0
- package/dist/cjs/index-BzadfLTc.js +0 -1864
- package/dist/cjs/index-BzadfLTc.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -124
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/le-bar_16.cjs.entry.js +0 -3397
- package/dist/cjs/le-box.cjs.entry.js +0 -136
- package/dist/cjs/le-breadcrumbs.cjs.entry.js +0 -223
- package/dist/cjs/le-card.cjs.entry.js +0 -29
- package/dist/cjs/le-code-input.cjs.entry.js +0 -147
- package/dist/cjs/le-combobox.cjs.entry.js +0 -210
- package/dist/cjs/le-header-placeholder.cjs.entry.js +0 -18
- package/dist/cjs/le-kit.cjs.js +0 -27
- package/dist/cjs/le-kit.cjs.js.map +0 -1
- package/dist/cjs/le-multiselect.cjs.entry.js +0 -284
- package/dist/cjs/le-number-input.cjs.entry.js +0 -162
- package/dist/cjs/le-round-progress.cjs.entry.js +0 -101
- package/dist/cjs/le-segmented-control.cjs.entry.js +0 -235
- package/dist/cjs/le-side-panel-toggle.cjs.entry.js +0 -213
- package/dist/cjs/le-side-panel.cjs.entry.js +0 -539
- package/dist/cjs/le-stack.cjs.entry.js +0 -122
- package/dist/cjs/le-tab-bar.cjs.entry.js +0 -233
- package/dist/cjs/le-tab-panel.cjs.entry.js +0 -82
- package/dist/cjs/le-tab.cjs.entry.js +0 -98
- package/dist/cjs/le-tabs.cjs.entry.js +0 -297
- package/dist/cjs/le-tag.cjs.entry.js +0 -51
- package/dist/cjs/le-text.cjs.entry.js +0 -318
- package/dist/cjs/le-turntable.cjs.entry.js +0 -131
- package/dist/cjs/loader.cjs.js +0 -15
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/utils-Dxx9WhWK.js +0 -152
- package/dist/cjs/utils-Dxx9WhWK.js.map +0 -1
- package/dist/collection/collection-manifest.json +0 -48
- package/dist/collection/components/le-bar/le-bar.css +0 -255
- package/dist/collection/components/le-bar/le-bar.js +0 -673
- package/dist/collection/components/le-bar/le-bar.js.map +0 -1
- package/dist/collection/components/le-box/le-box.css +0 -37
- package/dist/collection/components/le-box/le-box.js +0 -567
- package/dist/collection/components/le-box/le-box.js.map +0 -1
- package/dist/collection/components/le-breadcrumbs/le-breadcrumbs.css +0 -72
- package/dist/collection/components/le-breadcrumbs/le-breadcrumbs.js +0 -372
- package/dist/collection/components/le-breadcrumbs/le-breadcrumbs.js.map +0 -1
- package/dist/collection/components/le-button/le-button.css +0 -290
- package/dist/collection/components/le-button/le-button.js +0 -431
- package/dist/collection/components/le-button/le-button.js.map +0 -1
- package/dist/collection/components/le-card/le-card.css +0 -74
- package/dist/collection/components/le-card/le-card.js +0 -103
- package/dist/collection/components/le-card/le-card.js.map +0 -1
- package/dist/collection/components/le-checkbox/le-checkbox.css +0 -93
- package/dist/collection/components/le-checkbox/le-checkbox.js +0 -177
- package/dist/collection/components/le-checkbox/le-checkbox.js.map +0 -1
- package/dist/collection/components/le-code-input/le-code-input.css +0 -106
- package/dist/collection/components/le-code-input/le-code-input.js +0 -433
- package/dist/collection/components/le-code-input/le-code-input.js.map +0 -1
- package/dist/collection/components/le-collapse/le-collapse.css +0 -31
- package/dist/collection/components/le-collapse/le-collapse.js +0 -185
- package/dist/collection/components/le-collapse/le-collapse.js.map +0 -1
- package/dist/collection/components/le-combobox/le-combobox.css +0 -144
- package/dist/collection/components/le-combobox/le-combobox.js +0 -633
- package/dist/collection/components/le-combobox/le-combobox.js.map +0 -1
- package/dist/collection/components/le-component/le-component.css +0 -189
- package/dist/collection/components/le-component/le-component.js +0 -343
- package/dist/collection/components/le-component/le-component.js.map +0 -1
- package/dist/collection/components/le-current-heading/le-current-heading.css +0 -13
- package/dist/collection/components/le-current-heading/le-current-heading.js +0 -131
- package/dist/collection/components/le-current-heading/le-current-heading.js.map +0 -1
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.css +0 -167
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.js +0 -735
- package/dist/collection/components/le-dropdown-base/le-dropdown-base.js.map +0 -1
- package/dist/collection/components/le-header/le-header.css +0 -120
- package/dist/collection/components/le-header/le-header.js +0 -485
- package/dist/collection/components/le-header/le-header.js.map +0 -1
- package/dist/collection/components/le-header-placeholder/le-header-placeholder.js +0 -21
- package/dist/collection/components/le-header-placeholder/le-header-placeholder.js.map +0 -1
- package/dist/collection/components/le-icon/le-icon.css +0 -13
- package/dist/collection/components/le-icon/le-icon.js +0 -185
- package/dist/collection/components/le-icon/le-icon.js.map +0 -1
- package/dist/collection/components/le-multiselect/le-multiselect.css +0 -163
- package/dist/collection/components/le-multiselect/le-multiselect.js +0 -713
- package/dist/collection/components/le-multiselect/le-multiselect.js.map +0 -1
- package/dist/collection/components/le-navigation/le-navigation.css +0 -330
- package/dist/collection/components/le-navigation/le-navigation.js +0 -690
- package/dist/collection/components/le-navigation/le-navigation.js.map +0 -1
- package/dist/collection/components/le-number-input/le-number-input.css +0 -135
- package/dist/collection/components/le-number-input/le-number-input.js +0 -476
- package/dist/collection/components/le-number-input/le-number-input.js.map +0 -1
- package/dist/collection/components/le-popover/le-popover.css +0 -164
- package/dist/collection/components/le-popover/le-popover.js +0 -828
- package/dist/collection/components/le-popover/le-popover.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.api.js +0 -102
- package/dist/collection/components/le-popup/le-popup.api.js.map +0 -1
- package/dist/collection/components/le-popup/le-popup.css +0 -222
- package/dist/collection/components/le-popup/le-popup.js +0 -600
- package/dist/collection/components/le-popup/le-popup.js.map +0 -1
- package/dist/collection/components/le-round-progress/le-round-progress.css +0 -34
- package/dist/collection/components/le-round-progress/le-round-progress.js +0 -179
- package/dist/collection/components/le-round-progress/le-round-progress.js.map +0 -1
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.css +0 -29
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.js +0 -185
- package/dist/collection/components/le-scroll-progress/le-scroll-progress.js.map +0 -1
- package/dist/collection/components/le-segmented-control/le-segmented-control.css +0 -78
- package/dist/collection/components/le-segmented-control/le-segmented-control.js +0 -436
- package/dist/collection/components/le-segmented-control/le-segmented-control.js.map +0 -1
- package/dist/collection/components/le-select/le-select.css +0 -121
- package/dist/collection/components/le-select/le-select.js +0 -556
- package/dist/collection/components/le-select/le-select.js.map +0 -1
- package/dist/collection/components/le-side-panel/le-side-panel.css +0 -202
- package/dist/collection/components/le-side-panel/le-side-panel.js +0 -948
- package/dist/collection/components/le-side-panel/le-side-panel.js.map +0 -1
- package/dist/collection/components/le-side-panel-toggle/le-side-panel-toggle.js +0 -595
- package/dist/collection/components/le-side-panel-toggle/le-side-panel-toggle.js.map +0 -1
- package/dist/collection/components/le-slot/le-slot.default.css +0 -222
- package/dist/collection/components/le-slot/le-slot.js +0 -590
- package/dist/collection/components/le-slot/le-slot.js.map +0 -1
- package/dist/collection/components/le-stack/le-stack.default.css +0 -37
- package/dist/collection/components/le-stack/le-stack.js +0 -377
- package/dist/collection/components/le-stack/le-stack.js.map +0 -1
- package/dist/collection/components/le-string-input/le-string-input.css +0 -83
- package/dist/collection/components/le-string-input/le-string-input.js +0 -370
- package/dist/collection/components/le-string-input/le-string-input.js.map +0 -1
- package/dist/collection/components/le-tab/le-tab.css +0 -289
- package/dist/collection/components/le-tab/le-tab.js +0 -528
- package/dist/collection/components/le-tab/le-tab.js.map +0 -1
- package/dist/collection/components/le-tab-bar/le-tab-bar.css +0 -89
- package/dist/collection/components/le-tab-bar/le-tab-bar.js +0 -459
- package/dist/collection/components/le-tab-bar/le-tab-bar.js.map +0 -1
- package/dist/collection/components/le-tab-panel/le-tab-panel.css +0 -30
- package/dist/collection/components/le-tab-panel/le-tab-panel.js +0 -285
- package/dist/collection/components/le-tab-panel/le-tab-panel.js.map +0 -1
- package/dist/collection/components/le-tabs/le-tabs.css +0 -146
- package/dist/collection/components/le-tabs/le-tabs.js +0 -579
- package/dist/collection/components/le-tabs/le-tabs.js.map +0 -1
- package/dist/collection/components/le-tag/le-tag.css +0 -139
- package/dist/collection/components/le-tag/le-tag.js +0 -251
- package/dist/collection/components/le-tag/le-tag.js.map +0 -1
- package/dist/collection/components/le-text/le-text.css +0 -169
- package/dist/collection/components/le-text/le-text.js +0 -459
- package/dist/collection/components/le-text/le-text.js.map +0 -1
- package/dist/collection/components/le-turntable/le-turntable.css +0 -10
- package/dist/collection/components/le-turntable/le-turntable.js +0 -202
- package/dist/collection/components/le-turntable/le-turntable.js.map +0 -1
- package/dist/collection/dist/components/assets/custom-elements.json +0 -12263
- package/dist/collection/dist/components/assets/icons/arrow-left.json +0 -21
- package/dist/collection/dist/components/assets/icons/arrow-right.json +0 -21
- package/dist/collection/dist/components/assets/icons/check.json +0 -12
- package/dist/collection/dist/components/assets/icons/chevron-down.json +0 -12
- package/dist/collection/dist/components/assets/icons/chevron-left.json +0 -12
- package/dist/collection/dist/components/assets/icons/chevron-right.json +0 -12
- package/dist/collection/dist/components/assets/icons/chevron-up.json +0 -12
- package/dist/collection/dist/components/assets/icons/ellipsis-horizontal.json +0 -14
- package/dist/collection/dist/components/assets/icons/ellipsis-vertical.json +0 -14
- package/dist/collection/dist/components/assets/icons/hamburger.json +0 -14
- package/dist/collection/dist/components/assets/icons/side-panel.json +0 -61
- package/dist/collection/dist/themes/base.css +0 -89
- package/dist/collection/dist/themes/dark.css +0 -104
- package/dist/collection/dist/themes/default.css +0 -112
- package/dist/collection/dist/themes/gradient.css +0 -104
- package/dist/collection/dist/themes/index.css +0 -76
- package/dist/collection/dist/themes/minimal.css +0 -104
- package/dist/collection/dist/themes/warm.css +0 -104
- package/dist/collection/global/app.js +0 -177
- package/dist/collection/global/app.js.map +0 -1
- package/dist/collection/index.js +0 -16
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/types/blocks.js +0 -115
- package/dist/collection/types/blocks.js.map +0 -1
- package/dist/collection/types/options.js +0 -2
- package/dist/collection/types/options.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -141
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/app.js +0 -180
- package/dist/components/app.js.map +0 -1
- package/dist/components/assets/custom-elements.json +0 -12263
- package/dist/components/assets/icons/arrow-left.json +0 -21
- package/dist/components/assets/icons/arrow-right.json +0 -21
- package/dist/components/assets/icons/check.json +0 -12
- package/dist/components/assets/icons/chevron-down.json +0 -12
- package/dist/components/assets/icons/chevron-left.json +0 -12
- package/dist/components/assets/icons/chevron-right.json +0 -12
- package/dist/components/assets/icons/chevron-up.json +0 -12
- package/dist/components/assets/icons/ellipsis-horizontal.json +0 -14
- package/dist/components/assets/icons/ellipsis-vertical.json +0 -14
- package/dist/components/assets/icons/hamburger.json +0 -14
- package/dist/components/assets/icons/side-panel.json +0 -61
- package/dist/components/index.d.ts +0 -33
- package/dist/components/index.js +0 -12
- package/dist/components/index.js.map +0 -1
- package/dist/components/le-bar.d.ts +0 -11
- package/dist/components/le-bar.js +0 -9
- package/dist/components/le-bar.js.map +0 -1
- package/dist/components/le-bar2.js +0 -498
- package/dist/components/le-bar2.js.map +0 -1
- package/dist/components/le-box.d.ts +0 -11
- package/dist/components/le-box.js +0 -225
- package/dist/components/le-box.js.map +0 -1
- package/dist/components/le-breadcrumbs.d.ts +0 -11
- package/dist/components/le-breadcrumbs.js +0 -327
- package/dist/components/le-breadcrumbs.js.map +0 -1
- package/dist/components/le-button.d.ts +0 -11
- package/dist/components/le-button.js +0 -9
- package/dist/components/le-button.js.map +0 -1
- package/dist/components/le-button2.js +0 -1577
- package/dist/components/le-button2.js.map +0 -1
- package/dist/components/le-card.d.ts +0 -11
- package/dist/components/le-card.js +0 -100
- package/dist/components/le-card.js.map +0 -1
- package/dist/components/le-checkbox.d.ts +0 -11
- package/dist/components/le-checkbox.js +0 -9
- package/dist/components/le-checkbox.js.map +0 -1
- package/dist/components/le-code-input.d.ts +0 -11
- package/dist/components/le-code-input.js +0 -231
- package/dist/components/le-code-input.js.map +0 -1
- package/dist/components/le-collapse.d.ts +0 -11
- package/dist/components/le-collapse.js +0 -9
- package/dist/components/le-collapse.js.map +0 -1
- package/dist/components/le-collapse2.js +0 -138
- package/dist/components/le-collapse2.js.map +0 -1
- package/dist/components/le-combobox.d.ts +0 -11
- package/dist/components/le-combobox.js +0 -299
- package/dist/components/le-combobox.js.map +0 -1
- package/dist/components/le-component.d.ts +0 -11
- package/dist/components/le-component.js +0 -9
- package/dist/components/le-component.js.map +0 -1
- package/dist/components/le-current-heading.d.ts +0 -11
- package/dist/components/le-current-heading.js +0 -93
- package/dist/components/le-current-heading.js.map +0 -1
- package/dist/components/le-dropdown-base.d.ts +0 -11
- package/dist/components/le-dropdown-base.js +0 -9
- package/dist/components/le-dropdown-base.js.map +0 -1
- package/dist/components/le-dropdown-base2.js +0 -366
- package/dist/components/le-dropdown-base2.js.map +0 -1
- package/dist/components/le-header-placeholder.d.ts +0 -11
- package/dist/components/le-header-placeholder.js +0 -37
- package/dist/components/le-header-placeholder.js.map +0 -1
- package/dist/components/le-header.d.ts +0 -11
- package/dist/components/le-header.js +0 -325
- package/dist/components/le-header.js.map +0 -1
- package/dist/components/le-icon.d.ts +0 -11
- package/dist/components/le-icon.js +0 -9
- package/dist/components/le-icon.js.map +0 -1
- package/dist/components/le-icon2.js +0 -149
- package/dist/components/le-icon2.js.map +0 -1
- package/dist/components/le-multiselect.d.ts +0 -11
- package/dist/components/le-multiselect.js +0 -383
- package/dist/components/le-multiselect.js.map +0 -1
- package/dist/components/le-navigation.d.ts +0 -11
- package/dist/components/le-navigation.js +0 -9
- package/dist/components/le-navigation.js.map +0 -1
- package/dist/components/le-navigation2.js +0 -488
- package/dist/components/le-navigation2.js.map +0 -1
- package/dist/components/le-number-input.d.ts +0 -11
- package/dist/components/le-number-input.js +0 -248
- package/dist/components/le-number-input.js.map +0 -1
- package/dist/components/le-popover.d.ts +0 -11
- package/dist/components/le-popover.js +0 -9
- package/dist/components/le-popover.js.map +0 -1
- package/dist/components/le-popover2.js +0 -642
- package/dist/components/le-popover2.js.map +0 -1
- package/dist/components/le-popup.api.js +0 -106
- package/dist/components/le-popup.api.js.map +0 -1
- package/dist/components/le-popup.d.ts +0 -11
- package/dist/components/le-popup.js +0 -9
- package/dist/components/le-popup.js.map +0 -1
- package/dist/components/le-round-progress.d.ts +0 -11
- package/dist/components/le-round-progress.js +0 -130
- package/dist/components/le-round-progress.js.map +0 -1
- package/dist/components/le-scroll-progress.d.ts +0 -11
- package/dist/components/le-scroll-progress.js +0 -140
- package/dist/components/le-scroll-progress.js.map +0 -1
- package/dist/components/le-segmented-control.d.ts +0 -11
- package/dist/components/le-segmented-control.js +0 -321
- package/dist/components/le-segmented-control.js.map +0 -1
- package/dist/components/le-select.d.ts +0 -11
- package/dist/components/le-select.js +0 -9
- package/dist/components/le-select.js.map +0 -1
- package/dist/components/le-side-panel-toggle.d.ts +0 -11
- package/dist/components/le-side-panel-toggle.js +0 -9
- package/dist/components/le-side-panel-toggle.js.map +0 -1
- package/dist/components/le-side-panel-toggle2.js +0 -295
- package/dist/components/le-side-panel-toggle2.js.map +0 -1
- package/dist/components/le-side-panel.d.ts +0 -11
- package/dist/components/le-side-panel.js +0 -654
- package/dist/components/le-side-panel.js.map +0 -1
- package/dist/components/le-slot.d.ts +0 -11
- package/dist/components/le-slot.js +0 -9
- package/dist/components/le-slot.js.map +0 -1
- package/dist/components/le-stack.d.ts +0 -11
- package/dist/components/le-stack.js +0 -202
- package/dist/components/le-stack.js.map +0 -1
- package/dist/components/le-string-input.d.ts +0 -11
- package/dist/components/le-string-input.js +0 -9
- package/dist/components/le-string-input.js.map +0 -1
- package/dist/components/le-tab-bar.d.ts +0 -11
- package/dist/components/le-tab-bar.js +0 -321
- package/dist/components/le-tab-bar.js.map +0 -1
- package/dist/components/le-tab-panel.d.ts +0 -11
- package/dist/components/le-tab-panel.js +0 -164
- package/dist/components/le-tab-panel.js.map +0 -1
- package/dist/components/le-tab.d.ts +0 -11
- package/dist/components/le-tab.js +0 -9
- package/dist/components/le-tab.js.map +0 -1
- package/dist/components/le-tab2.js +0 -182
- package/dist/components/le-tab2.js.map +0 -1
- package/dist/components/le-tabs.d.ts +0 -11
- package/dist/components/le-tabs.js +0 -387
- package/dist/components/le-tabs.js.map +0 -1
- package/dist/components/le-tag.d.ts +0 -11
- package/dist/components/le-tag.js +0 -9
- package/dist/components/le-tag.js.map +0 -1
- package/dist/components/le-tag2.js +0 -124
- package/dist/components/le-tag2.js.map +0 -1
- package/dist/components/le-text.d.ts +0 -11
- package/dist/components/le-text.js +0 -398
- package/dist/components/le-text.js.map +0 -1
- package/dist/components/le-turntable.d.ts +0 -11
- package/dist/components/le-turntable.js +0 -156
- package/dist/components/le-turntable.js.map +0 -1
- package/dist/components/utils.js +0 -146
- package/dist/components/utils.js.map +0 -1
- package/dist/docs.d.ts +0 -443
- package/dist/docs.json +0 -14581
- package/dist/esm/index-DFTm5BqT.js +0 -1844
- package/dist/esm/index-DFTm5BqT.js.map +0 -1
- package/dist/esm/index.js +0 -109
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/le-bar_16.entry.js +0 -3380
- package/dist/esm/le-box.entry.js +0 -134
- package/dist/esm/le-box.entry.js.map +0 -1
- package/dist/esm/le-breadcrumbs.entry.js +0 -221
- package/dist/esm/le-breadcrumbs.entry.js.map +0 -1
- package/dist/esm/le-card.entry.js +0 -27
- package/dist/esm/le-card.entry.js.map +0 -1
- package/dist/esm/le-code-input.entry.js +0 -145
- package/dist/esm/le-code-input.entry.js.map +0 -1
- package/dist/esm/le-combobox.entry.js +0 -208
- package/dist/esm/le-combobox.entry.js.map +0 -1
- package/dist/esm/le-header-placeholder.entry.js +0 -16
- package/dist/esm/le-header-placeholder.entry.js.map +0 -1
- package/dist/esm/le-kit.js +0 -23
- package/dist/esm/le-kit.js.map +0 -1
- package/dist/esm/le-multiselect.entry.js +0 -282
- package/dist/esm/le-multiselect.entry.js.map +0 -1
- package/dist/esm/le-number-input.entry.js +0 -160
- package/dist/esm/le-number-input.entry.js.map +0 -1
- package/dist/esm/le-round-progress.entry.js +0 -99
- package/dist/esm/le-round-progress.entry.js.map +0 -1
- package/dist/esm/le-segmented-control.entry.js +0 -233
- package/dist/esm/le-segmented-control.entry.js.map +0 -1
- package/dist/esm/le-side-panel-toggle.entry.js +0 -211
- package/dist/esm/le-side-panel-toggle.entry.js.map +0 -1
- package/dist/esm/le-side-panel.entry.js +0 -537
- package/dist/esm/le-side-panel.entry.js.map +0 -1
- package/dist/esm/le-stack.entry.js +0 -120
- package/dist/esm/le-stack.entry.js.map +0 -1
- package/dist/esm/le-tab-bar.entry.js +0 -231
- package/dist/esm/le-tab-bar.entry.js.map +0 -1
- package/dist/esm/le-tab-panel.entry.js +0 -80
- package/dist/esm/le-tab-panel.entry.js.map +0 -1
- package/dist/esm/le-tab.entry.js +0 -96
- package/dist/esm/le-tab.entry.js.map +0 -1
- package/dist/esm/le-tabs.entry.js +0 -295
- package/dist/esm/le-tabs.entry.js.map +0 -1
- package/dist/esm/le-tag.entry.js +0 -49
- package/dist/esm/le-tag.entry.js.map +0 -1
- package/dist/esm/le-text.entry.js +0 -316
- package/dist/esm/le-text.entry.js.map +0 -1
- package/dist/esm/le-turntable.entry.js +0 -129
- package/dist/esm/le-turntable.entry.js.map +0 -1
- package/dist/esm/loader.js +0 -13
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/utils-DZYCZLrF.js +0 -146
- package/dist/esm/utils-DZYCZLrF.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/le-kit/dist/components/assets/custom-elements.json +0 -12263
- package/dist/le-kit/dist/components/assets/icons/arrow-left.json +0 -21
- package/dist/le-kit/dist/components/assets/icons/arrow-right.json +0 -21
- package/dist/le-kit/dist/components/assets/icons/check.json +0 -12
- package/dist/le-kit/dist/components/assets/icons/chevron-down.json +0 -12
- package/dist/le-kit/dist/components/assets/icons/chevron-left.json +0 -12
- package/dist/le-kit/dist/components/assets/icons/chevron-right.json +0 -12
- package/dist/le-kit/dist/components/assets/icons/chevron-up.json +0 -12
- package/dist/le-kit/dist/components/assets/icons/ellipsis-horizontal.json +0 -14
- package/dist/le-kit/dist/components/assets/icons/ellipsis-vertical.json +0 -14
- package/dist/le-kit/dist/components/assets/icons/hamburger.json +0 -14
- package/dist/le-kit/dist/components/assets/icons/side-panel.json +0 -61
- package/dist/le-kit/dist/themes/base.css +0 -89
- package/dist/le-kit/dist/themes/dark.css +0 -104
- package/dist/le-kit/dist/themes/default.css +0 -112
- package/dist/le-kit/dist/themes/gradient.css +0 -104
- package/dist/le-kit/dist/themes/index.css +0 -76
- package/dist/le-kit/dist/themes/minimal.css +0 -104
- package/dist/le-kit/dist/themes/warm.css +0 -104
- package/dist/le-kit/index.esm.js +0 -2
- package/dist/le-kit/index.esm.js.map +0 -1
- package/dist/le-kit/le-kit.css +0 -1
- package/dist/le-kit/le-kit.esm.js +0 -2
- package/dist/le-kit/le-kit.esm.js.map +0 -1
- package/dist/le-kit/loader.esm.js.map +0 -1
- package/dist/le-kit/p-3067b18f.entry.js +0 -2
- package/dist/le-kit/p-3067b18f.entry.js.map +0 -1
- package/dist/le-kit/p-34c4d97d.entry.js +0 -2
- package/dist/le-kit/p-34c4d97d.entry.js.map +0 -1
- package/dist/le-kit/p-45182541.entry.js +0 -2
- package/dist/le-kit/p-45182541.entry.js.map +0 -1
- package/dist/le-kit/p-52a41c96.entry.js +0 -2
- package/dist/le-kit/p-52a41c96.entry.js.map +0 -1
- package/dist/le-kit/p-55fb5dd2.entry.js +0 -2
- package/dist/le-kit/p-55fb5dd2.entry.js.map +0 -1
- package/dist/le-kit/p-649025f4.entry.js +0 -2
- package/dist/le-kit/p-649025f4.entry.js.map +0 -1
- package/dist/le-kit/p-67930309.entry.js +0 -2
- package/dist/le-kit/p-67930309.entry.js.map +0 -1
- package/dist/le-kit/p-6d222705.entry.js +0 -2
- package/dist/le-kit/p-6d222705.entry.js.map +0 -1
- package/dist/le-kit/p-8049e0c2.entry.js +0 -2
- package/dist/le-kit/p-8049e0c2.entry.js.map +0 -1
- package/dist/le-kit/p-884f57bd.entry.js +0 -2
- package/dist/le-kit/p-884f57bd.entry.js.map +0 -1
- package/dist/le-kit/p-88c70f9d.entry.js +0 -2
- package/dist/le-kit/p-88c70f9d.entry.js.map +0 -1
- package/dist/le-kit/p-96610729.entry.js +0 -2
- package/dist/le-kit/p-96610729.entry.js.map +0 -1
- package/dist/le-kit/p-D8RYDS9p.js +0 -2
- package/dist/le-kit/p-D8RYDS9p.js.map +0 -1
- package/dist/le-kit/p-DFTm5BqT.js +0 -3
- package/dist/le-kit/p-DFTm5BqT.js.map +0 -1
- package/dist/le-kit/p-a34054e0.entry.js +0 -2
- package/dist/le-kit/p-a34054e0.entry.js.map +0 -1
- package/dist/le-kit/p-a388e46a.entry.js +0 -2
- package/dist/le-kit/p-a388e46a.entry.js.map +0 -1
- package/dist/le-kit/p-c0c53650.entry.js +0 -2
- package/dist/le-kit/p-c0c53650.entry.js.map +0 -1
- package/dist/le-kit/p-cbf17514.entry.js +0 -2
- package/dist/le-kit/p-cbf17514.entry.js.map +0 -1
- package/dist/le-kit/p-d934de74.entry.js +0 -2
- package/dist/le-kit/p-d934de74.entry.js.map +0 -1
- package/dist/le-kit/p-de72c8b5.entry.js +0 -2
- package/dist/le-kit/p-de72c8b5.entry.js.map +0 -1
- package/dist/le-kit/p-e3dd0f2a.entry.js +0 -2
- package/dist/le-kit/p-e3dd0f2a.entry.js.map +0 -1
- package/dist/le-kit/p-ee170967.entry.js +0 -2
- package/dist/le-kit/p-ee170967.entry.js.map +0 -1
- package/dist/le-kit/p-eedb2f75.entry.js +0 -2
- package/dist/le-kit/p-eedb2f75.entry.js.map +0 -1
- package/dist/themes/base.css +0 -89
- package/dist/themes/dark.css +0 -104
- package/dist/themes/default.css +0 -112
- package/dist/themes/gradient.css +0 -104
- package/dist/themes/index.css +0 -76
- package/dist/themes/minimal.css +0 -104
- package/dist/themes/warm.css +0 -104
- package/dist/types/components/le-bar/le-bar.d.ts +0 -131
- package/dist/types/components/le-box/le-box.d.ts +0 -111
- package/dist/types/components/le-breadcrumbs/le-breadcrumbs.d.ts +0 -57
- package/dist/types/components/le-button/le-button.d.ts +0 -93
- package/dist/types/components/le-card/le-card.d.ts +0 -37
- package/dist/types/components/le-checkbox/le-checkbox.d.ts +0 -46
- package/dist/types/components/le-code-input/le-code-input.d.ts +0 -102
- package/dist/types/components/le-collapse/le-collapse.d.ts +0 -43
- package/dist/types/components/le-combobox/le-combobox.d.ts +0 -128
- package/dist/types/components/le-component/le-component.d.ts +0 -115
- package/dist/types/components/le-current-heading/le-current-heading.d.ts +0 -25
- package/dist/types/components/le-dropdown-base/le-dropdown-base.d.ts +0 -118
- package/dist/types/components/le-header/le-header.d.ts +0 -115
- package/dist/types/components/le-header-placeholder/le-header-placeholder.d.ts +0 -13
- package/dist/types/components/le-icon/le-icon.d.ts +0 -28
- package/dist/types/components/le-multiselect/le-multiselect.d.ts +0 -143
- package/dist/types/components/le-navigation/le-navigation.d.ts +0 -125
- package/dist/types/components/le-number-input/le-number-input.d.ts +0 -106
- package/dist/types/components/le-popover/le-popover.d.ts +0 -129
- package/dist/types/components/le-popup/le-popup.api.d.ts +0 -73
- package/dist/types/components/le-popup/le-popup.d.ts +0 -127
- package/dist/types/components/le-round-progress/le-round-progress.d.ts +0 -37
- package/dist/types/components/le-scroll-progress/le-scroll-progress.d.ts +0 -40
- package/dist/types/components/le-segmented-control/le-segmented-control.d.ts +0 -82
- package/dist/types/components/le-select/le-select.d.ts +0 -125
- package/dist/types/components/le-side-panel/le-side-panel.d.ts +0 -102
- package/dist/types/components/le-side-panel-toggle/le-side-panel-toggle.d.ts +0 -48
- package/dist/types/components/le-slot/le-slot.d.ts +0 -149
- package/dist/types/components/le-stack/le-stack.d.ts +0 -73
- package/dist/types/components/le-string-input/le-string-input.d.ts +0 -91
- package/dist/types/components/le-tab/le-tab.d.ts +0 -116
- package/dist/types/components/le-tab-bar/le-tab-bar.d.ts +0 -88
- package/dist/types/components/le-tab-panel/le-tab-panel.d.ts +0 -75
- package/dist/types/components/le-tabs/le-tabs.d.ts +0 -108
- package/dist/types/components/le-tag/le-tag.d.ts +0 -78
- package/dist/types/components/le-text/le-text.d.ts +0 -141
- package/dist/types/components/le-turntable/le-turntable.d.ts +0 -55
- package/dist/types/components.d.ts +0 -5800
- package/dist/types/global/app.d.ts +0 -96
- package/dist/types/index.d.ts +0 -16
- package/dist/types/stencil-public-runtime.d.ts +0 -1799
- package/dist/types/types/blocks.d.ts +0 -136
- package/dist/types/types/options.d.ts +0 -143
- package/dist/types/utils/utils.d.ts +0 -54
- package/loader/cdn.js +0 -1
- package/loader/index.cjs.js +0 -1
- package/loader/index.d.ts +0 -24
- package/loader/index.es2017.js +0 -1
- package/loader/index.js +0 -2
package/dist/esm/le-box.entry.js
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, a as getElement } from './index-DFTm5BqT.js';
|
|
2
|
-
import { c as classnames } from './utils-DZYCZLrF.js';
|
|
3
|
-
|
|
4
|
-
const leBoxCss = () => `:host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}`;
|
|
5
|
-
|
|
6
|
-
const LeBox = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
/**
|
|
10
|
-
* Flex grow factor - how much the item should grow relative to siblings
|
|
11
|
-
* @min 0
|
|
12
|
-
*/
|
|
13
|
-
this.grow = 0;
|
|
14
|
-
/**
|
|
15
|
-
* Flex shrink factor - how much the item should shrink relative to siblings
|
|
16
|
-
* @min 0
|
|
17
|
-
*/
|
|
18
|
-
this.shrink = 1;
|
|
19
|
-
/**
|
|
20
|
-
* Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
|
|
21
|
-
*/
|
|
22
|
-
this.basis = 'auto';
|
|
23
|
-
/**
|
|
24
|
-
* Self-alignment override for this item on the cross axis
|
|
25
|
-
* @allowedValues auto | start | center | end | stretch | baseline
|
|
26
|
-
*/
|
|
27
|
-
this.alignSelf = 'auto';
|
|
28
|
-
/**
|
|
29
|
-
* Internal horizontal alignment of content
|
|
30
|
-
* @allowedValues start | center | end | stretch
|
|
31
|
-
*/
|
|
32
|
-
this.alignContent = 'stretch';
|
|
33
|
-
/**
|
|
34
|
-
* Internal vertical alignment of content
|
|
35
|
-
* @allowedValues start | center | end | stretch
|
|
36
|
-
*/
|
|
37
|
-
this.justifyContent = 'start';
|
|
38
|
-
/**
|
|
39
|
-
* Whether to display box content as flex (for internal alignment)
|
|
40
|
-
*/
|
|
41
|
-
this.displayFlex = false;
|
|
42
|
-
/**
|
|
43
|
-
* Direction of internal flex layout when displayFlex is true
|
|
44
|
-
* @allowedValues horizontal | vertical
|
|
45
|
-
*/
|
|
46
|
-
this.innerDirection = 'vertical';
|
|
47
|
-
}
|
|
48
|
-
getAlignSelf() {
|
|
49
|
-
const alignMap = {
|
|
50
|
-
auto: 'auto',
|
|
51
|
-
start: 'flex-start',
|
|
52
|
-
center: 'center',
|
|
53
|
-
end: 'flex-end',
|
|
54
|
-
stretch: 'stretch',
|
|
55
|
-
baseline: 'baseline',
|
|
56
|
-
};
|
|
57
|
-
return alignMap[this.alignSelf] || 'auto';
|
|
58
|
-
}
|
|
59
|
-
getContentAlign() {
|
|
60
|
-
const alignMap = {
|
|
61
|
-
start: 'flex-start',
|
|
62
|
-
center: 'center',
|
|
63
|
-
end: 'flex-end',
|
|
64
|
-
stretch: 'stretch',
|
|
65
|
-
};
|
|
66
|
-
return alignMap[this.alignContent] || 'stretch';
|
|
67
|
-
}
|
|
68
|
-
getContentJustify() {
|
|
69
|
-
const justifyMap = {
|
|
70
|
-
start: 'flex-start',
|
|
71
|
-
center: 'center',
|
|
72
|
-
end: 'flex-end',
|
|
73
|
-
stretch: 'stretch',
|
|
74
|
-
};
|
|
75
|
-
return justifyMap[this.justifyContent] || 'flex-start';
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
// Host styles for flex item behavior
|
|
79
|
-
const hostStyle = {
|
|
80
|
-
flexGrow: String(this.grow),
|
|
81
|
-
flexShrink: String(this.shrink),
|
|
82
|
-
flexBasis: this.basis,
|
|
83
|
-
alignSelf: this.getAlignSelf(),
|
|
84
|
-
};
|
|
85
|
-
if (this.width)
|
|
86
|
-
hostStyle.width = this.width;
|
|
87
|
-
if (this.height)
|
|
88
|
-
hostStyle.height = this.height;
|
|
89
|
-
if (this.minWidth)
|
|
90
|
-
hostStyle.minWidth = this.minWidth;
|
|
91
|
-
if (this.maxWidth)
|
|
92
|
-
hostStyle.maxWidth = this.maxWidth;
|
|
93
|
-
if (this.minHeight)
|
|
94
|
-
hostStyle.minHeight = this.minHeight;
|
|
95
|
-
if (this.maxHeight)
|
|
96
|
-
hostStyle.maxHeight = this.maxHeight;
|
|
97
|
-
if (this.order !== undefined)
|
|
98
|
-
hostStyle.order = String(this.order);
|
|
99
|
-
// Inner content styles
|
|
100
|
-
const contentStyle = {};
|
|
101
|
-
if (this.padding) {
|
|
102
|
-
contentStyle.padding = this.padding;
|
|
103
|
-
}
|
|
104
|
-
if (this.background) {
|
|
105
|
-
contentStyle.background = this.background;
|
|
106
|
-
}
|
|
107
|
-
if (this.borderRadius) {
|
|
108
|
-
contentStyle.borderRadius = this.borderRadius;
|
|
109
|
-
}
|
|
110
|
-
if (this.border) {
|
|
111
|
-
contentStyle.border = this.border;
|
|
112
|
-
}
|
|
113
|
-
if (this.displayFlex) {
|
|
114
|
-
contentStyle.display = 'flex';
|
|
115
|
-
contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';
|
|
116
|
-
contentStyle.alignItems = this.getContentAlign();
|
|
117
|
-
contentStyle.justifyContent = this.getContentJustify();
|
|
118
|
-
if (this.innerGap) {
|
|
119
|
-
contentStyle.gap = this.innerGap;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
const hostClass = classnames({
|
|
123
|
-
'has-grow': this.grow > 0,
|
|
124
|
-
'display-flex': this.displayFlex,
|
|
125
|
-
[`inner-${this.innerDirection}`]: this.displayFlex,
|
|
126
|
-
});
|
|
127
|
-
return (h(Host, { key: '7ff795b1c7e8947ec3c807d387d1bfd6eaec0e78', style: hostStyle, class: hostClass }, h("le-component", { key: 'f9d95344461ac913dcf2cbd653541f0f2ce961ea', component: "le-box" }, h("div", { key: '9c772c7fcca7f1401601eb8f730acd2edced6de2', class: "box", part: "box" }, h("div", { key: '62d77dadf5966a6bd73ef839281c20574460716d', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: 'f4a02189f884db240cfc7070a600983e905aedfb', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '57857570d54c3c1144dff8989733e5ba07c5407e' })))))));
|
|
128
|
-
}
|
|
129
|
-
get el() { return getElement(this); }
|
|
130
|
-
};
|
|
131
|
-
LeBox.style = leBoxCss();
|
|
132
|
-
|
|
133
|
-
export { LeBox as le_box };
|
|
134
|
-
//# sourceMappingURL=le-box.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"le-box.entry.js","sources":["src/components/le-box/le-box.css?tag=le-box&encapsulation=shadow","src/components/le-box/le-box.tsx"],"sourcesContent":["/**\n * le-box default styles\n *\n * Flex item properties are applied inline via hostStyle.\n * This CSS handles visual styling and theming.\n */\n\n:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* Box container - full size by default */\n.box {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\n/* Content wrapper */\n.content {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n background: var(--le-box-bg, transparent);\n border-radius: var(--le-box-border-radius, 0);\n padding: var(--le-box-padding, 0);\n}\n\n/* When displayFlex is enabled, ensure content stretches */\n:host(.display-flex) .content {\n min-height: 100%;\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible box component for use as a flex item within le-stack.\n *\n * `le-box` wraps content and provides flex item properties like grow, shrink,\n * basis, and self-alignment. It can also control its internal content alignment.\n *\n * @slot - Default slot for box content\n *\n * @cssprop --le-box-bg - Background color\n * @cssprop --le-box-padding - Padding inside the box\n * @cssprop --le-box-border-radius - Border radius\n *\n * @csspart box - The main box container\n * @csspart content - The inner content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n tag: 'le-box',\n styleUrl: 'le-box.css',\n shadow: true,\n})\nexport class LeBox {\n @Element() el: HTMLElement;\n\n /**\n * Flex grow factor - how much the item should grow relative to siblings\n * @min 0\n */\n @Prop() grow: number = 0;\n\n /**\n * Flex shrink factor - how much the item should shrink relative to siblings\n * @min 0\n */\n @Prop() shrink: number = 1;\n\n /**\n * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')\n */\n @Prop() basis: string = 'auto';\n\n /**\n * Width of the box (CSS value like '100px', '50%', 'auto')\n */\n @Prop() width?: string;\n\n /**\n * Height of the box (CSS value)\n */\n @Prop() height?: string;\n\n /**\n * Minimum width constraint\n */\n @Prop() minWidth?: string;\n\n /**\n * Maximum width constraint\n */\n @Prop() maxWidth?: string;\n\n /**\n * Minimum height constraint\n */\n @Prop() minHeight?: string;\n\n /**\n * Maximum height constraint\n */\n @Prop() maxHeight?: string;\n\n /**\n * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')\n */\n @Prop() background?: string;\n\n /**\n * Border radius (e.g., '8px', 'var(--le-radius-md)')\n */\n @Prop() borderRadius?: string;\n\n /**\n * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')\n */\n @Prop() border?: string;\n\n /**\n * Self-alignment override for this item on the cross axis\n * @allowedValues auto | start | center | end | stretch | baseline\n */\n @Prop() alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'auto';\n\n /**\n * Internal horizontal alignment of content\n * @allowedValues start | center | end | stretch\n */\n @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /**\n * Internal vertical alignment of content\n * @allowedValues start | center | end | stretch\n */\n @Prop() justifyContent: 'start' | 'center' | 'end' | 'stretch' = 'start';\n\n /**\n * Padding inside the box (CSS value like '8px', '1rem')\n */\n @Prop() padding?: string;\n\n /**\n * Order in the flex container (lower values come first)\n */\n @Prop() order?: number;\n\n /**\n * Whether to display box content as flex (for internal alignment)\n */\n @Prop() displayFlex: boolean = false;\n\n /**\n * Direction of internal flex layout when displayFlex is true\n * @allowedValues horizontal | vertical\n */\n @Prop() innerDirection: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * Gap between internal flex items when displayFlex is true\n */\n @Prop() innerGap?: string;\n\n private getAlignSelf(): string {\n const alignMap: Record<string, string> = {\n auto: 'auto',\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n return alignMap[this.alignSelf] || 'auto';\n }\n\n private getContentAlign(): string {\n const alignMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n };\n return alignMap[this.alignContent] || 'stretch';\n }\n\n private getContentJustify(): string {\n const justifyMap: Record<string, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n };\n return justifyMap[this.justifyContent] || 'flex-start';\n }\n\n render() {\n // Host styles for flex item behavior\n const hostStyle: { [key: string]: string } = {\n flexGrow: String(this.grow),\n flexShrink: String(this.shrink),\n flexBasis: this.basis,\n alignSelf: this.getAlignSelf(),\n };\n\n if (this.width) hostStyle.width = this.width;\n if (this.height) hostStyle.height = this.height;\n if (this.minWidth) hostStyle.minWidth = this.minWidth;\n if (this.maxWidth) hostStyle.maxWidth = this.maxWidth;\n if (this.minHeight) hostStyle.minHeight = this.minHeight;\n if (this.maxHeight) hostStyle.maxHeight = this.maxHeight;\n if (this.order !== undefined) hostStyle.order = String(this.order);\n\n // Inner content styles\n const contentStyle: { [key: string]: string } = {};\n\n if (this.padding) {\n contentStyle.padding = this.padding;\n }\n if (this.background) {\n contentStyle.background = this.background;\n }\n if (this.borderRadius) {\n contentStyle.borderRadius = this.borderRadius;\n }\n if (this.border) {\n contentStyle.border = this.border;\n }\n\n if (this.displayFlex) {\n contentStyle.display = 'flex';\n contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';\n contentStyle.alignItems = this.getContentAlign();\n contentStyle.justifyContent = this.getContentJustify();\n if (this.innerGap) {\n contentStyle.gap = this.innerGap;\n }\n }\n\n const hostClass = classnames({\n 'has-grow': this.grow > 0,\n 'display-flex': this.displayFlex,\n [`inner-${this.innerDirection}`]: this.displayFlex,\n });\n\n return (\n <Host style={hostStyle} class={hostClass}>\n <le-component component=\"le-box\">\n <div class=\"box\" part=\"box\">\n <div class=\"content\" part=\"content\" style={contentStyle}>\n <le-slot\n name=\"\"\n description=\"Content inside this flex item\"\n type=\"slot\"\n allowed-components=\"le-text,le-card,le-button,le-stack,le-box\"\n >\n <slot></slot>\n </le-slot>\n </div>\n </div>\n </le-component>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-DFTm5BqT.js';
|
|
2
|
-
import { g as generateId, c as classnames } from './utils-DZYCZLrF.js';
|
|
3
|
-
|
|
4
|
-
const leBreadcrumbsCss = () => `:host{display:block}.breadcrumbs{display:flex;align-items:center;gap:var(--le-space-xs);min-width:0}.list{display:flex;align-items:center;gap:var(--le-space-xs);min-width:0;flex:1}.list.wrap{flex-wrap:wrap}.list.scroll{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.list.scroll::-webkit-scrollbar{display:none}.item{--le-button-padding-x:var(--le-spacing-2);--le-button-padding-y:var(--le-spacing-1)}.item.current{color:var(--le-color-text);font-weight:var(--le-font-weight-medium)}.item-popover{--le-popover-padding:var(--le-space-xs)}.separator{display:inline-flex;align-items:center;color:var(--le-color-text-tertiary, var(--le-color-text-secondary))}.separator ::slotted(*){display:inline-flex;align-items:center}.more-trigger{display:inline-flex;align-items:center;appearance:none;border:0;background:none;padding:0;color:inherit;cursor:pointer}.hidden-slot{display:none}`;
|
|
5
|
-
|
|
6
|
-
const LeBreadcrumbs = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.leBreadcrumbSelect = createEvent(this, "leBreadcrumbSelect");
|
|
10
|
-
/**
|
|
11
|
-
* Breadcrumb items (supports JSON string).
|
|
12
|
-
*/
|
|
13
|
-
this.items = [];
|
|
14
|
-
/**
|
|
15
|
-
* Accessible label for the breadcrumbs navigation.
|
|
16
|
-
*/
|
|
17
|
-
this.label = 'Breadcrumbs';
|
|
18
|
-
/**
|
|
19
|
-
* Separator icon name (used if no separator slot is provided).
|
|
20
|
-
*/
|
|
21
|
-
this.separatorIcon = 'chevron-right';
|
|
22
|
-
/**
|
|
23
|
-
* Overflow behavior: collapse (default), wrap, or scroll.
|
|
24
|
-
*/
|
|
25
|
-
this.overflowMode = 'collapse';
|
|
26
|
-
/**
|
|
27
|
-
* Minimum visible items before collapsing.
|
|
28
|
-
*/
|
|
29
|
-
this.minVisibleItems = 2;
|
|
30
|
-
this.hiddenIndices = [];
|
|
31
|
-
this.separatorTemplate = '';
|
|
32
|
-
this.instanceId = generateId('le-breadcrumbs');
|
|
33
|
-
this.recomputeQueued = false;
|
|
34
|
-
this.handleSeparatorSlotChange = (ev) => {
|
|
35
|
-
const slot = ev.target;
|
|
36
|
-
const nodes = slot.assignedNodes({ flatten: true });
|
|
37
|
-
const html = nodes
|
|
38
|
-
.map(node => {
|
|
39
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
40
|
-
return node.textContent || '';
|
|
41
|
-
}
|
|
42
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
43
|
-
return node.outerHTML || '';
|
|
44
|
-
}
|
|
45
|
-
return '';
|
|
46
|
-
})
|
|
47
|
-
.join('')
|
|
48
|
-
.trim();
|
|
49
|
-
this.separatorTemplate = html;
|
|
50
|
-
this.scheduleOverflowRecompute();
|
|
51
|
-
};
|
|
52
|
-
this.handleItemClick = (item, id, ev) => {
|
|
53
|
-
const href = item.href || item.url;
|
|
54
|
-
this.leBreadcrumbSelect.emit({ item, id, href, originalEvent: ev });
|
|
55
|
-
};
|
|
56
|
-
this.handleKeyDown = (ev) => {
|
|
57
|
-
if (ev.key !== 'ArrowRight' && ev.key !== 'ArrowLeft')
|
|
58
|
-
return;
|
|
59
|
-
const focusables = Array.from(this.el.shadowRoot?.querySelectorAll('a,button,[tabindex="0"]') || []);
|
|
60
|
-
if (focusables.length === 0)
|
|
61
|
-
return;
|
|
62
|
-
const current = document.activeElement;
|
|
63
|
-
const idx = focusables.findIndex(el => el === current);
|
|
64
|
-
if (idx === -1)
|
|
65
|
-
return;
|
|
66
|
-
ev.preventDefault();
|
|
67
|
-
const nextIdx = ev.key === 'ArrowRight' ? idx + 1 : idx - 1;
|
|
68
|
-
const target = focusables[(nextIdx + focusables.length) % focusables.length];
|
|
69
|
-
target?.focus();
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
componentDidLoad() {
|
|
73
|
-
this.setupResizeObserver();
|
|
74
|
-
this.scheduleOverflowRecompute();
|
|
75
|
-
}
|
|
76
|
-
disconnectedCallback() {
|
|
77
|
-
this.resizeObserver?.disconnect();
|
|
78
|
-
}
|
|
79
|
-
handleInputsChange() {
|
|
80
|
-
this.scheduleOverflowRecompute();
|
|
81
|
-
}
|
|
82
|
-
setupResizeObserver() {
|
|
83
|
-
if (typeof window === 'undefined' || !('ResizeObserver' in window))
|
|
84
|
-
return;
|
|
85
|
-
this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowRecompute());
|
|
86
|
-
this.resizeObserver.observe(this.el);
|
|
87
|
-
}
|
|
88
|
-
get parsedItems() {
|
|
89
|
-
if (typeof this.items === 'string') {
|
|
90
|
-
try {
|
|
91
|
-
return JSON.parse(this.items);
|
|
92
|
-
}
|
|
93
|
-
catch {
|
|
94
|
-
return [];
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
return this.items;
|
|
98
|
-
}
|
|
99
|
-
getItemId(item, index) {
|
|
100
|
-
return item.id ?? `${this.instanceId}:${index}`;
|
|
101
|
-
}
|
|
102
|
-
scheduleOverflowRecompute() {
|
|
103
|
-
if (this.overflowMode !== 'collapse') {
|
|
104
|
-
if (this.hiddenIndices.length) {
|
|
105
|
-
this.hiddenIndices = [];
|
|
106
|
-
}
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
if (this.recomputeQueued)
|
|
110
|
-
return;
|
|
111
|
-
this.recomputeQueued = true;
|
|
112
|
-
requestAnimationFrame(() => this.recomputeOverflow());
|
|
113
|
-
}
|
|
114
|
-
nextFrame() {
|
|
115
|
-
return new Promise(resolve => requestAnimationFrame(() => resolve()));
|
|
116
|
-
}
|
|
117
|
-
async recomputeOverflow() {
|
|
118
|
-
this.recomputeQueued = false;
|
|
119
|
-
if (this.overflowMode !== 'collapse') {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
const items = this.parsedItems;
|
|
123
|
-
if (!this.listEl || items.length <= Math.max(2, this.minVisibleItems)) {
|
|
124
|
-
if (this.hiddenIndices.length) {
|
|
125
|
-
this.hiddenIndices = [];
|
|
126
|
-
}
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
// Reset hidden items first
|
|
130
|
-
if (this.hiddenIndices.length) {
|
|
131
|
-
this.hiddenIndices = [];
|
|
132
|
-
await this.nextFrame();
|
|
133
|
-
}
|
|
134
|
-
const containerWidth = this.listEl.clientWidth;
|
|
135
|
-
if (!containerWidth)
|
|
136
|
-
return;
|
|
137
|
-
const candidates = items.map((_, idx) => idx).slice(1, -1);
|
|
138
|
-
const hidden = [];
|
|
139
|
-
let attempts = 0;
|
|
140
|
-
while (this.listEl.scrollWidth > containerWidth &&
|
|
141
|
-
attempts < candidates.length &&
|
|
142
|
-
items.length - hidden.length > this.minVisibleItems) {
|
|
143
|
-
const next = candidates.shift();
|
|
144
|
-
if (next === undefined)
|
|
145
|
-
break;
|
|
146
|
-
hidden.push(next);
|
|
147
|
-
this.hiddenIndices = [...hidden];
|
|
148
|
-
await this.nextFrame();
|
|
149
|
-
attempts += 1;
|
|
150
|
-
}
|
|
151
|
-
// If still overflowing, hide first then last as a last resort
|
|
152
|
-
if (this.listEl.scrollWidth > containerWidth &&
|
|
153
|
-
items.length - hidden.length > this.minVisibleItems) {
|
|
154
|
-
if (!hidden.includes(0)) {
|
|
155
|
-
hidden.unshift(0);
|
|
156
|
-
this.hiddenIndices = [...hidden];
|
|
157
|
-
await this.nextFrame();
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
if (this.listEl.scrollWidth > containerWidth &&
|
|
161
|
-
items.length - hidden.length > this.minVisibleItems) {
|
|
162
|
-
const lastIndex = items.length - 1;
|
|
163
|
-
if (!hidden.includes(lastIndex)) {
|
|
164
|
-
hidden.push(lastIndex);
|
|
165
|
-
this.hiddenIndices = [...hidden];
|
|
166
|
-
await this.nextFrame();
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
renderSeparator() {
|
|
171
|
-
console.log('separatorTemplate', this.separatorTemplate || 'no-template', this.separatorIcon);
|
|
172
|
-
if (this.separatorTemplate) {
|
|
173
|
-
return h("span", { class: "separator", "aria-hidden": "true", innerHTML: this.separatorTemplate });
|
|
174
|
-
}
|
|
175
|
-
return (h("span", { class: "separator", "aria-hidden": "true" }, h("le-icon", { name: this.separatorIcon })));
|
|
176
|
-
}
|
|
177
|
-
renderItem(item, index) {
|
|
178
|
-
const id = this.getItemId(item, index);
|
|
179
|
-
const hasChildren = Array.isArray(item.children) && item.children.length > 0;
|
|
180
|
-
const isCurrent = !!item.selected;
|
|
181
|
-
const itemClass = classnames('item', { current: isCurrent });
|
|
182
|
-
const icontent = item.icon || item.iconStart;
|
|
183
|
-
const content = (h("le-button", { slot: hasChildren ? 'trigger' : undefined, variant: "clear", color: "secondary", class: itemClass, onClick: ev => this.handleItemClick(item, id, ev), "aria-haspopup": "menu", "aria-current": isCurrent ? 'page' : null, part: item.part, iconStart: icontent }, h("span", { class: "item-label" }, item.label)));
|
|
184
|
-
if (hasChildren) {
|
|
185
|
-
return (h("le-popover", { position: "bottom", align: "start", "show-close": "false", class: "item-popover" }, content, h("le-navigation", { orientation: "vertical", items: item.children, style: { minWidth: '200px' } })));
|
|
186
|
-
}
|
|
187
|
-
return content;
|
|
188
|
-
}
|
|
189
|
-
renderMore(hiddenItems) {
|
|
190
|
-
if (hiddenItems.length === 0)
|
|
191
|
-
return null;
|
|
192
|
-
return (h("le-popover", { position: "bottom", align: "start", "show-close": "false" }, h("button", { slot: "trigger", class: "more-trigger", type: "button", "aria-haspopup": "menu" }, h("slot", { name: "more-trigger" }, h("le-icon", { name: "ellipsis-horizontal" }))), h("le-navigation", { orientation: "vertical", items: hiddenItems, style: { minWidth: '200px' } })));
|
|
193
|
-
}
|
|
194
|
-
render() {
|
|
195
|
-
const items = this.parsedItems;
|
|
196
|
-
const indexedItems = items.map((item, index) => ({ item, index }));
|
|
197
|
-
const hiddenSet = new Set(this.hiddenIndices);
|
|
198
|
-
const hiddenItems = indexedItems.filter(({ index }) => hiddenSet.has(index));
|
|
199
|
-
const visibleItems = indexedItems.filter(({ index }) => !hiddenSet.has(index));
|
|
200
|
-
const shouldCollapse = this.overflowMode === 'collapse' && hiddenItems.length > 0;
|
|
201
|
-
const firstVisible = visibleItems[0];
|
|
202
|
-
const remainingVisible = visibleItems.slice(1);
|
|
203
|
-
const firstHidden = hiddenSet.has(0);
|
|
204
|
-
return (h(Host, { key: '6da8c091e08c97f903d6e840d02bca6a321ed0ba', onKeyDown: this.handleKeyDown }, h("nav", { key: 'ddc78c68de5a49d59a3d7cfa446ce7a4dea02366', class: "breadcrumbs", "aria-label": this.label }, h("slot", { key: 'c76c6164b589bdad8715a8adbe94d39dab261e71', name: "start" }), h("div", { key: '80fecb4159d873e7d5994299229f80610f0ca1ed', class: classnames('list', {
|
|
205
|
-
wrap: this.overflowMode === 'wrap',
|
|
206
|
-
scroll: this.overflowMode === 'scroll',
|
|
207
|
-
}), ref: el => (this.listEl = el) }, !firstHidden && firstVisible
|
|
208
|
-
? this.renderItem(firstVisible.item, firstVisible.index)
|
|
209
|
-
: null, shouldCollapse && !firstHidden && firstVisible ? this.renderSeparator() : null, shouldCollapse ? this.renderMore(hiddenItems.map(h => h.item)) : null, (firstHidden ? visibleItems : remainingVisible).map(({ item, index }, i) => (h(Fragment, null, this.renderSeparator(), h("span", { class: "crumb", key: `${item.label}-${index}-${i}` }, this.renderItem(item, index)))))), h("slot", { key: 'cd9f1f1200554f43cd144f07870aa3063de9a843', name: "end" })), h("span", { key: '3bd953f8c8a4bae9d2e1b3bbe61977d92b1f0f50', class: "hidden-slot", "aria-hidden": "true" }, h("slot", { key: '5deeddaba836a0ac6c698d25ed799670231c3acd', name: "separator", onSlotchange: this.handleSeparatorSlotChange }))));
|
|
210
|
-
}
|
|
211
|
-
get el() { return getElement(this); }
|
|
212
|
-
static get watchers() { return {
|
|
213
|
-
"items": ["handleInputsChange"],
|
|
214
|
-
"overflowMode": ["handleInputsChange"],
|
|
215
|
-
"minVisibleItems": ["handleInputsChange"]
|
|
216
|
-
}; }
|
|
217
|
-
};
|
|
218
|
-
LeBreadcrumbs.style = leBreadcrumbsCss();
|
|
219
|
-
|
|
220
|
-
export { LeBreadcrumbs as le_breadcrumbs };
|
|
221
|
-
//# sourceMappingURL=le-breadcrumbs.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"le-breadcrumbs.entry.js","sources":["src/components/le-breadcrumbs/le-breadcrumbs.css?tag=le-breadcrumbs&encapsulation=shadow","src/components/le-breadcrumbs/le-breadcrumbs.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.breadcrumbs {\n display: flex;\n align-items: center;\n gap: var(--le-space-xs);\n min-width: 0;\n}\n\n.list {\n display: flex;\n align-items: center;\n gap: var(--le-space-xs);\n min-width: 0;\n flex: 1;\n}\n\n.list.wrap {\n flex-wrap: wrap;\n}\n\n.list.scroll {\n overflow-x: auto;\n white-space: nowrap;\n scrollbar-width: none;\n}\n\n.list.scroll::-webkit-scrollbar {\n display: none;\n}\n\n.item {\n --le-button-padding-x: var(--le-spacing-2);\n --le-button-padding-y: var(--le-spacing-1);\n}\n\n.item.current {\n color: var(--le-color-text);\n font-weight: var(--le-font-weight-medium);\n}\n\n.item-popover {\n --le-popover-padding: var(--le-space-xs);\n}\n\n.separator {\n display: inline-flex;\n align-items: center;\n color: var(--le-color-text-tertiary, var(--le-color-text-secondary));\n}\n\n.separator ::slotted(*) {\n display: inline-flex;\n align-items: center;\n}\n\n.more-trigger {\n display: inline-flex;\n align-items: center;\n appearance: none;\n border: 0;\n background: none;\n padding: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.hidden-slot {\n display: none;\n}\n","import {\n Component,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n Watch,\n h,\n Host,\n Fragment,\n} from '@stencil/core';\nimport { LeOption } from '../../types/options';\nimport { classnames, generateId } from '../../utils/utils';\n\nexport interface LeBreadcrumbSelectDetail {\n item: LeOption;\n id: string;\n href?: string;\n originalEvent: MouseEvent | KeyboardEvent;\n}\n\n@Component({\n tag: 'le-breadcrumbs',\n styleUrl: 'le-breadcrumbs.css',\n shadow: true,\n})\nexport class LeBreadcrumbs {\n @Element() el: HTMLElement;\n\n /**\n * Breadcrumb items (supports JSON string).\n */\n @Prop() items: LeOption[] | string = [];\n\n /**\n * Accessible label for the breadcrumbs navigation.\n */\n @Prop() label: string = 'Breadcrumbs';\n\n /**\n * Separator icon name (used if no separator slot is provided).\n */\n @Prop() separatorIcon: string = 'chevron-right';\n\n /**\n * Overflow behavior: collapse (default), wrap, or scroll.\n */\n @Prop() overflowMode: 'collapse' | 'wrap' | 'scroll' = 'collapse';\n\n /**\n * Minimum visible items before collapsing.\n */\n @Prop() minVisibleItems: number = 2;\n\n /**\n * Emitted when a breadcrumb item is selected.\n */\n @Event({ cancelable: true }) leBreadcrumbSelect: EventEmitter<LeBreadcrumbSelectDetail>;\n\n @State() private hiddenIndices: number[] = [];\n @State() private separatorTemplate: string = '';\n\n private listEl?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n private instanceId: string = generateId('le-breadcrumbs');\n private recomputeQueued: boolean = false;\n\n componentDidLoad() {\n this.setupResizeObserver();\n this.scheduleOverflowRecompute();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Watch('items')\n @Watch('overflowMode')\n @Watch('minVisibleItems')\n handleInputsChange() {\n this.scheduleOverflowRecompute();\n }\n\n private setupResizeObserver() {\n if (typeof window === 'undefined' || !('ResizeObserver' in window)) return;\n this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowRecompute());\n this.resizeObserver.observe(this.el);\n }\n\n private get parsedItems(): LeOption[] {\n if (typeof this.items === 'string') {\n try {\n return JSON.parse(this.items);\n } catch {\n return [];\n }\n }\n return this.items;\n }\n\n private getItemId(item: LeOption, index: number): string {\n return item.id ?? `${this.instanceId}:${index}`;\n }\n\n private handleSeparatorSlotChange = (ev: Event) => {\n const slot = ev.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n const html = nodes\n .map(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent || '';\n }\n if (node.nodeType === Node.ELEMENT_NODE) {\n return (node as HTMLElement).outerHTML || '';\n }\n return '';\n })\n .join('')\n .trim();\n\n this.separatorTemplate = html;\n this.scheduleOverflowRecompute();\n };\n\n private scheduleOverflowRecompute() {\n if (this.overflowMode !== 'collapse') {\n if (this.hiddenIndices.length) {\n this.hiddenIndices = [];\n }\n return;\n }\n\n if (this.recomputeQueued) return;\n this.recomputeQueued = true;\n requestAnimationFrame(() => this.recomputeOverflow());\n }\n\n private nextFrame(): Promise<void> {\n return new Promise(resolve => requestAnimationFrame(() => resolve()));\n }\n\n private async recomputeOverflow() {\n this.recomputeQueued = false;\n\n if (this.overflowMode !== 'collapse') {\n return;\n }\n\n const items = this.parsedItems;\n if (!this.listEl || items.length <= Math.max(2, this.minVisibleItems)) {\n if (this.hiddenIndices.length) {\n this.hiddenIndices = [];\n }\n return;\n }\n\n // Reset hidden items first\n if (this.hiddenIndices.length) {\n this.hiddenIndices = [];\n await this.nextFrame();\n }\n\n const containerWidth = this.listEl.clientWidth;\n if (!containerWidth) return;\n\n const candidates = items.map((_, idx) => idx).slice(1, -1);\n const hidden: number[] = [];\n\n let attempts = 0;\n while (\n this.listEl.scrollWidth > containerWidth &&\n attempts < candidates.length &&\n items.length - hidden.length > this.minVisibleItems\n ) {\n const next = candidates.shift();\n if (next === undefined) break;\n hidden.push(next);\n this.hiddenIndices = [...hidden];\n await this.nextFrame();\n attempts += 1;\n }\n\n // If still overflowing, hide first then last as a last resort\n if (\n this.listEl.scrollWidth > containerWidth &&\n items.length - hidden.length > this.minVisibleItems\n ) {\n if (!hidden.includes(0)) {\n hidden.unshift(0);\n this.hiddenIndices = [...hidden];\n await this.nextFrame();\n }\n }\n\n if (\n this.listEl.scrollWidth > containerWidth &&\n items.length - hidden.length > this.minVisibleItems\n ) {\n const lastIndex = items.length - 1;\n if (!hidden.includes(lastIndex)) {\n hidden.push(lastIndex);\n this.hiddenIndices = [...hidden];\n await this.nextFrame();\n }\n }\n }\n\n private handleItemClick = (item: LeOption, id: string, ev: MouseEvent) => {\n const href = (item as any).href || (item as any).url;\n this.leBreadcrumbSelect.emit({ item, id, href, originalEvent: ev });\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (ev.key !== 'ArrowRight' && ev.key !== 'ArrowLeft') return;\n const focusables = Array.from(\n this.el.shadowRoot?.querySelectorAll<HTMLElement>('a,button,[tabindex=\"0\"]') || [],\n );\n\n if (focusables.length === 0) return;\n const current = document.activeElement as HTMLElement | null;\n const idx = focusables.findIndex(el => el === current);\n if (idx === -1) return;\n\n ev.preventDefault();\n const nextIdx = ev.key === 'ArrowRight' ? idx + 1 : idx - 1;\n const target = focusables[(nextIdx + focusables.length) % focusables.length];\n target?.focus();\n };\n\n private renderSeparator() {\n console.log('separatorTemplate', this.separatorTemplate || 'no-template', this.separatorIcon);\n if (this.separatorTemplate) {\n return <span class=\"separator\" aria-hidden=\"true\" innerHTML={this.separatorTemplate}></span>;\n }\n\n return (\n <span class=\"separator\" aria-hidden=\"true\">\n <le-icon name={this.separatorIcon} />\n </span>\n );\n }\n\n private renderItem(item: LeOption, index: number) {\n const id = this.getItemId(item, index);\n const hasChildren = Array.isArray(item.children) && item.children.length > 0;\n const isCurrent = !!item.selected;\n\n const itemClass = classnames('item', { current: isCurrent });\n const icontent = item.icon || item.iconStart;\n const content = (\n <le-button\n slot={hasChildren ? 'trigger' : undefined}\n variant=\"clear\"\n color=\"secondary\"\n class={itemClass}\n onClick={ev => this.handleItemClick(item, id, ev)}\n aria-haspopup=\"menu\"\n aria-current={isCurrent ? 'page' : null}\n part={item.part}\n iconStart={icontent}\n >\n <span class=\"item-label\">{item.label}</span>\n </le-button>\n );\n\n if (hasChildren) {\n return (\n <le-popover position=\"bottom\" align=\"start\" show-close=\"false\" class=\"item-popover\">\n {content}\n <le-navigation\n orientation=\"vertical\"\n items={item.children as LeOption[]}\n style={{ minWidth: '200px' }}\n ></le-navigation>\n </le-popover>\n );\n }\n\n return content;\n }\n\n private renderMore(hiddenItems: LeOption[]) {\n if (hiddenItems.length === 0) return null;\n\n return (\n <le-popover position=\"bottom\" align=\"start\" show-close=\"false\">\n <button slot=\"trigger\" class=\"more-trigger\" type=\"button\" aria-haspopup=\"menu\">\n <slot name=\"more-trigger\">\n <le-icon name=\"ellipsis-horizontal\" />\n </slot>\n </button>\n <le-navigation\n orientation=\"vertical\"\n items={hiddenItems}\n style={{ minWidth: '200px' }}\n ></le-navigation>\n </le-popover>\n );\n }\n\n render() {\n const items = this.parsedItems;\n const indexedItems = items.map((item, index) => ({ item, index }));\n const hiddenSet = new Set(this.hiddenIndices);\n const hiddenItems = indexedItems.filter(({ index }) => hiddenSet.has(index));\n const visibleItems = indexedItems.filter(({ index }) => !hiddenSet.has(index));\n const shouldCollapse = this.overflowMode === 'collapse' && hiddenItems.length > 0;\n\n const firstVisible = visibleItems[0];\n const remainingVisible = visibleItems.slice(1);\n const firstHidden = hiddenSet.has(0);\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\n <nav class=\"breadcrumbs\" aria-label={this.label}>\n <slot name=\"start\"></slot>\n\n <div\n class={classnames('list', {\n wrap: this.overflowMode === 'wrap',\n scroll: this.overflowMode === 'scroll',\n })}\n ref={el => (this.listEl = el as HTMLElement)}\n >\n {!firstHidden && firstVisible\n ? this.renderItem(firstVisible.item, firstVisible.index)\n : null}\n\n {shouldCollapse && !firstHidden && firstVisible ? this.renderSeparator() : null}\n {shouldCollapse ? this.renderMore(hiddenItems.map(h => h.item)) : null}\n\n {(firstHidden ? visibleItems : remainingVisible).map(({ item, index }, i) => (\n <Fragment>\n {this.renderSeparator()}\n <span class=\"crumb\" key={`${item.label}-${index}-${i}`}>\n {this.renderItem(item, index)}\n </span>\n </Fragment>\n ))}\n </div>\n\n <slot name=\"end\"></slot>\n </nav>\n\n <span class=\"hidden-slot\" aria-hidden=\"true\">\n <slot name=\"separator\" onSlotchange={this.handleSeparatorSlotChange}></slot>\n </span>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, a as getElement } from './index-DFTm5BqT.js';
|
|
2
|
-
import { c as classnames } from './utils-DZYCZLrF.js';
|
|
3
|
-
|
|
4
|
-
const leCardCss = () => `:host{display:block;--le-card-bg:var(--le-color-surface);--le-card-border-radius:var(--le-radius-lg);--le-card-shadow:var(--le-shadow-md);--le-card-shadow-elevated:var(--le-shadow-lg);--le-card-shadow-hover:var(--le-shadow-xl);--le-card-padding:var(--le-space-md);--le-card-border-color:var(--le-color-border);--le-card-transition:var(--le-transition-normal)}.card{background:var(--le-card-bg);border-radius:var(--le-card-border-radius);overflow:hidden;color:var(--le-color-text);box-shadow:var(--le-card-shadow)}:host>le-component.variant-outlined .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host>le-component.variant-elevated .card{box-shadow:var(--le-card-shadow-elevated)}:host>le-component.interactive .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host>le-component.interactive .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host>le-component.interactive .card:focus-visible{outline:2px solid var(--le-color-border-focus);outline-offset:2px}.card-header{padding:var(--le-card-padding);padding-bottom:0}.card-header:empty{display:none}.card-content{padding:var(--le-card-padding)}.card-footer{padding:var(--le-card-padding);padding-top:0}.card-footer:empty{display:none}`;
|
|
5
|
-
|
|
6
|
-
const LeCard = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
/**
|
|
10
|
-
* Card variant style
|
|
11
|
-
* @allowedValues default | outlined | elevated
|
|
12
|
-
*/
|
|
13
|
-
this.variant = 'default';
|
|
14
|
-
/**
|
|
15
|
-
* Whether the card is interactive (clickable)
|
|
16
|
-
*/
|
|
17
|
-
this.interactive = false;
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
return (h("le-component", { key: '50b722661132acca9396539021caebd0beb99c13', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '4fa7de6abb9460281b1a98a158b76dcd0ee9fe8d', class: "card", part: "card" }, h("div", { key: '60b67d4d7416628fbd07aae2623aebeb10e78366', class: "card-header", part: "header" }, h("le-slot", { key: '1ef59c336f43b1292eae242b00e92d1b90ec1fd1', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: 'cdbf9d8ee5b832a7c7314443e974b6f3fe0d6ffd', name: "header" }))), h("div", { key: '11290af7a2fc3f927e825e06f5ae51797013592e', class: "card-content", part: "content" }, h("le-slot", { key: '29d5890f7b841138910c84bf9017462edb90a851', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: '6e30f0ca8881825cf474e9d28ca7f16cc9e2feb6' }))), h("div", { key: '6e4824adaafef5e440e7d9e26d29048841e3cdba', class: "card-footer", part: "footer" }, h("le-slot", { key: 'aa734bdb5f1166bae0868949225bfc50cdb6e898', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '6d3bf34e9585b38ce19aaeacf8259543560856a4', name: "footer" }))))));
|
|
21
|
-
}
|
|
22
|
-
get el() { return getElement(this); }
|
|
23
|
-
};
|
|
24
|
-
LeCard.style = leCardCss();
|
|
25
|
-
|
|
26
|
-
export { LeCard as le_card };
|
|
27
|
-
//# sourceMappingURL=le-card.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"le-card.entry.js","sources":["src/components/le-card/le-card.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.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,SAAS,GAAG,MAAM,CAAC,2wCAA2wC,CAAC;;MCgCxxC,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwC,SAAS;AAEhE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AA2BrC;IAzBC,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,145 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFTm5BqT.js';
|
|
2
|
-
import { c as classnames } from './utils-DZYCZLrF.js';
|
|
3
|
-
|
|
4
|
-
const leCodeInputCss = () => `: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-border-focus:2px solid var(--le-color-focus);--le-input-border-focus-offset:2px}.le-code-input-wrapper{position:relative;display:flex;flex-direction:column}.le-input-label{display:block;margin-bottom:var(--le-spacing-2, 0.5rem);color:var(--le-text-color, inherit);font-size:var(--le-font-size-sm, 0.875rem);font-weight:500}.input-group{position:relative;display:inline-flex;width:fit-content}.ghost-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:10;cursor:text;color:transparent;background:transparent;caret-color:transparent;border:none;outline:none;letter-spacing:1em;}.ghost-input:disabled{cursor:not-allowed}.visual-container{display:flex;gap:var(--le-spacing-2, 8px);pointer-events:none;}.code-box{position:relative;width:var(--le-code-box-size, 32px);height:var(--le-code-box-size, 42px);display:flex;align-items:center;justify-content:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);color:var(--le-input-color);font-size:1.2rem;transition:all 0.15s ease-in-out;box-sizing:border-box;user-select:none}.code-box.active{outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset);z-index:1}.code-box.selected{background-color:SelectedItem;outline:var(--le-input-border-focus);outline-offset:var(--le-input-border-focus-offset)}.input-group.has-error .code-box{border:var(--le-input-border-error, 1px solid #ef4444)}.input-group.has-error .code-box.active{border-width:2px}:host(.disabled) .code-box{background-color:var(--le-color-disabled-bg, #f3f4f6);color:var(--le-color-disabled-text, #9ca3af);border-color:var(--le-color-disabled-border, #e5e7eb)}.le-input-description,:host(p){margin-top:var(--le-spacing-1, 0.25rem);color:var(--le-text-muted, #6b7280);font-size:var(--le-font-size-sm, 0.875rem)}`;
|
|
5
|
-
|
|
6
|
-
const LeCodeInput = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.leChange = createEvent(this, "leChange");
|
|
10
|
-
this.leInput = createEvent(this, "leInput");
|
|
11
|
-
this.leFocus = createEvent(this, "leFocus");
|
|
12
|
-
this.leBlur = createEvent(this, "leBlur");
|
|
13
|
-
/**
|
|
14
|
-
* The value of the input
|
|
15
|
-
*/
|
|
16
|
-
this.value = '';
|
|
17
|
-
/**
|
|
18
|
-
* Length of the code (number of characters)
|
|
19
|
-
*/
|
|
20
|
-
this.length = 6;
|
|
21
|
-
/**
|
|
22
|
-
* The type of code (numeric or alphanumeric)
|
|
23
|
-
* This affects the keyboard layout on mobile devices.
|
|
24
|
-
*/
|
|
25
|
-
this.type = 'text';
|
|
26
|
-
/**
|
|
27
|
-
* Whether the input is disabled
|
|
28
|
-
*/
|
|
29
|
-
this.disabled = false;
|
|
30
|
-
/**
|
|
31
|
-
* Whether the input is read-only
|
|
32
|
-
*/
|
|
33
|
-
this.readonly = false;
|
|
34
|
-
/**
|
|
35
|
-
* Internal validation state (can be set externally manually or via simple check)
|
|
36
|
-
*/
|
|
37
|
-
this.error = false;
|
|
38
|
-
this.isFocused = false;
|
|
39
|
-
this.selectionStart = 0;
|
|
40
|
-
this.selectionEnd = 0;
|
|
41
|
-
this.handleInput = (ev) => {
|
|
42
|
-
const input = ev.target;
|
|
43
|
-
let val = input.value;
|
|
44
|
-
// Enforce length limit
|
|
45
|
-
if (val.length > this.length) {
|
|
46
|
-
val = val.slice(0, this.length);
|
|
47
|
-
// We need to force update the input value if it exceeded length
|
|
48
|
-
// because Stencil prop update might not happen if value is same as prop but input is different
|
|
49
|
-
input.value = val;
|
|
50
|
-
}
|
|
51
|
-
this.value = val;
|
|
52
|
-
this.updateSelection(input);
|
|
53
|
-
this.leInput.emit({
|
|
54
|
-
value: this.value,
|
|
55
|
-
name: this.name,
|
|
56
|
-
externalId: this.externalId,
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
this.handleChange = () => {
|
|
60
|
-
this.leChange.emit({
|
|
61
|
-
value: this.value,
|
|
62
|
-
name: this.name,
|
|
63
|
-
externalId: this.externalId,
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
this.handleFocus = (ev) => {
|
|
67
|
-
this.isFocused = true;
|
|
68
|
-
const input = ev.target;
|
|
69
|
-
// Move cursor to the end on focus so typing appends to current value
|
|
70
|
-
window.requestAnimationFrame(() => {
|
|
71
|
-
const len = input.value.length;
|
|
72
|
-
input.setSelectionRange(len, len);
|
|
73
|
-
this.updateSelection(input);
|
|
74
|
-
});
|
|
75
|
-
this.leFocus.emit();
|
|
76
|
-
};
|
|
77
|
-
this.handleBlur = () => {
|
|
78
|
-
this.isFocused = false;
|
|
79
|
-
this.leBlur.emit();
|
|
80
|
-
// Trigger change on blur
|
|
81
|
-
this.handleChange();
|
|
82
|
-
};
|
|
83
|
-
this.handleSelect = (ev) => {
|
|
84
|
-
this.updateSelection(ev.target);
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
valueChanged(newValue) {
|
|
88
|
-
if (newValue && newValue.length > this.length) {
|
|
89
|
-
this.value = newValue.slice(0, this.length);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
componentWillLoad() {
|
|
93
|
-
if (this.value && this.value.length > this.length) {
|
|
94
|
-
this.value = this.value.slice(0, this.length);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
updateSelection(input) {
|
|
98
|
-
this.selectionStart = input.selectionStart || 0;
|
|
99
|
-
this.selectionEnd = input.selectionEnd || 0;
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Helper to determine active index for focus ring
|
|
103
|
-
*/
|
|
104
|
-
getActiveIndex() {
|
|
105
|
-
if (!this.isFocused)
|
|
106
|
-
return -1;
|
|
107
|
-
// If we have a range selection, usually focus ring is not shown or shown around selection?
|
|
108
|
-
// We'll stick to showing it at the cursor end (selectionEnd) or start?
|
|
109
|
-
// If range selected, `selectionStart` is start of range.
|
|
110
|
-
// If cursor is at the very end (pos == length), we highlight the last box
|
|
111
|
-
if (this.selectionStart === this.length && this.length > 0) {
|
|
112
|
-
return this.length - 1;
|
|
113
|
-
}
|
|
114
|
-
return this.selectionStart;
|
|
115
|
-
}
|
|
116
|
-
renderBoxes() {
|
|
117
|
-
const boxes = [];
|
|
118
|
-
const activeIndex = this.getActiveIndex();
|
|
119
|
-
const isRangeSelection = this.selectionEnd - this.selectionStart > 0;
|
|
120
|
-
for (let i = 0; i < this.length; i++) {
|
|
121
|
-
const char = this.value ? this.value[i] : '';
|
|
122
|
-
const isActive = this.isFocused && !isRangeSelection && i === activeIndex;
|
|
123
|
-
const isSelected = this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;
|
|
124
|
-
boxes.push(h("div", { class: classnames('code-box', {
|
|
125
|
-
'active': isActive,
|
|
126
|
-
'selected': isSelected,
|
|
127
|
-
'has-value': !!char,
|
|
128
|
-
}) }, char));
|
|
129
|
-
}
|
|
130
|
-
return boxes;
|
|
131
|
-
}
|
|
132
|
-
render() {
|
|
133
|
-
return (h("le-component", { key: 'c9a4a92342645c54aee90091cd860fc439de6334', component: "le-code-input", hostClass: classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, h("div", { key: '50480c7c827ba801421c260c4e6fef88f22dcbd0', class: "le-code-input-wrapper" }, this.label && (h("label", { key: '316653c42c51ea0a443d8401c5adaf3e4821d7c8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '803789d07d538e1576dbb0ff7536110ab620632b', class: classnames('input-group', { 'has-error': this.error }) }, h("input", { key: '7bbf221d32aa9363066d799b5b2a4aac2e9ae77f', class: "ghost-input", id: this.name, name: this.name, type: "text", inputMode: this.type === 'number' ? 'numeric' : 'text', pattern: this.type === 'number' ? '[0-9]*' : undefined, autocomplete: "one-time-code", value: this.value, maxLength: this.length, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onSelect: this.handleSelect,
|
|
134
|
-
// Prevent browser autofill background from messing up visual
|
|
135
|
-
spellcheck: false, autoCapitalize: "none", autoCorrect: "off" }), h("div", { key: '0ff57ab380039c4bbbbf0e347331eb6885f8ce63', class: "visual-container" }, this.renderBoxes())), !this.error && (h("div", { key: '7da46dfc052457588969a1c9631eb310d80030c4', class: "le-input-description" }, h("le-slot", { key: '7bcfa46fd981286736ea7ec490d65c962ef998d5', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'ee810bf920acc45c48b3cbc4ebf9598ac5937923', name: "description" }, this.description)))))));
|
|
136
|
-
}
|
|
137
|
-
get el() { return getElement(this); }
|
|
138
|
-
static get watchers() { return {
|
|
139
|
-
"value": ["valueChanged"]
|
|
140
|
-
}; }
|
|
141
|
-
};
|
|
142
|
-
LeCodeInput.style = leCodeInputCss();
|
|
143
|
-
|
|
144
|
-
export { LeCodeInput as le_code_input };
|
|
145
|
-
//# sourceMappingURL=le-code-input.entry.js.map
|