@sbb-esta/lyne-elements 4.3.0 → 4.3.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/breadcrumb/breadcrumb/breadcrumb.component.js +11 -11
- package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +26 -26
- package/button/common.js +1 -1
- package/button.js +1 -1
- package/checkbox/checkbox/checkbox.component.d.ts.map +1 -1
- package/checkbox/checkbox/checkbox.component.js +18 -20
- package/chip/chip/chip.component.js +10 -10
- package/clock/clock.component.d.ts.map +1 -1
- package/clock/clock.component.js +36 -38
- package/container/sticky-bar/sticky-bar.component.js +1 -1
- package/core/styles/core.scss +13 -0
- package/core/testing/event-spy.d.ts.map +1 -1
- package/core/testing/event-spy.js +4 -4
- package/core.css +27 -0
- package/custom-elements.json +732 -668
- package/development/breadcrumb/breadcrumb/breadcrumb.component.js +6 -19
- package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +2 -15
- package/development/button/common.js +1 -1
- package/development/button.js +1 -1
- package/development/checkbox/checkbox/checkbox.component.d.ts.map +1 -1
- package/development/checkbox/checkbox/checkbox.component.js +5 -4
- package/development/chip/chip/chip.component.js +2 -1
- package/development/clock/clock.component.d.ts.map +1 -1
- package/development/clock/clock.component.js +25 -40
- package/development/container/sticky-bar/sticky-bar.component.js +1 -1
- package/development/core/testing/event-spy.d.ts.map +1 -1
- package/development/core/testing/event-spy.js +3 -3
- package/development/form-field/form-field/form-field.component.js +2 -1
- package/development/{mini-button-label-common-DzMdb-kV.js → mini-button-label-common-0DeEC1qs.js} +5 -1
- package/development/selection-action-panel/selection-action-panel.component.d.ts +1 -0
- package/development/selection-action-panel/selection-action-panel.component.d.ts.map +1 -1
- package/development/selection-action-panel/selection-action-panel.component.js +27 -3
- package/development/stepper/step-label/step-label.component.d.ts +9 -0
- package/development/stepper/step-label/step-label.component.d.ts.map +1 -1
- package/development/stepper/step-label/step-label.component.js +25 -3
- package/development/stepper/stepper/stepper.component.d.ts +5 -3
- package/development/stepper/stepper/stepper.component.d.ts.map +1 -1
- package/development/stepper/stepper/stepper.component.js +48 -22
- package/development/toggle/toggle/toggle.component.d.ts +1 -0
- package/development/toggle/toggle/toggle.component.d.ts.map +1 -1
- package/development/toggle/toggle/toggle.component.js +19 -10
- package/form-field/form-field/form-field.component.js +1 -1
- package/{mini-button-label-common-ps7PVXtB.js → mini-button-label-common-BOB7JQKi.js} +1 -1
- package/off-brand-theme.css +27 -0
- package/package.json +1 -1
- package/safety-theme.css +27 -0
- package/selection-action-panel/selection-action-panel.component.d.ts +1 -0
- package/selection-action-panel/selection-action-panel.component.d.ts.map +1 -1
- package/selection-action-panel/selection-action-panel.component.js +25 -16
- package/standard-theme.css +27 -0
- package/stepper/step-label/step-label.component.d.ts +9 -0
- package/stepper/step-label/step-label.component.d.ts.map +1 -1
- package/stepper/step-label/step-label.component.js +38 -16
- package/stepper/stepper/stepper.component.d.ts +5 -3
- package/stepper/stepper/stepper.component.d.ts.map +1 -1
- package/stepper/stepper/stepper.component.js +62 -68
- package/toggle/toggle/toggle.component.d.ts +1 -0
- package/toggle/toggle/toggle.component.d.ts.map +1 -1
- package/toggle/toggle/toggle.component.js +46 -44
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css as o } from "lit";
|
|
2
|
-
const b = o`:host{display:inline-block;outline:none!important;--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-color-disabled-background: var(--sbb-background-color-3);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-box-shadow: transparent 0 0;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--sbb-button-loading-border-width: var(--sbb-border-width-3x);--sbb-button-loading-delay: .3s;--_width: unset;--_min-height-modifier: 0rem;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-color)}@media(min-width:64rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media(forced-colors:active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-loading-border: Highlight !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important;--sbb-button-border-overlap-fix: 0rem}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media(forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media(min-width:64rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media(min-width:64rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline: 0;--_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier))}@media(any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor: var(--sbb-cursor-pointer);--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media(forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: var(--sbb-cursor-default);--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));--sbb-button-focus-outline-offset-override: calc( var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width) );--_border: none;--_transform-style: preserve-3d}.sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:calc(var(--sbb-button-min-height) + var(--_min-height-modifier));outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;transform-style:var(--_transform-style, flat);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{margin:var(--sbb-button-loading-border-width);padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));transition-property:none}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}.sbb-button-loading-border{position:absolute;inset:calc(-1 * var(--sbb-button-loading-border-width));clip-path:border-box;border-radius:var(--sbb-button-border-radius);background:var(--_background-color);transform:translateZ(-1px);z-index:-1;container-type:inline-size;contain:paint;animation:background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;animation-fill-mode:forwards}.sbb-button-loading-border:before{content:"";display:block;width:64cqmin;max-height:var(--sbb-button-min-height);aspect-ratio:2/1;position:absolute;background:radial-gradient(100% 100% at right,var(--sbb-button-color-active-text),transparent 50%);offset-path:border-box;offset-anchor:100% 50%;opacity:0;animation:snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing),snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, .5)*3s) ) infinite linear;animation-fill-mode:forwards;transform-style:preserve-3d}@keyframes snake-position{to{offset-distance:100%}}@keyframes snake-fade-in{to{opacity:1}}@keyframes background-fade-in{to{background:var(--sbb-button-color-loading-border)}}`, r = o`:host{--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) );--sbb-button-color-loading-border: light-dark( color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) ), color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) ) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, a = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-3);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-active-text: light-dark( var(--sbb-color-anthracite), var(--sbb-color-graphite) );--sbb-button-color-default-background: var(--sbb-background-color-1);--sbb-button-color-default-border: var(--sbb-border-color-4-inverted);--sbb-button-color-default-text: var(--sbb-color-3);--sbb-button-color-hover-background: var(--sbb-background-color-1);--sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text: var(--sbb-color-4);--sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-border-overlap-fix: 0rem}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-2-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-graphite);--sbb-button-color-default-background: var(--sbb-background-color-1-negative);--sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text: var(--sbb-color-3-negative);--sbb-button-color-hover-background: var(--sbb-background-color-1-negative);--sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-4-negative);--sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, n = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));--sbb-button-color-default-background: var(--sbb-background-color-3-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3);--sbb-button-color-default-text: var(--sbb-color-1-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3);--sbb-button-color-hover-text: var(--sbb-color-3-inverted);--sbb-button-color-loading-border: var(--sbb-color-iron);--sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1-negative);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3-negative);--sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative);--sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, s = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-4);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-1);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1);--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text: var(--sbb-color-1);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-1-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-1-negative);--sbb-button-color-loading-border: var(--sbb-color-granite)}`, e = o`:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-color-text: var(--sbb-color-3);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3);--sbb-mini-button-color-active-background: var(--sbb-background-color-4);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-granite);--sbb-mini-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-smoke) );--sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);--sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);--sbb-mini-button-color: var(--sbb-mini-button-color-text)}@media(forced-colors:active){:host{--sbb-mini-button-color-text: ButtonText !important;--sbb-mini-button-color-hover-background: Highlight !important;--sbb-mini-button-color-active-background: Highlight !important;--sbb-mini-button-color-disabled-background: Canvas !important;--sbb-mini-button-color-disabled-border: GrayText !important;--sbb-mini-button-color-disabled-text: GrayText !important}}:host([negative]){--sbb-mini-button-color-text: var(--sbb-color-3-negative);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-5)}@media(any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover: -.0625rem;--sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border: var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events: none;--sbb-mini-button-cursor: var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style: initial}.sbb-action-base{display:flex;position:relative;color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-mini-button-pointer-events, auto);cursor:var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);text-decoration:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);transition-property:inset,background-color;border:var(--sbb-mini-button-border)}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{display:flex;transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0rem)}`, i = o`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
|
|
2
|
+
const b = o`:host{display:inline-block;outline:none!important;--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-color-disabled-background: var(--sbb-background-color-3);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-box-shadow: transparent 0 0;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--sbb-button-loading-border-width: var(--sbb-border-width-3x);--sbb-button-loading-delay: .3s;--_width: unset;--_min-height-modifier: 0rem;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-color)}@media(min-width:64rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media(forced-colors:active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-loading-border: Highlight !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important;--sbb-button-border-overlap-fix: 0rem}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media(forced-colors:active){:host(:is(:state(link),[state--link])){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media(min-width:64rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media(min-width:64rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline: 0;--_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier))}@media(any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor: var(--sbb-cursor-pointer);--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media(forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: var(--sbb-cursor-default);--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));--sbb-button-focus-outline-offset-override: calc( var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width) );--_border: none;--_transform-style: preserve-3d}.sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:calc(var(--sbb-button-min-height) + var(--_min-height-modifier));outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;transform-style:var(--_transform-style, flat);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{margin:var(--sbb-button-loading-border-width);padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));transition-property:none}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}.sbb-button-loading-border{position:absolute;inset:calc(-1 * var(--sbb-button-loading-border-width));clip-path:border-box;border-radius:var(--sbb-button-border-radius);background:var(--_background-color);transform:translateZ(-1px);z-index:-1;container-type:inline-size;contain:paint;animation:background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;animation-fill-mode:forwards}.sbb-button-loading-border:before{content:"";display:block;width:64cqmin;max-height:var(--sbb-button-min-height);aspect-ratio:2/1;position:absolute;background:radial-gradient(100% 100% at right,var(--sbb-button-color-active-text),transparent 50%);offset-path:border-box;offset-anchor:100% 50%;opacity:0;animation:snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing),snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, .5)*3s) ) infinite linear;animation-fill-mode:forwards;transform-style:preserve-3d}@keyframes snake-position{to{offset-distance:100%}}@keyframes snake-fade-in{to{opacity:1}}@keyframes background-fade-in{to{background:var(--sbb-button-color-loading-border)}}`, r = o`:host{--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) );--sbb-button-color-loading-border: light-dark( color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) ), color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) ) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, a = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-3);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-active-text: light-dark( var(--sbb-color-anthracite), var(--sbb-color-graphite) );--sbb-button-color-default-background: var(--sbb-background-color-1);--sbb-button-color-default-border: var(--sbb-border-color-4-inverted);--sbb-button-color-default-text: var(--sbb-color-3);--sbb-button-color-hover-background: var(--sbb-background-color-1);--sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text: var(--sbb-color-4);--sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-border-overlap-fix: 0rem}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-2-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-graphite);--sbb-button-color-default-background: var(--sbb-background-color-1-negative);--sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text: var(--sbb-color-3-negative);--sbb-button-color-hover-background: var(--sbb-background-color-1-negative);--sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-4-negative);--sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, n = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));--sbb-button-color-default-background: var(--sbb-background-color-3-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3);--sbb-button-color-default-text: var(--sbb-color-1-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3);--sbb-button-color-hover-text: var(--sbb-color-3-inverted);--sbb-button-color-loading-border: var(--sbb-color-iron);--sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1-negative);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3-negative);--sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative);--sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, s = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-4);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-1);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1);--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text: var(--sbb-color-1);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-1-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-1-negative);--sbb-button-color-loading-border: var(--sbb-color-granite)}`, e = o`:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-color-text: var(--sbb-color-3);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3);--sbb-mini-button-color-active-background: var(--sbb-background-color-4);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-granite);--sbb-mini-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-smoke) );--sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);--sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);--sbb-mini-button-color: var(--sbb-mini-button-color-text)}@media(forced-colors:active){:host{--sbb-mini-button-color-text: ButtonText !important;--sbb-mini-button-color-hover-background: Highlight !important;--sbb-mini-button-color-active-background: Highlight !important;--sbb-mini-button-color-disabled-background: Canvas !important;--sbb-mini-button-color-disabled-border: GrayText !important;--sbb-mini-button-color-disabled-text: GrayText !important}}:host([negative]){--sbb-mini-button-color-text: var(--sbb-color-3-negative);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-5)}@media(any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover: -.0625rem;--sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border: var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events: none;--sbb-mini-button-cursor: var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style: initial}.sbb-action-base{display:flex;position:relative;color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-mini-button-pointer-events, auto);cursor:var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);text-decoration:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);transition-property:inset,background-color;border:var(--sbb-mini-button-border)}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(sbb-icon),sbb-icon{display:flex;transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0rem);min-width:var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));align-items:center;justify-content:center}`, i = o`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
|
|
3
3
|
export {
|
|
4
4
|
n as a,
|
|
5
5
|
b,
|
package/off-brand-theme.css
CHANGED
|
@@ -1345,6 +1345,28 @@ summary {
|
|
|
1345
1345
|
--sbb-size-element-s: var(--sbb-size-element-s-zero);
|
|
1346
1346
|
--sbb-size-element-m: var(--sbb-size-element-m-zero);
|
|
1347
1347
|
--sbb-size-element-l: var(--sbb-size-element-l-zero);
|
|
1348
|
+
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
1349
|
+
--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1350
|
+
--sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
|
|
1351
|
+
--sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
|
|
1352
|
+
--sbb-breadcrumb-color-active: var(--sbb-color-anthracite);
|
|
1353
|
+
--sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1354
|
+
--sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
|
|
1355
|
+
--sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
|
|
1356
|
+
--sbb-breadcrumb-group-wrap: nowrap;
|
|
1357
|
+
--sbb-breadcrumb-group-visibility: hidden;
|
|
1358
|
+
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
|
|
1359
|
+
--sbb-breadcrumb-group-ellipsis-color: light-dark(
|
|
1360
|
+
var(--sbb-color-granite),
|
|
1361
|
+
var(--sbb-color-cloud)
|
|
1362
|
+
);
|
|
1363
|
+
--sbb-breadcrumb-group-ellipsis-background-color: transparent;
|
|
1364
|
+
--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
|
|
1365
|
+
--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
|
|
1366
|
+
--sbb-breadcrumb-group-ellipsis-border-color: light-dark(
|
|
1367
|
+
var(--sbb-color-silver),
|
|
1368
|
+
var(--sbb-color-anthracite)
|
|
1369
|
+
);
|
|
1348
1370
|
--sbb-card-background-color: var(--sbb-background-color-1);
|
|
1349
1371
|
--sbb-card-border-color: transparent;
|
|
1350
1372
|
--sbb-card-border-radius: var(--sbb-border-radius-4x);
|
|
@@ -1405,6 +1427,9 @@ summary {
|
|
|
1405
1427
|
--sbb-checkbox-font-size: var(--sbb-text-font-size-m);
|
|
1406
1428
|
--sbb-checkbox-label-color: var(--sbb-color-color-3);
|
|
1407
1429
|
--sbb-checkbox-cursor: var(--sbb-cursor-pointer);
|
|
1430
|
+
--sbb-clock-seconds-hand-color: var(--sbb-color-brand);
|
|
1431
|
+
--sbb-clock-face-color: var(--sbb-color-1);
|
|
1432
|
+
--sbb-clock-background-color: var(--sbb-background-color-1);
|
|
1408
1433
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1409
1434
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1410
1435
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -1506,6 +1531,8 @@ summary {
|
|
|
1506
1531
|
--sbb-focus-outline-color-default: Highlight;
|
|
1507
1532
|
--sbb-focus-outline-color-dark: Highlight;
|
|
1508
1533
|
--sbb-focus-outline-width: var(--sbb-border-width-2x);
|
|
1534
|
+
--sbb-breadcrumb-color: ButtonText;
|
|
1535
|
+
--sbb-breadcrumb-color-active: Highlight;
|
|
1509
1536
|
--sbb-card-border-color: CanvasText;
|
|
1510
1537
|
--sbb-card-border-width: var(--sbb-border-width-2x);
|
|
1511
1538
|
--sbb-card-badge-border-display: block;
|
package/package.json
CHANGED
package/safety-theme.css
CHANGED
|
@@ -1345,6 +1345,28 @@ summary {
|
|
|
1345
1345
|
--sbb-size-element-s: var(--sbb-size-element-s-zero);
|
|
1346
1346
|
--sbb-size-element-m: var(--sbb-size-element-m-zero);
|
|
1347
1347
|
--sbb-size-element-l: var(--sbb-size-element-l-zero);
|
|
1348
|
+
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
1349
|
+
--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1350
|
+
--sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
|
|
1351
|
+
--sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
|
|
1352
|
+
--sbb-breadcrumb-color-active: var(--sbb-color-anthracite);
|
|
1353
|
+
--sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1354
|
+
--sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
|
|
1355
|
+
--sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
|
|
1356
|
+
--sbb-breadcrumb-group-wrap: nowrap;
|
|
1357
|
+
--sbb-breadcrumb-group-visibility: hidden;
|
|
1358
|
+
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
|
|
1359
|
+
--sbb-breadcrumb-group-ellipsis-color: light-dark(
|
|
1360
|
+
var(--sbb-color-granite),
|
|
1361
|
+
var(--sbb-color-cloud)
|
|
1362
|
+
);
|
|
1363
|
+
--sbb-breadcrumb-group-ellipsis-background-color: transparent;
|
|
1364
|
+
--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
|
|
1365
|
+
--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
|
|
1366
|
+
--sbb-breadcrumb-group-ellipsis-border-color: light-dark(
|
|
1367
|
+
var(--sbb-color-silver),
|
|
1368
|
+
var(--sbb-color-anthracite)
|
|
1369
|
+
);
|
|
1348
1370
|
--sbb-card-background-color: var(--sbb-background-color-1);
|
|
1349
1371
|
--sbb-card-border-color: transparent;
|
|
1350
1372
|
--sbb-card-border-radius: var(--sbb-border-radius-4x);
|
|
@@ -1405,6 +1427,9 @@ summary {
|
|
|
1405
1427
|
--sbb-checkbox-font-size: var(--sbb-text-font-size-m);
|
|
1406
1428
|
--sbb-checkbox-label-color: var(--sbb-color-color-3);
|
|
1407
1429
|
--sbb-checkbox-cursor: var(--sbb-cursor-pointer);
|
|
1430
|
+
--sbb-clock-seconds-hand-color: var(--sbb-color-brand);
|
|
1431
|
+
--sbb-clock-face-color: var(--sbb-color-1);
|
|
1432
|
+
--sbb-clock-background-color: var(--sbb-background-color-1);
|
|
1408
1433
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1409
1434
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1410
1435
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -1506,6 +1531,8 @@ summary {
|
|
|
1506
1531
|
--sbb-focus-outline-color-default: Highlight;
|
|
1507
1532
|
--sbb-focus-outline-color-dark: Highlight;
|
|
1508
1533
|
--sbb-focus-outline-width: var(--sbb-border-width-2x);
|
|
1534
|
+
--sbb-breadcrumb-color: ButtonText;
|
|
1535
|
+
--sbb-breadcrumb-color-active: Highlight;
|
|
1509
1536
|
--sbb-card-border-color: CanvasText;
|
|
1510
1537
|
--sbb-card-border-width: var(--sbb-border-width-2x);
|
|
1511
1538
|
--sbb-card-badge-border-display: block;
|
|
@@ -10,6 +10,7 @@ declare const SbbSelectionActionPanelElement_base: import('../core/mixins.ts').A
|
|
|
10
10
|
export declare class SbbSelectionActionPanelElement extends SbbSelectionActionPanelElement_base {
|
|
11
11
|
static styles: CSSResultGroup;
|
|
12
12
|
connectedCallback(): void;
|
|
13
|
+
private _handleSlotchange;
|
|
13
14
|
protected render(): TemplateResult;
|
|
14
15
|
}
|
|
15
16
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-action-panel.component.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-action-panel/selection-action-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;
|
|
1
|
+
{"version":3,"file":"selection-action-panel.component.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-action-panel/selection-action-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAWjF;;;;;;GAMG;AACH,qBAEM,8BAA+B,SAAQ,mCAAqD;IAChG,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzD,iBAAiB,IAAI,IAAI;IASzC,OAAO,CAAC,iBAAiB;cAmBN,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}
|
|
@@ -1,31 +1,40 @@
|
|
|
1
|
-
import { __esDecorate as
|
|
2
|
-
import { css as
|
|
3
|
-
import { customElement as
|
|
4
|
-
import { SbbSelectionPanelMixin as
|
|
5
|
-
import { boxSizingStyles as
|
|
6
|
-
const
|
|
7
|
-
let
|
|
1
|
+
import { __esDecorate as b, __runInitializers as d } from "tslib";
|
|
2
|
+
import { css as p, LitElement as h, html as u } from "lit";
|
|
3
|
+
import { customElement as m } from "lit/decorators.js";
|
|
4
|
+
import { SbbSelectionPanelMixin as g, SbbHydrationMixin as v } from "../core/mixins.js";
|
|
5
|
+
import { boxSizingStyles as f } from "../core/styles.js";
|
|
6
|
+
const k = p`:host{--sbb-selection-panel-inner-background: transparent;--sbb-selection-panel-inner-border-width: 0px;--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );display:block;position:relative;flex:1 1 auto;width:100%}:host(:where(:is(:state(color-milk),[state--color-milk]))){--sbb-selection-action-panel-background: var(--sbb-selection-panel-background-milk)}:host(:where(:is(:state(checked),[state--checked])):not(:where(:is(:state(disabled),[state--disabled])))){--sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-checked);--sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-checked)}:host(:is(:state(borderless),[state--borderless]):not(:where(:is(:state(checked),[state--checked])))){--sbb-selection-action-panel-border-color: transparent}:host(:where(:is(:state(with-expansion-panel),[state--with-expansion-panel]))){--sbb-selection-action-panel-background: transparent;--sbb-selection-action-panel-border-color: transparent}@media(forced-colors:active){:host(:not(:is(:state(with-expansion-panel),[state--with-expansion-panel]))):after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width-default) solid var(--sbb-selection-panel-border-color-default);border-radius:var(--sbb-selection-panel-border-radius)}}::slotted(:is(sbb-checkbox-panel,sbb-radio-button-panel)){flex:auto}:host(:is(:state(size-xs),[state--size-xs])){--sbb-selection-action-panel-action-margin-inline: var( --sbb-selection-action-panel-action-margin-inline-xs )}:host(:is(:state(size-s),[state--size-s])){--sbb-selection-action-panel-action-margin-inline: var( --sbb-selection-action-panel-action-margin-inline-s )}:host(:is(:state(size-m),[state--size-m])){--sbb-selection-action-panel-action-margin-inline: var( --sbb-selection-action-panel-action-margin-inline-m )}::slotted(:is(:is(:state(action),[state--action]),.sbb-action)){align-self:center;margin-inline:var(--sbb-selection-action-panel-action-margin-inline)}.sbb-selection-action-panel{display:flex;background-color:var(--sbb-selection-action-panel-background);border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-action-panel-border-width) var(--sbb-selection-action-panel-border-color)}.sbb-selection-action-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}`;
|
|
7
|
+
let E = (() => {
|
|
8
8
|
var t;
|
|
9
|
-
let
|
|
10
|
-
return t = class extends
|
|
9
|
+
let r = [m("sbb-selection-action-panel")], s, o = [], e, i = g(v(h));
|
|
10
|
+
return t = class extends i {
|
|
11
11
|
connectedCallback() {
|
|
12
12
|
super.connectedCallback(), this.toggleState("with-expansion-panel", this.parentElement?.localName === "sbb-selection-expansion-panel");
|
|
13
13
|
}
|
|
14
|
+
_handleSlotchange() {
|
|
15
|
+
const n = this.shadowRoot.querySelector('slot[name="badge"]')?.assignedElements() ?? [], c = this.shadowRoot.querySelector("slot:not([name])")?.assignedElements({
|
|
16
|
+
flatten: !0
|
|
17
|
+
}) ?? [];
|
|
18
|
+
if (n.length > 0) {
|
|
19
|
+
const a = c.find((l) => l.localName === "sbb-radio-button-panel" || l.localName === "sbb-checkbox-panel");
|
|
20
|
+
a && !a.ariaDescription && (a.ariaDescribedByElements = n);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
14
23
|
render() {
|
|
15
|
-
return
|
|
24
|
+
return u`
|
|
16
25
|
<div class="sbb-selection-action-panel__badge">
|
|
17
|
-
<slot name="badge"></slot>
|
|
26
|
+
<slot name="badge" @slotchange=${this._handleSlotchange}></slot>
|
|
18
27
|
</div>
|
|
19
28
|
<div class="sbb-selection-action-panel">
|
|
20
|
-
<slot></slot>
|
|
29
|
+
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
21
30
|
</div>
|
|
22
31
|
`;
|
|
23
32
|
}
|
|
24
33
|
}, e = t, (() => {
|
|
25
|
-
const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
26
|
-
|
|
27
|
-
})(), t.styles = [
|
|
34
|
+
const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
|
|
35
|
+
b(null, s = { value: e }, r, { kind: "class", name: e.name, metadata: n }, null, o), e = s.value, n && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
|
|
36
|
+
})(), t.styles = [f, k], d(e, o), e;
|
|
28
37
|
})();
|
|
29
38
|
export {
|
|
30
|
-
|
|
39
|
+
E as SbbSelectionActionPanelElement
|
|
31
40
|
};
|
package/standard-theme.css
CHANGED
|
@@ -1345,6 +1345,28 @@ summary {
|
|
|
1345
1345
|
--sbb-size-element-s: var(--sbb-size-element-s-zero);
|
|
1346
1346
|
--sbb-size-element-m: var(--sbb-size-element-m-zero);
|
|
1347
1347
|
--sbb-size-element-l: var(--sbb-size-element-l-zero);
|
|
1348
|
+
--sbb-breadcrumb-color: var(--sbb-color-granite);
|
|
1349
|
+
--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
|
|
1350
|
+
--sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
|
|
1351
|
+
--sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
|
|
1352
|
+
--sbb-breadcrumb-color-active: var(--sbb-color-anthracite);
|
|
1353
|
+
--sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1354
|
+
--sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
|
|
1355
|
+
--sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
|
|
1356
|
+
--sbb-breadcrumb-group-wrap: nowrap;
|
|
1357
|
+
--sbb-breadcrumb-group-visibility: hidden;
|
|
1358
|
+
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
|
|
1359
|
+
--sbb-breadcrumb-group-ellipsis-color: light-dark(
|
|
1360
|
+
var(--sbb-color-granite),
|
|
1361
|
+
var(--sbb-color-cloud)
|
|
1362
|
+
);
|
|
1363
|
+
--sbb-breadcrumb-group-ellipsis-background-color: transparent;
|
|
1364
|
+
--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
|
|
1365
|
+
--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
|
|
1366
|
+
--sbb-breadcrumb-group-ellipsis-border-color: light-dark(
|
|
1367
|
+
var(--sbb-color-silver),
|
|
1368
|
+
var(--sbb-color-anthracite)
|
|
1369
|
+
);
|
|
1348
1370
|
--sbb-card-background-color: var(--sbb-background-color-1);
|
|
1349
1371
|
--sbb-card-border-color: transparent;
|
|
1350
1372
|
--sbb-card-border-radius: var(--sbb-border-radius-4x);
|
|
@@ -1405,6 +1427,9 @@ summary {
|
|
|
1405
1427
|
--sbb-checkbox-font-size: var(--sbb-text-font-size-m);
|
|
1406
1428
|
--sbb-checkbox-label-color: var(--sbb-color-color-3);
|
|
1407
1429
|
--sbb-checkbox-cursor: var(--sbb-cursor-pointer);
|
|
1430
|
+
--sbb-clock-seconds-hand-color: var(--sbb-color-brand);
|
|
1431
|
+
--sbb-clock-face-color: var(--sbb-color-1);
|
|
1432
|
+
--sbb-clock-background-color: var(--sbb-background-color-1);
|
|
1408
1433
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1409
1434
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
|
1410
1435
|
--sbb-divider-border-width: var(--sbb-border-width-1x);
|
|
@@ -1506,6 +1531,8 @@ summary {
|
|
|
1506
1531
|
--sbb-focus-outline-color-default: Highlight;
|
|
1507
1532
|
--sbb-focus-outline-color-dark: Highlight;
|
|
1508
1533
|
--sbb-focus-outline-width: var(--sbb-border-width-2x);
|
|
1534
|
+
--sbb-breadcrumb-color: ButtonText;
|
|
1535
|
+
--sbb-breadcrumb-color-active: Highlight;
|
|
1509
1536
|
--sbb-card-border-color: CanvasText;
|
|
1510
1537
|
--sbb-card-border-width: var(--sbb-border-width-2x);
|
|
1511
1538
|
--sbb-card-badge-border-display: block;
|
|
@@ -16,9 +16,12 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
|
|
|
16
16
|
get step(): SbbStepElement | null;
|
|
17
17
|
private _step;
|
|
18
18
|
get stepper(): SbbStepperElement | null;
|
|
19
|
+
set disabled(value: boolean);
|
|
20
|
+
get disabled(): boolean;
|
|
19
21
|
private _previousOrientation?;
|
|
20
22
|
private _previousSize?;
|
|
21
23
|
constructor();
|
|
24
|
+
private _isNotDeactivatedByLinearMode;
|
|
22
25
|
connectedCallback(): void;
|
|
23
26
|
/**
|
|
24
27
|
* Selects and configures the step label.
|
|
@@ -36,6 +39,12 @@ export declare class SbbStepLabelElement extends SbbStepLabelElement_base {
|
|
|
36
39
|
*/
|
|
37
40
|
configure(posInSet: number, setSize: number, stepperLoaded: boolean): void;
|
|
38
41
|
private _assignStep;
|
|
42
|
+
/**
|
|
43
|
+
* @internal
|
|
44
|
+
* Disables the step label and avoids setting the `disabled` state to preserve the initial
|
|
45
|
+
* disabled state in case of switching between linear and non-linear mode.
|
|
46
|
+
*/
|
|
47
|
+
disable(value: boolean): void;
|
|
39
48
|
protected render(): TemplateResult;
|
|
40
49
|
}
|
|
41
50
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;AAMvD;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IACD,OAAO,CAAC,KAAK,CAA+B;IAE5C,IAAW,OAAO,IAAI,iBAAiB,GAAG,IAAI,CAE7C;IAED,OAAO,CAAC,oBAAoB,CAAC,CAAS;IACtC,OAAO,CAAC,aAAa,CAAC,CAAS;;
|
|
1
|
+
{"version":3,"file":"step-label.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step-label/step-label.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;AAMvD;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,wBAAwD;IACxF,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,wCAAwC;IACxC,IAAW,IAAI,IAAI,cAAc,GAAG,IAAI,CAEvC;IACD,OAAO,CAAC,KAAK,CAA+B;IAE5C,IAAW,OAAO,IAAI,iBAAiB,GAAG,IAAI,CAE7C;IAED,IAAoB,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1C;IACD,IAAoB,QAAQ,IAAI,OAAO,CAEtC;IAED,OAAO,CAAC,oBAAoB,CAAC,CAAS;IACtC,OAAO,CAAC,aAAa,CAAC,CAAS;;IAmC/B,OAAO,CAAC,6BAA6B;IASrB,iBAAiB,IAAI,IAAI;IASzC;;;OAGG;IACI,MAAM,IAAI,IAAI;IAMrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAMvB;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI;IAQjF,OAAO,CAAC,WAAW;IAkBnB;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAIjB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
|
@@ -3,14 +3,14 @@ import { css as c, html as d } from "lit";
|
|
|
3
3
|
import { customElement as h } from "lit/decorators.js";
|
|
4
4
|
import { SbbButtonBaseElement as f } from "../../core/base-elements.js";
|
|
5
5
|
import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
|
|
6
|
-
import { SbbDisabledMixin as x, removeAriaElements as
|
|
6
|
+
import { SbbDisabledMixin as x, removeAriaElements as u, appendAriaElements as m } from "../../core/mixins.js";
|
|
7
7
|
import { boxSizingStyles as g } from "../../core/styles.js";
|
|
8
|
-
import { SbbIconNameMixin as
|
|
9
|
-
const
|
|
8
|
+
import { SbbIconNameMixin as y } from "../../icon.js";
|
|
9
|
+
const z = c`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media(forced-colors:active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
|
|
10
10
|
let _ = 0, B = (() => {
|
|
11
|
-
var
|
|
12
|
-
let
|
|
13
|
-
return
|
|
11
|
+
var s;
|
|
12
|
+
let l = [h("sbb-step-label")], r, o = [], i, b = y(x(f));
|
|
13
|
+
return s = class extends b {
|
|
14
14
|
/** The step controlled by the label. */
|
|
15
15
|
get step() {
|
|
16
16
|
return this._step;
|
|
@@ -18,10 +18,16 @@ let _ = 0, B = (() => {
|
|
|
18
18
|
get stepper() {
|
|
19
19
|
return this.closest("sbb-stepper");
|
|
20
20
|
}
|
|
21
|
+
set disabled(t) {
|
|
22
|
+
super.disabled = t, this.toggleState("user-disabled", t);
|
|
23
|
+
}
|
|
24
|
+
get disabled() {
|
|
25
|
+
return super.disabled;
|
|
26
|
+
}
|
|
21
27
|
constructor() {
|
|
22
28
|
super(), this._step = null, this.addEventListener?.("click", () => {
|
|
23
29
|
const t = this.stepper;
|
|
24
|
-
t && this.step && (t.selected = this.step);
|
|
30
|
+
t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
|
|
25
31
|
}), this.addController(new v(this, () => this.stepper, {
|
|
26
32
|
orientation: (t) => {
|
|
27
33
|
this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
|
|
@@ -31,8 +37,16 @@ let _ = 0, B = (() => {
|
|
|
31
37
|
}
|
|
32
38
|
}));
|
|
33
39
|
}
|
|
40
|
+
_isNotDeactivatedByLinearMode(t) {
|
|
41
|
+
const e = this.stepper;
|
|
42
|
+
if (e?.linear && e.selectedIndex !== null) {
|
|
43
|
+
const a = e.steps.indexOf(t);
|
|
44
|
+
return a < e.selectedIndex || a === e.selectedIndex + 1;
|
|
45
|
+
}
|
|
46
|
+
return !0;
|
|
47
|
+
}
|
|
34
48
|
connectedCallback() {
|
|
35
|
-
super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep()
|
|
49
|
+
super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
|
|
36
50
|
}
|
|
37
51
|
/**
|
|
38
52
|
* Selects and configures the step label.
|
|
@@ -52,15 +66,23 @@ let _ = 0, B = (() => {
|
|
|
52
66
|
* Configures the step label.
|
|
53
67
|
* @internal
|
|
54
68
|
*/
|
|
55
|
-
configure(t,
|
|
56
|
-
|
|
69
|
+
configure(t, e, a) {
|
|
70
|
+
a && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
|
|
57
71
|
}
|
|
58
72
|
_assignStep() {
|
|
59
73
|
let t = this.nextElementSibling;
|
|
60
74
|
for (; t && t.localName !== "sbb-step"; )
|
|
61
75
|
t = t.nextElementSibling;
|
|
62
|
-
const
|
|
63
|
-
this.internals.ariaControlsElements =
|
|
76
|
+
const e = t;
|
|
77
|
+
this.internals.ariaControlsElements = u(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step);
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* @internal
|
|
81
|
+
* Disables the step label and avoids setting the `disabled` state to preserve the initial
|
|
82
|
+
* disabled state in case of switching between linear and non-linear mode.
|
|
83
|
+
*/
|
|
84
|
+
disable(t) {
|
|
85
|
+
super.disabled = t;
|
|
64
86
|
}
|
|
65
87
|
render() {
|
|
66
88
|
return d`
|
|
@@ -70,10 +92,10 @@ let _ = 0, B = (() => {
|
|
|
70
92
|
</div>
|
|
71
93
|
`;
|
|
72
94
|
}
|
|
73
|
-
},
|
|
74
|
-
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(
|
|
75
|
-
n(null,
|
|
76
|
-
})(),
|
|
95
|
+
}, i = s, (() => {
|
|
96
|
+
const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
|
|
97
|
+
n(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: t }, null, o), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
|
|
98
|
+
})(), s.role = "tab", s.styles = [g, z], p(i, o), i;
|
|
77
99
|
})();
|
|
78
100
|
export {
|
|
79
101
|
B as SbbStepLabelElement
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSResultGroup, LitElement,
|
|
1
|
+
import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
2
|
import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.ts';
|
|
3
3
|
import { SbbStepElement } from '../step.ts';
|
|
4
4
|
export declare class SbbStepChangeEvent extends Event {
|
|
@@ -34,7 +34,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
|
|
|
34
34
|
private _observer;
|
|
35
35
|
/** If set to true, only the current and previous labels can be clicked and selected. */
|
|
36
36
|
accessor linear: boolean;
|
|
37
|
-
/** Overrides the
|
|
37
|
+
/** Overrides the behavior of `orientation` property. */
|
|
38
38
|
set horizontalFrom(value: SbbHorizontalFrom | null);
|
|
39
39
|
get horizontalFrom(): SbbHorizontalFrom | null;
|
|
40
40
|
private _horizontalFrom;
|
|
@@ -48,9 +48,11 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
|
|
|
48
48
|
/** The currently selected step. */
|
|
49
49
|
set selected(step: SbbStepElement | null);
|
|
50
50
|
get selected(): SbbStepElement | null;
|
|
51
|
+
private _requestedSelected;
|
|
51
52
|
/** The currently selected step index. */
|
|
52
53
|
set selectedIndex(index: number | null);
|
|
53
54
|
get selectedIndex(): number | null;
|
|
55
|
+
private _requestedSelectedIndex;
|
|
54
56
|
/** The steps of the stepper. */
|
|
55
57
|
get steps(): SbbStepElement[];
|
|
56
58
|
private get _enabledSteps();
|
|
@@ -64,7 +66,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
|
|
|
64
66
|
previous(): void;
|
|
65
67
|
/** Resets the form in which the stepper is nested or every form of each step, if any. */
|
|
66
68
|
reset(): void;
|
|
67
|
-
private
|
|
69
|
+
private _isSelectable;
|
|
68
70
|
private _select;
|
|
69
71
|
private _setMarkerSize;
|
|
70
72
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;AAa9E,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,4CAA4C;IAC5C,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,iDAAiD;IACjD,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,uCAAuC;IACvC,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IAEpD,4CAA4C;IAC5C,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;gBAGlD,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,YAAY,EAAE,cAAc,GAAG,IAAI,EACnC,YAAY,EAAE,cAAc,GAAG,IAAI;CAQtC;;AACD;;;;;;GAMG;AACH,qBAEM,iBAAkB,SAAQ,sBAAuD;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;;;OAKG;IACH,OAAO,CAAC,SAAS,CAUd;IAEH,wFAAwF;IACxF,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,
|
|
1
|
+
{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;AAa9E,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,4CAA4C;IAC5C,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,iDAAiD;IACjD,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,uCAAuC;IACvC,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IAEpD,4CAA4C;IAC5C,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;gBAGlD,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,YAAY,EAAE,cAAc,GAAG,IAAI,EACnC,YAAY,EAAE,cAAc,GAAG,IAAI;CAQtC;;AACD;;;;;;GAMG;AACH,qBAEM,iBAAkB,SAAQ,sBAAuD;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;;;OAKG;IACH,OAAO,CAAC,SAAS,CAUd;IAEH,wFAAwF;IACxF,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,wDAAwD;IACxD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,EAKxD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,IAAI,CAEpD;IACD,OAAO,CAAC,eAAe,CAAkC;IAEzD,wDAAwD;IACxD,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,EAK9C;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,IAAI,CAE3C;IACD,OAAO,CAAC,kBAAkB,CAA+B;IAEzD,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAK5C;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IACD,OAAO,CAAC,uBAAuB,CAAuB;IAEtD,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAOnC;IAED,OAAO,KAAK,aAAa,GAQxB;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,aAAa,CAA2C;;IAQhE,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,OAAO;IAmCf,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,oBAAoB;IAcZ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAqB3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|