@sbb-esta/lyne-elements 1.0.0 → 1.2.1
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/accordion/accordion.d.ts +1 -1
- package/accordion/accordion.d.ts.map +1 -1
- package/alert/alert/alert.d.ts +1 -1
- package/alert/alert/alert.d.ts.map +1 -1
- package/button/common/button-common.d.ts.map +1 -1
- package/button/mini-button.js +5 -5
- package/calendar/calendar.d.ts +3 -1
- package/calendar/calendar.d.ts.map +1 -1
- package/calendar.js +62 -52
- package/card/common/card-action-common.d.ts.map +1 -1
- package/checkbox/common/checkbox-common.d.ts.map +1 -1
- package/clock/clock.d.ts +19 -13
- package/clock/clock.d.ts.map +1 -1
- package/clock.js +93 -87
- package/core/decorators/host-attributes.d.ts.map +1 -1
- package/core/eventing/throttle.d.ts.map +1 -1
- package/core/i18n/i18n.d.ts +1 -3
- package/core/i18n/i18n.d.ts.map +1 -1
- package/core/i18n.js +91 -127
- package/core/mixins/disabled-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/core/mixins/hydration-mixin.d.ts +2 -8
- package/core/mixins/hydration-mixin.d.ts.map +1 -1
- package/core/mixins/named-slot-list-mixin.d.ts.map +1 -1
- package/core/mixins/negative-mixin.d.ts.map +1 -1
- package/core/mixins/panel-mixin.d.ts.map +1 -1
- package/core/mixins/required-mixin.d.ts.map +1 -1
- package/core/mixins/update-scheduler-mixin.d.ts.map +1 -1
- package/core/mixins.js +133 -148
- package/core/observers/intersection-observer.d.ts +1 -1
- package/core/styles/_index.scss +1 -0
- package/core/styles/mixins/buttons.scss +1 -1
- package/core/styles/mixins/table.scss +148 -0
- package/core/styles/standard-theme.scss +1 -0
- package/core/styles/table.scss +56 -0
- package/core/testing/private.d.ts +0 -1
- package/core/testing/private.d.ts.map +1 -1
- package/core/testing/wait-for-render.d.ts +1 -1
- package/core/testing/wait-for-render.d.ts.map +1 -1
- package/core/testing.js +40 -37
- package/custom-elements.json +498 -997
- package/datepicker/datepicker-next-day.js +5 -5
- package/datepicker/datepicker-previous-day.js +1 -1
- package/datepicker/datepicker-toggle.js +7 -7
- package/development/accordion/accordion.d.ts +1 -1
- package/development/accordion/accordion.d.ts.map +1 -1
- package/development/accordion.js +7 -1
- package/development/action-group.js +7 -1
- package/development/alert/alert/alert.d.ts +1 -1
- package/development/alert/alert/alert.d.ts.map +1 -1
- package/development/alert/alert-group.js +7 -1
- package/development/alert/alert.js +7 -1
- package/development/autocomplete.js +7 -1
- package/development/breadcrumb/breadcrumb-group.js +7 -1
- package/development/breadcrumb/breadcrumb.js +7 -1
- package/development/button/common/button-common.d.ts.map +1 -1
- package/development/button/common.js +7 -1
- package/development/button/mini-button.js +8 -2
- package/development/calendar/calendar.d.ts +3 -1
- package/development/calendar/calendar.d.ts.map +1 -1
- package/development/calendar.js +18 -2
- package/development/card/card-badge.js +7 -1
- package/development/card/card.js +7 -1
- package/development/card/common/card-action-common.d.ts.map +1 -1
- package/development/card/common.js +7 -1
- package/development/checkbox/checkbox-group.js +7 -1
- package/development/checkbox/checkbox.js +7 -1
- package/development/checkbox/common/checkbox-common.d.ts.map +1 -1
- package/development/checkbox/common.js +7 -1
- package/development/chip.js +7 -1
- package/development/clock/clock.d.ts +19 -13
- package/development/clock/clock.d.ts.map +1 -1
- package/development/clock.js +103 -94
- package/development/container/container.js +7 -1
- package/development/container/sticky-bar.js +7 -1
- package/development/core/decorators/host-attributes.d.ts.map +1 -1
- package/development/core/eventing/throttle.d.ts.map +1 -1
- package/development/core/i18n/i18n.d.ts +1 -3
- package/development/core/i18n/i18n.d.ts.map +1 -1
- package/development/core/i18n.js +5 -43
- package/development/core/mixins/disabled-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
- package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
- package/development/core/mixins/hydration-mixin.d.ts +2 -8
- package/development/core/mixins/hydration-mixin.d.ts.map +1 -1
- package/development/core/mixins/named-slot-list-mixin.d.ts.map +1 -1
- package/development/core/mixins/negative-mixin.d.ts.map +1 -1
- package/development/core/mixins/panel-mixin.d.ts.map +1 -1
- package/development/core/mixins/required-mixin.d.ts.map +1 -1
- package/development/core/mixins/update-scheduler-mixin.d.ts.map +1 -1
- package/development/core/mixins.js +39 -50
- package/development/core/observers/intersection-observer.d.ts +1 -1
- package/development/core/testing/private.d.ts +0 -1
- package/development/core/testing/private.d.ts.map +1 -1
- package/development/core/testing/wait-for-render.d.ts +1 -1
- package/development/core/testing/wait-for-render.d.ts.map +1 -1
- package/development/core/testing.js +6 -2
- package/development/datepicker/datepicker-next-day.js +8 -2
- package/development/datepicker/datepicker-previous-day.js +8 -2
- package/development/datepicker/datepicker-toggle.js +7 -2
- package/development/datepicker/datepicker.js +7 -1
- package/development/dialog/dialog-actions.js +7 -1
- package/development/dialog/dialog-content.js +7 -1
- package/development/dialog/dialog-title.js +7 -1
- package/development/dialog/dialog.js +7 -1
- package/development/divider.js +7 -1
- package/development/expansion-panel/expansion-panel-content.js +7 -1
- package/development/expansion-panel/expansion-panel-header.js +7 -1
- package/development/expansion-panel/expansion-panel.js +7 -1
- package/development/file-selector.js +7 -1
- package/development/footer.js +7 -1
- package/development/form-error.js +7 -1
- package/development/form-field/form-field-clear.js +8 -2
- package/development/form-field/form-field.js +7 -1
- package/development/header/common/header-action-common.d.ts.map +1 -1
- package/development/header/common.js +7 -1
- package/development/header/header.js +7 -1
- package/development/icon/icon-name-mixin.d.ts.map +1 -1
- package/development/icon/icon-request.d.ts.map +1 -1
- package/development/icon.js +14 -13
- package/development/image.js +7 -1
- package/development/journey-header.js +7 -1
- package/development/lead-container.js +7 -1
- package/development/link/common/block-link-common.d.ts.map +1 -1
- package/development/link/common/inline-link-common.d.ts.map +1 -1
- package/development/link/common/link-common.d.ts.map +1 -1
- package/development/link/common.js +19 -1
- package/development/link-list.js +7 -1
- package/development/loading-indicator.js +7 -1
- package/development/logo.js +7 -1
- package/development/map-container.js +7 -1
- package/development/menu/common/menu-action-common.d.ts.map +1 -1
- package/development/menu/common.js +7 -1
- package/development/menu/menu.js +7 -1
- package/development/message.js +7 -1
- package/development/navigation/common/navigation-action-common.d.ts.map +1 -1
- package/development/navigation/common.js +7 -1
- package/development/navigation/navigation-list.js +7 -1
- package/development/navigation/navigation-marker.js +7 -1
- package/development/navigation/navigation-section.js +7 -1
- package/development/navigation/navigation.js +7 -1
- package/development/notification.js +8 -1
- package/development/option/optgroup/optgroup.d.ts +2 -0
- package/development/option/optgroup/optgroup.d.ts.map +1 -1
- package/development/option/optgroup.js +21 -4
- package/development/option/option/option.d.ts +6 -5
- package/development/option/option/option.d.ts.map +1 -1
- package/development/option/option.js +53 -29
- package/development/overlay.js +7 -1
- package/development/popover/popover-trigger.js +8 -2
- package/development/popover/popover.js +7 -1
- package/development/radio-button/common/radio-button-common.d.ts.map +1 -1
- package/development/radio-button/common.js +7 -1
- package/development/radio-button/radio-button-group.js +7 -1
- package/development/radio-button/radio-button.js +7 -1
- package/development/screen-reader-only.js +7 -1
- package/development/select.js +7 -1
- package/development/selection-expansion-panel.js +7 -1
- package/development/signet.js +7 -1
- package/development/skiplink-list.js +7 -1
- package/development/slider.js +7 -1
- package/development/status.js +7 -1
- package/development/stepper/step-label.js +7 -1
- package/development/stepper/step.js +7 -1
- package/development/stepper/stepper.js +7 -1
- package/development/table/table-wrapper/table-wrapper.d.ts +24 -0
- package/development/table/table-wrapper/table-wrapper.d.ts.map +1 -0
- package/development/table/table-wrapper.d.ts +2 -0
- package/development/table/table-wrapper.d.ts.map +1 -0
- package/development/table/table-wrapper.js +130 -0
- package/development/table.d.ts +2 -0
- package/development/table.d.ts.map +1 -0
- package/development/table.js +2 -0
- package/development/tabs/tab-group/tab-group.d.ts +4 -7
- package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/development/tabs/tab-group.js +69 -73
- package/development/tabs/tab-label.js +7 -1
- package/development/tabs/tab.js +7 -1
- package/development/tag/tag-group.js +7 -1
- package/development/tag/tag.js +7 -1
- package/development/teaser.js +7 -1
- package/development/time-input.js +7 -1
- package/development/timetable-occupancy-icon.js +7 -1
- package/development/timetable-occupancy.js +7 -1
- package/development/title.js +13 -1
- package/development/toast.js +7 -1
- package/development/toggle/toggle-option.js +7 -1
- package/development/toggle/toggle.js +7 -1
- package/development/toggle-check/toggle-check.d.ts +2 -2
- package/development/toggle-check/toggle-check.d.ts.map +1 -1
- package/development/toggle-check.js +7 -1
- package/development/train/train-blocked-passage.js +7 -1
- package/development/train/train-formation.js +7 -1
- package/development/train/train-wagon.js +7 -1
- package/development/train/train.js +7 -1
- package/development/visual-checkbox.js +9 -3
- package/form-field/form-field-clear.js +1 -1
- package/header/common/header-action-common.d.ts.map +1 -1
- package/icon/icon-name-mixin.d.ts.map +1 -1
- package/icon/icon-request.d.ts.map +1 -1
- package/icon.js +86 -86
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/link/common/block-link-common.d.ts.map +1 -1
- package/link/common/inline-link-common.d.ts.map +1 -1
- package/link/common/link-common.d.ts.map +1 -1
- package/menu/common/menu-action-common.d.ts.map +1 -1
- package/navigation/common/navigation-action-common.d.ts.map +1 -1
- package/notification.js +1 -1
- package/option/optgroup/optgroup.d.ts +2 -0
- package/option/optgroup/optgroup.d.ts.map +1 -1
- package/option/optgroup.js +24 -21
- package/option/option/option.d.ts +6 -5
- package/option/option/option.d.ts.map +1 -1
- package/option/option.js +72 -69
- package/package.json +11 -1
- package/popover/popover-trigger.js +1 -1
- package/radio-button/common/radio-button-common.d.ts.map +1 -1
- package/standard-theme.css +196 -0
- package/table/table-wrapper/table-wrapper.d.ts +24 -0
- package/table/table-wrapper/table-wrapper.d.ts.map +1 -0
- package/table/table-wrapper.d.ts +2 -0
- package/table/table-wrapper.d.ts.map +1 -0
- package/table/table-wrapper.js +39 -0
- package/table.d.ts +2 -0
- package/table.d.ts.map +1 -0
- package/table.js +1 -0
- package/tabs/tab-group/tab-group.d.ts +4 -7
- package/tabs/tab-group/tab-group.d.ts.map +1 -1
- package/tabs/tab-group.js +80 -81
- package/toggle-check/toggle-check.d.ts +2 -2
- package/toggle-check/toggle-check.d.ts.map +1 -1
- package/visual-checkbox.js +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block-link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/block-link-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,EAA6B,KAAK,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AAKjG,MAAM,CAAC,OAAO,OAAO,kCAAmC,SAAQ,6BAA6B;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,gBAAgB,CAAC;CACzC;AAGD,eAAO,MAAM,8BAA8B,
|
|
1
|
+
{"version":3,"file":"block-link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/block-link-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,EAA6B,KAAK,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AAKjG,MAAM,CAAC,OAAO,OAAO,kCAAmC,SAAQ,6BAA6B;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,gBAAgB,CAAC;CACzC;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cACpF,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAoB5D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/inline-link-common.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAA6B,KAAK,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AAKjG,MAAM,CAAC,OAAO,OAAO,mCAAoC,SAAQ,6BAA6B;CAAG;AAGjG,eAAO,MAAM,+BAA+B,
|
|
1
|
+
{"version":3,"file":"inline-link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/inline-link-common.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,EAA6B,KAAK,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AAKjG,MAAM,CAAC,OAAO,OAAO,mCAAoC,SAAQ,6BAA6B;CAAG;AAGjG,eAAO,MAAM,+BAA+B,GAC1C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,mCAAmC,CAAC,GAAG,CAS7D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/link-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,CAAC,OAAO,OAAO,6BAA8B,SAAQ,oBAAoB;IACtE,IAAI,CAAC,EAAE,WAAW,CAAC;CAC3B;AAGD,eAAO,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"link-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/link/common/link-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,CAAC,OAAO,OAAO,6BAA8B,SAAQ,oBAAoB;IACtE,IAAI,CAAC,EAAE,WAAW,CAAC;CAC3B;AAGD,eAAO,MAAM,yBAAyB,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAC/E,CAAC,KACZ,mBAAmB,CAAC,6BAA6B,CAAC,GAAG,CAwBvD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/common/menu-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI5E,MAAM,CAAC,OAAO,OAAO,mCACnB,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,+BAA+B,
|
|
1
|
+
{"version":3,"file":"menu-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/menu/common/menu-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI5E,MAAM,CAAC,OAAO,OAAO,mCACnB,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,+BAA+B,GAC1C,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,mCAAmC,CAAC,GAAG,CA0B7D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/common/navigation-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAI5E,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,yCAAyC;IACrD,IAAI,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAW,MAAM,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACvD,IAAW,OAAO,IAAI,2BAA2B,GAAG,IAAI,CAAC;IAClD,gBAAgB,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAC7D;AAGD,eAAO,MAAM,qCAAqC,
|
|
1
|
+
{"version":3,"file":"navigation-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/common/navigation-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAI5E,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,yCAAyC;IACrD,IAAI,CAAC,EAAE,uBAAuB,CAAC;IACtC,IAAW,MAAM,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACvD,IAAW,OAAO,IAAI,2BAA2B,GAAG,IAAI,CAAC;IAClD,gBAAgB,EAAE,2BAA2B,GAAG,IAAI,CAAC;CAC7D;AAGD,eAAO,MAAM,qCAAqC,GAChD,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cAEvC,CAAC,KACZ,mBAAmB,CAAC,yCAAyC,CAAC,GAAG,CA4DnE,CAAC"}
|
package/notification.js
CHANGED
|
@@ -8,7 +8,7 @@ import "./button/secondary-button.js";
|
|
|
8
8
|
import "./divider.js";
|
|
9
9
|
import "./icon.js";
|
|
10
10
|
import "./title.js";
|
|
11
|
-
const y = f`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: #f9f9f9;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: #f2f9f5}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: #fffcf2;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: #fef2f2}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
|
|
11
|
+
const y = f`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: #f9f9f9;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: #f2f9f5}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: #fffcf2;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: #fef2f2}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
|
|
12
12
|
var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (t, o, b, s) => {
|
|
13
13
|
for (var n = s > 1 ? void 0 : s ? w(o, b) : o, c = t.length - 1, l; c >= 0; c--)
|
|
14
14
|
(l = t[c]) && (n = (s ? l(o, b, n) : l(n)) || n);
|
|
@@ -11,8 +11,10 @@ export declare class SbbOptGroupElement extends SbbOptGroupElement_base {
|
|
|
11
11
|
/** Option group label. */
|
|
12
12
|
label: string;
|
|
13
13
|
private _negative;
|
|
14
|
+
private _inertAriaGroups;
|
|
14
15
|
private _negativeObserver;
|
|
15
16
|
private get _options();
|
|
17
|
+
constructor();
|
|
16
18
|
connectedCallback(): void;
|
|
17
19
|
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
18
20
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAWvC,OAAO,kBAAkB,CAAC;;AAS1B;;;;GAIG;AACH,qBAEa,kBAAmB,SAAQ,uBAA+C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,OAAO,CAAC,SAAS,CAAS;
|
|
1
|
+
{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAWvC,OAAO,kBAAkB,CAAC;;AAS1B;;;;GAIG;AACH,qBAEa,kBAAmB,SAAQ,uBAA+C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,iBAAiB,CAAgE;IAEzF,OAAO,KAAK,QAAQ,GAEnB;;IAce,iBAAiB,IAAI,IAAI;cAmBtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5D,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
|
package/option/optgroup.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
3
|
-
import { hostAttributes as
|
|
1
|
+
import { css as d, LitElement as g, html as c } from "lit";
|
|
2
|
+
import { property as h, state as n, customElement as u } from "lit/decorators.js";
|
|
3
|
+
import { hostAttributes as v } from "../core/decorators.js";
|
|
4
4
|
import { setOrRemoveAttribute as f, isSafari as x } from "../core/dom.js";
|
|
5
5
|
import { SbbDisabledMixin as _, SbbHydrationMixin as m } from "../core/mixins.js";
|
|
6
6
|
import { AgnosticMutationObserver as y } from "../core/observers.js";
|
|
7
7
|
import "../divider.js";
|
|
8
|
-
const
|
|
9
|
-
var
|
|
10
|
-
for (var s = o > 1 ? void 0 : o ? z(e, i) : e,
|
|
11
|
-
(
|
|
12
|
-
return o && s &&
|
|
8
|
+
const A = d`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`;
|
|
9
|
+
var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, e, i, o) => {
|
|
10
|
+
for (var s = o > 1 ? void 0 : o ? z(e, i) : e, l = t.length - 1, p; l >= 0; l--)
|
|
11
|
+
(p = t[l]) && (s = (o ? p(e, i, s) : p(s)) || s);
|
|
12
|
+
return o && s && O(e, i, s), s;
|
|
13
13
|
};
|
|
14
|
-
const
|
|
15
|
-
let a = class extends _(m(
|
|
14
|
+
const r = x;
|
|
15
|
+
let a = class extends _(m(g)) {
|
|
16
16
|
constructor() {
|
|
17
|
-
super(
|
|
17
|
+
super(), this._negative = !1, this._inertAriaGroups = !1, this._negativeObserver = new y(() => this._onNegativeChange()), r && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = r) : this._inertAriaGroups = r);
|
|
18
18
|
}
|
|
19
19
|
get _options() {
|
|
20
20
|
var t;
|
|
@@ -31,7 +31,7 @@ let a = class extends _(m(d)) {
|
|
|
31
31
|
}), this._setVariantByContext(), this._proxyGroupLabelToOptions(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]"));
|
|
32
32
|
}
|
|
33
33
|
willUpdate(t) {
|
|
34
|
-
super.willUpdate(t), t.has("disabled") && (
|
|
34
|
+
super.willUpdate(t), t.has("disabled") && (this._inertAriaGroups || this.setAttribute("aria-disabled", this.disabled.toString()), this._proxyDisabledToOptions()), t.has("label") && this._proxyGroupLabelToOptions();
|
|
35
35
|
}
|
|
36
36
|
disconnectedCallback() {
|
|
37
37
|
var t;
|
|
@@ -46,7 +46,7 @@ let a = class extends _(m(d)) {
|
|
|
46
46
|
}
|
|
47
47
|
_proxyGroupLabelToOptions() {
|
|
48
48
|
var t, e;
|
|
49
|
-
if (
|
|
49
|
+
if (this._inertAriaGroups)
|
|
50
50
|
if (this.label) {
|
|
51
51
|
this.removeAttribute("aria-label");
|
|
52
52
|
for (const i of this._options)
|
|
@@ -75,7 +75,7 @@ let a = class extends _(m(d)) {
|
|
|
75
75
|
this._negative = this.hasAttribute("data-negative");
|
|
76
76
|
}
|
|
77
77
|
render() {
|
|
78
|
-
return
|
|
78
|
+
return c`
|
|
79
79
|
<div class="sbb-optgroup__divider">
|
|
80
80
|
<sbb-divider ?negative=${this._negative}></sbb-divider>
|
|
81
81
|
</div>
|
|
@@ -87,16 +87,19 @@ let a = class extends _(m(d)) {
|
|
|
87
87
|
`;
|
|
88
88
|
}
|
|
89
89
|
};
|
|
90
|
-
a.styles =
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
a.styles = A;
|
|
91
|
+
b([
|
|
92
|
+
h()
|
|
93
93
|
], a.prototype, "label", 2);
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
b([
|
|
95
|
+
n()
|
|
96
96
|
], a.prototype, "_negative", 2);
|
|
97
|
-
|
|
97
|
+
b([
|
|
98
|
+
n()
|
|
99
|
+
], a.prototype, "_inertAriaGroups", 2);
|
|
100
|
+
a = b([
|
|
98
101
|
u("sbb-optgroup"),
|
|
99
|
-
|
|
102
|
+
v({ role: r ? null : "group" })
|
|
100
103
|
], a);
|
|
101
104
|
export {
|
|
102
105
|
a as SbbOptGroupElement
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
|
|
3
|
-
export type SbbOptionVariant = 'autocomplete' | 'select';
|
|
4
|
-
declare const SbbOptionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
|
|
3
|
+
export type SbbOptionVariant = 'autocomplete' | 'select' | null;
|
|
4
|
+
declare const SbbOptionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
|
|
5
5
|
/**
|
|
6
6
|
* It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
|
|
7
7
|
*
|
|
@@ -44,14 +44,14 @@ export declare class SbbOptionElement extends SbbOptionElement_base {
|
|
|
44
44
|
private _highlightString;
|
|
45
45
|
/** Disable the highlight of the label. */
|
|
46
46
|
private _disableLabelHighlight;
|
|
47
|
+
private _inertAriaGroups;
|
|
47
48
|
private set _variant(value);
|
|
48
49
|
private get _variant();
|
|
50
|
+
private set _isMultiple(value);
|
|
51
|
+
private get _isMultiple();
|
|
49
52
|
private _abort;
|
|
50
53
|
/** MutationObserver on data attributes. */
|
|
51
54
|
private _optionAttributeObserver;
|
|
52
|
-
private get _isAutocomplete();
|
|
53
|
-
private get _isSelect();
|
|
54
|
-
private get _isMultiple();
|
|
55
55
|
constructor();
|
|
56
56
|
attributeChangedCallback(name: string, old: string | null, value: string | null): void;
|
|
57
57
|
/**
|
|
@@ -69,6 +69,7 @@ export declare class SbbOptionElement extends SbbOptionElement_base {
|
|
|
69
69
|
connectedCallback(): void;
|
|
70
70
|
protected willUpdate(changedProperties: PropertyValues<this>): void;
|
|
71
71
|
protected firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
72
|
+
private _init;
|
|
72
73
|
private _updateAriaDisabled;
|
|
73
74
|
private _updateAriaSelected;
|
|
74
75
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAgBlC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,CAAC;;
|
|
1
|
+
{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAgBlC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;;AAEhE;;;;;;;;;GASG;AACH,qBAIa,gBAAiB,SAAQ,qBAErC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,8CAA8C;IACK,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,iDAAiD;IACjD,OAAO,CAAC,eAAe,CAGrB;IAEF,4CAA4C;IACnC,OAAO,CAAC,SAAS,CAAS;IAEnC,+FAA+F;IACtF,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,CAAS;IAEjC,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAExD,0CAA0C;IACjC,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,MAAM,CAAyC;IAEvD,2CAA2C;IAC3C,OAAO,CAAC,wBAAwB,CAE9B;;IAec,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7D,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,cAAc;IAcN,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,KAAK;IA2Bb,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAIX,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB;IAS5B,yEAAyE;IACzE,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,qBAAqB;IA4B7B,OAAO,CAAC,oBAAoB;cAwBT,MAAM,IAAI,cAAc;CA2C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}
|
package/option/option.js
CHANGED
|
@@ -1,36 +1,38 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
3
|
-
import { SbbConnectedAbortController as
|
|
1
|
+
import { css as v, LitElement as _, html as l, nothing as n } from "lit";
|
|
2
|
+
import { property as p, state as b, customElement as f } from "lit/decorators.js";
|
|
3
|
+
import { SbbConnectedAbortController as m, SbbSlotStateController as y } from "../core/controllers.js";
|
|
4
4
|
import { hostAttributes as x } from "../core/decorators.js";
|
|
5
|
-
import { setOrRemoveAttribute as
|
|
6
|
-
import { EventEmitter as
|
|
7
|
-
import { SbbDisabledMixin as
|
|
8
|
-
import { AgnosticMutationObserver as
|
|
9
|
-
import { SbbIconNameMixin as
|
|
5
|
+
import { setOrRemoveAttribute as g, isAndroid as k, isSafari as A } from "../core/dom.js";
|
|
6
|
+
import { EventEmitter as u } from "../core/eventing.js";
|
|
7
|
+
import { SbbDisabledMixin as S, SbbHydrationMixin as C } from "../core/mixins.js";
|
|
8
|
+
import { AgnosticMutationObserver as w } from "../core/observers.js";
|
|
9
|
+
import { SbbIconNameMixin as $ } from "../icon.js";
|
|
10
10
|
import "../screen-reader-only.js";
|
|
11
11
|
import "../visual-checkbox.js";
|
|
12
|
-
const
|
|
13
|
-
var
|
|
14
|
-
for (var
|
|
15
|
-
(
|
|
16
|
-
return
|
|
12
|
+
const G = v`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}:host([active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{white-space:initial}`;
|
|
13
|
+
var O = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, e, a) => {
|
|
14
|
+
for (var r = a > 1 ? void 0 : a ? H(i, e) : i, d = t.length - 1, h; d >= 0; d--)
|
|
15
|
+
(h = t[d]) && (r = (a ? h(i, e, r) : h(r)) || r);
|
|
16
|
+
return a && r && O(i, e, r), r;
|
|
17
17
|
};
|
|
18
|
-
const
|
|
18
|
+
const c = A;
|
|
19
19
|
let D = 0;
|
|
20
|
-
const
|
|
20
|
+
const L = {
|
|
21
21
|
attributeFilter: ["data-group-disabled", "data-negative"]
|
|
22
22
|
};
|
|
23
|
-
let o = class extends
|
|
23
|
+
let o = class extends S(
|
|
24
|
+
$(C(_))
|
|
25
|
+
) {
|
|
24
26
|
constructor() {
|
|
25
|
-
super(), this._selectionChange = new
|
|
27
|
+
super(), this._selectionChange = new u(
|
|
26
28
|
this,
|
|
27
29
|
o.events.selectionChange
|
|
28
|
-
), this._optionSelected = new
|
|
30
|
+
), this._optionSelected = new u(
|
|
29
31
|
this,
|
|
30
32
|
o.events.optionSelected
|
|
31
|
-
), this._negative = !1, this._disabledFromGroup = !1, this._highlightString = null, this._disableLabelHighlight = !1, this._abort = new
|
|
33
|
+
), this._negative = !1, this._disabledFromGroup = !1, this._highlightString = null, this._disableLabelHighlight = !1, this._inertAriaGroups = !1, this._abort = new m(this), this._optionAttributeObserver = new w(
|
|
32
34
|
(t) => this._onOptionAttributesChange(t)
|
|
33
|
-
), new
|
|
35
|
+
), new y(this), c && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = c) : this._inertAriaGroups = c);
|
|
34
36
|
}
|
|
35
37
|
set value(t) {
|
|
36
38
|
this.setAttribute("value", `${t}`);
|
|
@@ -45,20 +47,16 @@ let o = class extends A(C(v)) {
|
|
|
45
47
|
return this.hasAttribute("selected");
|
|
46
48
|
}
|
|
47
49
|
set _variant(t) {
|
|
48
|
-
this.setAttribute("data-variant", t);
|
|
50
|
+
t && this.setAttribute("data-variant", t);
|
|
49
51
|
}
|
|
50
52
|
get _variant() {
|
|
51
53
|
return this.getAttribute("data-variant");
|
|
52
54
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
get _isSelect() {
|
|
57
|
-
return this._variant === "select";
|
|
55
|
+
set _isMultiple(t) {
|
|
56
|
+
this.toggleAttribute("data-multiple", t);
|
|
58
57
|
}
|
|
59
58
|
get _isMultiple() {
|
|
60
|
-
|
|
61
|
-
return !!((t = this.closest) != null && t.call(this, "sbb-select[multiple]"));
|
|
59
|
+
return !this.hydrationRequired && this.hasAttribute("data-multiple");
|
|
62
60
|
}
|
|
63
61
|
attributeChangedCallback(t, i, e) {
|
|
64
62
|
(t !== "value" || i !== e) && super.attributeChangedCallback(t, i, e);
|
|
@@ -88,26 +86,28 @@ let o = class extends A(C(v)) {
|
|
|
88
86
|
this._isMultiple ? (t.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
|
|
89
87
|
}
|
|
90
88
|
connectedCallback() {
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
super.connectedCallback(), this.id || (this.id = `sbb-option-${D++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this._init()) : this._init();
|
|
90
|
+
}
|
|
91
|
+
willUpdate(t) {
|
|
92
|
+
super.willUpdate(t), t.has("disabled") && (g(this, "tabindex", k && !this.disabled && 0), this._updateAriaDisabled());
|
|
93
|
+
}
|
|
94
|
+
firstUpdated(t) {
|
|
95
|
+
super.firstUpdated(t), this._updateAriaSelected();
|
|
96
|
+
}
|
|
97
|
+
_init() {
|
|
98
|
+
var e, a;
|
|
93
99
|
const t = this._abort.signal, i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-optgroup");
|
|
94
|
-
i && (this._disabledFromGroup = i.disabled, this._updateAriaDisabled()), this._optionAttributeObserver.observe(this,
|
|
100
|
+
i && (this._disabledFromGroup = i.disabled, this._updateAriaDisabled()), this._optionAttributeObserver.observe(this, L), this._negative = !!((a = this.closest) != null && a.call(
|
|
95
101
|
this,
|
|
96
102
|
// :is() selector not possible due to test environment
|
|
97
103
|
"sbb-autocomplete[negative],sbb-select[negative],sbb-form-field[negative]"
|
|
98
|
-
)), this.toggleAttribute("data-negative", this._negative), this._setVariantByContext(), this._handleHighlightState(), this.
|
|
104
|
+
)), this.toggleAttribute("data-negative", this._negative), this._setVariantByContext(), this._handleHighlightState(), this.addEventListener("click", (r) => this._selectByClick(r), {
|
|
99
105
|
signal: t,
|
|
100
106
|
passive: !0
|
|
101
107
|
});
|
|
102
108
|
}
|
|
103
|
-
willUpdate(t) {
|
|
104
|
-
super.willUpdate(t), t.has("disabled") && (p(this, "tabindex", y && !this.disabled && 0), this._updateAriaDisabled());
|
|
105
|
-
}
|
|
106
|
-
firstUpdated(t) {
|
|
107
|
-
super.firstUpdated(t), this._updateAriaSelected();
|
|
108
|
-
}
|
|
109
109
|
_updateAriaDisabled() {
|
|
110
|
-
|
|
110
|
+
g(
|
|
111
111
|
this,
|
|
112
112
|
"aria-disabled",
|
|
113
113
|
this.disabled || this._disabledFromGroup ? "true" : null
|
|
@@ -120,8 +120,8 @@ let o = class extends A(C(v)) {
|
|
|
120
120
|
super.disconnectedCallback(), this._optionAttributeObserver.disconnect();
|
|
121
121
|
}
|
|
122
122
|
_setVariantByContext() {
|
|
123
|
-
var t, i;
|
|
124
|
-
(t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (i = this.closest) != null && i.call(this, "sbb-select") && (this._variant = "select");
|
|
123
|
+
var t, i, e;
|
|
124
|
+
(t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (i = this.closest) != null && i.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((e = this.closest) != null && e.call(this, "sbb-select[multiple]"));
|
|
125
125
|
}
|
|
126
126
|
/** Observe changes on data attributes and set the appropriate values. */
|
|
127
127
|
_onOptionAttributesChange(t) {
|
|
@@ -129,7 +129,7 @@ let o = class extends A(C(v)) {
|
|
|
129
129
|
i.attributeName === "data-group-disabled" ? (this._disabledFromGroup = this.hasAttribute("data-group-disabled"), this._updateAriaDisabled()) : i.attributeName === "data-negative" && (this._negative = this.hasAttribute("data-negative"));
|
|
130
130
|
}
|
|
131
131
|
_handleHighlightState() {
|
|
132
|
-
if (
|
|
132
|
+
if (this._variant !== "autocomplete") {
|
|
133
133
|
this._updateDisableHighlight(!0);
|
|
134
134
|
return;
|
|
135
135
|
}
|
|
@@ -151,10 +151,10 @@ let o = class extends A(C(v)) {
|
|
|
151
151
|
const i = this._label.substring(0, t), e = this._label.substring(
|
|
152
152
|
t,
|
|
153
153
|
t + this._highlightString.length
|
|
154
|
-
),
|
|
154
|
+
), a = this._label.substring(t + this._highlightString.length);
|
|
155
155
|
return l`
|
|
156
156
|
<span class="sbb-option__label--highlight">${i}</span><span>${e}</span
|
|
157
|
-
><span class="sbb-option__label--highlight">${
|
|
157
|
+
><span class="sbb-option__label--highlight">${a}</span>
|
|
158
158
|
`;
|
|
159
159
|
}
|
|
160
160
|
render() {
|
|
@@ -163,64 +163,67 @@ let o = class extends A(C(v)) {
|
|
|
163
163
|
<div class="sbb-option__container">
|
|
164
164
|
<div class="sbb-option">
|
|
165
165
|
<!-- Icon -->
|
|
166
|
-
${t ?
|
|
166
|
+
${t ? n : l` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
|
|
167
167
|
|
|
168
168
|
<!-- Checkbox -->
|
|
169
169
|
${t ? l` <sbb-visual-checkbox
|
|
170
170
|
?checked=${this.selected}
|
|
171
171
|
?disabled=${this.disabled || this._disabledFromGroup}
|
|
172
172
|
?negative=${this._negative}
|
|
173
|
-
></sbb-visual-checkbox>` :
|
|
173
|
+
></sbb-visual-checkbox>` : n}
|
|
174
174
|
|
|
175
175
|
<!-- Label -->
|
|
176
176
|
<span class="sbb-option__label">
|
|
177
177
|
<slot @slotchange=${this._handleHighlightState}></slot>
|
|
178
178
|
|
|
179
179
|
<!-- Search highlight -->
|
|
180
|
-
${this.
|
|
181
|
-
${
|
|
180
|
+
${this._variant === "autocomplete" && this._label && !this._disableLabelHighlight ? this._getHighlightedLabel() : n}
|
|
181
|
+
${this._inertAriaGroups && this.getAttribute("data-group-label") ? l` <sbb-screen-reader-only>
|
|
182
182
|
(${this.getAttribute("data-group-label")})</sbb-screen-reader-only
|
|
183
|
-
>` :
|
|
183
|
+
>` : n}
|
|
184
184
|
</span>
|
|
185
185
|
|
|
186
186
|
<!-- Selected tick -->
|
|
187
|
-
${this.
|
|
187
|
+
${this._variant === "select" && !t && this.selected ? l`<sbb-icon name="tick-small"></sbb-icon>` : n}
|
|
188
188
|
</div>
|
|
189
189
|
</div>
|
|
190
190
|
`;
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
|
-
o.styles =
|
|
193
|
+
o.styles = G;
|
|
194
194
|
o.events = {
|
|
195
195
|
selectionChange: "optionSelectionChange",
|
|
196
196
|
optionSelected: "optionSelected"
|
|
197
197
|
};
|
|
198
|
-
|
|
199
|
-
|
|
198
|
+
s([
|
|
199
|
+
p()
|
|
200
200
|
], o.prototype, "value", 1);
|
|
201
|
-
|
|
202
|
-
|
|
201
|
+
s([
|
|
202
|
+
p({ reflect: !0, type: Boolean })
|
|
203
203
|
], o.prototype, "active", 2);
|
|
204
|
-
|
|
205
|
-
|
|
204
|
+
s([
|
|
205
|
+
p({ type: Boolean })
|
|
206
206
|
], o.prototype, "selected", 1);
|
|
207
|
-
|
|
208
|
-
|
|
207
|
+
s([
|
|
208
|
+
b()
|
|
209
209
|
], o.prototype, "_negative", 2);
|
|
210
|
-
|
|
211
|
-
|
|
210
|
+
s([
|
|
211
|
+
b()
|
|
212
212
|
], o.prototype, "_disabledFromGroup", 2);
|
|
213
|
-
|
|
214
|
-
|
|
213
|
+
s([
|
|
214
|
+
b()
|
|
215
215
|
], o.prototype, "_label", 2);
|
|
216
|
-
|
|
217
|
-
|
|
216
|
+
s([
|
|
217
|
+
b()
|
|
218
218
|
], o.prototype, "_highlightString", 2);
|
|
219
|
-
|
|
220
|
-
|
|
219
|
+
s([
|
|
220
|
+
b()
|
|
221
221
|
], o.prototype, "_disableLabelHighlight", 2);
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
s([
|
|
223
|
+
b()
|
|
224
|
+
], o.prototype, "_inertAriaGroups", 2);
|
|
225
|
+
o = s([
|
|
226
|
+
f("sbb-option"),
|
|
224
227
|
x({
|
|
225
228
|
role: "option"
|
|
226
229
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
@@ -754,6 +754,16 @@
|
|
|
754
754
|
"development": "./development/stepper/stepper.js",
|
|
755
755
|
"default": "./stepper/stepper.js"
|
|
756
756
|
},
|
|
757
|
+
"./table.js": {
|
|
758
|
+
"types": "./development/table.d.ts",
|
|
759
|
+
"development": "./development/table.js",
|
|
760
|
+
"default": "./table.js"
|
|
761
|
+
},
|
|
762
|
+
"./table/table-wrapper.js": {
|
|
763
|
+
"types": "./development/table/table-wrapper.d.ts",
|
|
764
|
+
"development": "./development/table/table-wrapper.js",
|
|
765
|
+
"default": "./table/table-wrapper.js"
|
|
766
|
+
},
|
|
757
767
|
"./tabs.js": {
|
|
758
768
|
"types": "./development/tabs.d.ts",
|
|
759
769
|
"development": "./development/tabs.js",
|
|
@@ -4,7 +4,7 @@ import { SbbButtonBaseElement as u } from "../core/base-elements.js";
|
|
|
4
4
|
import { hostContext as n } from "../core/dom.js";
|
|
5
5
|
import { SbbDisabledTabIndexActionMixin as v, SbbNegativeMixin as h } from "../core/mixins.js";
|
|
6
6
|
import { SbbIconNameMixin as m } from "../icon.js";
|
|
7
|
-
const p = l`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-color: inherit;outline:none!important;display:inline-block}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host([disabled]){--sbb-popover-color: var(--sbb-color-graphite);pointer-events:none}@media (forced-colors: active){:host([disabled]){--sbb-popover-color: GrayText !important}}:host([disabled][negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-charcoal);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: 0rem;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-inset: 0}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-text: ButtonText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-hover-text: ButtonText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:
|
|
7
|
+
const p = l`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-color: inherit;outline:none!important;display:inline-block}@media (forced-colors: active){:host{--sbb-popover-color: ButtonText !important}}@media (any-hover: hover){:host(:hover){--sbb-popover-color: var(--sbb-color-iron)}:host(:hover[negative]){--sbb-popover-color: var(--sbb-color-cloud)}}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:active,[data-active])){--sbb-popover-color: var(--sbb-color-anthracite)}:host(:is(:active,[data-active])[negative]){--sbb-popover-color: var(--sbb-color-cement)}:host([disabled]){--sbb-popover-color: var(--sbb-color-graphite);pointer-events:none}@media (forced-colors: active){:host([disabled]){--sbb-popover-color: GrayText !important}}:host([disabled][negative]){--sbb-popover-color: var(--sbb-color-smoke)}:host([data-icon-small]){display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-charcoal);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: 0rem;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-inset: 0}@media (forced-colors: active){:host([data-icon-small]){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-text: ButtonText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-hover-text: ButtonText !important}}:host([data-icon-small]) .sbb-popover-trigger{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host([data-icon-small]) .sbb-popover-trigger:before{position:absolute;content:"";inset:var(--sbb-button-inset);border:var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color,border-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([data-icon-small][negative]){--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-milk);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-hover-border: var(--sbb-color-charcoal);--sbb-button-color-hover-text: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-milk);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host([data-icon-small][disabled]){--sbb-button-border-width: var(--sbb-border-width-1x)}@media (forced-colors: active){:host([data-icon-small][disabled]){--sbb-button-color-disabled-text: GrayText !important}}:host([data-icon-small][disabled]) .sbb-popover-trigger{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host([data-icon-small][disabled]) .sbb-popover-trigger:before{background-color:var(--sbb-button-color-disabled-background);border-color:var(--sbb-button-color-disabled-border);border-style:var(--sbb-button-border-disabled-style)}:host([data-icon-small]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host([data-icon-small]:not([disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (forced-colors: active){:host([data-icon-small]:not([disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}@media (any-hover: hover){:host([data-icon-small]:not([disabled],:active,[data-active]):hover) .sbb-popover-trigger:before{inset:calc(var(--sbb-button-border-width) * -1);background-color:var(--sbb-button-color-hover-background);border-color:var(--sbb-button-color-hover-border)}}@media (any-hover: hover){:host([data-icon-small]:not([disabled],:active,[data-active]):hover) .sbb-popover-trigger{color:var(--sbb-button-color-hover-text)}}:host([data-icon-small]:is(:active,[data-active])) .sbb-popover-trigger:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}:host(:not([data-icon-small])) .sbb-popover-trigger{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;cursor:pointer;color:var(--sbb-popover-color)}:host(:focus-visible:not([data-icon-small],[data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-popover-trigger{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-4x)}sbb-icon{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}`;
|
|
8
8
|
var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, x = (t, r, e, b) => {
|
|
9
9
|
for (var o = b > 1 ? void 0 : b ? g(r, e) : r, a = t.length - 1, s; a >= 0; a--)
|
|
10
10
|
(s = t[a]) && (o = (b ? s(r, e, o) : s(o)) || o);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,
|
|
1
|
+
{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,cAC5E,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CAmK9D,CAAC"}
|