@scania/tegel 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/tds-breadcrumbs.cjs.entry.js +3 -1
- package/dist/cjs/tds-button.cjs.entry.js +1 -1
- package/dist/cjs/tds-checkbox.cjs.entry.js +16 -3
- package/dist/cjs/tds-dropdown-option.cjs.entry.js +5 -3
- package/dist/cjs/tds-dropdown.cjs.entry.js +13 -3
- package/dist/cjs/tds-footer-item.cjs.entry.js +1 -1
- package/dist/cjs/tds-slider.cjs.entry.js +60 -104
- package/dist/cjs/tds-step.cjs.entry.js +12 -7
- package/dist/cjs/tds-table-header.cjs.entry.js +3 -1
- package/dist/cjs/tds-toast.cjs.entry.js +4 -1
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/accordion/test/basic/accordion.e2e.js +19 -0
- package/dist/collection/components/accordion/test/disabled/accordion.e2e.js +19 -0
- package/dist/collection/components/accordion/test/expanded/accordion.e2e.js +24 -0
- package/dist/collection/components/accordion/test/padding-reset/accordion.e2e.js +24 -0
- package/dist/collection/components/badge/test/basic/badge.e2e.js +10 -0
- package/dist/collection/components/badge/test/value/badge.e2e.js +11 -0
- package/dist/collection/components/banner/test/basic/banner.e2e.js +10 -0
- package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css +4 -3
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +3 -1
- package/dist/collection/components/button/button.css +0 -4
- package/dist/collection/components/checkbox/checkbox.css +19 -0
- package/dist/collection/components/checkbox/checkbox.js +39 -5
- package/dist/collection/components/checkbox/checkbox.stories.js +25 -12
- package/dist/collection/components/datetime/datetime.stories.js +4 -4
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +26 -16
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +4 -2
- package/dist/collection/components/dropdown/dropdown.css +28 -0
- package/dist/collection/components/dropdown/dropdown.js +12 -2
- package/dist/collection/components/footer/footer-item/footer-item.css +4 -6
- package/dist/collection/components/slider/slider.js +61 -105
- package/dist/collection/components/stepper/step/step.js +13 -8
- package/dist/collection/components/table/table-component-multiselect.stories.js +18 -2
- package/dist/collection/components/table/table-header/table-header.js +43 -3
- package/dist/collection/components/text-field/text-field.stories.js +1 -1
- package/dist/collection/components/toast/toast.js +4 -1
- package/dist/collection/components/toast/toast.stories.js +10 -1
- package/dist/collection/stories/Installation/angular.stories.js +111 -0
- package/dist/collection/stories/Installation/javascript.stories.js +99 -0
- package/dist/collection/stories/Installation/react.stories.js +117 -0
- package/dist/collection/stories/announcements/announce-tegel.stories.js +5 -5
- package/dist/collection/stories/tegel.stories.js +7 -8
- package/dist/components/checkbox.js +20 -4
- package/dist/components/tds-breadcrumb.js +1 -1
- package/dist/components/tds-breadcrumbs.js +3 -1
- package/dist/components/tds-button.js +1 -1
- package/dist/components/tds-dropdown-option.js +5 -3
- package/dist/components/tds-dropdown.js +13 -3
- package/dist/components/tds-footer-item.js +1 -1
- package/dist/components/tds-slider.js +61 -105
- package/dist/components/tds-step.js +13 -8
- package/dist/components/tds-table-header.js +5 -1
- package/dist/components/tds-toast.js +4 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-breadcrumb.entry.js +1 -1
- package/dist/esm/tds-breadcrumbs.entry.js +3 -1
- package/dist/esm/tds-button.entry.js +1 -1
- package/dist/esm/tds-checkbox.entry.js +16 -3
- package/dist/esm/tds-dropdown-option.entry.js +5 -3
- package/dist/esm/tds-dropdown.entry.js +13 -3
- package/dist/esm/tds-footer-item.entry.js +1 -1
- package/dist/esm/tds-slider.entry.js +60 -104
- package/dist/esm/tds-step.entry.js +12 -7
- package/dist/esm/tds-table-header.entry.js +3 -1
- package/dist/esm/tds-toast.entry.js +4 -1
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-1aaf365d.entry.js +1 -0
- package/dist/tegel/p-24f22b04.entry.js +1 -0
- package/dist/tegel/p-3a930215.entry.js +1 -0
- package/dist/tegel/p-6361ae3a.entry.js +1 -0
- package/dist/tegel/{p-e3c5a663.entry.js → p-952a9830.entry.js} +1 -1
- package/dist/tegel/p-99327b6c.entry.js +1 -0
- package/dist/tegel/p-abe23e76.entry.js +1 -0
- package/dist/tegel/p-bf32d97c.entry.js +1 -0
- package/dist/tegel/p-c420b0a9.entry.js +1 -0
- package/dist/tegel/p-d6c1d080.entry.js +1 -0
- package/dist/tegel/p-fbd856ca.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +5 -0
- package/dist/types/components/checkbox/checkbox.stories.d.ts +13 -0
- package/dist/types/components/slider/slider.d.ts +19 -22
- package/dist/types/components/stepper/step/step.d.ts +1 -1
- package/dist/types/components/table/table-component-batch-actions.stories.d.ts +1 -1
- package/dist/types/components/table/table-component-multiselect.stories.d.ts +16 -0
- package/dist/types/components/table/table-header/table-header.d.ts +5 -1
- package/dist/types/components/toast/toast.stories.d.ts +8 -0
- package/dist/types/components.d.ts +27 -2
- package/dist/types/stories/Installation/angular.stories.d.ts +6 -0
- package/dist/types/stories/Installation/{installation.stories.d.ts → javascript.stories.d.ts} +1 -1
- package/dist/types/stories/Installation/react.stories.d.ts +6 -0
- package/dist/types/stories/formatHtmlPreview.d.ts +1 -1
- package/package.json +7 -7
- package/dist/collection/components/accordion/accordion.spec.js +0 -6
- package/dist/collection/components/divider/divider.spec.js +0 -28
- package/dist/collection/components/dropdown/test/dropdown.e2e.js +0 -32
- package/dist/collection/components/dropdown/test/dropdown.filter.spec.js +0 -49
- package/dist/collection/components/dropdown/test/dropdown.multiselect.e2e.js +0 -31
- package/dist/collection/components/dropdown/test/dropdown.multiselect.spec.js +0 -51
- package/dist/collection/components/dropdown/test/dropdown.spec.js +0 -51
- package/dist/collection/components/table/table.filtering.spec.js +0 -23
- package/dist/collection/components/table/table.spec.js +0 -16
- package/dist/collection/stories/Installation/installation.stories.js +0 -218
- package/dist/tegel/p-016d07b2.entry.js +0 -1
- package/dist/tegel/p-1a978a31.entry.js +0 -1
- package/dist/tegel/p-78f42968.entry.js +0 -1
- package/dist/tegel/p-80b501e3.entry.js +0 -1
- package/dist/tegel/p-8f1a037c.entry.js +0 -1
- package/dist/tegel/p-a0f3086c.entry.js +0 -1
- package/dist/tegel/p-be7119d3.entry.js +0 -1
- package/dist/tegel/p-c0b7acbb.entry.js +0 -1
- package/dist/tegel/p-e4db065d.entry.js +0 -1
- package/dist/tegel/p-eda7ecf6.entry.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-35cb608c.js';
|
|
2
2
|
import { h as hasSlot } from './hasSlot-d52114d0.js';
|
|
3
3
|
|
|
4
|
-
const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color);font-size:16px}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color);font-size:16px}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color);font-size:16px}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color);font-size:16px}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
|
|
4
|
+
const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color)}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color)}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color)}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color)}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
|
|
5
5
|
|
|
6
6
|
const TdsButton = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-35cb608c.js';
|
|
2
2
|
import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
|
|
3
3
|
|
|
4
|
-
const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
|
|
4
|
+
const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate::after{background-image:var(--tds-checkbox-background-img-indeterminate);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::after{background-image:var(--tds-checkbox-background-img-indeterminate-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
|
|
5
5
|
|
|
6
6
|
const TdsCheckbox = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -11,9 +11,11 @@ const TdsCheckbox = class {
|
|
|
11
11
|
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
12
12
|
this.handleChange = () => {
|
|
13
13
|
this.checked = !this.checked;
|
|
14
|
+
this.indeterminate = false;
|
|
14
15
|
this.tdsChange.emit({
|
|
15
16
|
checkboxId: this.checkboxId,
|
|
16
17
|
checked: this.checked,
|
|
18
|
+
indeterminate: this.indeterminate,
|
|
17
19
|
value: this.value,
|
|
18
20
|
});
|
|
19
21
|
};
|
|
@@ -22,16 +24,21 @@ const TdsCheckbox = class {
|
|
|
22
24
|
this.disabled = false;
|
|
23
25
|
this.required = false;
|
|
24
26
|
this.checked = false;
|
|
27
|
+
this.indeterminate = false;
|
|
25
28
|
this.value = undefined;
|
|
26
29
|
}
|
|
27
30
|
/** Toggles the checked value of the component. */
|
|
28
31
|
async toggleCheckbox() {
|
|
29
32
|
this.checked = !this.checked;
|
|
33
|
+
this.indeterminate = false;
|
|
30
34
|
return {
|
|
31
35
|
checkboxId: this.checkboxId,
|
|
32
36
|
checked: this.checked,
|
|
33
37
|
};
|
|
34
38
|
}
|
|
39
|
+
handleIndeterminateState() {
|
|
40
|
+
this.inputElement.indeterminate = this.indeterminate;
|
|
41
|
+
}
|
|
35
42
|
/** Set the input as focus when clicking the component */
|
|
36
43
|
handleFocus(event) {
|
|
37
44
|
this.tdsFocus.emit(event);
|
|
@@ -41,11 +48,17 @@ const TdsCheckbox = class {
|
|
|
41
48
|
this.tdsBlur.emit(event);
|
|
42
49
|
}
|
|
43
50
|
render() {
|
|
44
|
-
return (h("div", { class: "tds-checkbox" }, h("input", {
|
|
51
|
+
return (h("div", { class: "tds-checkbox" }, h("input", {
|
|
52
|
+
// eslint-disable-next-line no-return-assign
|
|
53
|
+
ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
|
|
45
54
|
this.handleChange();
|
|
46
|
-
}
|
|
55
|
+
}
|
|
56
|
+
}), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
|
|
47
57
|
}
|
|
48
58
|
get host() { return getElement(this); }
|
|
59
|
+
static get watchers() { return {
|
|
60
|
+
"indeterminate": ["handleIndeterminateState"]
|
|
61
|
+
}; }
|
|
49
62
|
};
|
|
50
63
|
TdsCheckbox.style = checkboxCss;
|
|
51
64
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-35cb608c.js';
|
|
2
2
|
|
|
3
|
-
const dropdownOptionCss = ":host{display:block;background-color:var(--tds-dropdown-option-background)}:host .dropdown-option{
|
|
3
|
+
const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
|
|
4
4
|
|
|
5
5
|
const TdsDropdownOption = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -76,9 +76,11 @@ const TdsDropdownOption = class {
|
|
|
76
76
|
}
|
|
77
77
|
} }, h("tds-checkbox", { onTdsChange: (event) => {
|
|
78
78
|
this.handleMultiselect(event);
|
|
79
|
-
}, disabled: this.disabled, checked: this.selected
|
|
79
|
+
}, disabled: this.disabled, checked: this.selected, class: {
|
|
80
|
+
[this.size]: true,
|
|
81
|
+
} }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
|
|
80
82
|
this.handleSingleSelect();
|
|
81
|
-
}, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
|
|
83
|
+
}, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
|
|
82
84
|
}
|
|
83
85
|
static get delegatesFocus() { return true; }
|
|
84
86
|
get host() { return getElement(this); }
|
|
@@ -58,7 +58,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
|
|
|
58
58
|
input.value = value || '';
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
const dropdownCss = ":host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color)}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
61
|
+
const dropdownCss = ":host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
|
|
62
62
|
|
|
63
63
|
const TdsDropdown = class {
|
|
64
64
|
constructor(hostRef) {
|
|
@@ -120,6 +120,9 @@ const TdsDropdown = class {
|
|
|
120
120
|
};
|
|
121
121
|
this.getValue = () => {
|
|
122
122
|
const labels = this.getSelectedChildrenLabels();
|
|
123
|
+
if (!labels) {
|
|
124
|
+
return '';
|
|
125
|
+
}
|
|
123
126
|
return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
|
|
124
127
|
};
|
|
125
128
|
this.setValueAttribute = () => {
|
|
@@ -354,8 +357,12 @@ const TdsDropdown = class {
|
|
|
354
357
|
render() {
|
|
355
358
|
var _a, _b, _c, _d;
|
|
356
359
|
appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
|
|
357
|
-
return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class:
|
|
358
|
-
|
|
360
|
+
return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
|
|
361
|
+
filter: true,
|
|
362
|
+
focus: this.filterFocus,
|
|
363
|
+
disabled: this.disabled,
|
|
364
|
+
error: this.error,
|
|
365
|
+
} }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
|
|
359
366
|
label-inside-as-placeholder
|
|
360
367
|
${this.size}
|
|
361
368
|
${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
|
|
@@ -375,6 +382,9 @@ const TdsDropdown = class {
|
|
|
375
382
|
}
|
|
376
383
|
})), h("tds-icon", { onClick: () => {
|
|
377
384
|
this.open = !this.open;
|
|
385
|
+
if (this.open) {
|
|
386
|
+
this.inputElement.focus();
|
|
387
|
+
}
|
|
378
388
|
}, class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => {
|
|
379
389
|
this.open = !this.open;
|
|
380
390
|
}, onKeyDown: (event) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-35cb608c.js';
|
|
2
2
|
|
|
3
|
-
const footerItemCss = "[role=listitem] ::slotted(a),[role=listitem] ::slotted(button){font:var(--tds-headline-
|
|
3
|
+
const footerItemCss = "[role=listitem] ::slotted(a),[role=listitem] ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);opacity:var(--tds-footer-main-links-opacity);text-decoration:none}[role=listitem] ::slotted(a:focus-visible),[role=listitem] ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}[role=listitem] ::slotted(a:hover),[role=listitem] ::slotted(button:hover){text-decoration:underline}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child ::slotted(a:hover),[role=listitem].top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}}";
|
|
4
4
|
|
|
5
5
|
const TdsFooterItem = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -12,9 +12,6 @@ const TdsSlider = class {
|
|
|
12
12
|
this.thumbInnerElement = null;
|
|
13
13
|
this.trackElement = null;
|
|
14
14
|
this.trackFillElement = null;
|
|
15
|
-
this.minusElement = null;
|
|
16
|
-
this.plusElement = null;
|
|
17
|
-
this.inputElement = null;
|
|
18
15
|
this.thumbGrabbed = false;
|
|
19
16
|
this.thumbLeft = 0;
|
|
20
17
|
this.tickValues = [];
|
|
@@ -23,7 +20,6 @@ const TdsSlider = class {
|
|
|
23
20
|
this.useSmall = false;
|
|
24
21
|
this.useSnapping = false;
|
|
25
22
|
this.supposedValueSlot = -1;
|
|
26
|
-
this.eventListenersAdded = false;
|
|
27
23
|
this.resizeObserverAdded = false;
|
|
28
24
|
this.label = '';
|
|
29
25
|
this.value = '0';
|
|
@@ -44,7 +40,6 @@ const TdsSlider = class {
|
|
|
44
40
|
}
|
|
45
41
|
/** Public method to re-initialise the slider if some configuration props are changed */
|
|
46
42
|
async reset() {
|
|
47
|
-
// @TODO: maybe refactor to use watch-decorators instead
|
|
48
43
|
this.componentWillLoad();
|
|
49
44
|
this.componentDidLoad();
|
|
50
45
|
}
|
|
@@ -93,10 +88,8 @@ const TdsSlider = class {
|
|
|
93
88
|
}
|
|
94
89
|
this.thumbCore(event);
|
|
95
90
|
}
|
|
96
|
-
handleValueUpdate(
|
|
97
|
-
this.
|
|
98
|
-
this.updateValueForced(newVal);
|
|
99
|
-
this.updateTrack();
|
|
91
|
+
handleValueUpdate(newValue) {
|
|
92
|
+
this.forceValueUpdate(newValue);
|
|
100
93
|
}
|
|
101
94
|
updateSupposedValueSlot(localLeft) {
|
|
102
95
|
const numTicks = parseInt(this.ticks);
|
|
@@ -141,9 +134,6 @@ const TdsSlider = class {
|
|
|
141
134
|
const percentageFilled = (this.thumbLeft / trackWidth) * 100;
|
|
142
135
|
this.trackFillElement.style.width = `${percentageFilled}%`;
|
|
143
136
|
}
|
|
144
|
-
dispatchChangeEvent() {
|
|
145
|
-
this.tdsChange.emit({ value: this.value });
|
|
146
|
-
}
|
|
147
137
|
updateValue() {
|
|
148
138
|
const trackWidth = this.getTrackWidth();
|
|
149
139
|
const numTicks = parseInt(this.ticks);
|
|
@@ -155,20 +145,16 @@ const TdsSlider = class {
|
|
|
155
145
|
}
|
|
156
146
|
else {
|
|
157
147
|
const percentage = this.thumbLeft / trackWidth;
|
|
158
|
-
this.value = `${Math.trunc(this.
|
|
148
|
+
this.value = `${Math.trunc(parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)))}`;
|
|
159
149
|
}
|
|
160
150
|
this.updateTrack();
|
|
161
|
-
this.
|
|
162
|
-
}
|
|
163
|
-
updateValueForced(value) {
|
|
164
|
-
this.value = value;
|
|
165
|
-
this.dispatchChangeEvent();
|
|
166
|
-
}
|
|
167
|
-
getMin() {
|
|
168
|
-
return parseFloat(this.min);
|
|
151
|
+
this.tdsChange.emit({ value: this.value });
|
|
169
152
|
}
|
|
170
|
-
|
|
171
|
-
|
|
153
|
+
forceValueUpdate(newValue) {
|
|
154
|
+
this.calculateThumbLeftFromValue(newValue);
|
|
155
|
+
this.value = newValue;
|
|
156
|
+
this.tdsChange.emit({ value: this.value });
|
|
157
|
+
this.updateTrack();
|
|
172
158
|
}
|
|
173
159
|
constrainThumb(x) {
|
|
174
160
|
const width = this.getTrackWidth();
|
|
@@ -187,61 +173,33 @@ const TdsSlider = class {
|
|
|
187
173
|
calculateThumbLeftFromValue(value) {
|
|
188
174
|
const initValue = value;
|
|
189
175
|
const trackWidth = this.getTrackWidth();
|
|
190
|
-
const normalizedValue = initValue - this.
|
|
191
|
-
const normalizedMax = this.
|
|
176
|
+
const normalizedValue = initValue - parseFloat(this.min);
|
|
177
|
+
const normalizedMax = parseFloat(this.max) - parseFloat(this.min);
|
|
192
178
|
const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
|
|
193
179
|
this.thumbLeft = calculatedLeft;
|
|
194
180
|
this.updateSupposedValueSlot(this.thumbLeft);
|
|
195
181
|
this.thumbElement.style.left = `${this.thumbLeft}px`;
|
|
196
182
|
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
});
|
|
204
|
-
resizeObserver.observe(this.wrapperElement);
|
|
183
|
+
/** Updates the slider value based on the current input value */
|
|
184
|
+
updateSliderValueOnInputChange(event) {
|
|
185
|
+
const inputElement = event.target;
|
|
186
|
+
let newValue = parseInt(inputElement.value);
|
|
187
|
+
if (newValue < parseFloat(this.min)) {
|
|
188
|
+
newValue = parseFloat(this.min);
|
|
205
189
|
}
|
|
206
|
-
if (
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
});
|
|
219
|
-
this.plusElement.addEventListener('click', () => {
|
|
220
|
-
this.stepRight();
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
if (this.inputElement) {
|
|
224
|
-
this.inputElement.addEventListener('keydown', (event) => {
|
|
225
|
-
event.stopPropagation();
|
|
226
|
-
if (event.key === 'Enter') {
|
|
227
|
-
let newValue = parseInt(this.inputElement.value);
|
|
228
|
-
if (newValue < this.getMin()) {
|
|
229
|
-
newValue = this.getMin();
|
|
230
|
-
}
|
|
231
|
-
else if (newValue > this.getMax()) {
|
|
232
|
-
newValue = this.getMax();
|
|
233
|
-
}
|
|
234
|
-
this.calculateThumbLeftFromValue(newValue);
|
|
235
|
-
this.updateValueForced(newValue);
|
|
236
|
-
this.updateTrack();
|
|
237
|
-
this.inputElement.blur();
|
|
238
|
-
this.wrapperElement.focus();
|
|
239
|
-
}
|
|
240
|
-
});
|
|
241
|
-
}
|
|
190
|
+
else if (newValue > parseFloat(this.max)) {
|
|
191
|
+
newValue = parseFloat(this.max);
|
|
192
|
+
}
|
|
193
|
+
this.forceValueUpdate(String(newValue));
|
|
194
|
+
}
|
|
195
|
+
/** Updates the slider value based on the current input value when enter is pressed */
|
|
196
|
+
handleInputFieldEnterPress(event) {
|
|
197
|
+
event.stopPropagation();
|
|
198
|
+
if (event.key === 'Enter') {
|
|
199
|
+
this.updateSliderValueOnInputChange(event);
|
|
200
|
+
const inputElement = event.target;
|
|
201
|
+
inputElement.blur();
|
|
242
202
|
}
|
|
243
|
-
this.calculateThumbLeftFromValue(this.value);
|
|
244
|
-
this.updateTrack();
|
|
245
203
|
}
|
|
246
204
|
grabThumb() {
|
|
247
205
|
if (this.readOnly) {
|
|
@@ -273,19 +231,17 @@ const TdsSlider = class {
|
|
|
273
231
|
else {
|
|
274
232
|
const trackWidth = this.getTrackWidth();
|
|
275
233
|
const percentage = this.thumbLeft / trackWidth;
|
|
276
|
-
let currentValue = this.
|
|
234
|
+
let currentValue = parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min));
|
|
277
235
|
currentValue += delta;
|
|
278
236
|
currentValue = Math.round(currentValue);
|
|
279
|
-
if (currentValue < this.
|
|
280
|
-
currentValue = this.
|
|
237
|
+
if (currentValue < parseFloat(this.min)) {
|
|
238
|
+
currentValue = parseFloat(this.min);
|
|
281
239
|
}
|
|
282
|
-
else if (currentValue > this.
|
|
283
|
-
currentValue = this.
|
|
240
|
+
else if (currentValue > parseFloat(this.max)) {
|
|
241
|
+
currentValue = parseFloat(this.max);
|
|
284
242
|
}
|
|
285
243
|
this.value = `${currentValue}`;
|
|
286
|
-
this.
|
|
287
|
-
this.updateValueForced(currentValue);
|
|
288
|
-
this.updateTrack();
|
|
244
|
+
this.forceValueUpdate(this.value);
|
|
289
245
|
}
|
|
290
246
|
}
|
|
291
247
|
stepLeft() {
|
|
@@ -297,12 +253,12 @@ const TdsSlider = class {
|
|
|
297
253
|
componentWillLoad() {
|
|
298
254
|
const numTicks = parseInt(this.ticks);
|
|
299
255
|
if (numTicks > 0) {
|
|
300
|
-
this.tickValues = [this.
|
|
301
|
-
const step = (this.
|
|
256
|
+
this.tickValues = [parseFloat(this.min)];
|
|
257
|
+
const step = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
|
|
302
258
|
for (let i = 1; i < numTicks + 1; i++) {
|
|
303
|
-
this.tickValues.push(this.
|
|
259
|
+
this.tickValues.push(parseFloat(this.min) + Math.round(step * i));
|
|
304
260
|
}
|
|
305
|
-
this.tickValues.push(this.
|
|
261
|
+
this.tickValues.push(parseFloat(this.max));
|
|
306
262
|
}
|
|
307
263
|
this.useInput = false;
|
|
308
264
|
this.useControls = false;
|
|
@@ -314,44 +270,44 @@ const TdsSlider = class {
|
|
|
314
270
|
}
|
|
315
271
|
this.useSmall = this.thumbSize === 'sm';
|
|
316
272
|
this.useSnapping = this.snap;
|
|
317
|
-
const min = this.
|
|
318
|
-
const max = this.
|
|
273
|
+
const min = parseFloat(this.min);
|
|
274
|
+
const max = parseFloat(this.max);
|
|
319
275
|
if (min > max) {
|
|
320
276
|
console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
|
|
321
277
|
this.disabled = true;
|
|
322
278
|
}
|
|
323
279
|
}
|
|
280
|
+
componentDidLoad() {
|
|
281
|
+
if (!this.resizeObserverAdded) {
|
|
282
|
+
this.resizeObserverAdded = true;
|
|
283
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
284
|
+
this.calculateThumbLeftFromValue(this.value);
|
|
285
|
+
this.updateTrack();
|
|
286
|
+
});
|
|
287
|
+
resizeObserver.observe(this.wrapperElement);
|
|
288
|
+
}
|
|
289
|
+
this.calculateThumbLeftFromValue(this.value);
|
|
290
|
+
this.updateTrack();
|
|
291
|
+
}
|
|
324
292
|
render() {
|
|
325
|
-
return (h("div", { class:
|
|
293
|
+
return (h("div", { class: {
|
|
294
|
+
'tds-slider-wrapper': true,
|
|
295
|
+
'read-only': this.readOnly,
|
|
296
|
+
} }, h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { class: {
|
|
326
297
|
'tds-slider': true,
|
|
327
298
|
'disabled': this.disabled,
|
|
328
299
|
'tds-slider-small': this.useSmall,
|
|
329
300
|
}, ref: (el) => {
|
|
330
301
|
this.wrapperElement = el;
|
|
331
|
-
} }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
|
|
332
|
-
this.minusElement = el;
|
|
333
|
-
}, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
|
|
334
|
-
this.minusElement = el;
|
|
335
|
-
}, class: "tds-slider__control tds-slider__control-minus" }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
|
|
302
|
+
} }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
|
|
336
303
|
this.trackElement = el;
|
|
337
304
|
}, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
|
|
338
305
|
this.trackFillElement = el;
|
|
339
306
|
} }), h("div", { class: "tds-slider__thumb", ref: (el) => {
|
|
340
307
|
this.thumbElement = el;
|
|
341
|
-
} }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "tds-slider__thumb-inner", ref: (el) => {
|
|
308
|
+
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "tds-slider__thumb-inner", ref: (el) => {
|
|
342
309
|
this.thumbInnerElement = el;
|
|
343
|
-
} })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", {
|
|
344
|
-
this.minusElement = el;
|
|
345
|
-
}, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
|
|
346
|
-
if (this.readOnly) {
|
|
347
|
-
e.preventDefault();
|
|
348
|
-
this.inputElement.blur();
|
|
349
|
-
}
|
|
350
|
-
}, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
|
|
351
|
-
this.inputElement = el;
|
|
352
|
-
} })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
|
|
353
|
-
this.plusElement = el;
|
|
354
|
-
}, class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
|
|
310
|
+
} })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, h("tds-icon", { name: "plus", size: "16px" })))))));
|
|
355
311
|
}
|
|
356
312
|
static get watchers() { return {
|
|
357
313
|
"value": ["handleValueUpdate"]
|