le-kit 0.1.6 → 0.1.8
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/le-kit/assets/custom-elements.json → custom-elements.json} +889 -889
- package/dist/cjs/{index-WzJ78D5H.js → index-D7B9TPh8.js} +41 -9
- package/dist/cjs/index-D7B9TPh8.js.map +1 -0
- package/dist/cjs/index.cjs.js +4 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/le-box.cjs.entry.js +2 -2
- package/dist/cjs/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.cjs.js.map +1 -1
- package/dist/cjs/le-button_6.cjs.entry.js +8 -10
- package/dist/cjs/le-card.cjs.entry.js +2 -2
- package/dist/cjs/le-kit.cjs.js +1 -1
- package/dist/cjs/le-number-input.cjs.entry.js +2 -2
- package/dist/cjs/le-popup.cjs.entry.js +1 -1
- package/dist/cjs/le-round-progress.cjs.entry.js +1 -1
- package/dist/cjs/le-stack.cjs.entry.js +2 -2
- package/dist/cjs/le-text.cjs.entry.js +2 -2
- package/dist/cjs/le-turntable.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{utils-CBjH2E8A.js → utils-DrsoID-a.js} +3 -3
- package/dist/cjs/{utils-CBjH2E8A.js.map → utils-DrsoID-a.js.map} +1 -1
- package/dist/collection/components/le-component/le-component.js +5 -5
- package/dist/collection/components/le-component/le-component.js.map +1 -1
- package/dist/collection/components/le-popup/le-popup.js +7 -7
- package/dist/collection/components/le-slot/le-slot.js +5 -5
- package/dist/collection/components/le-slot/le-slot.js.map +1 -1
- package/dist/collection/global/app.js +37 -0
- package/dist/collection/global/app.js.map +1 -1
- package/dist/collection/index.js +1 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/le-box.js +1 -1
- package/dist/components/le-button.js +1 -1
- package/dist/components/le-button2.js +45 -10
- package/dist/components/le-button2.js.map +1 -1
- package/dist/components/le-card.js +1 -1
- package/dist/components/le-checkbox.js +1 -1
- package/dist/components/le-component.js +1 -1
- package/dist/components/le-number-input.js +1 -1
- package/dist/components/le-popup.js +1 -1
- package/dist/components/le-slot.js +1 -1
- package/dist/components/le-stack.js +1 -1
- package/dist/components/le-string-input.js +1 -1
- package/dist/components/le-text.js +1 -1
- package/dist/core/cjs/index-D7B9TPh8.js +1835 -0
- package/dist/core/cjs/index-D7B9TPh8.js.map +1 -0
- package/dist/core/cjs/index.cjs.js +119 -0
- package/dist/core/cjs/index.cjs.js.map +1 -0
- package/dist/core/cjs/le-box.cjs.entry.js +184 -0
- package/dist/core/cjs/le-box.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-button.cjs.entry.js +92 -0
- package/dist/core/cjs/le-button.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-card.cjs.entry.js +29 -0
- package/dist/core/cjs/le-card.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-checkbox.cjs.entry.js +61 -0
- package/dist/core/cjs/le-checkbox.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-kit.cjs.js +25 -0
- package/dist/core/cjs/le-kit.cjs.js.map +1 -0
- package/dist/core/cjs/le-number-input.cjs.entry.js +202 -0
- package/dist/core/cjs/le-number-input.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-popover.cjs.entry.js +348 -0
- package/dist/core/cjs/le-popover.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-popup.cjs.entry.js +212 -0
- package/dist/core/cjs/le-popup.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-round-progress.cjs.entry.js +106 -0
- package/dist/core/cjs/le-round-progress.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-stack.cjs.entry.js +135 -0
- package/dist/core/cjs/le-stack.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-string-input.cjs.entry.js +95 -0
- package/dist/core/cjs/le-string-input.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-text.cjs.entry.js +335 -0
- package/dist/core/cjs/le-text.entry.cjs.js.map +1 -0
- package/dist/core/cjs/le-turntable.cjs.entry.js +139 -0
- package/dist/core/cjs/le-turntable.entry.cjs.js.map +1 -0
- package/dist/core/cjs/loader.cjs.js +13 -0
- package/dist/core/cjs/loader.cjs.js.map +1 -0
- package/dist/core/cjs/utils-DrsoID-a.js +152 -0
- package/dist/core/cjs/utils-DrsoID-a.js.map +1 -0
- package/dist/core/collection/collection-manifest.json +24 -0
- package/dist/core/collection/components/le-box/le-box.default.css +37 -0
- package/dist/core/collection/components/le-box/le-box.js +614 -0
- package/dist/core/collection/components/le-box/le-box.js.map +1 -0
- package/dist/core/collection/components/le-button/le-button.default.css +263 -0
- package/dist/core/collection/components/le-button/le-button.js +368 -0
- package/dist/core/collection/components/le-button/le-button.js.map +1 -0
- package/dist/core/collection/components/le-card/le-card.default.css +74 -0
- package/dist/core/collection/components/le-card/le-card.js +102 -0
- package/dist/core/collection/components/le-card/le-card.js.map +1 -0
- package/dist/core/collection/components/le-checkbox/le-checkbox.css +93 -0
- package/dist/core/collection/components/le-checkbox/le-checkbox.js +192 -0
- package/dist/core/collection/components/le-checkbox/le-checkbox.js.map +1 -0
- package/dist/core/collection/components/le-number-input/le-number-input.css +135 -0
- package/dist/core/collection/components/le-number-input/le-number-input.js +515 -0
- package/dist/core/collection/components/le-number-input/le-number-input.js.map +1 -0
- package/dist/core/collection/components/le-popover/le-popover.css +143 -0
- package/dist/core/collection/components/le-popover/le-popover.js +693 -0
- package/dist/core/collection/components/le-popover/le-popover.js.map +1 -0
- package/dist/core/collection/components/le-popup/le-popup.api.js +101 -0
- package/dist/core/collection/components/le-popup/le-popup.api.js.map +1 -0
- package/dist/core/collection/components/le-popup/le-popup.css +222 -0
- package/dist/core/collection/components/le-popup/le-popup.js +596 -0
- package/dist/core/collection/components/le-popup/le-popup.js.map +1 -0
- package/dist/core/collection/components/le-round-progress/le-round-progress.css +34 -0
- package/dist/core/collection/components/le-round-progress/le-round-progress.js +184 -0
- package/dist/core/collection/components/le-round-progress/le-round-progress.js.map +1 -0
- package/dist/core/collection/components/le-stack/le-stack.default.css +37 -0
- package/dist/core/collection/components/le-stack/le-stack.js +389 -0
- package/dist/core/collection/components/le-stack/le-stack.js.map +1 -0
- package/dist/core/collection/components/le-string-input/le-string-input.css +83 -0
- package/dist/core/collection/components/le-string-input/le-string-input.js +359 -0
- package/dist/core/collection/components/le-string-input/le-string-input.js.map +1 -0
- package/dist/core/collection/components/le-text/le-text.default.css +169 -0
- package/dist/core/collection/components/le-text/le-text.js +475 -0
- package/dist/core/collection/components/le-text/le-text.js.map +1 -0
- package/dist/core/collection/components/le-turntable/le-turntable.css +10 -0
- package/dist/core/collection/components/le-turntable/le-turntable.js +210 -0
- package/dist/core/collection/components/le-turntable/le-turntable.js.map +1 -0
- package/dist/core/collection/global/app.js +167 -0
- package/dist/core/collection/global/app.js.map +1 -0
- package/dist/core/collection/index.js +15 -0
- package/dist/core/collection/index.js.map +1 -0
- package/dist/core/collection/types/blocks.js +115 -0
- package/dist/core/collection/types/blocks.js.map +1 -0
- package/dist/core/collection/types/options.js +2 -0
- package/dist/core/collection/types/options.js.map +1 -0
- package/dist/core/collection/utils/utils.js +141 -0
- package/dist/core/collection/utils/utils.js.map +1 -0
- package/dist/{esm/index-CdjJ98OT.js → core/esm/index-PS-3Rz-c.js} +40 -9
- package/dist/core/esm/index-PS-3Rz-c.js.map +1 -0
- package/dist/core/esm/index.js +106 -0
- package/dist/core/esm/index.js.map +1 -0
- package/dist/core/esm/le-box.entry.js +182 -0
- package/dist/core/esm/le-box.entry.js.map +1 -0
- package/dist/core/esm/le-button.entry.js +90 -0
- package/dist/core/esm/le-button.entry.js.map +1 -0
- package/dist/core/esm/le-card.entry.js +27 -0
- package/dist/core/esm/le-card.entry.js.map +1 -0
- package/dist/core/esm/le-checkbox.entry.js +59 -0
- package/dist/core/esm/le-checkbox.entry.js.map +1 -0
- package/dist/core/esm/le-kit.js +21 -0
- package/dist/core/esm/le-kit.js.map +1 -0
- package/dist/core/esm/le-number-input.entry.js +200 -0
- package/dist/core/esm/le-number-input.entry.js.map +1 -0
- package/dist/core/esm/le-popover.entry.js +346 -0
- package/dist/core/esm/le-popover.entry.js.map +1 -0
- package/dist/core/esm/le-popup.entry.js +210 -0
- package/dist/core/esm/le-popup.entry.js.map +1 -0
- package/dist/core/esm/le-round-progress.entry.js +104 -0
- package/dist/core/esm/le-round-progress.entry.js.map +1 -0
- package/dist/core/esm/le-stack.entry.js +133 -0
- package/dist/core/esm/le-stack.entry.js.map +1 -0
- package/dist/core/esm/le-string-input.entry.js +93 -0
- package/dist/core/esm/le-string-input.entry.js.map +1 -0
- package/dist/core/esm/le-text.entry.js +333 -0
- package/dist/core/esm/le-text.entry.js.map +1 -0
- package/dist/core/esm/le-turntable.entry.js +137 -0
- package/dist/core/esm/le-turntable.entry.js.map +1 -0
- package/dist/core/esm/loader.js +11 -0
- package/dist/core/esm/loader.js.map +1 -0
- package/dist/{esm/utils-CzfSUhYB.js → core/esm/utils-lgjSfQP0.js} +3 -3
- package/dist/core/esm/utils-lgjSfQP0.js.map +1 -0
- package/dist/core/index.cjs.js +1 -0
- package/dist/core/index.js +1 -0
- package/dist/core/le-kit/index.esm.js +2 -0
- package/dist/core/le-kit/index.esm.js.map +1 -0
- package/dist/core/le-kit/le-box.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-button.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-card.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-checkbox.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-kit.css +1 -0
- package/dist/core/le-kit/le-kit.esm.js +2 -0
- package/dist/core/le-kit/le-kit.esm.js.map +1 -0
- package/dist/core/le-kit/le-number-input.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-popover.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-popup.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-round-progress.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-stack.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-string-input.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-text.entry.esm.js.map +1 -0
- package/dist/core/le-kit/le-turntable.entry.esm.js.map +1 -0
- package/dist/core/le-kit/loader.esm.js.map +1 -0
- package/dist/core/le-kit/p-1c5262eb.entry.js +2 -0
- package/dist/core/le-kit/p-1c5262eb.entry.js.map +1 -0
- package/dist/core/le-kit/p-32c08678.entry.js +2 -0
- package/dist/core/le-kit/p-32c08678.entry.js.map +1 -0
- package/dist/core/le-kit/p-38e7ec05.entry.js +2 -0
- package/dist/core/le-kit/p-38e7ec05.entry.js.map +1 -0
- package/dist/core/le-kit/p-4bf51acc.entry.js +2 -0
- package/dist/core/le-kit/p-4bf51acc.entry.js.map +1 -0
- package/dist/core/le-kit/p-86961f34.entry.js +2 -0
- package/dist/core/le-kit/p-86961f34.entry.js.map +1 -0
- package/dist/core/le-kit/p-9ee92c29.entry.js +2 -0
- package/dist/{le-kit/p-CvDc0yWN.js → core/le-kit/p-DN2JVY-7.js} +2 -2
- package/dist/core/le-kit/p-DN2JVY-7.js.map +1 -0
- package/dist/core/le-kit/p-PS-3Rz-c.js +3 -0
- package/dist/core/le-kit/p-PS-3Rz-c.js.map +1 -0
- package/dist/core/le-kit/p-a07048f8.entry.js +2 -0
- package/dist/core/le-kit/p-a07048f8.entry.js.map +1 -0
- package/dist/core/le-kit/p-a24b042d.entry.js +2 -0
- package/dist/core/le-kit/p-a24b042d.entry.js.map +1 -0
- package/dist/core/le-kit/p-bbc9e13e.entry.js +2 -0
- package/dist/core/le-kit/p-bbc9e13e.entry.js.map +1 -0
- package/dist/core/le-kit/p-c4223c60.entry.js +2 -0
- package/dist/core/le-kit/p-c4223c60.entry.js.map +1 -0
- package/dist/core/le-kit/p-dcf1343d.entry.js +2 -0
- package/dist/core/le-kit/p-fb4e68e0.entry.js +2 -0
- package/dist/core/le-kit/p-fb4e68e0.entry.js.map +1 -0
- package/dist/core/loader/cdn.js +1 -0
- package/dist/core/loader/index.cjs.js +1 -0
- package/dist/core/loader/index.d.ts +24 -0
- package/dist/core/loader/index.es2017.js +1 -0
- package/dist/core/loader/index.js +2 -0
- package/dist/core/types/components/le-box/le-box.d.ts +111 -0
- package/dist/core/types/components/le-button/le-button.d.ts +78 -0
- package/dist/core/types/components/le-card/le-card.d.ts +37 -0
- package/dist/core/types/components/le-checkbox/le-checkbox.d.ts +46 -0
- package/dist/core/types/components/le-number-input/le-number-input.d.ts +106 -0
- package/dist/core/types/components/le-popover/le-popover.d.ts +109 -0
- package/dist/core/types/components/le-popup/le-popup.api.d.ts +73 -0
- package/dist/core/types/components/le-popup/le-popup.d.ts +122 -0
- package/dist/core/types/components/le-round-progress/le-round-progress.d.ts +37 -0
- package/dist/core/types/components/le-stack/le-stack.d.ts +73 -0
- package/dist/core/types/components/le-string-input/le-string-input.d.ts +83 -0
- package/dist/core/types/components/le-text/le-text.d.ts +141 -0
- package/dist/core/types/components/le-turntable/le-turntable.d.ts +55 -0
- package/dist/core/types/components.d.ts +1752 -0
- package/dist/core/types/global/app.d.ts +73 -0
- package/dist/core/types/index.d.ts +15 -0
- package/dist/core/types/stencil-public-runtime.d.ts +1756 -0
- package/dist/core/types/types/blocks.d.ts +136 -0
- package/dist/core/types/types/options.d.ts +124 -0
- package/dist/core/types/utils/utils.d.ts +54 -0
- package/dist/docs.json +8 -8
- package/dist/esm/index-PS-3Rz-c.js +1818 -0
- package/dist/{le-kit/p-CdjJ98OT.js.map → esm/index-PS-3Rz-c.js.map} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/le-box.entry.js +2 -2
- package/dist/esm/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.js.map +1 -1
- package/dist/esm/le-button_6.entry.js +8 -10
- package/dist/esm/le-card.entry.js +2 -2
- package/dist/esm/le-kit.js +2 -2
- package/dist/esm/le-number-input.entry.js +2 -2
- package/dist/esm/le-popup.entry.js +1 -1
- package/dist/esm/le-round-progress.entry.js +1 -1
- package/dist/esm/le-stack.entry.js +2 -2
- package/dist/esm/le-text.entry.js +2 -2
- package/dist/esm/le-turntable.entry.js +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/utils-lgjSfQP0.js +146 -0
- package/dist/esm/{utils-CzfSUhYB.js.map → utils-lgjSfQP0.js.map} +1 -1
- package/dist/le-kit/index.esm.js +1 -1
- package/dist/le-kit/le-button.le-checkbox.le-component.le-popover.le-slot.le-string-input.entry.esm.js.map +1 -1
- package/dist/le-kit/le-kit.esm.js +1 -1
- package/dist/le-kit/p-27710b5b.entry.js +2 -0
- package/dist/le-kit/{p-0633b3ab.entry.js.map → p-27710b5b.entry.js.map} +1 -1
- package/dist/le-kit/{p-1452a995.entry.js → p-34102cef.entry.js} +2 -2
- package/dist/le-kit/{p-95764888.entry.js → p-56a80e6d.entry.js} +2 -2
- package/dist/le-kit/p-615ea10f.entry.js +2 -0
- package/dist/le-kit/p-615ea10f.entry.js.map +1 -0
- package/dist/le-kit/{p-bc20e30d.entry.js → p-935bb2d4.entry.js} +2 -2
- package/dist/le-kit/{p-220528ee.entry.js → p-9d3dc4e5.entry.js} +2 -2
- package/dist/le-kit/p-DN2JVY-7.js +2 -0
- package/dist/le-kit/{p-CvDc0yWN.js.map → p-DN2JVY-7.js.map} +1 -1
- package/dist/le-kit/p-PS-3Rz-c.js +3 -0
- package/dist/le-kit/p-PS-3Rz-c.js.map +1 -0
- package/dist/le-kit/{p-3551598e.entry.js → p-ccabc638.entry.js} +2 -2
- package/dist/le-kit/p-ccabc638.entry.js.map +1 -0
- package/dist/le-kit/{p-722899f0.entry.js → p-d8157b06.entry.js} +2 -2
- package/dist/le-kit/p-d8157b06.entry.js.map +1 -0
- package/dist/le-kit/p-e8c2ca0e.entry.js +2 -0
- package/dist/le-kit/{p-d32eddad.entry.js.map → p-e8c2ca0e.entry.js.map} +1 -1
- package/dist/types/global/app.d.ts +33 -0
- package/dist/types/index.d.ts +1 -1
- package/package.json +21 -3
- package/readme.md +22 -0
- package/dist/cjs/index-WzJ78D5H.js.map +0 -1
- package/dist/collection/assets/.gitkeep +0 -1
- package/dist/collection/assets/custom-elements.json +0 -4305
- package/dist/esm/index-CdjJ98OT.js.map +0 -1
- package/dist/le-kit/p-0633b3ab.entry.js +0 -2
- package/dist/le-kit/p-32ff3dbe.entry.js +0 -2
- package/dist/le-kit/p-32ff3dbe.entry.js.map +0 -1
- package/dist/le-kit/p-CdjJ98OT.js +0 -3
- package/dist/le-kit/p-d32eddad.entry.js +0 -2
- /package/dist/{le-kit/p-3551598e.entry.js.map → core/le-kit/p-9ee92c29.entry.js.map} +0 -0
- /package/dist/{le-kit/p-722899f0.entry.js.map → core/le-kit/p-dcf1343d.entry.js.map} +0 -0
- /package/dist/le-kit/{p-1452a995.entry.js.map → p-34102cef.entry.js.map} +0 -0
- /package/dist/le-kit/{p-95764888.entry.js.map → p-56a80e6d.entry.js.map} +0 -0
- /package/dist/le-kit/{p-bc20e30d.entry.js.map → p-935bb2d4.entry.js.map} +0 -0
- /package/dist/le-kit/{p-220528ee.entry.js.map → p-9d3dc4e5.entry.js.map} +0 -0
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { r as registerInstance, i as createEvent, j as getElement, k as h, H as Host } from './index-PS-3Rz-c.js';
|
|
2
|
+
import { c as classnames } from './utils-lgjSfQP0.js';
|
|
3
|
+
|
|
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
|
+
|
|
6
|
+
const LeNumberInput = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.leChange = createEvent(this, "leChange");
|
|
10
|
+
this.leInput = createEvent(this, "leInput");
|
|
11
|
+
}
|
|
12
|
+
get el() { return getElement(this); }
|
|
13
|
+
/**
|
|
14
|
+
* The value of the input
|
|
15
|
+
*/
|
|
16
|
+
value;
|
|
17
|
+
/**
|
|
18
|
+
* The name of the input
|
|
19
|
+
*/
|
|
20
|
+
name;
|
|
21
|
+
/**
|
|
22
|
+
* Label for the input
|
|
23
|
+
*/
|
|
24
|
+
label;
|
|
25
|
+
/**
|
|
26
|
+
* Placeholder text
|
|
27
|
+
*/
|
|
28
|
+
placeholder;
|
|
29
|
+
/**
|
|
30
|
+
* Minimum allowed value
|
|
31
|
+
*/
|
|
32
|
+
min;
|
|
33
|
+
/**
|
|
34
|
+
* Maximum allowed value
|
|
35
|
+
*/
|
|
36
|
+
max;
|
|
37
|
+
/**
|
|
38
|
+
* Step value for increment/decrement
|
|
39
|
+
*/
|
|
40
|
+
step = 1;
|
|
41
|
+
/**
|
|
42
|
+
* Whether the input is required
|
|
43
|
+
*/
|
|
44
|
+
required = false;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the input is disabled
|
|
47
|
+
*/
|
|
48
|
+
disabled = false;
|
|
49
|
+
/**
|
|
50
|
+
* Whether the input is read-only
|
|
51
|
+
*/
|
|
52
|
+
readonly = false;
|
|
53
|
+
/**
|
|
54
|
+
* Icon for the start icon
|
|
55
|
+
*/
|
|
56
|
+
iconStart;
|
|
57
|
+
/**
|
|
58
|
+
* Whether to show the spinner controls
|
|
59
|
+
*/
|
|
60
|
+
showSpinners = true;
|
|
61
|
+
/**
|
|
62
|
+
* External ID for linking with external systems
|
|
63
|
+
*/
|
|
64
|
+
externalId;
|
|
65
|
+
/**
|
|
66
|
+
* Internal validation state
|
|
67
|
+
*/
|
|
68
|
+
isValid = true;
|
|
69
|
+
validationMessage = '';
|
|
70
|
+
/**
|
|
71
|
+
* Emitted when the value changes (on blur or Enter)
|
|
72
|
+
*/
|
|
73
|
+
leChange;
|
|
74
|
+
/**
|
|
75
|
+
* Emitted when the input value changes (on keystroke/spin)
|
|
76
|
+
*/
|
|
77
|
+
leInput;
|
|
78
|
+
valueChanged() {
|
|
79
|
+
this.validate();
|
|
80
|
+
}
|
|
81
|
+
validate() {
|
|
82
|
+
if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {
|
|
83
|
+
this.isValid = false;
|
|
84
|
+
this.validationMessage = 'This field is required';
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {
|
|
88
|
+
if (this.min !== undefined && this.value < this.min) {
|
|
89
|
+
this.isValid = false;
|
|
90
|
+
this.validationMessage = `Value must be at least ${this.min}`;
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
if (this.max !== undefined && this.value > this.max) {
|
|
94
|
+
this.isValid = false;
|
|
95
|
+
this.validationMessage = `Value must be at most ${this.max}`;
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
this.isValid = true;
|
|
100
|
+
this.validationMessage = '';
|
|
101
|
+
}
|
|
102
|
+
emitChange() {
|
|
103
|
+
this.leChange.emit({
|
|
104
|
+
value: this.value,
|
|
105
|
+
name: this.name,
|
|
106
|
+
externalId: this.externalId,
|
|
107
|
+
isValid: this.isValid
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
emitInput() {
|
|
111
|
+
this.leInput.emit({
|
|
112
|
+
value: this.value,
|
|
113
|
+
name: this.name,
|
|
114
|
+
externalId: this.externalId,
|
|
115
|
+
isValid: this.isValid
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
updateValue(newValue) {
|
|
119
|
+
if (this.disabled || this.readonly)
|
|
120
|
+
return;
|
|
121
|
+
// Round to avoid floating point errors
|
|
122
|
+
const precision = this.step.toString().split('.')[1]?.length || 0;
|
|
123
|
+
const rounded = parseFloat(newValue.toFixed(precision));
|
|
124
|
+
this.value = rounded;
|
|
125
|
+
this.validate();
|
|
126
|
+
this.emitInput();
|
|
127
|
+
}
|
|
128
|
+
handleInput = (ev) => {
|
|
129
|
+
const input = ev.target;
|
|
130
|
+
const val = parseFloat(input.value);
|
|
131
|
+
if (input.value === '') {
|
|
132
|
+
this.value = undefined;
|
|
133
|
+
}
|
|
134
|
+
else if (!isNaN(val)) {
|
|
135
|
+
this.value = val;
|
|
136
|
+
}
|
|
137
|
+
this.validate();
|
|
138
|
+
this.emitInput();
|
|
139
|
+
};
|
|
140
|
+
handleChange = () => {
|
|
141
|
+
this.validate();
|
|
142
|
+
this.emitChange();
|
|
143
|
+
};
|
|
144
|
+
handleKeyDown = (ev) => {
|
|
145
|
+
if (this.disabled || this.readonly)
|
|
146
|
+
return;
|
|
147
|
+
let multiplier = 1;
|
|
148
|
+
if (ev.shiftKey)
|
|
149
|
+
multiplier = 10;
|
|
150
|
+
if (ev.altKey)
|
|
151
|
+
multiplier = 0.1;
|
|
152
|
+
const current = this.value || 0;
|
|
153
|
+
if (ev.key === 'ArrowUp') {
|
|
154
|
+
ev.preventDefault();
|
|
155
|
+
this.updateValue(current + (this.step * multiplier));
|
|
156
|
+
}
|
|
157
|
+
else if (ev.key === 'ArrowDown') {
|
|
158
|
+
ev.preventDefault();
|
|
159
|
+
this.updateValue(current - (this.step * multiplier));
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
handleWheel = (ev) => {
|
|
163
|
+
if (this.disabled || this.readonly)
|
|
164
|
+
return;
|
|
165
|
+
// Only handle if input is focused to prevent accidental scrolling
|
|
166
|
+
if (document.activeElement !== ev.target)
|
|
167
|
+
return;
|
|
168
|
+
ev.preventDefault();
|
|
169
|
+
const current = this.value || 0;
|
|
170
|
+
if (ev.deltaY < 0) {
|
|
171
|
+
this.updateValue(current + this.step);
|
|
172
|
+
}
|
|
173
|
+
else {
|
|
174
|
+
this.updateValue(current - this.step);
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
increment = (ev) => {
|
|
178
|
+
ev.preventDefault(); // Prevent focus loss
|
|
179
|
+
const current = this.value || 0;
|
|
180
|
+
this.updateValue(current + this.step);
|
|
181
|
+
// Trigger change event for buttons as they are "final" actions usually
|
|
182
|
+
this.emitChange();
|
|
183
|
+
};
|
|
184
|
+
decrement = (ev) => {
|
|
185
|
+
ev.preventDefault();
|
|
186
|
+
const current = this.value || 0;
|
|
187
|
+
this.updateValue(current - this.step);
|
|
188
|
+
this.emitChange();
|
|
189
|
+
};
|
|
190
|
+
render() {
|
|
191
|
+
return (h(Host, { key: '4b23af3dffd76a17c89f028447bb85c7cf12e3df', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: '750438149c519f06672bed9d57f1f9830db79d11', class: "le-input-wrapper" }, this.label && (h("label", { key: '6e5f1dc4cd9211def05593635a3d798684aee52e', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'a3a39d3ae3c0da57927b06b0293ca5852d4f2b60', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'be1c9e1cb4061e6ca8e13796dfb536a7e436a688', class: "icon-start" }, this.iconStart)), h("input", { key: 'e59624c3a2360595b75577e2d9b04933300f4d3d', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'ac84077c3444da1414ba06e8b797f60766edd3db', class: "le-input-controls" }, h("le-button", { key: 'c452141f07a3a4f3090374df10896fca036f4a01', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: '489960a26e655f3852b4d26f1660d7c8411cc896', slot: "icon-only" }, "\u2191")), h("le-button", { key: 'd3662170c7718c9d51a0089362faf70b62715aa8', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: '48e035cece04f248137925af42d0728010e4ac78', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'd439b3c235fd3f8fb127eaed292f49e6382d0d6e', class: "le-input-error" }, this.validationMessage), h("div", { key: 'e27428a5e033617af04c656cbf5d5954ab770cec', class: "le-input-description" }, h("slot", { key: 'bab0f00e77f7241d63ffb694f4905b8cf82e5513', name: "description" })))));
|
|
192
|
+
}
|
|
193
|
+
static get watchers() { return {
|
|
194
|
+
"value": ["valueChanged"]
|
|
195
|
+
}; }
|
|
196
|
+
};
|
|
197
|
+
LeNumberInput.style = leNumberInputCss;
|
|
198
|
+
|
|
199
|
+
export { LeNumberInput as le_number_input };
|
|
200
|
+
//# sourceMappingURL=le-number-input.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"le-number-input.entry.js","sources":["src-core/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src-core/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 , Host } 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 <Host class={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 \n <slot name=\"description\"></slot>\n \n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
import { r as registerInstance, i as createEvent, j as getElement, k as h } from './index-PS-3Rz-c.js';
|
|
2
|
+
|
|
3
|
+
const lePopoverCss = "/* ============================================\n le-popover.css\n Popover using native HTML Popover API\n ============================================ */\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/* ============================================\n Trigger\n ============================================ */\n\n.le-popover-trigger {\n display: inline-flex;\n cursor: pointer;\n}\n\n.le-popover-default-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 6px);\n background: var(--le-color-surface, #fff);\n color: var(--le-color-text-secondary, #666);\n font-size: 16px;\n cursor: pointer;\n transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n border-color: var(--le-color-primary, #2196f3);\n color: var(--le-color-primary, #2196f3);\n background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n Popover Content (native popover)\n ============================================ */\n\n.le-popover-content {\n /* Reset native popover defaults */\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n \n /* Positioning - will be set via JS */\n position: fixed;\n inset: unset;\n \n /* Styling */\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 8px);\n box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n \n /* Animation */\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n .le-popover-content:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n min-height: 32px;\n}\n\n.le-popover-title {\n font-weight: var(--le-font-weight-semibold, 600);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--le-color-text-secondary, #666);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n border-radius: var(--le-radius-sm, 4px);\n transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popover-body {\n padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n Scrollable content\n ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n overflow-y: auto;\n}\n";
|
|
4
|
+
|
|
5
|
+
const LePopover = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.lePopoverOpen = createEvent(this, "lePopoverOpen");
|
|
9
|
+
this.lePopoverClose = createEvent(this, "lePopoverClose");
|
|
10
|
+
}
|
|
11
|
+
get el() { return getElement(this); }
|
|
12
|
+
/**
|
|
13
|
+
* Mode of the popover should be 'default' for internal use
|
|
14
|
+
*/
|
|
15
|
+
mode;
|
|
16
|
+
/**
|
|
17
|
+
* Whether the popover is currently open
|
|
18
|
+
*/
|
|
19
|
+
open = false;
|
|
20
|
+
/**
|
|
21
|
+
* Position of the popover relative to its trigger
|
|
22
|
+
*/
|
|
23
|
+
position = 'bottom';
|
|
24
|
+
/**
|
|
25
|
+
* Alignment of the popover
|
|
26
|
+
*/
|
|
27
|
+
align = 'start';
|
|
28
|
+
/**
|
|
29
|
+
* Optional title for the popover header
|
|
30
|
+
*/
|
|
31
|
+
popoverTitle;
|
|
32
|
+
/**
|
|
33
|
+
* Whether to show a close button in the header
|
|
34
|
+
*/
|
|
35
|
+
showClose = true;
|
|
36
|
+
/**
|
|
37
|
+
* Whether clicking outside closes the popover
|
|
38
|
+
*/
|
|
39
|
+
closeOnClickOutside = true;
|
|
40
|
+
/**
|
|
41
|
+
* Whether pressing Escape closes the popover
|
|
42
|
+
*/
|
|
43
|
+
closeOnEscape = true;
|
|
44
|
+
/**
|
|
45
|
+
* Offset from the trigger element (in pixels)
|
|
46
|
+
*/
|
|
47
|
+
offset = 8;
|
|
48
|
+
/**
|
|
49
|
+
* Fixed width for the popover (e.g., '300px', '20rem')
|
|
50
|
+
*/
|
|
51
|
+
width;
|
|
52
|
+
/**
|
|
53
|
+
* Minimum width for the popover (e.g., '200px', '15rem')
|
|
54
|
+
*/
|
|
55
|
+
minWidth = '200px';
|
|
56
|
+
/**
|
|
57
|
+
* Maximum width for the popover (e.g., '400px', '25rem')
|
|
58
|
+
*/
|
|
59
|
+
maxWidth;
|
|
60
|
+
/**
|
|
61
|
+
* Emitted when the popover opens
|
|
62
|
+
*/
|
|
63
|
+
lePopoverOpen;
|
|
64
|
+
/**
|
|
65
|
+
* Emitted when the popover closes
|
|
66
|
+
*/
|
|
67
|
+
lePopoverClose;
|
|
68
|
+
isPositioned = false;
|
|
69
|
+
triggerEl;
|
|
70
|
+
popoverEl;
|
|
71
|
+
uniqueId = `le-popover-${Math.random().toString(36).substr(2, 9)}`;
|
|
72
|
+
scrollParents = [];
|
|
73
|
+
componentDidLoad() {
|
|
74
|
+
// Listen for toggle events from the native popover API
|
|
75
|
+
this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle);
|
|
76
|
+
// Listen for other popovers opening to close this one
|
|
77
|
+
document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
|
|
78
|
+
}
|
|
79
|
+
disconnectedCallback() {
|
|
80
|
+
this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle);
|
|
81
|
+
document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);
|
|
82
|
+
this.removeScrollListeners();
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Find all scrollable parent elements
|
|
86
|
+
*/
|
|
87
|
+
getScrollParents(element) {
|
|
88
|
+
const scrollParents = [];
|
|
89
|
+
let parent = element.parentElement;
|
|
90
|
+
while (parent) {
|
|
91
|
+
const style = getComputedStyle(parent);
|
|
92
|
+
const overflow = style.overflow + style.overflowY + style.overflowX;
|
|
93
|
+
if (/(auto|scroll)/.test(overflow)) {
|
|
94
|
+
scrollParents.push(parent);
|
|
95
|
+
}
|
|
96
|
+
parent = parent.parentElement;
|
|
97
|
+
}
|
|
98
|
+
// Always include window for page scroll
|
|
99
|
+
return scrollParents;
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Add scroll listeners to all scrollable parents
|
|
103
|
+
*/
|
|
104
|
+
addScrollListeners() {
|
|
105
|
+
if (!this.triggerEl)
|
|
106
|
+
return;
|
|
107
|
+
this.scrollParents = this.getScrollParents(this.triggerEl);
|
|
108
|
+
// Listen to each scroll parent
|
|
109
|
+
this.scrollParents.forEach(parent => {
|
|
110
|
+
parent.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
111
|
+
});
|
|
112
|
+
// Also listen to window scroll and resize
|
|
113
|
+
window.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
114
|
+
window.addEventListener('resize', this.handleScroll, { passive: true });
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Remove scroll listeners
|
|
118
|
+
*/
|
|
119
|
+
removeScrollListeners() {
|
|
120
|
+
this.scrollParents.forEach(parent => {
|
|
121
|
+
parent.removeEventListener('scroll', this.handleScroll);
|
|
122
|
+
});
|
|
123
|
+
window.removeEventListener('scroll', this.handleScroll);
|
|
124
|
+
window.removeEventListener('resize', this.handleScroll);
|
|
125
|
+
this.scrollParents = [];
|
|
126
|
+
}
|
|
127
|
+
handleScroll = () => {
|
|
128
|
+
if (this.open) {
|
|
129
|
+
this.updatePosition();
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
handlePopoverToggle = (event) => {
|
|
133
|
+
if (event.newState === 'open') {
|
|
134
|
+
this.open = true;
|
|
135
|
+
this.addScrollListeners();
|
|
136
|
+
this.updatePosition();
|
|
137
|
+
this.lePopoverOpen.emit();
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
this.open = false;
|
|
141
|
+
this.isPositioned = false;
|
|
142
|
+
this.removeScrollListeners();
|
|
143
|
+
this.lePopoverClose.emit();
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
handleOtherPopoverOpen = (event) => {
|
|
147
|
+
const customEvent = event;
|
|
148
|
+
if (customEvent.detail?.popover === this.el)
|
|
149
|
+
return;
|
|
150
|
+
if (this.open) {
|
|
151
|
+
this.hide();
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Opens the popover
|
|
156
|
+
*/
|
|
157
|
+
async show() {
|
|
158
|
+
document.dispatchEvent(new CustomEvent('le-popover-will-open', {
|
|
159
|
+
detail: { popover: this.el }
|
|
160
|
+
}));
|
|
161
|
+
this.popoverEl?.showPopover();
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* Closes the popover
|
|
165
|
+
*/
|
|
166
|
+
async hide() {
|
|
167
|
+
this.popoverEl?.hidePopover();
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* Toggles the popover
|
|
171
|
+
*/
|
|
172
|
+
async toggle() {
|
|
173
|
+
if (this.open) {
|
|
174
|
+
await this.hide();
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
await this.show();
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
handleTriggerClick = (event) => {
|
|
181
|
+
event.stopPropagation();
|
|
182
|
+
this.toggle();
|
|
183
|
+
};
|
|
184
|
+
updatePosition() {
|
|
185
|
+
if (!this.triggerEl || !this.popoverEl)
|
|
186
|
+
return;
|
|
187
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
188
|
+
const popoverRect = this.popoverEl.getBoundingClientRect();
|
|
189
|
+
const viewportWidth = window.innerWidth;
|
|
190
|
+
const viewportHeight = window.innerHeight;
|
|
191
|
+
const viewportPadding = 8;
|
|
192
|
+
let position = this.position;
|
|
193
|
+
let align = this.align;
|
|
194
|
+
// Auto-position logic
|
|
195
|
+
const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;
|
|
196
|
+
const spaceAbove = triggerRect.top - viewportPadding;
|
|
197
|
+
const spaceRight = viewportWidth - triggerRect.right - viewportPadding;
|
|
198
|
+
const spaceLeft = triggerRect.left - viewportPadding;
|
|
199
|
+
if (position === 'auto') {
|
|
200
|
+
if (spaceBelow >= popoverRect.height + this.offset) {
|
|
201
|
+
position = 'bottom';
|
|
202
|
+
}
|
|
203
|
+
else if (spaceAbove >= popoverRect.height + this.offset) {
|
|
204
|
+
position = 'top';
|
|
205
|
+
}
|
|
206
|
+
else if (spaceRight >= popoverRect.width + this.offset) {
|
|
207
|
+
position = 'right';
|
|
208
|
+
}
|
|
209
|
+
else if (spaceLeft >= popoverRect.width + this.offset) {
|
|
210
|
+
position = 'left';
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);
|
|
214
|
+
if (maxSpace === spaceBelow)
|
|
215
|
+
position = 'bottom';
|
|
216
|
+
else if (maxSpace === spaceAbove)
|
|
217
|
+
position = 'top';
|
|
218
|
+
else if (maxSpace === spaceRight)
|
|
219
|
+
position = 'right';
|
|
220
|
+
else
|
|
221
|
+
position = 'left';
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
// Adjust alignment for horizontal overflow
|
|
225
|
+
if (position === 'top' || position === 'bottom') {
|
|
226
|
+
if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
227
|
+
align = 'end';
|
|
228
|
+
}
|
|
229
|
+
else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {
|
|
230
|
+
align = 'start';
|
|
231
|
+
}
|
|
232
|
+
else if (align === 'center') {
|
|
233
|
+
const triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
234
|
+
if (triggerCenter - popoverRect.width / 2 < viewportPadding) {
|
|
235
|
+
align = 'start';
|
|
236
|
+
}
|
|
237
|
+
else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {
|
|
238
|
+
align = 'end';
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
// Calculate position
|
|
243
|
+
let top = 0;
|
|
244
|
+
let left = 0;
|
|
245
|
+
let maxHeight = null;
|
|
246
|
+
switch (position) {
|
|
247
|
+
case 'top':
|
|
248
|
+
top = triggerRect.top - popoverRect.height - this.offset;
|
|
249
|
+
if (top < viewportPadding) {
|
|
250
|
+
maxHeight = triggerRect.top - this.offset - viewportPadding * 2;
|
|
251
|
+
top = viewportPadding;
|
|
252
|
+
}
|
|
253
|
+
break;
|
|
254
|
+
case 'bottom':
|
|
255
|
+
top = triggerRect.bottom + this.offset;
|
|
256
|
+
if (top + popoverRect.height > viewportHeight - viewportPadding) {
|
|
257
|
+
maxHeight = viewportHeight - top - viewportPadding;
|
|
258
|
+
}
|
|
259
|
+
break;
|
|
260
|
+
case 'left':
|
|
261
|
+
left = triggerRect.left - popoverRect.width - this.offset;
|
|
262
|
+
top = triggerRect.top;
|
|
263
|
+
if (left < viewportPadding)
|
|
264
|
+
left = viewportPadding;
|
|
265
|
+
break;
|
|
266
|
+
case 'right':
|
|
267
|
+
left = triggerRect.right + this.offset;
|
|
268
|
+
top = triggerRect.top;
|
|
269
|
+
if (left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
270
|
+
left = viewportWidth - popoverRect.width - viewportPadding;
|
|
271
|
+
}
|
|
272
|
+
break;
|
|
273
|
+
}
|
|
274
|
+
// Calculate horizontal alignment for top/bottom
|
|
275
|
+
if (position === 'top' || position === 'bottom') {
|
|
276
|
+
switch (align) {
|
|
277
|
+
case 'start':
|
|
278
|
+
left = triggerRect.left;
|
|
279
|
+
break;
|
|
280
|
+
case 'center':
|
|
281
|
+
left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
|
|
282
|
+
break;
|
|
283
|
+
case 'end':
|
|
284
|
+
left = triggerRect.right - popoverRect.width;
|
|
285
|
+
break;
|
|
286
|
+
}
|
|
287
|
+
// Constrain to viewport
|
|
288
|
+
if (left < viewportPadding) {
|
|
289
|
+
left = viewportPadding;
|
|
290
|
+
}
|
|
291
|
+
else if (left + popoverRect.width > viewportWidth - viewportPadding) {
|
|
292
|
+
left = viewportWidth - popoverRect.width - viewportPadding;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
// Calculate vertical alignment for left/right
|
|
296
|
+
if (position === 'left' || position === 'right') {
|
|
297
|
+
switch (align) {
|
|
298
|
+
case 'start':
|
|
299
|
+
top = triggerRect.top;
|
|
300
|
+
break;
|
|
301
|
+
case 'center':
|
|
302
|
+
top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
|
|
303
|
+
break;
|
|
304
|
+
case 'end':
|
|
305
|
+
top = triggerRect.bottom - popoverRect.height;
|
|
306
|
+
break;
|
|
307
|
+
}
|
|
308
|
+
if (top < viewportPadding)
|
|
309
|
+
top = viewportPadding;
|
|
310
|
+
if (top + popoverRect.height > viewportHeight - viewportPadding) {
|
|
311
|
+
maxHeight = viewportHeight - top - viewportPadding;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
// Apply styles
|
|
315
|
+
this.popoverEl.style.top = `${top}px`;
|
|
316
|
+
this.popoverEl.style.left = `${left}px`;
|
|
317
|
+
if (maxHeight !== null && maxHeight > 100) {
|
|
318
|
+
this.popoverEl.style.maxHeight = `${maxHeight}px`;
|
|
319
|
+
this.popoverEl.style.overflowY = 'auto';
|
|
320
|
+
}
|
|
321
|
+
else {
|
|
322
|
+
this.popoverEl.style.maxHeight = '';
|
|
323
|
+
this.popoverEl.style.overflowY = '';
|
|
324
|
+
}
|
|
325
|
+
this.isPositioned = true;
|
|
326
|
+
}
|
|
327
|
+
render() {
|
|
328
|
+
const popoverStyles = {
|
|
329
|
+
visibility: this.isPositioned ? 'visible' : 'hidden',
|
|
330
|
+
};
|
|
331
|
+
if (this.width)
|
|
332
|
+
popoverStyles.width = this.width;
|
|
333
|
+
if (this.minWidth)
|
|
334
|
+
popoverStyles.minWidth = this.minWidth;
|
|
335
|
+
if (this.maxWidth)
|
|
336
|
+
popoverStyles.maxWidth = this.maxWidth;
|
|
337
|
+
return [
|
|
338
|
+
h("div", { key: 'be013f37c4264c442b810351eaf9c8dd37ef1270', class: "le-popover-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '096a85b0c024c3f1d559d29b040b8ee6e1cb1a9e', name: "trigger" }, h("button", { key: '877555848f50bcc35b7d8892b8a26dbd9df0911f', type: "button", class: "le-popover-default-trigger" }, h("span", { key: 'e42171b4b4c3a0d696b3a5fe29b736272c404db5' }, "\u2295")))),
|
|
339
|
+
h("div", { key: '089b60df50358f0c0a8b6c913955358b02e60745', id: this.uniqueId, class: "le-popover-content", popover: this.closeOnClickOutside ? 'auto' : 'manual', ref: (el) => (this.popoverEl = el), style: popoverStyles }, (this.popoverTitle || this.showClose) && (h("div", { key: '0f3b2ed3e78344e43eb44a901afcb68ea413d925', class: "le-popover-header" }, this.popoverTitle && h("span", { key: 'b305138cb8b99c7dd2f89025da9ccb56adb2cc13', class: "le-popover-title" }, this.popoverTitle), this.showClose && (h("button", { key: 'b1eed51b8b961da65abf66717eac3ef550cbb76b', type: "button", class: "le-popover-close", onClick: () => this.hide(), "aria-label": "Close" }, "\u00D7")))), h("div", { key: '0a247ca2ec4cc2648b06362ddf193a00560ab567', class: "le-popover-body" }, h("slot", { key: 'f0313a4bde0781e3ce655bfe964d5be2e39299d9' })))
|
|
340
|
+
];
|
|
341
|
+
}
|
|
342
|
+
};
|
|
343
|
+
LePopover.style = lePopoverCss;
|
|
344
|
+
|
|
345
|
+
export { LePopover as le_popover };
|
|
346
|
+
//# sourceMappingURL=le-popover.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"le-popover.entry.js","sources":["src-core/components/le-popover/le-popover.css?tag=le-popover&encapsulation=shadow","src-core/components/le-popover/le-popover.tsx"],"sourcesContent":["/* ============================================\n le-popover.css\n Popover using native HTML Popover API\n ============================================ */\n\n:host {\n display: inline-block;\n position: relative;\n}\n\n/* ============================================\n Trigger\n ============================================ */\n\n.le-popover-trigger {\n display: inline-flex;\n cursor: pointer;\n}\n\n.le-popover-default-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-md, 6px);\n background: var(--le-color-surface, #fff);\n color: var(--le-color-text-secondary, #666);\n font-size: 16px;\n cursor: pointer;\n transition: all var(--le-transition-fast, 0.15s ease);\n}\n\n.le-popover-default-trigger:hover {\n border-color: var(--le-color-primary, #2196f3);\n color: var(--le-color-primary, #2196f3);\n background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));\n}\n\n/* ============================================\n Popover Content (native popover)\n ============================================ */\n\n.le-popover-content {\n /* Reset native popover defaults */\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n \n /* Positioning - will be set via JS */\n position: fixed;\n inset: unset;\n \n /* Styling */\n background: var(--le-color-surface, #ffffff);\n border: 1px solid var(--le-color-border, #e0e0e0);\n border-radius: var(--le-radius-lg, 8px);\n box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));\n overflow: hidden;\n font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n \n /* Animation */\n opacity: 0;\n transform: scale(0.95);\n transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;\n}\n\n/* When popover is open */\n.le-popover-content:popover-open {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Starting style for animation (CSS Anchor Positioning spec) */\n@starting-style {\n .le-popover-content:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* ============================================\n Header\n ============================================ */\n\n.le-popover-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);\n border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n background: var(--le-color-surface-alt, #f9f9f9);\n min-height: 32px;\n}\n\n.le-popover-title {\n font-weight: var(--le-font-weight-semibold, 600);\n font-size: var(--le-font-size-sm, 0.875rem);\n color: var(--le-color-text, #333);\n}\n\n.le-popover-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--le-color-text-secondary, #666);\n font-size: 18px;\n line-height: 1;\n cursor: pointer;\n border-radius: var(--le-radius-sm, 4px);\n transition: background-color 0.15s, color 0.15s;\n}\n\n.le-popover-close:hover {\n background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));\n color: var(--le-color-text, #333);\n}\n\n/* ============================================\n Body\n ============================================ */\n\n.le-popover-body {\n padding: var(--le-space-md, 12px);\n}\n\n/* ============================================\n Scrollable content\n ============================================ */\n\n.le-popover-content[style*=\"overflow-y: auto\"] .le-popover-body {\n overflow-y: auto;\n}\n","import { Component, Prop, Method, Event, EventEmitter, State, h, Element } from '@stencil/core';\n\n/**\n * A popover component for displaying floating content.\n * \n * Uses the native HTML Popover API for proper layering with dialogs\n * and other top-layer elements. Falls back gracefully in older browsers.\n *\n * @slot - Content to display inside the popover\n * @slot trigger - Element that triggers the popover (optional)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n tag: 'le-popover',\n styleUrl: 'le-popover.css',\n shadow: true,\n})\nexport class LePopover {\n @Element() el: HTMLElement;\n\n /**\n * Mode of the popover should be 'default' for internal use\n */\n @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n /**\n * Whether the popover is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Position of the popover relative to its trigger\n */\n @Prop() position: 'top' | 'bottom' | 'left' | 'right' | 'auto' = 'bottom';\n\n /**\n * Alignment of the popover\n */\n @Prop() align: 'start' | 'center' | 'end' = 'start';\n\n /**\n * Optional title for the popover header\n */\n @Prop() popoverTitle?: string;\n\n /**\n * Whether to show a close button in the header\n */\n @Prop() showClose: boolean = true;\n\n /**\n * Whether clicking outside closes the popover\n */\n @Prop() closeOnClickOutside: boolean = true;\n\n /**\n * Whether pressing Escape closes the popover\n */\n @Prop() closeOnEscape: boolean = true;\n\n /**\n * Offset from the trigger element (in pixels)\n */\n @Prop() offset: number = 8;\n\n /**\n * Fixed width for the popover (e.g., '300px', '20rem')\n */\n @Prop() width?: string;\n\n /**\n * Minimum width for the popover (e.g., '200px', '15rem')\n */\n @Prop() minWidth?: string = '200px';\n\n /**\n * Maximum width for the popover (e.g., '400px', '25rem')\n */\n @Prop() maxWidth?: string;\n\n /**\n * Emitted when the popover opens\n */\n @Event() lePopoverOpen: EventEmitter<void>;\n\n /**\n * Emitted when the popover closes\n */\n @Event() lePopoverClose: EventEmitter<void>;\n\n @State() private isPositioned: boolean = false;\n\n private triggerEl?: HTMLElement;\n private popoverEl?: HTMLElement;\n private uniqueId: string = `le-popover-${Math.random().toString(36).substr(2, 9)}`;\n private scrollParents: Element[] = [];\n\n componentDidLoad() {\n // Listen for toggle events from the native popover API\n this.popoverEl?.addEventListener('toggle', this.handlePopoverToggle as EventListener);\n \n // Listen for other popovers opening to close this one\n document.addEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n }\n\n disconnectedCallback() {\n this.popoverEl?.removeEventListener('toggle', this.handlePopoverToggle as EventListener);\n document.removeEventListener('le-popover-will-open', this.handleOtherPopoverOpen);\n this.removeScrollListeners();\n }\n\n /**\n * Find all scrollable parent elements\n */\n private getScrollParents(element: Element): Element[] {\n const scrollParents: Element[] = [];\n let parent = element.parentElement;\n \n while (parent) {\n const style = getComputedStyle(parent);\n const overflow = style.overflow + style.overflowY + style.overflowX;\n if (/(auto|scroll)/.test(overflow)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n \n // Always include window for page scroll\n return scrollParents;\n }\n\n /**\n * Add scroll listeners to all scrollable parents\n */\n private addScrollListeners() {\n if (!this.triggerEl) return;\n \n this.scrollParents = this.getScrollParents(this.triggerEl);\n \n // Listen to each scroll parent\n this.scrollParents.forEach(parent => {\n parent.addEventListener('scroll', this.handleScroll, { passive: true });\n });\n \n // Also listen to window scroll and resize\n window.addEventListener('scroll', this.handleScroll, { passive: true });\n window.addEventListener('resize', this.handleScroll, { passive: true });\n }\n\n /**\n * Remove scroll listeners\n */\n private removeScrollListeners() {\n this.scrollParents.forEach(parent => {\n parent.removeEventListener('scroll', this.handleScroll);\n });\n window.removeEventListener('scroll', this.handleScroll);\n window.removeEventListener('resize', this.handleScroll);\n this.scrollParents = [];\n }\n\n private handleScroll = () => {\n if (this.open) {\n this.updatePosition();\n }\n };\n\n private handlePopoverToggle = (event: ToggleEvent) => {\n if (event.newState === 'open') {\n this.open = true;\n this.addScrollListeners();\n this.updatePosition();\n this.lePopoverOpen.emit();\n } else {\n this.open = false;\n this.isPositioned = false;\n this.removeScrollListeners();\n this.lePopoverClose.emit();\n }\n };\n\n private handleOtherPopoverOpen = (event: Event) => {\n const customEvent = event as CustomEvent;\n if (customEvent.detail?.popover === this.el) return;\n \n if (this.open) {\n this.hide();\n }\n };\n\n /**\n * Opens the popover\n */\n @Method()\n async show() {\n document.dispatchEvent(new CustomEvent('le-popover-will-open', {\n detail: { popover: this.el }\n }));\n \n this.popoverEl?.showPopover();\n }\n\n /**\n * Closes the popover\n */\n @Method()\n async hide() {\n this.popoverEl?.hidePopover();\n }\n\n /**\n * Toggles the popover\n */\n @Method()\n async toggle() {\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private updatePosition() {\n if (!this.triggerEl || !this.popoverEl) return;\n\n const triggerRect = this.triggerEl.getBoundingClientRect();\n const popoverRect = this.popoverEl.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const viewportPadding = 8;\n\n let position = this.position;\n let align = this.align;\n\n // Auto-position logic\n const spaceBelow = viewportHeight - triggerRect.bottom - viewportPadding;\n const spaceAbove = triggerRect.top - viewportPadding;\n const spaceRight = viewportWidth - triggerRect.right - viewportPadding;\n const spaceLeft = triggerRect.left - viewportPadding;\n\n if (position === 'auto') {\n if (spaceBelow >= popoverRect.height + this.offset) {\n position = 'bottom';\n } else if (spaceAbove >= popoverRect.height + this.offset) {\n position = 'top';\n } else if (spaceRight >= popoverRect.width + this.offset) {\n position = 'right';\n } else if (spaceLeft >= popoverRect.width + this.offset) {\n position = 'left';\n } else {\n const maxSpace = Math.max(spaceBelow, spaceAbove, spaceRight, spaceLeft);\n if (maxSpace === spaceBelow) position = 'bottom';\n else if (maxSpace === spaceAbove) position = 'top';\n else if (maxSpace === spaceRight) position = 'right';\n else position = 'left';\n }\n }\n\n // Adjust alignment for horizontal overflow\n if (position === 'top' || position === 'bottom') {\n if (align === 'start' && triggerRect.left + popoverRect.width > viewportWidth - viewportPadding) {\n align = 'end';\n } else if (align === 'end' && triggerRect.right - popoverRect.width < viewportPadding) {\n align = 'start';\n } else if (align === 'center') {\n const triggerCenter = triggerRect.left + triggerRect.width / 2;\n if (triggerCenter - popoverRect.width / 2 < viewportPadding) {\n align = 'start';\n } else if (triggerCenter + popoverRect.width / 2 > viewportWidth - viewportPadding) {\n align = 'end';\n }\n }\n }\n\n // Calculate position\n let top: number = 0;\n let left: number = 0;\n let maxHeight: number | null = null;\n\n switch (position) {\n case 'top':\n top = triggerRect.top - popoverRect.height - this.offset;\n if (top < viewportPadding) {\n maxHeight = triggerRect.top - this.offset - viewportPadding * 2;\n top = viewportPadding;\n }\n break;\n case 'bottom':\n top = triggerRect.bottom + this.offset;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n break;\n case 'left':\n left = triggerRect.left - popoverRect.width - this.offset;\n top = triggerRect.top;\n if (left < viewportPadding) left = viewportPadding;\n break;\n case 'right':\n left = triggerRect.right + this.offset;\n top = triggerRect.top;\n if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n break;\n }\n\n // Calculate horizontal alignment for top/bottom\n if (position === 'top' || position === 'bottom') {\n switch (align) {\n case 'start':\n left = triggerRect.left;\n break;\n case 'center':\n left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n break;\n case 'end':\n left = triggerRect.right - popoverRect.width;\n break;\n }\n \n // Constrain to viewport\n if (left < viewportPadding) {\n left = viewportPadding;\n } else if (left + popoverRect.width > viewportWidth - viewportPadding) {\n left = viewportWidth - popoverRect.width - viewportPadding;\n }\n }\n\n // Calculate vertical alignment for left/right\n if (position === 'left' || position === 'right') {\n switch (align) {\n case 'start':\n top = triggerRect.top;\n break;\n case 'center':\n top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n break;\n case 'end':\n top = triggerRect.bottom - popoverRect.height;\n break;\n }\n \n if (top < viewportPadding) top = viewportPadding;\n if (top + popoverRect.height > viewportHeight - viewportPadding) {\n maxHeight = viewportHeight - top - viewportPadding;\n }\n }\n\n // Apply styles\n this.popoverEl.style.top = `${top}px`;\n this.popoverEl.style.left = `${left}px`;\n \n if (maxHeight !== null && maxHeight > 100) {\n this.popoverEl.style.maxHeight = `${maxHeight}px`;\n this.popoverEl.style.overflowY = 'auto';\n } else {\n this.popoverEl.style.maxHeight = '';\n this.popoverEl.style.overflowY = '';\n }\n\n this.isPositioned = true;\n }\n\n render() {\n const popoverStyles: Record<string, string> = {\n visibility: this.isPositioned ? 'visible' : 'hidden',\n };\n \n if (this.width) popoverStyles.width = this.width;\n if (this.minWidth) popoverStyles.minWidth = this.minWidth;\n if (this.maxWidth) popoverStyles.maxWidth = this.maxWidth;\n\n return [\n <div \n class=\"le-popover-trigger\" \n ref={(el) => (this.triggerEl = el)}\n onClick={this.handleTriggerClick}\n >\n <slot name=\"trigger\">\n <button type=\"button\" class=\"le-popover-default-trigger\">\n <span>⊕</span>\n </button>\n </slot>\n </div>,\n \n <div\n id={this.uniqueId}\n class=\"le-popover-content\"\n popover={this.closeOnClickOutside ? 'auto' : 'manual'}\n ref={(el) => (this.popoverEl = el)}\n style={popoverStyles}\n >\n {(this.popoverTitle || this.showClose) && (\n <div class=\"le-popover-header\">\n {this.popoverTitle && <span class=\"le-popover-title\">{this.popoverTitle}</span>}\n {this.showClose && (\n <button \n type=\"button\" \n class=\"le-popover-close\"\n onClick={() => this.hide()}\n aria-label=\"Close\"\n >\n ×\n </button>\n )}\n </div>\n )}\n <div class=\"le-popover-body\">\n <slot></slot>\n </div>\n </div>\n ];\n }\n}\n"],"names":[],"mappings":"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"}
|