@dubai-design-system/components-js 3.12.5 → 3.12.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dda-home-carousel.cjs.entry.js +19 -2
- package/dist/cjs/dda-home-carousel.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-horizontal-stepper.cjs.entry.js +1 -1
- package/dist/cjs/dda-segmented-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dda-select.cjs.entry.js +9 -2
- package/dist/cjs/dda-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-split-button.cjs.entry.js +62 -14
- package/dist/cjs/dda-split-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-sticky-footer.cjs.entry.js +1 -1
- package/dist/cjs/dda-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dda-textarea.cjs.entry.js +1 -1
- package/dist/cjs/dda-toggle.cjs.entry.js +2 -2
- package/dist/cjs/dda-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dda-vertical-stepper.cjs.entry.js +1 -1
- package/dist/cjs/dda.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/dda-header/dda-header.stories.js +7 -0
- package/dist/collection/components/dda-header/dda-header.stories.js.map +1 -1
- package/dist/collection/components/dda-home-carousel/dda-home-carousel.css +7 -2
- package/dist/collection/components/dda-home-carousel/dda-home-carousel.js +18 -1
- package/dist/collection/components/dda-home-carousel/dda-home-carousel.js.map +1 -1
- package/dist/collection/components/dda-select/dda-select.js +12 -2
- package/dist/collection/components/dda-select/dda-select.js.map +1 -1
- package/dist/collection/components/dda-split-button/dda-split-button.js +75 -28
- package/dist/collection/components/dda-split-button/dda-split-button.js.map +1 -1
- package/dist/collection/components/dda-split-button/dda-split-button.stories.js +34 -15
- package/dist/collection/components/dda-split-button/dda-split-button.stories.js.map +1 -1
- package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.js +1 -1
- package/dist/collection/components/dda-tabs/dda-tabs.js +1 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js +1 -1
- package/dist/collection/components/dda-toggle/dda-toggle.js +2 -2
- package/dist/collection/components/dda-tooltip/dda-tooltip.js +1 -1
- package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js +1 -1
- package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js +1 -1
- package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js +1 -1
- package/dist/collection/global/global.css +2988 -0
- package/dist/collection/global/input.css +674 -0
- package/dist/components/dda-header.js +1 -1
- package/dist/components/dda-home-carousel.js +19 -2
- package/dist/components/dda-home-carousel.js.map +1 -1
- package/dist/components/dda-horizontal-stepper.js +1 -1
- package/dist/components/dda-segmented-tabs.js +1 -1
- package/dist/components/dda-select.js +9 -2
- package/dist/components/dda-select.js.map +1 -1
- package/dist/components/dda-split-button.js +69 -20
- package/dist/components/dda-split-button.js.map +1 -1
- package/dist/components/dda-sticky-footer.js +2 -2
- package/dist/components/dda-tabs.js +1 -1
- package/dist/components/dda-textarea.js +1 -1
- package/dist/components/dda-toggle.js +2 -2
- package/dist/components/dda-tooltip.js +1 -1
- package/dist/components/dda-vertical-stepper.js +1 -1
- package/dist/components/{p-426c4cde.js → p-ba13ee0a.js} +2 -2
- package/dist/components/{p-426c4cde.js.map → p-ba13ee0a.js.map} +1 -1
- package/dist/dda/dda.css +1 -1
- package/dist/dda/dda.esm.js +1 -1
- package/dist/dda/dda.esm.js.map +1 -1
- package/dist/dda/p-0905eb60.entry.js +2 -0
- package/dist/dda/p-0905eb60.entry.js.map +1 -0
- package/dist/dda/{p-ca2e33b9.entry.js → p-207203ae.entry.js} +2 -2
- package/dist/dda/p-3d1bd318.entry.js +2 -0
- package/dist/dda/p-3d1bd318.entry.js.map +1 -0
- package/dist/dda/{p-27c798b5.entry.js → p-3fef96a8.entry.js} +2 -2
- package/{www/build/p-4a2eeccb.entry.js → dist/dda/p-5bf0d4fe.entry.js} +2 -2
- package/dist/dda/{p-78b3487b.entry.js → p-5d47716e.entry.js} +2 -2
- package/dist/dda/{p-b0185c4d.entry.js → p-60d855a6.entry.js} +2 -2
- package/dist/dda/{p-ca50cf49.entry.js → p-6fd79768.entry.js} +2 -2
- package/{www/build/p-11b79158.entry.js → dist/dda/p-9636f669.entry.js} +2 -2
- package/dist/dda/{p-af2345fb.entry.js → p-b48e061c.entry.js} +2 -2
- package/dist/dda/p-dca57f55.entry.js +2 -0
- package/dist/dda/p-dca57f55.entry.js.map +1 -0
- package/dist/esm/dda-home-carousel.entry.js +19 -2
- package/dist/esm/dda-home-carousel.entry.js.map +1 -1
- package/dist/esm/dda-horizontal-stepper.entry.js +1 -1
- package/dist/esm/dda-segmented-tabs.entry.js +1 -1
- package/dist/esm/dda-select.entry.js +9 -2
- package/dist/esm/dda-select.entry.js.map +1 -1
- package/dist/esm/dda-split-button.entry.js +63 -15
- package/dist/esm/dda-split-button.entry.js.map +1 -1
- package/dist/esm/dda-sticky-footer.entry.js +1 -1
- package/dist/esm/dda-tabs.entry.js +1 -1
- package/dist/esm/dda-textarea.entry.js +1 -1
- package/dist/esm/dda-toggle.entry.js +2 -2
- package/dist/esm/dda-tooltip.entry.js +1 -1
- package/dist/esm/dda-vertical-stepper.entry.js +1 -1
- package/dist/esm/dda.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dda-split-button/dda-split-button.d.ts +13 -4
- package/dist/types/components/dda-split-button/dda-split-button.stories.d.ts +6 -4
- package/dist/types/components.d.ts +8 -8
- package/package.json +2 -2
- package/readme.md +9 -0
- package/www/build/dda.css +1 -1
- package/www/build/dda.esm.js +1 -1
- package/www/build/dda.esm.js.map +1 -1
- package/www/build/p-0905eb60.entry.js +2 -0
- package/www/build/p-0905eb60.entry.js.map +1 -0
- package/www/build/{p-ca2e33b9.entry.js → p-207203ae.entry.js} +2 -2
- package/www/build/p-3d1bd318.entry.js +2 -0
- package/www/build/p-3d1bd318.entry.js.map +1 -0
- package/www/build/{p-27c798b5.entry.js → p-3fef96a8.entry.js} +2 -2
- package/www/build/{p-44246d95.css → p-46ac0422.css} +1 -1
- package/{dist/dda/p-4a2eeccb.entry.js → www/build/p-5bf0d4fe.entry.js} +2 -2
- package/www/build/{p-78b3487b.entry.js → p-5d47716e.entry.js} +2 -2
- package/www/build/{p-b0185c4d.entry.js → p-60d855a6.entry.js} +2 -2
- package/www/build/{p-ca50cf49.entry.js → p-6fd79768.entry.js} +2 -2
- package/{dist/dda/p-11b79158.entry.js → www/build/p-9636f669.entry.js} +2 -2
- package/www/build/{p-af2345fb.entry.js → p-b48e061c.entry.js} +2 -2
- package/www/build/p-dca57f55.entry.js +2 -0
- package/www/build/p-dca57f55.entry.js.map +1 -0
- package/dist/collection/components/dda-split-button/dda-split-button.css +0 -607
- package/dist/dda/p-16812c63.entry.js +0 -2
- package/dist/dda/p-16812c63.entry.js.map +0 -1
- package/dist/dda/p-24da4601.entry.js +0 -2
- package/dist/dda/p-24da4601.entry.js.map +0 -1
- package/dist/dda/p-2525597b.entry.js +0 -2
- package/dist/dda/p-2525597b.entry.js.map +0 -1
- package/www/build/p-16812c63.entry.js +0 -2
- package/www/build/p-16812c63.entry.js.map +0 -1
- package/www/build/p-24da4601.entry.js +0 -2
- package/www/build/p-24da4601.entry.js.map +0 -1
- package/www/build/p-2525597b.entry.js +0 -2
- package/www/build/p-2525597b.entry.js.map +0 -1
- /package/dist/dda/{p-ca2e33b9.entry.js.map → p-207203ae.entry.js.map} +0 -0
- /package/dist/dda/{p-27c798b5.entry.js.map → p-3fef96a8.entry.js.map} +0 -0
- /package/dist/dda/{p-4a2eeccb.entry.js.map → p-5bf0d4fe.entry.js.map} +0 -0
- /package/dist/dda/{p-78b3487b.entry.js.map → p-5d47716e.entry.js.map} +0 -0
- /package/dist/dda/{p-b0185c4d.entry.js.map → p-60d855a6.entry.js.map} +0 -0
- /package/dist/dda/{p-ca50cf49.entry.js.map → p-6fd79768.entry.js.map} +0 -0
- /package/dist/dda/{p-11b79158.entry.js.map → p-9636f669.entry.js.map} +0 -0
- /package/dist/dda/{p-af2345fb.entry.js.map → p-b48e061c.entry.js.map} +0 -0
- /package/www/build/{p-ca2e33b9.entry.js.map → p-207203ae.entry.js.map} +0 -0
- /package/www/build/{p-27c798b5.entry.js.map → p-3fef96a8.entry.js.map} +0 -0
- /package/www/build/{p-4a2eeccb.entry.js.map → p-5bf0d4fe.entry.js.map} +0 -0
- /package/www/build/{p-78b3487b.entry.js.map → p-5d47716e.entry.js.map} +0 -0
- /package/www/build/{p-b0185c4d.entry.js.map → p-60d855a6.entry.js.map} +0 -0
- /package/www/build/{p-ca50cf49.entry.js.map → p-6fd79768.entry.js.map} +0 -0
- /package/www/build/{p-11b79158.entry.js.map → p-9636f669.entry.js.map} +0 -0
- /package/www/build/{p-af2345fb.entry.js.map → p-b48e061c.entry.js.map} +0 -0
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-f6588843.js';
|
|
2
2
|
|
|
3
|
-
const ddaSplitButtonCss = ".dda-btn{height:44px;font-family:var(--font-family-main);font-size:var(--font-body);font-weight:var(--font-weight-regular);padding:8px 12px;border-radius:8px;outline:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}.btn-color-default-primary{background-color:var(--dda-color-primary-40);border:solid 1px var(--dda-color-primary-40);color:var(--dda-on-primary-100)}.btn-color-default-primary:hover{background-color:var(--dda-on-primary-variant-30);border:solid 1px var(--dda-on-primary-variant-30)}.btn-color-default-primary:focus{background-color:var(--dda-on-primary-variant-20);outline:var(--dda-on-primary-variant-20)}.light-mode.btn-color-default-primary,.light-mode .btn-color-default-primary{background-color:var(--dda-primary-40);border:solid 1px var(--dda-primary-40);color:var(--dda-primary-100)}.light-mode.btn-color-default-primary:hover,.light-mode .btn-color-default-primary:hover{background-color:var(--dda-primary-30);border:solid 1px var(--dda-primary-30)}.light-mode.btn-color-default-primary:focus,.light-mode .btn-color-default-primary:focus{background-color:var(--dda-primary-20);outline:var(--dda-primary-20)}.btn-color-default-secondary{background-color:var(--dda-on-primary-98);border:solid 1px var(--dda-on-primary-98);color:var(--dda-color-primary-40)}.btn-color-default-secondary:hover{background-color:var(--dda-on-primary-94);border:solid 1px var(--dda-on-primary-94)}.btn-color-default-secondary:focus{background-color:var(--dda-primary-variant-92);outline:var(--dda-primary-variant-92)}.light-mode.btn-color-default-secondary{background-color:var(--dda-primary-98);border:solid 1px var(--dda-primary-98);color:var(--dda-primary-40)}.light-mode.btn-color-default-secondary:hover{background-color:var(--dda-primary-94);border:solid 1px var(--dda-primary-94)}.light-mode.btn-color-default-secondary:focus{background-color:var(--dda-primary-92);outline:var(--dda-primary-92)}.btn-color-default-tertiary{background-color:var(--dda-surface-100);border:solid 1px var(--dda-surface-90);color:var(--dda-color-primary-40)}.btn-color-default-tertiary:hover{background-color:var(--dda-on-primary-98)}.btn-color-default-tertiary:focus{background-color:var(--dda-on-primary-96)}.light-mode.btn-color-default-tertiary{background-color:var(--dda-neutral-100);border:solid 1px var(--dda-neutral-90);color:var(--dda-primary-40)}.light-mode.btn-color-default-tertiary:hover{background-color:var(--dda-primary-98)}.light-mode.btn-color-default-tertiary:focus{background-color:var(--dda-primary-96)}.btn-color-default-link{height:auto !important;background-color:transparent !important;border:transparent !important;color:var(--dda-color-primary-40);padding:0px !important}.light-mode.btn-color-default-link{color:var(--dda-primary-40)}.btn-color-default-link:focus{outline:auto}.btn-color-error-primary{background-color:var(--dda-color-error-40);border:solid 1px var(--dda-color-error-40);color:var(--dda-on-primary-100)}.btn-color-error-primary:hover{background-color:var(--dda-color-error-40);border:solid 1px var(--dda-color-error-40)}.btn-color-error-primary:focus{background-color:var(--dda-color-error-30);border:solid 1px var(--dda-color-error-30);outline:var(--dda-color-error-30)}.light-mode.btn-color-error-primary{background-color:var(--dda-error-40);border:solid 1px var(--dda-error-40);color:var(--dda-primary-100)}.light-mode.btn-color-error-primary:hover{background-color:var(--dda-error-40);border:solid 1px var(--dda-error-40)}.light-mode.btn-color-error-primary:focus{background-color:var(--dda-error-30);border:solid 1px var(--dda-error-30);outline:var(--dda-error-30)}.btn-color-error-secondary{background-color:var(--dda-error-variant-95);border:solid 1px var(--dda-error-variant-95);color:var(--dda-color-error-40)}.btn-color-error-secondary:hover{background-color:var(--dda-on-error-98);border:solid 1px var(--dda-on-error-98)}.btn-color-error-secondary:focus{background-color:var(--dda-on-error-96);border:solid 1px var(--dda-on-error-96)}.light-mode.btn-color-error-secondary{background-color:var(--dda-error-95);border:solid 1px var(--dda-error-95);color:var(--dda-error-40)}.light-mode.btn-color-error-secondary:hover{background-color:var(--dda-error-98);border:solid 1px var(--dda-error-98)}.light-mode.btn-color-error-secondary:focus{background-color:var(--dda-error-96);border:solid 1px var(--dda-error-96)}.btn-color-error-tertiary{background-color:var(--dda-surface-100);border:solid 1px var(--dda-surface-90);color:var(--dda-color-error-40)}.btn-color-error-tertiary:hover{background-color:var(--dda-on-error-98)}.btn-color-error-tertiary:focus{background-color:var(--dda-on-error-96)}.light-mode.btn-color-error-tertiary{background-color:var(--dda-neutral-100);border:solid 1px var(--dda-neutral-90);color:var(--dda-error-40)}.light-mode.btn-color-error-tertiary:hover{background-color:var(--dda-error-98)}.light-mode.btn-color-error-tertiary:focus{background-color:var(--dda-error-96)}.btn-color-error-link{height:auto !important;background-color:transparent !important;border:transparent !important;color:var(--dda-color-error-40);padding:0px !important}.light-mode.btn-color-error-link{color:var(--dda-error-40)}.btn-color-error-link:focus{outline:auto}.btn-color-onsurface-primary{background-color:var(--dda-on-surface-0);border:solid 1px var(--dda-on-surface-0);color:var(--dda-surface-100)}.btn-color-onsurface-primary:hover{background-color:var(--dda-on-surface-20);border:solid 1px var(--dda-on-surface-20)}.btn-color-onsurface-primary:focus{background-color:var(--dda-on-surface-30);border:solid 1px var(--dda-on-surface-30)}.light-mode.btn-color-onsurface-primary{background-color:var(--dda-neutral-0);border:solid 1px var(--dda-neutral-0);color:var(--dda-neutral-100)}.light-mode.btn-color-onsurface-primary:hover{background-color:var(--dda-neutral-20);border:solid 1px var(--dda-neutral-20)}.light-mode.btn-color-onsurface-primary:focus{background-color:var(--dda-neutral-30);border:solid 1px var(--dda-neutral-30)}.btn-color-onsurface-secondary{background-color:var(--dda-surface-96);border:solid 1px var(--dda-surface-96);color:var(--dda-on-surface-0)}.btn-color-onsurface-secondary:hover{background-color:var(--dda-surface-94);border:solid 1px var(--dda-surface-94)}.btn-color-onsurface-secondary:focus{background-color:var(--dda-surface-92);border:solid 1px var(--dda-surface-92)}.light-mode.btn-color-onsurface-secondary{background-color:var(--dda-neutral-96);border:solid 1px var(--dda-neutral-96);color:var(--dda-neutral-0)}.light-mode.btn-color-onsurface-secondary:hover{background-color:var(--dda-neutral-94);border:solid 1px var(--dda-neutral-94)}.light-mode.btn-color-onsurface-secondary:focus{background-color:var(--dda-neutral-92);border:solid 1px var(--dda-neutral-92)}.btn-color-onsurface-tertiary{background-color:var(--dda-surface-100);border:solid 1px var(--dda-surface-90);color:var(--dda-on-surface-0)}.btn-color-onsurface-tertiary:hover{background-color:var(--dda-surface-94)}.btn-color-onsurface-tertiary:focus{background-color:var(--dda-surface-90)}.light-mode.btn-color-onsurface-tertiary{background-color:var(--dda-neutral-100);border:solid 1px var(--dda-neutral-90);color:var(--dda-neutral-0)}.light-mode.btn-color-onsurface-tertiary:hover{background-color:var(--dda-neutral-94)}.light-mode.btn-color-onsurface-tertiary:focus{background-color:var(--dda-neutral-90)}.btn-color-onsurface-link{height:auto !important;background-color:transparent !important;border:transparent !important;color:var(--dda-on-surface-0);padding:0px !important}.light-mode.btn-color-onsurface-link{color:var(--dda-neutral-0)}.btn-color-onsurface-link:focus{outline:auto}.btn-color-secondary{background-color:var(--dda-color-secondary-40);border:solid 1px var(--dda-color-secondary-40);color:var(--dda-on-secondary-100)}.btn-color-secondary:hover{background-color:var(--dda-color-secondary-30);border:solid 1px var(--dda-color-secondary-30)}.btn-color-secondary:focus{background-color:var(--dda-color-secondary-20);border:solid 1px var(--dda-color-secondary-20);outline:var(--dda-color-secondary-20)}.light-mode.btn-color-secondary{background-color:var(--dda-secondary-40);border:solid 1px var(--dda-secondary-40);color:var(--dda-secondary-100)}.light-mode.btn-color-secondary:hover{background-color:var(--dda-secondary-30);border:solid 1px var(--dda-secondary-30)}.light-mode.btn-color-secondary:focus{background-color:var(--dda-secondary-20);border:solid 1px var(--dda-secondary-20);outline:var(--dda-secondary-20)}.btn-color-success{background-color:var(--dda-color-success-50);border:solid 1px var(--dda-color-success-50);color:var(--dda-on-success-100)}.btn-color-success:hover{background-color:var(--dda-color-success-40);border:solid 1px var(--dda-color-success-40)}.btn-color-success:focus{background-color:var(--dda-color-success-30);border:solid 1px var(--dda-color-success-30);outline:var(--dda-color-success-30)}.light-mode.btn-color-success{background-color:var(--dda-success-50);border:solid 1px var(--dda-success-50);color:var(--dda-success-100)}.light-mode.btn-color-success:hover{background-color:var(--dda-success-40);border:solid 1px var(--dda-success-40)}.light-mode.btn-color-success:focus{background-color:var(--dda-success-30);border:solid 1px var(--dda-success-30);outline:var(--dda-success-30)}.btn-color-warning{background-color:var(--dda-color-warning-50);border:solid 1px var(--dda-color-warning-50);color:var(--dda-on-warning-100)}.btn-color-warning:hover{background-color:var(--dda-color-warning-40);border:solid 1px var(--dda-color-warning-40);border-color:var(--dda-color-warning-40)}.btn-color-warning:focus{background-color:var(--dda-color-warning-30);border:solid 1px var(--dda-color-warning-30);outline:var(--dda-color-warning-30)}.light-mode.btn-color-warning{background-color:var(--dda-warning-50);border:solid 1px var(--dda-warning-50);color:var(--dda-warning-100)}.light-mode.btn-color-warning:hover{background-color:var(--dda-warning-40);border:solid 1px var(--dda-warning-40);border-color:var(--dda-warning-40)}.light-mode.btn-color-warning:focus{background-color:var(--dda-warning-30);border:solid 1px var(--dda-warning-30);outline:var(--dda-warning-30)}.btn-color-surface{background-color:var(--dda-surface-100);border:solid 1px var(--dda-surface-100);color:var(--dda-on-surface-0)}.btn-color-surface:hover{background-color:var(--dda-surface-94);border:solid 1px var(--dda-surface-94)}.btn-color-surface:focus{background-color:var(--dda-surface-92);border:solid 1px var(--dda-surface-92);outline:var(--dda-on-surface-20)}.light-mode.btn-color-surface{background-color:var(--dda-neutral-100);border:solid 1px var(--dda-neutral-100);color:var(--dda-neutral-0)}.light-mode.btn-color-surface:hover{background-color:var(--dda-neutral-94);border:solid 1px var(--dda-neutral-94)}.light-mode.btn-color-surface:focus{background-color:var(--dda-neutral-92);border:solid 1px var(--dda-neutral-92);outline:var(--dda-neutral-20)}.btn-color-surface-variant{background-color:var(--dda-on-surface-variant-30);border:solid 1px var(--dda-on-surface-variant-30);color:var(--dda-surface-variant-90)}.btn-color-surface-variant:hover{background-color:var(--dda-on-surface-variant-25);border:solid 1px var(--dda-on-surface-variant-25)}.btn-color-surface-variant:focus{background-color:var(--dda-on-surface-variant-20);border:solid 1px var(--dda-on-surface-variant-20);outline:var(--dda-on-surface-variant-20)}.light-mode.btn-color-surface-variant{background-color:var(--dda-neutral-variant-30);border:solid 1px var(--dda-neutral-variant-30);color:var(--dda-neutral-variant-90)}.light-mode.btn-color-surface-variant:hover{background-color:var(--dda-neutral-variant-25);border:solid 1px var(--dda-neutral-variant-25)}.light-mode.btn-color-surface-variant:focus{background-color:var(--dda-neutral-variant-20);border:solid 1px var(--dda-neutral-variant-20);outline:var(--dda-neutral-variant-20)}.btn-color-disabled{background-color:var(--dda-surface-92) !important;border:solid 1px var(--dda-surface-92) !important;color:var(--dda-neutral-60) !important;cursor:not-allowed}.light-mode.btn-color-disabled{background-color:var(--dda-neutral-92) !important;border:solid 1px var(--dda-neutral-92) !important;color:var(--dda-neutral-60) !important;cursor:not-allowed}.btn-size-sm{height:32px;padding:12px;font-size:var(--font-caption);gap:4px}.btn-size-md{height:40px;padding:8px 12px;font-size:var(--font-body);gap:4px}.btn-size-lg{height:48px;padding:10px 16px;font-size:var(--font-h6);gap:8px}.btn-size-xl{height:56px;padding:10px 24px;font-size:var(--font-h6);gap:8px}.icon-btn-default{height:44px;min-width:44px;padding:8px 0;border-radius:4px}.icon-btn-circle{height:44px;min-width:44px;padding:8px 0;border-radius:100px}.btn-shape-default{border-radius:4px}.btn-shape-circle{border-radius:100px}.icon-btn-default.btn-size-sm,.icon-btn-circle.btn-size-sm{height:40px;min-width:40px;padding:8px 0}.icon-btn-default.btn-size-md,.icon-btn-circle.btn-size-md{height:44px;min-width:44px;padding:10px 0}.icon-btn-default.btn-size-lg,.icon-btn-circle.btn-size-lg{height:48px;min-width:48px;padding:12px 0}.icon-btn-default.btn-size-xl,.icon-btn-circle.btn-size-xl{height:56px;min-width:56px;padding:16px 0}.dda-btn-icon i,.dda-btn-icon svg{font-size:var(--font-h6)}.dda-btn.btn-size-sm i,.dda-btn.btn-size-sm svg{font-size:var(--font-body)}.dda-split-btn{height:44px;font-family:var(--font-family-main);font-size:var(--font-body);font-weight:var(--font-weight-regular);padding:8px 12px;border-radius:8px;outline:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}.split-btn-shape-default{border-radius:0px;border-end-start-radius:8px;border-start-start-radius:8px}.split-btn-shape-circle{border-radius:0px;border-end-start-radius:100px;border-start-start-radius:100px}";
|
|
4
|
-
const DdaSplitButtonStyle0 = ddaSplitButtonCss;
|
|
5
|
-
|
|
6
3
|
const DdaSplitButton$1 = /*@__PURE__*/ proxyCustomElement(class DdaSplitButton extends H {
|
|
7
4
|
constructor() {
|
|
8
5
|
super();
|
|
9
6
|
this.__registerHost();
|
|
10
7
|
this.buttonClick = createEvent(this, "buttonClick", 7);
|
|
11
|
-
this.
|
|
8
|
+
this.text_button_type = 'button';
|
|
12
9
|
this.disabled = false;
|
|
13
10
|
this.start_icon_family = '';
|
|
14
11
|
this.start_icon = '';
|
|
@@ -16,38 +13,89 @@ const DdaSplitButton$1 = /*@__PURE__*/ proxyCustomElement(class DdaSplitButton e
|
|
|
16
13
|
this.aria_label = '';
|
|
17
14
|
this.button_color = 'primary';
|
|
18
15
|
this.button_shape = '';
|
|
19
|
-
this.
|
|
16
|
+
this.toggle_button_shape = '';
|
|
20
17
|
this.custom_class = '';
|
|
21
|
-
this.
|
|
18
|
+
this.text_button_name = '';
|
|
19
|
+
this.is_open = false;
|
|
22
20
|
this.handleClick = (event) => {
|
|
23
21
|
if (this.disabled)
|
|
24
22
|
return;
|
|
25
23
|
this.buttonClick.emit({
|
|
26
24
|
event,
|
|
27
|
-
id: this.
|
|
25
|
+
id: this.text_button_id,
|
|
28
26
|
value: this.value,
|
|
29
|
-
name: this.
|
|
27
|
+
name: this.text_button_name,
|
|
30
28
|
});
|
|
31
29
|
};
|
|
30
|
+
this.handleClickOutside = (event) => {
|
|
31
|
+
if (this.is_open && !this.el.contains(event.target)) {
|
|
32
|
+
this.is_open = false;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
toggleSelect() {
|
|
37
|
+
if (!this.disabled) {
|
|
38
|
+
this.is_open = !this.is_open;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
connectedCallback() {
|
|
42
|
+
document.addEventListener('click', this.handleClickOutside);
|
|
43
|
+
}
|
|
44
|
+
disconnectedCallback() {
|
|
45
|
+
document.removeEventListener('click', this.handleClickOutside);
|
|
46
|
+
}
|
|
47
|
+
componentDidLoad() {
|
|
48
|
+
// after first render, move slotted menu inside container
|
|
49
|
+
this.moveMenuToContainer();
|
|
50
|
+
}
|
|
51
|
+
componentDidRender() {
|
|
52
|
+
// ensure menu stays inside container after re-renders (defensive)
|
|
53
|
+
this.moveMenuToContainer();
|
|
54
|
+
}
|
|
55
|
+
moveMenuToContainer() {
|
|
56
|
+
// find the visible container inside this component
|
|
57
|
+
const container = this.el.querySelector('.split-btn-list');
|
|
58
|
+
if (!container)
|
|
59
|
+
return;
|
|
60
|
+
// Only consider direct children of host that carry slot="menu".
|
|
61
|
+
const hostChildren = Array.from(this.el.children);
|
|
62
|
+
const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');
|
|
63
|
+
slotted.forEach((node) => {
|
|
64
|
+
// if it's already inside container, skip
|
|
65
|
+
if (node.parentElement !== container) {
|
|
66
|
+
container.appendChild(node);
|
|
67
|
+
}
|
|
68
|
+
});
|
|
32
69
|
}
|
|
33
70
|
render() {
|
|
34
|
-
const
|
|
35
|
-
'dda-split-btn',
|
|
71
|
+
const textButtonClass = [
|
|
72
|
+
'dda-split-btn', // unique for main button
|
|
73
|
+
`btn-color-${this.button_color}`,
|
|
74
|
+
this.size ? `btn-size-${this.size}` : '',
|
|
75
|
+
this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',
|
|
76
|
+
this.gap ? `dda-gap-${this.gap}` : '',
|
|
77
|
+
this.custom_class,
|
|
78
|
+
this.component_mode,
|
|
79
|
+
]
|
|
80
|
+
.filter(Boolean)
|
|
81
|
+
.join(' ');
|
|
82
|
+
const toggleButtonClass = [
|
|
83
|
+
'dda-split-btn dda-split-btn-toggle', // unique for toggle button
|
|
36
84
|
`btn-color-${this.button_color}`,
|
|
37
85
|
this.size ? `btn-size-${this.size}` : '',
|
|
38
|
-
this.button_shape ? `split-btn-shape-${this.button_shape}` : '',
|
|
39
|
-
this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',
|
|
86
|
+
this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',
|
|
40
87
|
this.gap ? `dda-gap-${this.gap}` : '',
|
|
41
88
|
this.custom_class,
|
|
42
89
|
this.component_mode,
|
|
43
90
|
]
|
|
44
91
|
.filter(Boolean)
|
|
45
92
|
.join(' ');
|
|
46
|
-
|
|
93
|
+
const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;
|
|
94
|
+
return (h(Host, { key: '557dd738ecda2ea9b887f26a649545d636739162' }, h("div", { key: '8cf1af27d4518266bcfa3ad973e5caf747752e4a', class: "split-btn-container" }, h("button", { key: '7d37f0b271365ad447a605f87f4933ade5c51bba', id: this.text_button_id, type: this.text_button_type, class: textButtonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.text_button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'f6244bede898854205902c83febd164f2a8c7772', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), h("span", { key: '5785f0550374e9b71225111c1473bc3a40808490' }, this.button_text)), h("button", { key: 'a8158ad76834a12c564771a91237a452ae917323', type: "button", class: toggleButtonClass, disabled: this.disabled, onClick: () => this.toggleSelect() }, h("i", { key: '632d4c992c4da668770292d9b2b0881d0d85a557', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '88988abe9f2a3173f34356a030fdd03055c94139', class: listClass, "aria-hidden": !this.is_open, role: "menu" }, h("slot", { key: 'b7c9e16e3c36b64d6aa185ced7da41ff1f02cc76', name: "menu" })))));
|
|
47
95
|
}
|
|
48
|
-
|
|
49
|
-
}, [
|
|
50
|
-
"
|
|
96
|
+
get el() { return this; }
|
|
97
|
+
}, [4, "dda-split-button", {
|
|
98
|
+
"text_button_type": [1],
|
|
51
99
|
"disabled": [4],
|
|
52
100
|
"start_icon_family": [1],
|
|
53
101
|
"start_icon": [1],
|
|
@@ -56,13 +104,14 @@ const DdaSplitButton$1 = /*@__PURE__*/ proxyCustomElement(class DdaSplitButton e
|
|
|
56
104
|
"button_color": [1],
|
|
57
105
|
"size": [1],
|
|
58
106
|
"button_shape": [1],
|
|
59
|
-
"
|
|
107
|
+
"toggle_button_shape": [1],
|
|
60
108
|
"gap": [2],
|
|
61
109
|
"custom_class": [1],
|
|
62
110
|
"component_mode": [1],
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"value": [1]
|
|
111
|
+
"text_button_id": [1],
|
|
112
|
+
"text_button_name": [1],
|
|
113
|
+
"value": [1],
|
|
114
|
+
"is_open": [32]
|
|
66
115
|
}]);
|
|
67
116
|
function defineCustomElement$1() {
|
|
68
117
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dda-split-button.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,o/aAAo/a,CAAC;AAC/gb,6BAAe,iBAAiB;;MCMnBA,gBAAc;IAL3B;;;;QAMU,gBAAW,GAAW,QAAQ,CAAC;QAC/B,aAAQ,GAAY,KAAK,CAAC;QAC1B,sBAAiB,GAAW,EAAE,CAAC;QAC/B,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,sBAAiB,GAAY,EAAE,CAAC;QAEhC,iBAAY,GAAY,EAAE,CAAC;QAG3B,gBAAW,GAAY,EAAE,CAAC;QAK1B,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK;gBACL,EAAE,EAAE,IAAI,CAAC,SAAS;gBAClB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;aACvB,CAAC,CAAC;SACJ,CAAC;KA6CH;IA1CC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,eAAe;YACf,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,mBAAmB,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/D,IAAI,CAAC,iBAAiB,GAAG,YAAY,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aAEA,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEX,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAC5B,+DACA,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAC/C,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,UAAU,KACZ,0DAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,IACrE,IAAI,CAAC,UAAU,CACZ,CACP,EACA,IAAI,CAAC,WAAW,CACR,EACT,+DAAQ,KAAK,EAAC,iBAAiB,GAEtB,CACP,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DdaSplitButton"],"sources":["src/components/dda-split-button/dda-split-button.css?tag=dda-split-button","src/components/dda-split-button/dda-split-button.tsx"],"sourcesContent":[".dda-btn {\r\n height: 44px;\r\n font-family: var(--font-family-main);\r\n font-size: var(--font-body);\r\n font-weight: var(--font-weight-regular);\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n outline: 0;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n }\r\n/**/\r\n.btn-color-default-primary{\r\n background-color: var(--dda-color-primary-40);\r\n border: solid 1px var(--dda-color-primary-40);\r\n color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-default-primary:hover {\r\n background-color: var(--dda-on-primary-variant-30);\r\n border: solid 1px var(--dda-on-primary-variant-30);\r\n}\r\n.btn-color-default-primary:focus {\r\n background-color: var(--dda-on-primary-variant-20);\r\n outline: var(--dda-on-primary-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-primary,\r\n.light-mode .btn-color-default-primary{\r\n background-color: var(--dda-primary-40);\r\n border: solid 1px var(--dda-primary-40);\r\n color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-default-primary:hover,\r\n.light-mode .btn-color-default-primary:hover {\r\n background-color: var(--dda-primary-30);\r\n border: solid 1px var(--dda-primary-30);\r\n}\r\n.light-mode.btn-color-default-primary:focus,\r\n.light-mode .btn-color-default-primary:focus {\r\n background-color: var(--dda-primary-20);\r\n outline: var(--dda-primary-20);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-secondary {\r\n background-color: var(--dda-on-primary-98);\r\n border: solid 1px var(--dda-on-primary-98);\r\n color: var(--dda-color-primary-40);\r\n}\r\n.btn-color-default-secondary:hover {\r\n background-color: var(--dda-on-primary-94);\r\n border: solid 1px var(--dda-on-primary-94);\r\n}\r\n.btn-color-default-secondary:focus {\r\n background-color: var(--dda-primary-variant-92);\r\n outline: var(--dda-primary-variant-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-secondary {\r\n background-color: var(--dda-primary-98);\r\n border: solid 1px var(--dda-primary-98);\r\n color: var(--dda-primary-40);\r\n}\r\n.light-mode.btn-color-default-secondary:hover {\r\n background-color: var(--dda-primary-94);\r\n border: solid 1px var(--dda-primary-94);\r\n}\r\n.light-mode.btn-color-default-secondary:focus {\r\n background-color: var(--dda-primary-92);\r\n outline: var(--dda-primary-92);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-tertiary {\r\n background-color: var(--dda-surface-100);\r\n border: solid 1px var(--dda-surface-90);\r\n color: var(--dda-color-primary-40)\r\n}\r\n.btn-color-default-tertiary:hover {\r\n background-color: var(--dda-on-primary-98);\r\n}\r\n.btn-color-default-tertiary:focus {\r\n background-color: var(--dda-on-primary-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-tertiary {\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-primary-40)\r\n}\r\n.light-mode.btn-color-default-tertiary:hover {\r\n background-color: var(--dda-primary-98);\r\n}\r\n.light-mode.btn-color-default-tertiary:focus {\r\n background-color: var(--dda-primary-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-link {\r\n height: auto !important;\r\n background-color: transparent !important;\r\n border: transparent !important;\r\n color: var(--dda-color-primary-40);\r\n padding: 0px !important;\r\n}\r\n.light-mode.btn-color-default-link {\r\n color: var(--dda-primary-40);\r\n}\r\n.btn-color-default-link:focus{\r\n outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-primary {\r\n background-color: var(--dda-color-error-40);\r\n border: solid 1px var(--dda-color-error-40);\r\n color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-error-primary:hover {\r\n background-color: var(--dda-color-error-40);\r\n border: solid 1px var(--dda-color-error-40);\r\n}\r\n.btn-color-error-primary:focus {\r\n background-color: var(--dda-color-error-30);\r\n border: solid 1px var(--dda-color-error-30);\r\n outline: var(--dda-color-error-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-primary {\r\n background-color: var(--dda-error-40);\r\n border: solid 1px var(--dda-error-40);\r\n color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-error-primary:hover {\r\n background-color: var(--dda-error-40);\r\n border: solid 1px var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-primary:focus {\r\n background-color: var(--dda-error-30);\r\n border: solid 1px var(--dda-error-30);\r\n outline: var(--dda-error-30);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-secondary {\r\n background-color: var(--dda-error-variant-95);\r\n border: solid 1px var(--dda-error-variant-95);\r\n color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-secondary:hover {\r\n background-color: var(--dda-on-error-98);\r\n border: solid 1px var(--dda-on-error-98);\r\n}\r\n.btn-color-error-secondary:focus {\r\n background-color: var(--dda-on-error-96);\r\n border: solid 1px var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-secondary {\r\n background-color: var(--dda-error-95);\r\n border: solid 1px var(--dda-error-95);\r\n color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-secondary:hover {\r\n background-color: var(--dda-error-98);\r\n border: solid 1px var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-secondary:focus {\r\n background-color: var(--dda-error-96);\r\n border: solid 1px var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-tertiary {\r\n background-color: var(--dda-surface-100);\r\n border: solid 1px var(--dda-surface-90);\r\n color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-tertiary:hover {\r\n background-color: var(--dda-on-error-98);\r\n}\r\n.btn-color-error-tertiary:focus {\r\n background-color: var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-tertiary {\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-tertiary:hover {\r\n background-color: var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-tertiary:focus {\r\n background-color: var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-link {\r\n height: auto !important;\r\n background-color: transparent !important;\r\n border: transparent !important;\r\n color: var(--dda-color-error-40);\r\n padding: 0px !important;\r\n}\r\n.light-mode.btn-color-error-link {\r\n color: var(--dda-error-40);\r\n}\r\n.btn-color-error-link:focus{\r\n outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-onsurface-primary {\r\n background-color: var(--dda-on-surface-0);\r\n border: solid 1px var(--dda-on-surface-0);\r\n color: var(--dda-surface-100);\r\n}\r\n.btn-color-onsurface-primary:hover {\r\n background-color: var(--dda-on-surface-20);\r\n border: solid 1px var(--dda-on-surface-20);\r\n}\r\n.btn-color-onsurface-primary:focus {\r\n background-color: var(--dda-on-surface-30);\r\n border: solid 1px var(--dda-on-surface-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-primary {\r\n background-color: var(--dda-neutral-0);\r\n border: solid 1px var(--dda-neutral-0);\r\n color: var(--dda-neutral-100);\r\n}\r\n.light-mode.btn-color-onsurface-primary:hover {\r\n background-color: var(--dda-neutral-20);\r\n border: solid 1px var(--dda-neutral-20);\r\n}\r\n.light-mode.btn-color-onsurface-primary:focus {\r\n background-color: var(--dda-neutral-30);\r\n border: solid 1px var(--dda-neutral-30);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-secondary {\r\n background-color: var(--dda-surface-96);\r\n border: solid 1px var(--dda-surface-96);\r\n color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-secondary:hover {\r\n background-color: var(--dda-surface-94);\r\n border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-secondary:focus {\r\n background-color: var(--dda-surface-92);\r\n border: solid 1px var(--dda-surface-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-secondary {\r\n background-color: var(--dda-neutral-96);\r\n border: solid 1px var(--dda-neutral-96);\r\n color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:hover {\r\n background-color: var(--dda-neutral-94);\r\n border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:focus {\r\n background-color: var(--dda-neutral-92);\r\n border: solid 1px var(--dda-neutral-92);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-tertiary {\r\n background-color: var(--dda-surface-100);\r\n border: solid 1px var(--dda-surface-90);\r\n color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-tertiary:hover {\r\n background-color: var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-tertiary:focus {\r\n background-color: var(--dda-surface-90);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-tertiary {\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:hover {\r\n background-color: var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:focus {\r\n background-color: var(--dda-neutral-90);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-link {\r\n height: auto !important;\r\n background-color: transparent !important;\r\n border: transparent !important;\r\n color: var(--dda-on-surface-0);\r\n padding: 0px !important;\r\n}\r\n.light-mode.btn-color-onsurface-link {\r\n color: var(--dda-neutral-0);\r\n}\r\n.btn-color-onsurface-link:focus{\r\n outline: auto;\r\n}\r\n/**/\r\n\r\n.btn-color-secondary {\r\n background-color: var(--dda-color-secondary-40);\r\n border: solid 1px var(--dda-color-secondary-40);\r\n color: var(--dda-on-secondary-100);\r\n}\r\n.btn-color-secondary:hover {\r\n background-color: var(--dda-color-secondary-30);\r\n border: solid 1px var(--dda-color-secondary-30);\r\n}\r\n.btn-color-secondary:focus {\r\n background-color: var(--dda-color-secondary-20);\r\n border: solid 1px var(--dda-color-secondary-20);\r\n outline: var(--dda-color-secondary-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-secondary {\r\n background-color: var(--dda-secondary-40);\r\n border: solid 1px var(--dda-secondary-40);\r\n color: var(--dda-secondary-100);\r\n}\r\n.light-mode.btn-color-secondary:hover {\r\n background-color: var(--dda-secondary-30);\r\n border: solid 1px var(--dda-secondary-30);\r\n}\r\n.light-mode.btn-color-secondary:focus {\r\n background-color: var(--dda-secondary-20);\r\n border: solid 1px var(--dda-secondary-20);\r\n outline: var(--dda-secondary-20);\r\n}\r\n/**/\r\n\r\n.btn-color-success {\r\n background-color: var(--dda-color-success-50);\r\n border: solid 1px var(--dda-color-success-50);\r\n color: var(--dda-on-success-100);\r\n}\r\n.btn-color-success:hover {\r\n background-color: var(--dda-color-success-40);\r\n border: solid 1px var(--dda-color-success-40);\r\n}\r\n.btn-color-success:focus {\r\n background-color: var(--dda-color-success-30);\r\n border: solid 1px var(--dda-color-success-30);\r\n outline: var(--dda-color-success-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-success {\r\n background-color: var(--dda-success-50);\r\n border: solid 1px var(--dda-success-50);\r\n color: var(--dda-success-100);\r\n}\r\n.light-mode.btn-color-success:hover {\r\n background-color: var(--dda-success-40);\r\n border: solid 1px var(--dda-success-40);\r\n}\r\n.light-mode.btn-color-success:focus {\r\n background-color: var(--dda-success-30);\r\n border: solid 1px var(--dda-success-30);\r\n outline: var(--dda-success-30);\r\n}\r\n/**/\r\n\r\n.btn-color-warning {\r\n background-color: var(--dda-color-warning-50);\r\n border: solid 1px var(--dda-color-warning-50);\r\n color: var(--dda-on-warning-100);\r\n}\r\n.btn-color-warning:hover {\r\n background-color: var(--dda-color-warning-40);\r\n border: solid 1px var(--dda-color-warning-40);\r\n border-color: var(--dda-color-warning-40);\r\n}\r\n.btn-color-warning:focus {\r\n background-color: var(--dda-color-warning-30);\r\n border: solid 1px var(--dda-color-warning-30);\r\n outline: var(--dda-color-warning-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-warning {\r\n background-color: var(--dda-warning-50);\r\n border: solid 1px var(--dda-warning-50);\r\n color: var(--dda-warning-100);\r\n}\r\n.light-mode.btn-color-warning:hover {\r\n background-color: var(--dda-warning-40);\r\n border: solid 1px var(--dda-warning-40);\r\n border-color: var(--dda-warning-40);\r\n}\r\n.light-mode.btn-color-warning:focus {\r\n background-color: var(--dda-warning-30);\r\n border: solid 1px var(--dda-warning-30);\r\n outline: var(--dda-warning-30);\r\n}\r\n/**/\r\n\r\n.btn-color-surface {\r\n background-color: var(--dda-surface-100);\r\n border: solid 1px var(--dda-surface-100);\r\n color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-surface:hover {\r\n background-color: var(--dda-surface-94);\r\n border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-surface:focus {\r\n background-color: var(--dda-surface-92);\r\n border: solid 1px var(--dda-surface-92);\r\n outline: var(--dda-on-surface-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface {\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-100);\r\n color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-surface:hover {\r\n background-color: var(--dda-neutral-94);\r\n border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-surface:focus {\r\n background-color: var(--dda-neutral-92);\r\n border: solid 1px var(--dda-neutral-92);\r\n outline: var(--dda-neutral-20);\r\n}\r\n/**/\r\n\r\n.btn-color-surface-variant {\r\n background-color: var(--dda-on-surface-variant-30);\r\n border: solid 1px var(--dda-on-surface-variant-30);\r\n color: var(--dda-surface-variant-90);\r\n}\r\n.btn-color-surface-variant:hover {\r\n background-color: var(--dda-on-surface-variant-25);\r\n border: solid 1px var(--dda-on-surface-variant-25);\r\n}\r\n.btn-color-surface-variant:focus {\r\n background-color: var(--dda-on-surface-variant-20);\r\n border: solid 1px var(--dda-on-surface-variant-20);\r\n outline: var(--dda-on-surface-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface-variant {\r\n background-color: var(--dda-neutral-variant-30);\r\n border: solid 1px var(--dda-neutral-variant-30);\r\n color: var(--dda-neutral-variant-90);\r\n}\r\n.light-mode.btn-color-surface-variant:hover {\r\n background-color: var(--dda-neutral-variant-25);\r\n border: solid 1px var(--dda-neutral-variant-25);\r\n}\r\n.light-mode.btn-color-surface-variant:focus {\r\n background-color: var(--dda-neutral-variant-20);\r\n border: solid 1px var(--dda-neutral-variant-20);\r\n outline: var(--dda-neutral-variant-20);\r\n}\r\n/**/\r\n\r\n.btn-color-disabled {\r\n background-color: var(--dda-surface-92) !important;\r\n border: solid 1px var(--dda-surface-92) !important;\r\n color: var(--dda-neutral-60) !important;\r\n cursor: not-allowed;\r\n}\r\n.light-mode.btn-color-disabled {\r\n background-color: var(--dda-neutral-92) !important;\r\n border: solid 1px var(--dda-neutral-92) !important;\r\n color: var(--dda-neutral-60) !important;\r\n cursor: not-allowed;\r\n}\r\n/**/\r\n\r\n.btn-size-sm {\r\n height: 32px;\r\n padding: 12px;\r\n font-size: var(--font-caption);\r\n gap: 4px;\r\n}\r\n\r\n.btn-size-md {\r\n height: 40px;\r\n padding: 8px 12px;\r\n font-size: var(--font-body);\r\n gap: 4px;\r\n}\r\n\r\n.btn-size-lg {\r\n height: 48px;\r\n padding: 10px 16px;\r\n font-size: var(--font-h6);\r\n gap: 8px;\r\n}\r\n\r\n.btn-size-xl {\r\n height: 56px;\r\n padding: 10px 24px;\r\n font-size: var(--font-h6);\r\n gap: 8px;\r\n}\r\n\r\n.icon-btn-default {\r\n height: 44px;\r\n min-width: 44px;\r\n padding: 8px 0;\r\n border-radius: 4px;\r\n}\r\n\r\n.icon-btn-circle {\r\n height: 44px;\r\n min-width: 44px;\r\n padding: 8px 0;\r\n border-radius: 100px;\r\n}\r\n\r\n.btn-shape-default {\r\n border-radius: 4px;\r\n}\r\n\r\n.btn-shape-circle {\r\n border-radius: 100px;\r\n}\r\n\r\n.icon-btn-default.btn-size-sm,\r\n.icon-btn-circle.btn-size-sm {\r\n height: 40px;\r\n min-width: 40px;\r\n padding: 8px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-md,\r\n.icon-btn-circle.btn-size-md {\r\n height: 44px;\r\n min-width: 44px;\r\n padding: 10px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-lg,\r\n.icon-btn-circle.btn-size-lg {\r\n height: 48px;\r\n min-width: 48px;\r\n padding: 12px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-xl,\r\n.icon-btn-circle.btn-size-xl {\r\n height: 56px;\r\n min-width: 56px;\r\n padding: 16px 0;\r\n}\r\n\r\n.dda-btn-icon i,\r\n.dda-btn-icon svg {\r\n font-size: var(--font-h6);\r\n}\r\n\r\n.dda-btn.btn-size-sm i,\r\n.dda-btn.btn-size-sm svg{\r\n font-size: var(--font-body);\r\n}\r\n\r\n\r\n/********Split Button********/\r\n.dda-split-btn {\r\n height: 44px;\r\n font-family: var(--font-family-main);\r\n font-size: var(--font-body);\r\n font-weight: var(--font-weight-regular);\r\n padding: 8px 12px;\r\n border-radius: 8px;\r\n outline: 0;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n}\r\n.split-btn-shape-default {\r\n border-radius: 0px;\r\n border-end-start-radius: 8px;\r\n border-start-start-radius: 8px;\r\n}\r\n.split-btn-shape-circle {\r\n border-radius: 0px;\r\n border-end-start-radius: 100px;\r\n border-start-start-radius: 100px;\r\n}","import { Host, Component, Prop, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-split-button',\r\n styleUrls: ['dda-split-button.css'],\r\n shadow: false,\r\n})\r\nexport class DdaSplitButton {\r\n @Prop() button_type: string = 'button';\r\n @Prop() disabled: boolean = false;\r\n @Prop() start_icon_family: string = '';\r\n @Prop() start_icon: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_color: string = 'primary';\r\n @Prop() size?: string;\r\n @Prop() button_shape?: string = '';\r\n @Prop() icon_button_shape?: string = '';\r\n @Prop() gap?: number;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() button_id: string;\r\n @Prop() button_name?: string = '';\r\n @Prop() value?: string;\r\n\r\n @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) return;\r\n\r\n this.buttonClick.emit({\r\n event,\r\n id: this.button_id,\r\n value: this.value,\r\n name: this.button_name,\r\n });\r\n };\r\n \r\n\r\n render() {\r\n const buttonClass = [\r\n 'dda-split-btn',\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-btn-shape-${this.button_shape}` : '',\r\n this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n \r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class=\"split-btn-container\">\r\n <button\r\n id={this.button_id}\r\n type={this.button_type}\r\n class={buttonClass}\r\n disabled={this.disabled}\r\n aria-label={this.aria_label || this.button_text}\r\n name={this.button_name}\r\n value={this.value}\r\n onClick={this.handleClick}\r\n >\r\n {this.start_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.start_icon}\r\n </i>\r\n )}\r\n {this.button_text}\r\n </button>\r\n <button class=\"split-btn-arrow\">\r\n \r\n </button>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dda-split-button.js","mappings":"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","names":["DdaSplitButton"],"sources":["src/components/dda-split-button/dda-split-button.tsx"],"sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-split-button',\r\n // styleUrls: ['dda-split-button.css'],\r\n shadow: false,\r\n})\r\nexport class DdaSplitButton {\r\n @Prop() text_button_type: string = 'button';\r\n @Prop() disabled: boolean = false;\r\n @Prop() start_icon_family: string = '';\r\n @Prop() start_icon: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_color: string = 'primary';\r\n @Prop() size?: string;\r\n @Prop() button_shape?: string = '';\r\n @Prop() toggle_button_shape?: string = '';\r\n @Prop() gap?: number;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() text_button_id: string;\r\n @Prop() text_button_name?: string = '';\r\n @Prop() value?: string;\r\n\r\n @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n /*toogle Button*/\r\n @Element() el: HTMLElement;\r\n @State() is_open: boolean = false;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) return;\r\n\r\n this.buttonClick.emit({\r\n event,\r\n id: this.text_button_id,\r\n value: this.value,\r\n name: this.text_button_name,\r\n });\r\n };\r\n \r\n toggleSelect() {\r\n if (!this.disabled) {\r\n this.is_open = !this.is_open;\r\n }\r\n }\r\n handleClickOutside = (event: MouseEvent) => {\r\n if (this.is_open && !this.el.contains(event.target as Node)) {\r\n this.is_open = false;\r\n }\r\n };\r\n\r\n connectedCallback() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n componentDidLoad() {\r\n // after first render, move slotted menu inside container\r\n this.moveMenuToContainer();\r\n }\r\n\r\n componentDidRender() {\r\n // ensure menu stays inside container after re-renders (defensive)\r\n this.moveMenuToContainer();\r\n }\r\n\r\n private moveMenuToContainer() {\r\n // find the visible container inside this component\r\n const container = this.el.querySelector('.split-btn-list') as HTMLElement | null;\r\n if (!container) return;\r\n\r\n // Only consider direct children of host that carry slot=\"menu\".\r\n const hostChildren = Array.from(this.el.children) as Element[];\r\n const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');\r\n\r\n slotted.forEach((node) => {\r\n // if it's already inside container, skip\r\n if (node.parentElement !== container) {\r\n container.appendChild(node);\r\n }\r\n });\r\n }\r\n\r\n\r\n\r\n render() {\r\n const textButtonClass = [\r\n 'dda-split-btn', // unique for main button\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const toggleButtonClass = [\r\n 'dda-split-btn dda-split-btn-toggle', // unique for toggle button\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;\r\n\r\n return (\r\n <Host>\r\n <div class=\"split-btn-container\">\r\n {/* Main action button */}\r\n <button\r\n id={this.text_button_id}\r\n type={this.text_button_type}\r\n class={textButtonClass}\r\n disabled={this.disabled}\r\n aria-label={this.aria_label || this.button_text}\r\n name={this.text_button_name}\r\n value={this.value}\r\n onClick={this.handleClick}\r\n >\r\n {this.start_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.start_icon}\r\n </i>\r\n )}\r\n <span>{this.button_text}</span>\r\n </button>\r\n\r\n {/* Dropdown toggle button */}\r\n <button \r\n type=\"button\"\r\n class={toggleButtonClass}\r\n disabled={this.disabled}\r\n onClick={() => this.toggleSelect()}\r\n >\r\n <i class=\"material-icons\" aria-hidden=\"true\">\r\n {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n </i>\r\n </button>\r\n\r\n <div class={listClass} aria-hidden={!this.is_open} role=\"menu\">\r\n <slot name=\"menu\"></slot>\r\n </div>\r\n\r\n\r\n {/* {this.is_open && (\r\n <div class=\"split-btn-list\">\r\n <slot name=\"menu\"></slot>\r\n </div>\r\n )} */}\r\n </div>\r\n </Host>\r\n );\r\n}\r\n}\r\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f6588843.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-ba13ee0a.js';
|
|
3
3
|
|
|
4
4
|
const ddaStickyFooterCss = ".dda-footer{box-shadow:0 -2px 13px 0 rgba(0, 0, 0, 0.12);background-color:var(--dda-surface-100);color:var(--dda-surface-0);position:fixed;bottom:0;left:0;width:100%;z-index:5;padding:0 20px;transform:translateY(0);}.dda-footer.hidden{transform:translateY(100%)}.footer-content{height:64px;display:flex;align-items:center;justify-content:space-between}.dda-footer-item{display:flex;align-items:center;position:relative}.dda-footer-item ul{display:inline-flex;align-items:center}.dda-footer-item ul li{padding:0 10px;border-inline-start:solid 1px #E0E3E2}.dda-footer-item ul li:first-child{border:0px}.foot-icon-btn a{height:40px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:var(--font-caption);font-weight:var(--font-weight-regular);color:var(--dda-surface-0)}.foot-icon-btn a:visited{color:var(--dda-on-primary-variant-40)}.foot-icon-btn a i,.dda-footer-right button i{color:var(--dda-on-surface-variant-30)}.foot-icon-btn a img{height:32px}.dda-footer-item ul li.foot-menu{padding:0 5px}.foot-menu a{color:var(--dda-on-surface-0)}.foot-menu a i,.foot-menu a svg{font-size:20px;color:var(--dda-on-surface-variant-30);fill:var(--dda-on-surface-variant-30)}.foot-menu a img{height:40px}.foot-logo a{background-color:var(--dda-neutral-100);height:40px;display:flex;align-items:center}.foot-logo a img{height:35px}.dda-footer-right button.show-right-icon{display:none}.dda-footer .dubaiae-text-icon{height:18px}.dda-footer .dubaiae-small-icon{height:18px;display:none}@media (max-width: 1024px){.dda-footer{background:transparent;box-shadow:none;padding-left:32px;padding-right:32px;padding-bottom:32px}.footer-content{height:auto}.foot-menu,.foot-icon-btn a span{display:none}.dda-footer-item ul{gap:16px}.dda-footer-item ul li{padding:0px;border:0px !important}.foot-icon-btn a,.dda-footer-right button{width:48px;height:48px;background:#ffffff;border-radius:50px;border:0px;box-shadow:0 6px 20px rgba(0, 0, 0, .2)}.dda-footer-right button.show-right-icon{display:flex;align-items:center;justify-content:center}.foot-icon-btn a img{height:24px}.foot-icon-btn a i{font-size:23px}.dda-footer-right button i{font-size:34px}.dda-footer-right .foot-right_links{position:absolute;bottom:59px;inset-inline-end:0px;display:flex;flex-direction:column;gap:10px;height:0;overflow:hidden}.dda-footer-right .foot-right_links.show-dda-icon{height:auto;overflow:visible}.foot-right_links li.foot-icon-btn{list-style:none;opacity:0;transform:translateY(20px);}@media (prefers-reduced-motion: no-preference){.foot-right_links li.foot-icon-btn,.dda-footer-right .foot-right_links{transition:opacity 0.4s ease, transform 0.4s ease}}.foot-right_links.show-dda-icon li.foot-icon-btn{opacity:1;transform:translateY(0)}.dda-footer .dubaiae-text-icon{display:none}.dda-footer .dubaiae-small-icon{height:24px;display:block}}@media (max-width: 640px){.dda-footer{padding-left:16px;padding-right:16px;padding-bottom:16px}}@media (max-width: 1400px){.dda-footer-middle{display:none}}@media (prefers-reduced-motion: no-preference){.dda-footer{transition:transform 0.3s ease-in-out}}";
|
|
5
5
|
const DdaStickyFooterStyle0 = ddaStickyFooterCss;
|
|
@@ -82,7 +82,7 @@ const DdaStickyFooter$1 = /*@__PURE__*/ proxyCustomElement(class DdaStickyFooter
|
|
|
82
82
|
render() {
|
|
83
83
|
const footmiddlesection = this.parseJsonArray(this.middleLink);
|
|
84
84
|
const footrightsection = this.parseJsonArray(this.rightLink);
|
|
85
|
-
return (h("div", { key: '
|
|
85
|
+
return (h("div", { key: '2c8c603c8d9a77b0fe438852b2d029fdec0eabfa', class: { 'dda-footer': true, 'hidden': this.isHidden } }, h("div", { key: '1465e988b3fdd71b3c5d46af57b36bdef32f6c25', class: "footer-content" }, h("div", { key: 'd8a62756f7060347b423e50515a92f9dd5f9038e', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '6243f8c0124cf89b2cf43486948bc40872157128' }, this.happinessIconSrc && (h("li", { key: '2df7302fb6cce0415071eef0e7340f33d808791c', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'f701d7d8fe4a143a5bc1c4b3845bcaf079029298', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '2d7c2b024978ba9e40b84545752073e795690469', href: this.happinessIconHref, id: this.happinessIconId, onClick: this.happinessIconClick }, h("img", { key: 'a67456f116dc1228e9e755045039f1fd45b845ec', src: this.colorTheme == 'light' ? this.happinessIconSrc : this.happinessIconSrcDark, alt: this.happinessIconAlt }), h("span", { key: 'a70dd75c3cb3c0db3c1c740527034da266f45f66', class: "visually-hidden" }, this.happinessIconTooltip))))), this.accessibilityIconSrc && (h("li", { key: 'a652e3578709b1baa06929bec870d545aaff6cb5', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'c2a75c4013ab6fe2aedeb127371743c887c699db', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '050f73f62864322eab29c793d7899e4bac01ac45', href: this.accessibilityIconHref, id: this.accessibilityIconId, onClick: this.accessibilityIconClick }, h("img", { key: 'f18b4b7a059d7ec79e4e650da5eb6ff9af13317e', src: this.colorTheme == 'light' ? this.accessibilityIconSrc : this.accessibilityIconSrcDark, alt: this.accessibilityIconAlt }), h("span", { key: '6a31bcd8f57e3ae429e254004e3469c2b0796b29', class: "visually-hidden" }, this.accessibilityIconTooltip))))), this.servicesIconText && (h("li", { key: '07191215d98e48678df5f989ec5b6d95eec4612d', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'b45f6372cb4ffade791d8c12fbf4459654ddb085', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: 'b931a351348702593afc0f78b0a44b3e9bfc3a83', href: this.servicesIconHref, id: this.servicesIconId, onClick: this.servicesIconClick }, h("img", { key: '2a6ffadaede9b826f56bad68f3c6a73d3b7152e8', src: this.colorTheme == 'light' ? this.servicesIconSrc : this.servicesIconSrcDark, alt: this.servicesIconAlt }), h("span", { key: 'ffe989a39d04b9d97bf94ab4563693fdc57d3104' }, this.servicesIconText))))))), !this.hideMiddleSection && (h("div", { key: 'a682adf8291542d5e9f0d1b6fe32fd18371cdd0f', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '5bba39224a284a6fefd31e8aeeb659757d8254c3', class: "foot-logo" }, footmiddlesection.map((middleItem, index) => (h("li", { key: index }, h("dda-tooltip", { title_text: middleItem.LogoTooltip, description: "", position: "top" }, h("a", { href: middleItem.href, onClick: () => this.middleItemClick(middleItem) }, h("img", { src: this.colorTheme == 'light' ? middleItem.src : middleItem.srcDark, alt: middleItem.alt }), h("span", { class: "visually-hidden" }, middleItem.LogoTooltip))))))))), h("div", { key: 'a578fd2467de48cf0b58568ccb19062e82f922a7', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '2f51dca596fe879996da4011f5cf211b18982a53', class: "foot-right_links" }, footrightsection.map((rightItem, index) => (h("li", { class: "foot-icon-btn", key: index }, h("dda-tooltip", { title_text: rightItem.RightLinkTooltip, description: "", position: "top" }, h("a", { href: rightItem.href, title: rightItem.title, "aria-label": `${rightItem.IconName} ${rightItem.LinkText}`, id: rightItem.itemId, onClick: () => this.rightItemClick(rightItem) }, h("i", { class: rightItem.IconFamily }, rightItem.IconName), h("span", null, rightItem.LinkText)))))), this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'd39c9964f72718321fcb10d4ba2b08b98d68cd29', class: "foot-icon-btn" }, h("dda-tooltip", { key: '10a9f74b03dab79f6a8c756365de254c722122f9', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '6ad62624a41f91850d028ca1ba5d57dacf20c904', href: this.dubaiaeIconHref, onClick: this.dubaiAEClick, id: this.dubaiaeIconId }, h("img", { key: 'cab8f6083ee3321286bf792d5387671d21478bed', class: "dubaiae-text-icon", src: this.colorTheme == 'light' ? this.dubaiaeIconSrc : this.dubaiaeIconSrcDark, alt: `${this.dubaiaeIconAlt} icon desktop` }), h("img", { key: '20210718563718db8e160e55ae4a1c6c7d0ea752', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: `${this.dubaiaeIconAlt} icon mobile` }), h("span", { key: '3d445f04c6cae96b63eb30e53fa157a96a986182', class: "visually-hidden" }, this.dubaiaeIconTooltip))))), this.aiIconSrc && (h("li", { key: '49d50b71a4450eb8df3e9be7abd5024ec4da4b77', class: "foot-icon-btn" }, h("dda-tooltip", { key: '974b3e47a4d9e7a694e6e65f68826a2f2e5e281e', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'eb2aed45d6b7c427c8661987aa5c24eac834d696', href: this.aiIconHref, onClick: this.aiIconClick, id: this.aiIconId }, h("img", { key: '32793e4be5d24cc960db298f57316da61d6ce884', src: this.colorTheme == 'light' ? this.aiIconSrc : this.aiIconSrcDark, alt: this.aiIconAlt }), h("span", { key: 'a21f074687baa51f29ce80d8d9f90ce0a24ffdce', class: "visually-hidden" }, this.aiIconTooltip))))), this.chatIconSrc && (h("li", { key: '29bfe82296c11f88c67f89211961767947ee44f4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9347843238243ae56fc4a294ef2a48eb2417d281', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '75d99eb7dd401efc807e051e975b24447924c184', href: this.chatIconHref, onClick: this.chatIconClick, id: this.chatIconId }, h("img", { key: '7cb2ac7d2f553489f6f2d944e12104328f3a9b14', src: this.colorTheme == 'light' ? this.chatIconSrc : this.chatIconSrcDark, alt: this.chatIconAlt }), h("span", { key: '982a5fbde9aed840d735a4a9c5f8622ff2934b79', class: "visually-hidden" }, this.chatIconTooltip)))))), h("button", { key: '406dc5a29d2ccca4ae35d2c75d3f04d5114d7afa', type: "button", class: "show-right-icon", onClick: this.toggleFooterIcons }, h("i", { key: '11f084bd7a916e7598f16fe36af56467ed32fd4e', class: this.moreIconFamily }, this.moreIcon))))));
|
|
86
86
|
}
|
|
87
87
|
get el() { return this; }
|
|
88
88
|
static get style() { return DdaStickyFooterStyle0; }
|
|
@@ -69,7 +69,7 @@ const DdaTabs$1 = /*@__PURE__*/ proxyCustomElement(class DdaTabs extends H {
|
|
|
69
69
|
this.tabClick.emit(index);
|
|
70
70
|
}
|
|
71
71
|
render() {
|
|
72
|
-
return (h(Host, { key: '
|
|
72
|
+
return (h(Host, { key: '0efe1c91e591dc0a7a8f2924a5b39cd48a905ab4' }, h("div", { key: 'c82c3e4f31765534c5f797682fe0097202a11a84', role: "tablist", "aria-label": "Tab Navigation", class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode} ${this.tab_type}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.parsedButtonIds[index] || `tab-btn-${index + 1}`, name: this.button_name, "aria-label": title, type: "button", value: this.parsedButtonValues[index] || '', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, role: "tab", "aria-selected": this.active_tab === index ? 'true' : 'false', "aria-controls": `tab-btn-${index + 1}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && (h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || '')), h("span", null, title)))))));
|
|
73
73
|
}
|
|
74
74
|
static get style() { return DdaTabsStyle0; }
|
|
75
75
|
}, [0, "dda-tabs", {
|
|
@@ -16460,7 +16460,7 @@ const DdaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class DdaTextarea extends
|
|
|
16460
16460
|
]
|
|
16461
16461
|
.filter(Boolean)
|
|
16462
16462
|
.join(' ');
|
|
16463
|
-
return (h(Host, { key: '
|
|
16463
|
+
return (h(Host, { key: '0e08517cea3fe0f247facf0ec1bfde73f20d9234' }, h("div", { key: 'e5354b352ab7c3bad0a9a06f7f4315c8b8debb0d', class: textareaClass }, this.label && (h("label", { key: '418a4633ca45ae6d476ffefae2ba1d447bdd06d5', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
|
|
16464
16464
|
this.el.dispatchEvent(new FocusEvent('focus', {
|
|
16465
16465
|
bubbles: true,
|
|
16466
16466
|
composed: true,
|
|
@@ -15,10 +15,10 @@ const DdaToggle$1 = /*@__PURE__*/ proxyCustomElement(class DdaToggle extends H {
|
|
|
15
15
|
const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
|
|
16
16
|
.filter(Boolean)
|
|
17
17
|
.join(' ');
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: '6c80c0acd2c4743411b6de02663c8b2b4f3e4953' }, h("label", { key: 'eb945d26b4a02f6f52c2879709a78f4c35af6e0d', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '756b613958049e61c24a3e7d25fe1e6f0733bba2', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
|
|
19
19
|
this.toggleChanged.emit(event);
|
|
20
20
|
this.onChanged.emit(event);
|
|
21
|
-
} }), h("span", { key: '
|
|
21
|
+
} }), h("span", { key: 'ac8b85c8cab1d456b46b5c2d02e9fa2c908582db', class: "toggle" }), h("p", { key: '3270d9ed3e3f6d6214b9a937f856d0225f92e8af' }, h("span", { key: '00aa61f8f21640f76bc224c85611bc43837b301f', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '354f2f4b4aeb8279b514693c0110a5a91ca44ec7', class: "toggle-supporting" }, "Supporting Text")))));
|
|
22
22
|
}
|
|
23
23
|
static get style() { return DdaToggleStyle0; }
|
|
24
24
|
}, [0, "dda-toggle", {
|
|
@@ -15,7 +15,7 @@ const DdaVerticalStepper$1 = /*@__PURE__*/ proxyCustomElement(class DdaVerticalS
|
|
|
15
15
|
this.parsedSteps = JSON.parse(this.steps);
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'cc451c3d4b636f60ae6e961ddd7dfedf0f143800' }, h("div", { key: 'ac25fd06f849c9e4e2135553b3640524998a4f34', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons`, "aria-hidden": "true" }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "chevron_right"))))))));
|
|
19
19
|
}
|
|
20
20
|
static get style() { return DdaVerticalStepperStyle0; }
|
|
21
21
|
}, [0, "dda-vertical-stepper", {
|
|
@@ -11,7 +11,7 @@ const DdaTooltip = /*@__PURE__*/ proxyCustomElement(class DdaTooltip extends H {
|
|
|
11
11
|
this.custom_class = '';
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: 'e8c8e7633072d59f7c0e922f943931c861db06de' }, h("div", { key: '6508bae5ac4df0f433d875648f360a3fadd933e2', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode}` }, h("slot", { key: 'dc75cd5b276b9d90ec37eb71cf008364c977ab96' }), h("div", { key: '84339f13bf811a0e7f42df8a7c89a848a311eb80', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'ef9abb2b5387fd09d16ac7827b77dc6d605d892e' }, this.title_text), h("p", { key: '00d3089ee74ed19ebed6edaf8913c372af38df42' }, this.description)))));
|
|
15
15
|
}
|
|
16
16
|
static get style() { return DdaTooltipStyle0; }
|
|
17
17
|
}, [4, "dda-tooltip", {
|
|
@@ -38,4 +38,4 @@ defineCustomElement();
|
|
|
38
38
|
|
|
39
39
|
export { DdaTooltip as D, defineCustomElement as d };
|
|
40
40
|
|
|
41
|
-
//# sourceMappingURL=p-
|
|
41
|
+
//# sourceMappingURL=p-ba13ee0a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-ba13ee0a.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0gFAA0gF,CAAC;AACjiF,yBAAe,aAAa;;MCMf,UAAU;IALvB;;;QAQU,aAAQ,GAAwC,KAAK,CAAC;QACtD,iBAAY,GAAY,EAAE,CAAC;KAgBpC;IAbC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC7E,8DAAa,EACb,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,EAAE,IAC5C,iEAAS,IAAI,CAAC,UAAU,CAAU,EAClC,4DAAI,IAAI,CAAC,WAAW,CAAK,CACrB,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dda-tooltip/dda-tooltip.css?tag=dda-tooltip","src/components/dda-tooltip/dda-tooltip.tsx"],"sourcesContent":[".dda-tooltip-container {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n.dda-tooltip-box {\r\n position: absolute;\r\n visibility: hidden;\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n text-align: center;\r\n padding: 5px 12px;\r\n border-radius: 6px;\r\n z-index: 1;\r\n opacity: 0;\r\n /* transition: opacity 0.3s; */\r\n}\r\n.dda-tooltip-container:hover .dda-tooltip-box {\r\n visibility: visible;\r\n opacity: 1;\r\n}\r\n.dda-tooltip-box strong{\r\n font-size: 16px;\r\n color: var(--dda-neutral-0);\r\n font-weight: var(--dda-fw-400);\r\n white-space: nowrap;\r\n}\r\n\r\n.dda-tooltip-box p{\r\n font-size: 14px;\r\n color: var(--dda-neutral-variant-30);\r\n white-space: nowrap;\r\n margin: 0;\r\n}\r\n\r\n.dda-tooltip-box.top {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translate(-50%);\r\n margin-bottom: 7px;\r\n}\r\n.dda-tooltip-box.top::before, .dda-tooltip-box.top::after {\r\n content: \"\";\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n position: absolute;\r\n left: 50%;\r\n margin-inline-start: -10px;\r\n}\r\n.dda-tooltip-box.top::before {\r\n top: 100%;\r\n border-top: 8px solid var(--dda-neutral-90);\r\n margin-top: 0px;\r\n}\r\n.dda-tooltip-box.top::after {\r\n top: 100%;\r\n border-top: 8px solid var(--dda-neutral-100);\r\n margin-top: -2px;\r\n z-index: 1;\r\n}\r\n\r\n\r\n.dda-tooltip-box.bottom {\r\n top: 100%;\r\n left: 50%;\r\n transform: translate(-50%);\r\n margin-top: 7px;\r\n}\r\n.dda-tooltip-box.bottom::before, .dda-tooltip-box.bottom::after {\r\n content: \"\";\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n position: absolute;\r\n left: 50%;\r\n margin-inline-start: -10px;\r\n}\r\n.dda-tooltip-box.bottom::before {\r\n bottom: 100%;\r\n border-bottom: 8px solid var(--dda-neutral-90);\r\n margin-bottom: 0px;\r\n}\r\n.dda-tooltip-box.bottom::after {\r\n bottom: 100%;\r\n border-bottom: 8px solid var(--dda-neutral-100);\r\n margin-bottom: -2px;\r\n z-index: 1;\r\n}\r\n\r\n.dda-tooltip-box.left {\r\n top: 50%;\r\n inset-inline-end: 100%;\r\n margin-inline-end: 13px;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.left::before, .dda-tooltip-box.left::after,\r\n.dda-tooltip-box.right::before, .dda-tooltip-box.right::after {\r\n content: \"\";\r\n border-top: 10px solid transparent;\r\n border-bottom: 10px solid transparent;\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.left::before {\r\n bottom: 100%;\r\n border-left: 8px solid var(--dda-neutral-90);\r\n right: -9px;\r\n}\r\n.dda-tooltip-box.left::after {\r\n bottom: 100%;\r\n border-left: 8px solid var(--dda-neutral-100);\r\n z-index: 1;\r\n right: -8px;\r\n}\r\n\r\n.dda-tooltip-box.right {\r\n top: 50%;\r\n inset-inline-start: 100%;\r\n margin-inline-start: 13px;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.right::before {\r\n bottom: 100%;\r\n border-right: 8px solid var(--dda-neutral-90);\r\n left: -9px;\r\n}\r\n.dda-tooltip-box.right::after {\r\n bottom: 100%;\r\n border-right: 8px solid var(--dda-neutral-100);\r\n z-index: 1;\r\n left: -8px;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n .dda-tooltip-box {\r\n transition: opacity 0.3s;\r\n }\r\n}","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-tooltip',\r\n styleUrls: ['dda-tooltip.css'],\r\n shadow: false,\r\n})\r\nexport class DdaTooltip {\r\n @Prop() title_text: string;\r\n @Prop() description: string;\r\n @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'top'; // Default to top position\r\n @Prop() custom_class?: string = ''; \r\n @Prop() component_mode?: string; \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`dda-tooltip-container ${this.custom_class} ${this.component_mode}`}>\r\n <slot></slot>\r\n <div class={`dda-tooltip-box ${this.position}`}>\r\n <strong>{this.title_text}</strong>\r\n <p>{this.description}</p>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
|