@scania/tegel 0.0.1-beta.2 → 0.0.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dropdown-option.js +1 -0
- package/dist/components/dropdown.js +1 -0
- package/dist/components/icon.js +1 -0
- package/dist/components/sdds-accordion-item.js +1 -0
- package/dist/components/sdds-accordion.js +1 -0
- package/dist/components/sdds-badges.js +1 -0
- package/dist/components/sdds-button.js +1 -0
- package/dist/components/sdds-datetime.js +1 -0
- package/dist/components/sdds-dropdown-filter.js +1 -0
- package/dist/components/sdds-header-cell.js +1 -0
- package/dist/components/sdds-inline-tabs-fullbleed.js +1 -0
- package/dist/components/sdds-inline-tabs.js +1 -0
- package/dist/components/sdds-modal.js +1 -0
- package/dist/components/sdds-navigation-tabs.js +1 -0
- package/dist/components/sdds-popover-canvas.js +1 -0
- package/dist/components/sdds-popover-menu.js +1 -0
- package/dist/components/sdds-slider.js +1 -0
- package/dist/components/sdds-spinner.js +1 -0
- package/dist/components/sdds-table-body-row-expandable.js +1 -0
- package/dist/components/sdds-table-body.js +1 -0
- package/dist/components/sdds-table-footer.js +1 -0
- package/dist/components/sdds-table-header.js +1 -0
- package/dist/components/sdds-table-toolbar.js +1 -0
- package/dist/components/sdds-table.js +1 -0
- package/dist/components/sdds-textarea.js +1 -0
- package/dist/components/sdds-textfield.js +1 -0
- package/dist/components/sdds-tooltip.js +1 -0
- package/dist/components/table-body-cell.js +1 -0
- package/dist/components/table-body-row.js +1 -0
- package/package.json +2 -2
- package/dist/cjs/index-e1c79686.js +0 -1912
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -21
- package/dist/cjs/popper-11d5f714.js +0 -1801
- package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
- package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
- package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
- package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
- package/dist/cjs/sdds-button.cjs.entry.js +0 -36
- package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
- package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
- package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
- package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
- package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
- package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
- package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
- package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
- package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
- package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
- package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
- package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
- package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
- package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
- package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
- package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
- package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
- package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
- package/dist/cjs/sdds-table.cjs.entry.js +0 -69
- package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
- package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
- package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
- package/dist/cjs/tegel.cjs.js +0 -19
- package/dist/collection/collection-manifest.json +0 -40
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
- package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
- package/dist/collection/components/accordion/accordion.css +0 -77
- package/dist/collection/components/accordion/accordion.js +0 -62
- package/dist/collection/components/accordion/accordion.stories.js +0 -91
- package/dist/collection/components/badge/badge.stories.js +0 -101
- package/dist/collection/components/badge/badges.css +0 -42
- package/dist/collection/components/badge/badges.js +0 -150
- package/dist/collection/components/banner/banner.stories.js +0 -93
- package/dist/collection/components/block/block.stories.js +0 -46
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
- package/dist/collection/components/button/button-component.js +0 -154
- package/dist/collection/components/button/button-native.stories.js +0 -183
- package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
- package/dist/collection/components/button/button.css +0 -658
- package/dist/collection/components/card/card.stories.js +0 -181
- package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
- package/dist/collection/components/chips/chips.stories.js +0 -124
- package/dist/collection/components/data-table/native-table.stories.js +0 -182
- package/dist/collection/components/data-table/table/table.css +0 -15
- package/dist/collection/components/data-table/table/table.js +0 -253
- package/dist/collection/components/data-table/table-body/table-body.css +0 -22
- package/dist/collection/components/data-table/table-body/table-body.js +0 -425
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
- package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
- package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
- package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
- package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
- package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
- package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
- package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
- package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
- package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
- package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
- package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
- package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
- package/dist/collection/components/data-table/table-header/table-header.css +0 -204
- package/dist/collection/components/data-table/table-header/table-header.js +0 -153
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
- package/dist/collection/components/datetime/datetime.css +0 -375
- package/dist/collection/components/datetime/datetime.js +0 -251
- package/dist/collection/components/datetime/datetime.stories.js +0 -149
- package/dist/collection/components/divider/divider.stories.js +0 -116
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
- package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
- package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
- package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
- package/dist/collection/components/dropdown/dropdown.css +0 -891
- package/dist/collection/components/dropdown/dropdown.js +0 -554
- package/dist/collection/components/footer/footer.stories.js +0 -100
- package/dist/collection/components/header/header-all.stories.js +0 -217
- package/dist/collection/components/header/header-default.stories.js +0 -47
- package/dist/collection/components/header/header-inline.stories.js +0 -113
- package/dist/collection/components/header/header-search.stories.js +0 -263
- package/dist/collection/components/header/header-toolbar.stories.js +0 -204
- package/dist/collection/components/icon/icon-font.stories.js +0 -57
- package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
- package/dist/collection/components/icon/icon.css +0 -16
- package/dist/collection/components/icon/icon.js +0 -89
- package/dist/collection/components/icon/iconsArray.js +0 -2
- package/dist/collection/components/link/link.stories.js +0 -45
- package/dist/collection/components/message/message.stories.js +0 -117
- package/dist/collection/components/modal/modal-native.stories.js +0 -121
- package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
- package/dist/collection/components/modal/modal.css +0 -324
- package/dist/collection/components/modal/modal.js +0 -146
- package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
- package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
- package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
- package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
- package/dist/collection/components/popover-menu/popover-menu.css +0 -19
- package/dist/collection/components/popover-menu/popover-menu.js +0 -189
- package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
- package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
- package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
- package/dist/collection/components/slider/slider.css +0 -260
- package/dist/collection/components/slider/slider.js +0 -682
- package/dist/collection/components/slider/slider.stories.js +0 -251
- package/dist/collection/components/spinner/spinner.css +0 -79
- package/dist/collection/components/spinner/spinner.js +0 -61
- package/dist/collection/components/spinner/spinner.stories.js +0 -59
- package/dist/collection/components/stepper/stepper.stories.js +0 -139
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
- package/dist/collection/components/textarea/textarea.css +0 -283
- package/dist/collection/components/textarea/textarea.js +0 -336
- package/dist/collection/components/textarea/textarea.stories.js +0 -149
- package/dist/collection/components/textfield/textfield.css +0 -494
- package/dist/collection/components/textfield/textfield.js +0 -359
- package/dist/collection/components/textfield/textfield.stories.js +0 -222
- package/dist/collection/components/toast/toast.stories.js +0 -119
- package/dist/collection/components/toggle/toggle.stories.js +0 -62
- package/dist/collection/components/tooltip/tooltip.css +0 -46
- package/dist/collection/components/tooltip/tooltip.js +0 -200
- package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
- package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
- package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
- package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
- package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
- package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
- package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
- package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
- package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
- package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
- package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
- package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
- package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
- package/dist/collection/index.js +0 -1
- package/dist/collection/stories/assets/code-brackets.svg +0 -1
- package/dist/collection/stories/assets/colors.svg +0 -1
- package/dist/collection/stories/assets/comments.svg +0 -1
- package/dist/collection/stories/assets/direction.svg +0 -1
- package/dist/collection/stories/assets/flow.svg +0 -1
- package/dist/collection/stories/assets/plugin.svg +0 -1
- package/dist/collection/stories/assets/repo.svg +0 -1
- package/dist/collection/stories/assets/stackalt.svg +0 -1
- package/dist/collection/utils/utils.js +0 -12
- package/dist/esm/index-b67b15a6.js +0 -1884
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -17
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/popper-f860750c.js +0 -1799
- package/dist/esm/sdds-accordion-item.entry.js +0 -30
- package/dist/esm/sdds-accordion.entry.js +0 -17
- package/dist/esm/sdds-badges.entry.js +0 -51
- package/dist/esm/sdds-body-cell_2.entry.js +0 -168
- package/dist/esm/sdds-button.entry.js +0 -32
- package/dist/esm/sdds-datetime.entry.js +0 -62
- package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
- package/dist/esm/sdds-dropdown_2.entry.js +0 -330
- package/dist/esm/sdds-header-cell.entry.js +0 -137
- package/dist/esm/sdds-icon.entry.js +0 -38
- package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
- package/dist/esm/sdds-inline-tabs.entry.js +0 -207
- package/dist/esm/sdds-modal.entry.js +0 -45
- package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
- package/dist/esm/sdds-popover-canvas.entry.js +0 -72
- package/dist/esm/sdds-popover-menu.entry.js +0 -71
- package/dist/esm/sdds-slider.entry.js +0 -332
- package/dist/esm/sdds-spinner.entry.js +0 -17
- package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
- package/dist/esm/sdds-table-body.entry.js +0 -285
- package/dist/esm/sdds-table-footer.entry.js +0 -161
- package/dist/esm/sdds-table-header.entry.js +0 -96
- package/dist/esm/sdds-table-toolbar.entry.js +0 -62
- package/dist/esm/sdds-table.entry.js +0 -65
- package/dist/esm/sdds-textarea.entry.js +0 -57
- package/dist/esm/sdds-textfield.entry.js +0 -78
- package/dist/esm/sdds-tooltip.entry.js +0 -91
- package/dist/esm/tegel.js +0 -17
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/tegel/index.esm.js +0 -0
- package/dist/tegel/p-040efb32.entry.js +0 -1
- package/dist/tegel/p-12ca5cfa.entry.js +0 -1
- package/dist/tegel/p-157e1618.js +0 -2
- package/dist/tegel/p-1fe61cf6.entry.js +0 -1
- package/dist/tegel/p-2f376504.entry.js +0 -1
- package/dist/tegel/p-44ced895.entry.js +0 -1
- package/dist/tegel/p-4880f03d.entry.js +0 -1
- package/dist/tegel/p-4aba73a3.entry.js +0 -1
- package/dist/tegel/p-4b58a02c.entry.js +0 -1
- package/dist/tegel/p-4cb85347.entry.js +0 -1
- package/dist/tegel/p-52031b5a.entry.js +0 -1
- package/dist/tegel/p-677baf7f.entry.js +0 -1
- package/dist/tegel/p-71797eaf.entry.js +0 -1
- package/dist/tegel/p-7373284c.entry.js +0 -1
- package/dist/tegel/p-7451779b.entry.js +0 -1
- package/dist/tegel/p-77aeea3b.entry.js +0 -1
- package/dist/tegel/p-8582d6a7.entry.js +0 -1
- package/dist/tegel/p-96021bd0.entry.js +0 -1
- package/dist/tegel/p-9d8caf51.entry.js +0 -1
- package/dist/tegel/p-a5919930.entry.js +0 -1
- package/dist/tegel/p-b01cface.entry.js +0 -1
- package/dist/tegel/p-bf896643.entry.js +0 -1
- package/dist/tegel/p-c311725c.entry.js +0 -1
- package/dist/tegel/p-cf72dfd9.entry.js +0 -1
- package/dist/tegel/p-d91caec6.entry.js +0 -1
- package/dist/tegel/p-e10eec33.entry.js +0 -1
- package/dist/tegel/p-ec26fc38.js +0 -1
- package/dist/tegel/p-f2262a69.entry.js +0 -1
- package/dist/tegel/p-f2f7aa45.entry.js +0 -1
- package/dist/tegel/tegel.css +0 -101
- package/dist/tegel/tegel.esm.js +0 -1
- package/loader/cdn.js +0 -3
- package/loader/index.cjs.js +0 -3
- package/loader/index.d.ts +0 -12
- package/loader/index.es2017.js +0 -3
- package/loader/index.js +0 -4
- package/loader/package.json +0 -11
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const accordionItemCss = ".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-colour);border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end{cursor:pointer;display:flex;align-items:center;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-bg)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-colour)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-colour-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-colour-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover *,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus *,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active *,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-focus);outline:none}:host(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-active);outline:none}";
|
|
8
|
-
|
|
9
|
-
const AccordionItem = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.accordionItemToggle = index.createEvent(this, "accordionItemToggle", 7);
|
|
13
|
-
this.header = '';
|
|
14
|
-
this.expandIconPosition = 'end';
|
|
15
|
-
this.disabled = false;
|
|
16
|
-
this.expanded = false;
|
|
17
|
-
this.paddingReset = false;
|
|
18
|
-
}
|
|
19
|
-
openAccordion() {
|
|
20
|
-
this.expanded = !this.expanded;
|
|
21
|
-
this.accordionItemToggle.emit(this.expanded);
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
return (index.h(index.Host, null, index.h("div", { class: `sdds-accordion-item
|
|
25
|
-
${this.disabled ? 'disabled' : ''}
|
|
26
|
-
${this.expanded ? 'expanded' : ''}
|
|
27
|
-
` }, index.h("div", { class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion() }, index.h("div", { class: "sdds-accordion-title" }, this.header), index.h("div", { class: "sdds-accordion-icon" }, index.h("sdds-icon", { name: "chevron_down", size: "16px" }))), index.h("div", { class: `sdds-accordion-panel
|
|
28
|
-
${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
|
|
29
|
-
` }, index.h("slot", null)))));
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
AccordionItem.style = accordionItemCss;
|
|
33
|
-
|
|
34
|
-
exports.sdds_accordion_item = AccordionItem;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host .sdds-accordion-header-icon-start::after,:host .sdds-accordion-header-icon-end::after{content:\"\";position:absolute;width:100%;height:0;left:0;z-index:2}:host .sdds-accordion-header-icon-start::after,:host .sdds-accordion-header-icon-end::after{bottom:-1px;border-bottom:1px solid transparent}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";
|
|
8
|
-
|
|
9
|
-
const Accordion = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.divider = true;
|
|
13
|
-
this.modeVariant = 'primary';
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
return (index.h(index.Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant}` }, index.h("slot", null)));
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
Accordion.style = accordionCss;
|
|
20
|
-
|
|
21
|
-
exports.sdds_accordion = Accordion;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const badgesCss = ":host{--sdds-badges-bg-color:var(--sdds-negative);--sdds-badges-color-text:var(--sdds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-badges{display:block;border-radius:12px;background-color:var(--sdds-badges-bg-color);text-align:center}.sdds-badges.sdds-badges-sm{height:8px;width:8px;line-height:8px}.sdds-badges.sdds-badges-lg{height:20px;line-height:20px;width:20px}.sdds-badges.sdds-badges-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.sdds-badges.sdds-badges-hidden{display:none}.sdds-badges-text{font-family:var(--sdds-font-family-semi-condensed-bold);font-size:12px;color:var(--sdds-badges-color-text);font-weight:bold}";
|
|
8
|
-
|
|
9
|
-
const SddsBadges = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.value = '';
|
|
13
|
-
this.isVisible = true;
|
|
14
|
-
this.isSmall = false;
|
|
15
|
-
this.size = 'lg';
|
|
16
|
-
this.shape = '';
|
|
17
|
-
this.text = '';
|
|
18
|
-
}
|
|
19
|
-
watchProps() {
|
|
20
|
-
this.checkProps();
|
|
21
|
-
}
|
|
22
|
-
componentWillLoad() {
|
|
23
|
-
this.checkProps();
|
|
24
|
-
if (this.isSmall) {
|
|
25
|
-
this.size = 'sm';
|
|
26
|
-
console.warn('Prop isSmall is deprecated. Use size"small" instead');
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
checkProps() {
|
|
30
|
-
const valueAsNumber = parseInt(this.value);
|
|
31
|
-
if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
|
|
32
|
-
this.shape = this.value.toString().length >= 2 ? 'pill' : '';
|
|
33
|
-
this.size = 'lg';
|
|
34
|
-
this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
// eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
|
|
38
|
-
this.value !== '' && this.size !== 'sm'
|
|
39
|
-
? console.warn('The provided value is either empty or string, please provide value as number.')
|
|
40
|
-
: '';
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
render() {
|
|
44
|
-
return (index.h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.isVisible ? '' : 'sdds-badges-hidden'}` }, index.h("div", { class: "sdds-badges-text" }, this.text)));
|
|
45
|
-
}
|
|
46
|
-
static get watchers() { return {
|
|
47
|
-
"value": ["watchProps"],
|
|
48
|
-
"isVisible": ["watchProps"],
|
|
49
|
-
"isSmall": ["watchProps"],
|
|
50
|
-
"size": ["watchProps"]
|
|
51
|
-
}; }
|
|
52
|
-
};
|
|
53
|
-
SddsBadges.style = badgesCss;
|
|
54
|
-
|
|
55
|
-
exports.sdds_badges = SddsBadges;
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const tableBodyCellCss = ":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-grey-958);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) *{box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-grey-200)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-grey-400)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";
|
|
8
|
-
|
|
9
|
-
const relevantTableProps$1 = [
|
|
10
|
-
'verticalDividers',
|
|
11
|
-
'compactDesign',
|
|
12
|
-
'noMinWidth',
|
|
13
|
-
'whiteBackground',
|
|
14
|
-
];
|
|
15
|
-
const TableBodyCell = class {
|
|
16
|
-
constructor(hostRef) {
|
|
17
|
-
index.registerInstance(this, hostRef);
|
|
18
|
-
this.cellValue = undefined;
|
|
19
|
-
this.cellKey = undefined;
|
|
20
|
-
this.disablePadding = false;
|
|
21
|
-
this.textAlignState = undefined;
|
|
22
|
-
this.activeSorting = false;
|
|
23
|
-
this.verticalDividers = false;
|
|
24
|
-
this.compactDesign = false;
|
|
25
|
-
this.noMinWidth = false;
|
|
26
|
-
this.whiteBackground = false;
|
|
27
|
-
this.tableId = '';
|
|
28
|
-
}
|
|
29
|
-
tablePropsChangedEventListener(event) {
|
|
30
|
-
if (this.tableId === event.detail.tableId) {
|
|
31
|
-
event.detail.changed
|
|
32
|
-
.filter((changedProp) => relevantTableProps$1.includes(changedProp))
|
|
33
|
-
.forEach((changedProp) => {
|
|
34
|
-
if (typeof this[changedProp] === 'undefined') {
|
|
35
|
-
throw new Error(`Table prop is not supported: ${changedProp}`);
|
|
36
|
-
}
|
|
37
|
-
this[changedProp] = event.detail[changedProp];
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
// Listen to headKey from data-table-header-element
|
|
42
|
-
headCellHoverEventListener(event) {
|
|
43
|
-
const [receivedID, receivedKeyValue] = event.detail;
|
|
44
|
-
if (this.tableId === receivedID) {
|
|
45
|
-
this.activeSorting = this.cellKey === receivedKeyValue;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
// Listen to textAlignEvent from data-table-header-element
|
|
49
|
-
textAlignEventListener(event) {
|
|
50
|
-
const [receivedID, receivedKey, receivedTextAlign] = event.detail;
|
|
51
|
-
if (this.tableId === receivedID) {
|
|
52
|
-
if (this.cellKey === receivedKey) {
|
|
53
|
-
this.textAlignState = receivedTextAlign;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
connectedCallback() {
|
|
58
|
-
this.tableEl = this.host.closest('sdds-table');
|
|
59
|
-
this.tableId = this.tableEl.tableId;
|
|
60
|
-
}
|
|
61
|
-
componentWillLoad() {
|
|
62
|
-
relevantTableProps$1.forEach((tablePropName) => {
|
|
63
|
-
this[tablePropName] = this.tableEl[tablePropName];
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
render() {
|
|
67
|
-
return (index.h(index.Host, { class: {
|
|
68
|
-
'sdds-table__body-cell': true,
|
|
69
|
-
'sdds-table__body-cell--hover': this.activeSorting,
|
|
70
|
-
'sdds-table__compact': this.compactDesign,
|
|
71
|
-
'sdds-table--divider': this.verticalDividers,
|
|
72
|
-
'sdds-table--no-min-width': this.noMinWidth,
|
|
73
|
-
'sdds-table__body-cell--no-padding': this.disablePadding,
|
|
74
|
-
}, style: { textAlign: this.textAlignState } }, this.cellValue, index.h("slot", null)));
|
|
75
|
-
}
|
|
76
|
-
get host() { return index.getElement(this); }
|
|
77
|
-
};
|
|
78
|
-
TableBodyCell.style = tableBodyCellCss;
|
|
79
|
-
|
|
80
|
-
const tableBodyRowCss = ":root,.sdds-theme-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-8);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-bg-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-grey-400);background-color:var(--sdds-white);transition:background-color 200ms ease}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-grey-100)}:host(.sdds-table__row--selected){background-color:var(--sdds-grey-300)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-grey-400)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-grey-400)}:host(.sdds-table--on-white-bg){background-color:var(--sdds-grey-50)}:host(.sdds-table--on-white-bg:hover){background-color:var(--sdds-grey-200)}";
|
|
81
|
-
|
|
82
|
-
const relevantTableProps = [
|
|
83
|
-
'enableMultiselect',
|
|
84
|
-
'verticalDividers',
|
|
85
|
-
'compactDesign',
|
|
86
|
-
'whiteBackground',
|
|
87
|
-
];
|
|
88
|
-
const TableBodyRow = class {
|
|
89
|
-
constructor(hostRef) {
|
|
90
|
-
index.registerInstance(this, hostRef);
|
|
91
|
-
this.bodyRowToTable = index.createEvent(this, "bodyRowToTable", 7);
|
|
92
|
-
this.runPaginationEvent = index.createEvent(this, "runPaginationEvent", 7);
|
|
93
|
-
this.enableMultiselect = false;
|
|
94
|
-
this.bodyCheckBoxStatus = false;
|
|
95
|
-
this.mainCheckBoxStatus = false;
|
|
96
|
-
this.verticalDividers = false;
|
|
97
|
-
this.compactDesign = false;
|
|
98
|
-
this.noMinWidth = false;
|
|
99
|
-
this.whiteBackground = false;
|
|
100
|
-
this.tableId = '';
|
|
101
|
-
}
|
|
102
|
-
bodyCheckBoxClicked(event) {
|
|
103
|
-
const row = this.host;
|
|
104
|
-
this.bodyCheckBoxStatus = event.currentTarget.checked;
|
|
105
|
-
if (this.bodyCheckBoxStatus === true) {
|
|
106
|
-
row.classList.add('sdds-table__row--selected');
|
|
107
|
-
}
|
|
108
|
-
else {
|
|
109
|
-
row.classList.remove('sdds-table__row--selected');
|
|
110
|
-
}
|
|
111
|
-
this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
|
|
112
|
-
}
|
|
113
|
-
bodyCheckBoxStatusUpdater(status) {
|
|
114
|
-
this.mainCheckBoxStatus = status;
|
|
115
|
-
this.bodyCheckBoxStatus = this.mainCheckBoxStatus;
|
|
116
|
-
const row = this.host;
|
|
117
|
-
if (this.bodyCheckBoxStatus === true) {
|
|
118
|
-
row.classList.add('sdds-table__row--selected');
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
row.classList.remove('sdds-table__row--selected');
|
|
122
|
-
}
|
|
123
|
-
this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
|
|
124
|
-
}
|
|
125
|
-
tablePropsChangedEventListener(event) {
|
|
126
|
-
if (this.tableId === event.detail.tableId) {
|
|
127
|
-
event.detail.changed
|
|
128
|
-
.filter((changedProp) => relevantTableProps.includes(changedProp))
|
|
129
|
-
.forEach((changedProp) => {
|
|
130
|
-
if (typeof this[changedProp] === 'undefined') {
|
|
131
|
-
throw new Error(`Table prop is not supported: ${changedProp}`);
|
|
132
|
-
}
|
|
133
|
-
this[changedProp] = event.detail[changedProp];
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
headCheckboxListener(event) {
|
|
138
|
-
if (this.tableId === event.detail[0]) {
|
|
139
|
-
this.bodyCheckBoxStatusUpdater(event.detail[1]);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
updateBodyCheckboxesEventListener(event) {
|
|
143
|
-
const [receivedID, receivedBodyCheckboxStatus] = event.detail;
|
|
144
|
-
if (this.tableId === receivedID) {
|
|
145
|
-
this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
connectedCallback() {
|
|
149
|
-
this.tableEl = this.host.closest('sdds-table');
|
|
150
|
-
this.tableId = this.tableEl.tableId;
|
|
151
|
-
}
|
|
152
|
-
componentWillLoad() {
|
|
153
|
-
relevantTableProps.forEach((tablePropName) => {
|
|
154
|
-
this[tablePropName] = this.tableEl[tablePropName];
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
componentDidLoad() {
|
|
158
|
-
this.runPaginationEvent.emit(this.tableId);
|
|
159
|
-
}
|
|
160
|
-
render() {
|
|
161
|
-
return (index.h(index.Host, { class: {
|
|
162
|
-
'sdds-table__row': true,
|
|
163
|
-
'sdds-table__compact': this.compactDesign,
|
|
164
|
-
'sdds-table--divider': this.verticalDividers,
|
|
165
|
-
'sdds-table--on-white-bg': this.whiteBackground,
|
|
166
|
-
} }, this.enableMultiselect && (index.h("td", { class: "sdds-table__body-cell sdds-table__body-cell--checkbox" }, index.h("div", { class: "sdds-checkbox-item" }, index.h("label", { class: "sdds-form-label sdds-form-label--data-table" }, index.h("input", { class: "sdds-form-input", type: "checkbox", onChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))))), index.h("slot", null)));
|
|
167
|
-
}
|
|
168
|
-
get host() { return index.getElement(this); }
|
|
169
|
-
};
|
|
170
|
-
TableBodyRow.style = tableBodyRowCss;
|
|
171
|
-
|
|
172
|
-
exports.sdds_body_cell = TableBodyCell;
|
|
173
|
-
exports.sdds_table_body_row = TableBodyRow;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const buttonCss = ":root,html,.sdds-theme-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-white);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-theme-dark,html .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-grey-868);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-black);--sdds-btn-icon-danger-color:var(--sdds-black)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-on-white-background-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-on-white-background-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[onlyIcon]) .sdds-btn-sm{padding:11px}:host(sdds-button[onlyIcon]) .sdds-btn-md{padding:13px}:host(sdds-button[onlyIcon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([onlyIcon])){display:flex;align-items:center}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";
|
|
8
|
-
|
|
9
|
-
const SddsButton = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.text = '';
|
|
13
|
-
this.type = 'primary';
|
|
14
|
-
this.variant = 'default';
|
|
15
|
-
this.size = 'lg';
|
|
16
|
-
this.disabled = false;
|
|
17
|
-
this.fullbleed = false;
|
|
18
|
-
this.onlyIcon = false;
|
|
19
|
-
}
|
|
20
|
-
componentWillLoad() {
|
|
21
|
-
if (this.text === '') {
|
|
22
|
-
this.onlyIcon = true;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return (index.h("button", { class: `sdds-btn sdds-btn-${this.type}
|
|
27
|
-
${`sdds-btn-${this.size}`}
|
|
28
|
-
${this.disabled ? 'disabled' : ''}
|
|
29
|
-
${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
|
|
30
|
-
${this.variant === 'variant' ? 'sdds-on-white-bg' : ''}
|
|
31
|
-
${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, index.h("span", { class: "sdds-btn-text" }, this.text), index.h("slot", { name: "icon" })));
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
SddsButton.style = buttonCss;
|
|
35
|
-
|
|
36
|
-
exports.sdds_button = SddsButton;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e1c79686.js');
|
|
6
|
-
|
|
7
|
-
const datetimeCss = "@charset \"UTF-8\";.sdds-datetime-input[type=datetime-local]~.icon-time,.sdds-datetime-input-md[type=datetime-local]~.icon-time,.sdds-datetime-input-sm[type=datetime-local]~.icon-time{display:none}.sdds-datetime-input[type=date]~.icon-time,.sdds-datetime-input-md[type=date]~.icon-time,.sdds-datetime-input-sm[type=date]~.icon-time{display:none}.sdds-datetime-input[type=time]~.icon-datetime-local,.sdds-datetime-input-md[type=time]~.icon-datetime-local,.sdds-datetime-input-sm[type=time]~.icon-datetime-local{display:none}.sdds-datetime-input{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-bg);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-datetime-input *{box-sizing:border-box}.sdds-datetime-input::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input:focus::placeholder{color:var(--sdds-datetime-placeholder-focus-color)}.sdds-datetime-input:disabled{background-color:var(--sdds-datetime-disabled-bg);color:var(--sdds-datetime-disabled-color);cursor:not-allowed}.sdds-datetime-input:disabled::placeholder{color:var(--sdds-datetime-disabled-placeholder)}.sdds-datetime-input:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-disabled-label)}.sdds-datetime-input-md{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-bg);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-md *{box-sizing:border-box}.sdds-datetime-input-md::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-md:focus::placeholder{color:var(--sdds-datetime-placeholder-focus-color)}.sdds-datetime-input-md:disabled{background-color:var(--sdds-datetime-disabled-bg);color:var(--sdds-datetime-disabled-color);cursor:not-allowed}.sdds-datetime-input-md:disabled::placeholder{color:var(--sdds-datetime-disabled-placeholder)}.sdds-datetime-input-md:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-disabled-label)}.sdds-datetime-input-sm{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-bg);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-sm *{box-sizing:border-box}.sdds-datetime-input-sm::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-sm:focus::placeholder{color:var(--sdds-datetime-placeholder-focus-color)}.sdds-datetime-input-sm:disabled{background-color:var(--sdds-datetime-disabled-bg);color:var(--sdds-datetime-disabled-color);cursor:not-allowed}.sdds-datetime-input-sm:disabled::placeholder{color:var(--sdds-datetime-disabled-placeholder)}.sdds-datetime-input-sm:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-disabled-label)}.sdds-datetime-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-datetime-bg);border-bottom:1px solid var(--sdds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.sdds-datetime-container:hover{border-bottom-color:var(--sdds-datetime-border-bottom-hover)}.sdds-form-datetime-md .sdds-datetime-container{height:48px}.sdds-form-datetime-sm .sdds-datetime-container{height:40px}.sdds-datetime-input-container{position:relative;width:100%}.sdds-datetime-input-container .datetime-icon{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none}slot[name=sdds-label]::slotted(*){font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-datetime-label-color)}.sdds-datetime-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-datetime-label-inside-color);left:16px}.sdds-form-datetime{display:block;min-width:208px}.sdds-form-datetime-nomin{min-width:auto}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input~.sdds-datetime-label-inside{top:20px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-focus-color)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-focus-color)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-focus-color)}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-sm~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-sm~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-md~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-md~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-datetime-bar{position:absolute;width:100%}.sdds-datetime-bar::before,.sdds-datetime-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-datetime-bar);transition:0.35s ease all}.sdds-form-datetime-md .sdds-datetime-bar::before,.sdds-form-datetime-md .sdds-datetime-bar::after{top:46px}.sdds-form-datetime-sm .sdds-datetime-bar::before,.sdds-form-datetime-sm .sdds-datetime-bar::after{top:40px}.sdds-datetime-bar::before{left:50%}.sdds-datetime-bar::after{right:50%}.sdds-datetime-focus .sdds-datetime-bar::before,.sdds-datetime-focus .sdds-datetime-bar::after{width:50%}.sdds-datetime-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-datetime-helper)}.sdds-form-datetime-disabled .sdds-datetime-container{border-bottom-color:transparent}.sdds-form-datetime-disabled .datetime-icon svg path{fill:var(--sdds-datetime-disabled-color)}.sdds-form-datetime-disabled slot[name=sdds-label]::slotted(*){color:var(--sdds-datetime-disabled-label);cursor:not-allowed}.sdds-form-datetime-success .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-success)}.sdds-form-datetime-error .sdds-datetime-helper{color:var(--sdds-datetime-helper-error)}.sdds-form-datetime-error .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-error)}.sdds-form-datetime-error .sdds-datetime-bar::before,.sdds-form-datetime-error .sdds-datetime-bar::after{background:var(--sdds-datetime-bar-error)}.sdds-form-datetime-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-datetime-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-datetime-icon-error)}.sdds-datetime-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter);float:right}.sdds-datetime-textcounter .sdds-datetime-textcounter-divider{letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter-divider)}slot[name=sdds-prefix]::slotted(*),slot[name=sdds-suffix]::slotted(*){font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);align-self:center;color:var(--sdds-datetime-ps-color)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(*){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted(*)~.sdds-datetime-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:0}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{opacity:0}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-calendar-picker-indicator{opacity:0}";
|
|
8
|
-
|
|
9
|
-
const Datetime = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.customChange = index.createEvent(this, "customChange", 7);
|
|
13
|
-
this.type = 'text';
|
|
14
|
-
this.value = '';
|
|
15
|
-
this.disabled = false;
|
|
16
|
-
this.size = '';
|
|
17
|
-
this.noMinWidth = false;
|
|
18
|
-
this.name = '';
|
|
19
|
-
this.state = undefined;
|
|
20
|
-
this.autofocus = false;
|
|
21
|
-
this.focusInput = undefined;
|
|
22
|
-
}
|
|
23
|
-
// Listener if input enters focus state
|
|
24
|
-
handleFocusIn() {
|
|
25
|
-
this.focusInput = true;
|
|
26
|
-
}
|
|
27
|
-
// Listener if input leaves focus state
|
|
28
|
-
handleFocusOut() {
|
|
29
|
-
this.focusInput = false;
|
|
30
|
-
}
|
|
31
|
-
// Data input event in value prop
|
|
32
|
-
handleInput(e) {
|
|
33
|
-
this.value = e.target.value;
|
|
34
|
-
}
|
|
35
|
-
// Change event isn't a composed:true by default in for input
|
|
36
|
-
handleChange(e) {
|
|
37
|
-
this.customChange.emit(e);
|
|
38
|
-
}
|
|
39
|
-
/** Set the input as focus when clicking the whole datetime with suffix/prefix */
|
|
40
|
-
handleFocusClick() {
|
|
41
|
-
this.textInput.focus();
|
|
42
|
-
}
|
|
43
|
-
render() {
|
|
44
|
-
let className = ' sdds-datetime-input';
|
|
45
|
-
if (this.size === 'md') {
|
|
46
|
-
className += `${className}-md`;
|
|
47
|
-
}
|
|
48
|
-
if (this.size === 'sm') {
|
|
49
|
-
className += `${className}-sm`;
|
|
50
|
-
}
|
|
51
|
-
return (index.h("div", { class: `
|
|
52
|
-
${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}
|
|
53
|
-
${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}
|
|
54
|
-
${this.value.length > 0 ? 'sdds-datetime-data' : ''}
|
|
55
|
-
${this.disabled ? 'sdds-form-datetime-disabled' : ''}
|
|
56
|
-
${this.size === 'md' ? 'sdds-form-datetime-md' : ''}
|
|
57
|
-
${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}
|
|
58
|
-
${this.state === 'error' || this.state === 'success'
|
|
59
|
-
? `sdds-form-datetime-${this.state}`
|
|
60
|
-
: ''}
|
|
61
|
-
` }, index.h("slot", { name: "sdds-label" }), index.h("div", { onClick: () => this.handleFocusClick(), class: "sdds-datetime-container sdds-datetime-container" }, index.h("div", { class: "sdds-datetime-input-container" }, index.h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), index.h("div", { class: "datetime-icon icon-datetime-local" }, index.h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), index.h("div", { class: "datetime-icon icon-time" }, index.h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), index.h("div", { class: "sdds-datetime-bar" })), index.h("div", { class: "sdds-datetime-helper" }, index.h("slot", { name: "sdds-helper" }))));
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
Datetime.style = datetimeCss;
|
|
65
|
-
|
|
66
|
-
exports.sdds_datetime = Datetime;
|