@sbb-esta/lyne-elements-dev 5.9.0-dev.1789908411 → 5.9.0-dev.1789969922
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/clock.pure.js +1 -1
- package/core/testing.js +1 -1
- package/core.js +5 -5
- package/dialog/_dialog.global.scss +1 -1
- package/download.pure.js +1 -1
- package/form-field.pure.js +1 -1
- package/header.pure.js +1 -1
- package/icon.pure.js +1 -1
- package/lean-off-brand-theme.css +1 -1
- package/lean-safety-theme.css +1 -1
- package/lean-theme.css +1 -1
- package/logo.pure.js +1 -1
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +1 -1
- package/overlay.pure.js +1 -1
- package/package.json +2 -2
- package/popover.pure.js +1 -1
- package/safety-theme.css +1 -1
- package/sidebar.pure.js +1 -1
- package/standard-theme.css +1 -1
- package/status.pure.js +1 -1
- package/time-input.pure.js +1 -1
- package/toast.pure.js +1 -1
- package/tooltip.pure.js +1 -1
package/form-field.pure.js
CHANGED
|
@@ -21,7 +21,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
21
21
|
<slot></slot>
|
|
22
22
|
</span>
|
|
23
23
|
`}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))){--_sbb-form-field-spacer-margin-block-end-textarea:var(--sbb-form-field-textarea-s-spacer)}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{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-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea,0px));display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
|
|
24
|
-
`;let C=0;const w=new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{kind:`accessor`,name:`_input`,static:!1,private:!1,access:{has:e=>`_input`in e,get:e=>e._input,set:(e,t)=>{e._input=t}},metadata:e},W,G),m(this,null,K,{kind:`accessor`,name:`_label`,static:!1,private:!1,access:{has:e=>`_label`in e,get:e=>e._label,set:(e,t)=>{e._label=t}},metadata:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(this._input&&this._label){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
|
|
24
|
+
`;let C=0;const w=/* @__PURE__ */ new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{kind:`accessor`,name:`_input`,static:!1,private:!1,access:{has:e=>`_input`in e,get:e=>e._input,set:(e,t)=>{e._input=t}},metadata:e},W,G),m(this,null,K,{kind:`accessor`,name:`_label`,static:!1,private:!1,access:{has:e=>`_label`in e,get:e=>e._label,set:(e,t)=>{e._label=t}},metadata:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(this._input&&this._label){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
|
|
25
25
|
<div class="sbb-form-field__space-wrapper">
|
|
26
26
|
${``}
|
|
27
27
|
<div @click=${this._handleWrapperClick} class="sbb-form-field__wrapper" id="overlay-anchor">
|
package/header.pure.js
CHANGED
|
@@ -12,7 +12,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
|
|
|
12
12
|
<slot></slot>
|
|
13
13
|
</span>
|
|
14
14
|
`}},C=class extends y(d){static{this.elementName=`sbb-header-link`}},w=`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);line-height:var(--sbb-typo-line-height-text);padding-block-start:calc(var(--sbb-header-height) + var(--sbb-header-padding-block-start));display:block}:host([size=s]){--sbb-header-height:var(--sbb-header-height-s)}:host([size=m]){--sbb-header-height:var(--sbb-header-height-m)}:host([hide-on-scroll]){--sbb-header-position:absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position:fixed;--sbb-header-animation-name:hide;--sbb-header-transform:translate3d(0, -100%, 0);--sbb-header-inset-inline-end:var(--sbb-scrollbar-reserved-space,0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing:cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name:show;--sbb-header-transform:translate3d(0, 0, 0);--sbb-header-transition-timing:cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration:0;--sbb-header-transform:translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-header-background);z-index:var(--sbb-header-z-index,10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing);padding-block-start:var(--sbb-header-padding-block-start)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}::slotted(*){flex:none}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){padding-block:var(--sbb-spacing-fixed-3x);flex-basis:0;display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::slotted(a.sbb-header-logo: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-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}
|
|
15
|
-
`;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins
|
|
15
|
+
`;let T=(()=>{let s=l,c,d=[],f=[],g,_=[],v=[],y,b=[],x=[],S,C=[],T=[],E,D=[],O=[];return class l extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[p(),a({reflect:!0,type:Boolean})],g=[m(),a({attribute:`scroll-origin`})],y=[p(),a({attribute:`hide-on-scroll`,reflect:!0,type:Boolean})],S=[a({reflect:!0})],E=[o()],e(this,null,c,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},d,f),e(this,null,g,{kind:`accessor`,name:`scrollOrigin`,static:!1,private:!1,access:{has:e=>`scrollOrigin`in e,get:e=>e.scrollOrigin,set:(e,t)=>{e.scrollOrigin=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`hideOnScroll`,static:!1,private:!1,access:{has:e=>`hideOnScroll`in e,get:e=>e.hideOnScroll,set:(e,t)=>{e.hideOnScroll=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,T),e(this,null,E,{kind:`accessor`,name:`_headerOnTop`,static:!1,private:!1,access:{has:e=>`_headerOnTop`in e,get:e=>e._headerOnTop,set:(e,t)=>{e._headerOnTop=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-header`}static{this.styles=[i(w)]}static{this._headerScrollOrigins=/* @__PURE__ */ new Set}static{this._headerElements=/* @__PURE__ */ new Set}static{r||h(()=>this._initializeScrollOriginObserver())}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get scrollOrigin(){return this.#t}set scrollOrigin(e){this.#t=e}#n;get hideOnScroll(){return this.#n}set hideOnScroll(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}#i;get _headerOnTop(){return this.#i}set _headerOnTop(e){this.#i=e}constructor(){super(),this.#e=t(this,d,!1),this.#t=(t(this,f),t(this,_,null)),this.#n=(t(this,v),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this.#i=(t(this,T),t(this,D,!0)),this._scrollElement=t(this,O),this._lastScroll=0,this._scrollOriginFromObserver=null,this.addController(new u(this))}static _initializeScrollOriginObserver(){new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleScrollOriginElement(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleScrollOriginElement(e),this._findAndHandleScrollOrigins(e);this._updateHeaderElements()}).observe(document.documentElement,{attributeFilter:[`sbb-header-scroll-origin`],childList:!0,subtree:!0}),this._findAndHandleScrollOrigins(document.body),this._updateHeaderElements()}static _findAndHandleScrollOrigins(e){e.querySelectorAll(`[sbb-header-scroll-origin]`).forEach(e=>this._handleScrollOriginElement(e))}static _handleScrollOriginElement(e){e.isConnected&&e.hasAttribute(`sbb-header-scroll-origin`)?this._headerScrollOrigins.add(e):this._headerScrollOrigins.delete(e)}static _updateHeaderElements(){for(let e of this._headerElements)e._scrollOriginFromObserver=this._headerScrollOrigins.size===0?null:this._headerScrollOrigins.size===1?this._headerScrollOrigins.values().next().value??null:Array.from(this._headerScrollOrigins).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_CONTAINS).at(-1)??null,e._updateScrollListener()}connectedCallback(){super.connectedCallback(),l._headerElements.add(this),this.hasUpdated&&this._updateScrollListener()}disconnectedCallback(){super.disconnectedCallback(),this._scrollElement=null,this._scrollEventsController?.abort(),l._headerElements.delete(this)}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`scrollOrigin`)&&this.hasUpdated&&this._updateScrollListener()}firstUpdated(e){super.firstUpdated(e),this._updateScrollListener()}_updateScrollListener(){let e=this.scrollOrigin??this._scrollOriginFromObserver??document;if(e===this._scrollElement||(this._scrollEventsController?.abort(),this._scrollElement=e,!this._scrollElement))return;this._scrollEventsController=new AbortController,this._scrollFunction=this._getScrollFunction.bind(this),this._scrollElement.addEventListener(`scroll`,this._scrollFunction,{passive:!0,signal:this._scrollEventsController.signal});let t=this._getCurrentScrollProperty(`scrollTop`);this._lastScroll=t<=0?0:t}_getScrollFunction(){return this.hideOnScroll?this._scrollListener():this._scrollShadowListener()}_getCurrentScrollProperty(e){return this._scrollElement instanceof Document?this._scrollElement.documentElement[e]||this._scrollElement.body[e]:this._scrollElement?.[e]||0}_scrollListener(){let e=this._getCurrentScrollProperty(`scrollTop`);this._getCurrentScrollProperty(`scrollHeight`)-window.innerHeight-e<=0||(this.toggleState(`shadow`,e!==0),e>this.offsetHeight&&e>0&&this._lastScroll<e&&this._closeOpenOverlays(),e>this.offsetHeight*2?(this._headerOnTop=!1,e>0&&this._lastScroll<e?[`shadow`,`visible`].forEach(e=>this.internals.states.delete(e)):[`fixed`,`shadow`,`animated`,`visible`].forEach(e=>this.internals.states.add(e))):(e===0&&(this._headerOnTop=!0),this._headerOnTop&&[`shadow`,`animated`,`fixed`,`visible`].forEach(e=>this.internals.states.delete(e))),this._lastScroll=e<=0?0:e)}_scrollShadowListener(){this.toggleState(`shadow`,this._getCurrentScrollProperty(`scrollTop`)!==0)}_closeOpenOverlays(){if(this.matches(`:is(:state(has-visible-focus-within),[state--has-visible-focus-within])`))return;let e=Array.from(this.querySelectorAll(`[aria-controls][aria-expanded='true']`));for(let t of e){let e=t.ariaControlsElements[0];typeof e?.close==`function`&&e.close()}}render(){return n`
|
|
16
16
|
<header class="sbb-header">
|
|
17
17
|
<div class="sbb-header__wrapper">
|
|
18
18
|
<slot></slot>
|
package/icon.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{unsafeHTML as c}from"lit/directives/unsafe-html.js";import{until as l}from"lit/directives/until.js";import{SbbElement as u,forceType as d,omitEmptyConverter as f,readConfig as p}from"./core.js";const m=e=>typeof e==`string`,h=e=>{if(e.nodeType===1){if(e.nodeName.toLowerCase()===`script`)return!1;for(let t=0;t<e.attributes.length;t++){let n=e.attributes[t].name;if(m(n)&&n.toLowerCase().indexOf(`on`)===0)return!1}for(let t=0;t<e.childNodes.length;t++)if(!h(e.childNodes[t]))return!1}return!0},g=(e,t=!0,n=!1)=>{let r=document.createElement(`div`);r.innerHTML=e;for(let e=r.childNodes.length-1;e>=0;e--)r.childNodes[e].nodeName.toLowerCase()!==`svg`&&r.removeChild(r.childNodes[e]);let i=r.firstElementChild;return i&&i.nodeName.toLowerCase()===`svg`&&(n&&!i.classList.contains(`color-immutable`)&&i.classList.add(`color-immutable`),!t||h(i))?r.innerHTML:``},_=`https://icons.app.sbb.ch/`,v=new Map().set(`default`,`${_}icons/`).set(`picto`,`${_}picto/`),y
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{unsafeHTML as c}from"lit/directives/unsafe-html.js";import{until as l}from"lit/directives/until.js";import{SbbElement as u,forceType as d,omitEmptyConverter as f,readConfig as p}from"./core.js";const m=e=>typeof e==`string`,h=e=>{if(e.nodeType===1){if(e.nodeName.toLowerCase()===`script`)return!1;for(let t=0;t<e.attributes.length;t++){let n=e.attributes[t].name;if(m(n)&&n.toLowerCase().indexOf(`on`)===0)return!1}for(let t=0;t<e.childNodes.length;t++)if(!h(e.childNodes[t]))return!1}return!0},g=(e,t=!0,n=!1)=>{let r=document.createElement(`div`);r.innerHTML=e;for(let e=r.childNodes.length-1;e>=0;e--)r.childNodes[e].nodeName.toLowerCase()!==`svg`&&r.removeChild(r.childNodes[e]);let i=r.firstElementChild;return i&&i.nodeName.toLowerCase()===`svg`&&(n&&!i.classList.contains(`color-immutable`)&&i.classList.add(`color-immutable`),!t||h(i))?r.innerHTML:``},_=`https://icons.app.sbb.ch/`,v=(/* @__PURE__ */ new Map()).set(`default`,`${_}icons/`).set(`picto`,`${_}picto/`),y=/* @__PURE__ */ new Map,b=(e,t,n)=>{let i=p().icon??{},a=i.namespaces?.get(e)??v.get(e);if(a==null)throw Error(`Unable to find the namespace "${e}". Please register your custom namespace.`);let o=`${a}${t}.svg`,s=y.get(o);if(!s){if(typeof fetch<`u`&&!r){let r=i.interceptor??(e=>e.request()),a;try{a=Promise.resolve(r({namespace:e,name:t,url:o,request:()=>fetch(o).then(async r=>{if(!r.ok)throw Error(`Failed to load icon ${e}:${t}`);return g(await r.text(),n)})}))}catch(e){a=Promise.reject(e)}s=a.then(e=>(!e&&y.get(o)===s&&y.delete(o),e),e=>(y.get(o)===s&&y.delete(o),console.warn(e),``)),y.set(o,s)}else return Promise.resolve(``)}return s};var x=`:host{-webkit-tap-highlight-color:transparent;line-height:0;display:inline-block}:host(:is(:state(empty),[state--empty])){--sbb-icon-default-dimension:0}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-extra-small]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-extra-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-small]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-medium]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-medium)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-large]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-large)}svg{display:var(--sbb-icon-svg-display);width:var(--sbb-icon-svg-width,var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height,var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentColor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentColor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentColor}
|
|
2
2
|
`;const S=`default`;let C=(()=>{let r=u,i,f=[],p=[],m,h=[],g=[],_,v=[],y=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[s()],m=[s()],_=[d(),o({attribute:`no-sanitize`,type:Boolean})],e(this,null,i,{kind:`accessor`,name:`_svgNamespace`,static:!1,private:!1,access:{has:e=>`_svgNamespace`in e,get:e=>e._svgNamespace,set:(e,t)=>{e._svgNamespace=t}},metadata:t},f,p),e(this,null,m,{kind:`accessor`,name:`_svgIcon`,static:!1,private:!1,access:{has:e=>`_svgIcon`in e,get:e=>e._svgIcon,set:(e,t)=>{e._svgIcon=t}},metadata:t},h,g),e(this,null,_,{kind:`accessor`,name:`noSanitize`,static:!1,private:!1,access:{has:e=>`noSanitize`in e,get:e=>e.noSanitize,set:(e,t)=>{e.noSanitize=t}},metadata:t},v,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[a(x)]}static{this.role=`img`}#e=t(this,f,S);get _svgNamespace(){return this.#e}set _svgNamespace(e){this.#e=e}#t=(t(this,p),t(this,h,null));get _svgIcon(){return this.#t}set _svgIcon(e){this.#t=e}#n=(t(this,g),t(this,v,!1));get noSanitize(){return this.#n}set noSanitize(e){this.#n=e}constructor(){super(),t(this,y),this.internals.states.add(`empty`)}async loadSvgIcon(e){if(!e)return;let[t,n]=this._splitIconName(e);this._svgNamespace&&this.internals.states.delete(`namespace-${this._svgNamespace}`),this._svgNamespace=t,this._svgNamespace&&this.internals.states.add(`namespace-${this._svgNamespace}`);let r=this.fetchSvgIcon(this._svgNamespace,n);this.toggleState(`empty`,!0),this._svgIcon=r.then(e=>c(e));try{this.toggleState(`empty`,!await r)}catch{this.internals.states.add(`empty`)}}async fetchSvgIcon(e,t){return await b(e,t,!this.noSanitize)}_splitIconName(e){if(!e)return[``,``];let t=e.split(`:`);switch(t.length){case 1:return[S,t[0]];case 2:return t;default:throw Error(`Invalid icon name: "${e}"`)}}render(){return n`<span class="sbb-icon-inner"
|
|
3
3
|
>${l(this._svgIcon,n`<svg width="0" height="0"></svg>`)}</span
|
|
4
4
|
>`}}})(),w=(()=>{let r=C,i,a=[],c=[],l,u=[],p=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[d(),o({reflect:!0,converter:f})],l=[s()],e(this,null,i,{kind:`accessor`,name:`name`,static:!1,private:!1,access:{has:e=>`name`in e,get:e=>e.name,set:(e,t)=>{e.name=t}},metadata:t},a,c),e(this,null,l,{kind:`accessor`,name:`_sbbAngularCompatibility`,static:!1,private:!1,access:{has:e=>`_sbbAngularCompatibility`in e,get:e=>e._sbbAngularCompatibility,set:(e,t)=>{e._sbbAngularCompatibility=t}},metadata:t},u,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-icon`}static get observedAttributes(){return super.observedAttributes.concat(`svgicon`)}#e=t(this,a,``);get name(){return this.#e}set name(e){this.#e=e}#t=(t(this,c),t(this,u,!1));get _sbbAngularCompatibility(){return this.#t}set _sbbAngularCompatibility(e){this.#t=e}constructor(){super(),t(this,p),this.internals.ariaHidden=`true`}async fetchSvgIcon(e,t){return this.internals.ariaLabel=`Icon ${t.replace(/-/g,` `)}`,super.fetchSvgIcon(e,t)}willUpdate(e){super.willUpdate(e),e.has(`name`)&&this.name&&this.loadSvgIcon(this.name)}attributeChangedCallback(e,t,n){e===`svgicon`?this._sbbAngularCompatibility=!!n:super.attributeChangedCallback(e,t,n)}render(){return this._sbbAngularCompatibility?n`<slot></slot>`:super.render()}}})();const T=r=>(()=>{let a=r,s,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[d(),o({attribute:`icon-name`,converter:f})],e(this,null,s,{kind:`accessor`,name:`iconName`,static:!1,private:!1,access:{has:e=>`iconName`in e,get:e=>e.iconName,set:(e,t)=>{e.iconName=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[w]}#e=t(this,c,``);get iconName(){return this.#e}set iconName(e){this.#e=e}renderIconSlot(e){let t=this._renderIconName();return n`
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1294,7 +1294,7 @@ summary {
|
|
|
1294
1294
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1295
1295
|
--_sbb-dialog-max-width: 100%;
|
|
1296
1296
|
--_sbb-dialog-max-height: calc(
|
|
1297
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1297
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1298
1298
|
);
|
|
1299
1299
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1300
1300
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/lean-safety-theme.css
CHANGED
|
@@ -1314,7 +1314,7 @@ summary {
|
|
|
1314
1314
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1315
1315
|
--_sbb-dialog-max-width: 100%;
|
|
1316
1316
|
--_sbb-dialog-max-height: calc(
|
|
1317
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1317
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1318
1318
|
);
|
|
1319
1319
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1320
1320
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/lean-theme.css
CHANGED
|
@@ -1314,7 +1314,7 @@ summary {
|
|
|
1314
1314
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1315
1315
|
--_sbb-dialog-max-width: 100%;
|
|
1316
1316
|
--_sbb-dialog-max-height: calc(
|
|
1317
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1317
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1318
1318
|
);
|
|
1319
1319
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1320
1320
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/logo.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{LitElement as e,html as t,isServer as n,unsafeCSS as r}from"lit";import{SbbElement as i}from"./core.js";import{__esDecorate as a,__runInitializers as o}from"tslib";import{property as s}from"lit/decorators.js";var c=`*,:before,:after{box-sizing:border-box}
|
|
2
|
-
`;const l=n||!CSS.supports(`selector(:state(loading))`)?class extends Set{constructor(e){super(),this._host=e,this._applied=n,this._host.addController(this),n||Promise.resolve().then(()=>this._applyStates())}add(e){return this._applied&&this._toggleState(e,!0),super.add(e)}delete(e){return this._toggleState(e,!1),super.delete(e)}clear(){this.forEach(e=>this.delete(e))}hostConnected(){this._applyStates()}_toggleState(e,t){this._host.toggleAttribute(`state--${e}`,t)}_applyStates(){this._applied||(this._applied=!0,this.forEach(e=>this._toggleState(e,!0)))}}:null;if(!n){let e=0,t=e=>e.shadowRoot?.host??(e instanceof Element?e:(()=>{throw Error(`Unable to resolve related element! This should never happen.`)})()),n={attributes:!0,attributeFilter:[`id`]},r=(t,n,r)=>{let i=r[Element.name]??r[ElementInternals.name];t.setAttribute(n,i.id||=`aria-ref-${e++}`)},i=(t,n,r)=>{t.setAttribute(n,Object.values(r).reduce((e,t)=>e.concat(t)).filter((e,t,n)=>n.indexOf(e)===t).map(t=>t.id||=`aria-ref-${e++}`).join(` `))};for(let e of[ElementInternals,Element]){let a=e.prototype;if(!(`ariaActiveDescendantElement`in a)){let i=`aria-activedescendant`,o
|
|
2
|
+
`;const l=n||!CSS.supports(`selector(:state(loading))`)?class extends Set{constructor(e){super(),this._host=e,this._applied=n,this._host.addController(this),n||Promise.resolve().then(()=>this._applyStates())}add(e){return this._applied&&this._toggleState(e,!0),super.add(e)}delete(e){return this._toggleState(e,!1),super.delete(e)}clear(){this.forEach(e=>this.delete(e))}hostConnected(){this._applyStates()}_toggleState(e,t){this._host.toggleAttribute(`state--${e}`,t)}_applyStates(){this._applied||(this._applied=!0,this.forEach(e=>this._toggleState(e,!0)))}}:null;if(!n){let e=0,t=e=>e.shadowRoot?.host??(e instanceof Element?e:(()=>{throw Error(`Unable to resolve related element! This should never happen.`)})()),n={attributes:!0,attributeFilter:[`id`]},r=(t,n,r)=>{let i=r[Element.name]??r[ElementInternals.name];t.setAttribute(n,i.id||=`aria-ref-${e++}`)},i=(t,n,r)=>{t.setAttribute(n,Object.values(r).reduce((e,t)=>e.concat(t)).filter((e,t,n)=>n.indexOf(e)===t).map(t=>t.id||=`aria-ref-${e++}`).join(` `))};for(let e of[ElementInternals,Element]){let a=e.prototype;if(!(`ariaActiveDescendantElement`in a)){let i=`aria-activedescendant`,o=/* @__PURE__ */ new WeakMap;Object.defineProperty(a,"ariaActiveDescendantElement",{enumerable:!0,configurable:!0,get(){let e=t(this),n=e.getAttribute(i)?.split(/\s+/)[0]??null;return n?e.getRootNode().getElementById?.(n)??null:null},set(a){if(a!==null&&!(a instanceof Element))throw TypeError(`Failed to set the 'ariaActiveDescendantElement' property on '${e.name}': Failed to convert value to 'Element'.`);let s=t(this),c=o.get(s);if(c?.observer?.disconnect(),a===null)c&&(delete c.elements[e.name],Object.keys(c).length?c.observer.observe(Object.values(c.elements)[0],n):(o.delete(s),s.removeAttribute(i)));else if(c)c.elements[e.name]=a,r(s,i,c.elements),Object.values(c.elements).forEach(e=>c.observer.observe(e,n));else{let t={[e.name]:a};r(s,i,t);let c=new MutationObserver(()=>r(s,i,t));c.observe(a,n),o.set(s,{elements:t,observer:c})}}})}for(let r of[`ariaControlsElements`,`ariaDescribedByElements`,`ariaDetailsElements`,`ariaErrorMessageElements`,`ariaLabelledByElements`,`ariaOwnsElements`])if(!(r in a)){let o=/* @__PURE__ */ new WeakMap,s=`aria-${r.slice(4,-8).toLowerCase()}`;Object.defineProperty(a,r,{enumerable:!0,configurable:!0,get(){let e=t(this),n=e.getAttribute(s)?.split(/\s+/).filter((e,t,n)=>n.indexOf(e)===t).map(t=>e.getRootNode().getElementById?.(t)).filter(e=>e instanceof Element);return n?.length?Object.freeze(n):null},set(a){if(a!==null&&(!Array.isArray(a)||a.some(e=>!(e instanceof Element))))throw TypeError(`Failed to set the '${r}' property on '${e.name}': Failed to convert value to 'Element'.`);let c=t(this);a=a?.filter((e,t,n)=>n.indexOf(e)===t)??null;let l=o.get(c);if(l?.observer?.disconnect(),a===null)l&&(delete l.elements[e.name],Object.keys(l.elements).length?Object.values(l.elements).reduce((e,t)=>e.concat(t)).forEach(e=>l.observer.observe(e,n)):o.delete(c));else if(l)l.elements[e.name]=a,i(c,s,l.elements),Object.values(l.elements).reduce((e,t)=>e.concat(t)).forEach(e=>l.observer.observe(e,n));else{let t={[e.name]:a};i(c,s,t);let r=new MutationObserver(()=>i(c,s,t));a.forEach(e=>r.observe(e,n)),o.set(c,{elements:t,observer:r})}}})}}}const u=/* @__PURE__ */ new WeakMap;var d=class extends Event{constructor(e){super(`slottedchange`,{composed:!0}),this.slot=e}};(class extends e{static{this._$sbbElement$=!0}static{this.styles=[r(c)]}get hydrationComplete(){return this._hydrationComplete}get hydrationRequired(){return this._hydrationRequired}constructor(){if(super(),this.internals=this.attachInternals(),this._hydrationComplete=new Promise(e=>this._resolveHydration=e),u.set(this,this.internals),l)Object.defineProperty(this.internals,"states",{value:new l(this),writable:!1,configurable:!1,enumerable:!1});else for(let e of this.getAttributeNames().filter(e=>e.startsWith(`state--`)))this.internals.states.add(e.slice(7)),this.removeAttribute(e);let e=this.constructor.role;if(e&&(this.internals.role=e),this._hydrationRequired=!!this.shadowRoot,!this._hydrationRequired)this._resolveHydration(!1);else{let e=e=>{this._hydrationRequired&&e.stopImmediatePropagation()},t={capture:!0},n=this.shadowRoot?.querySelectorAll(`slot`);n?.length&&(n.forEach(n=>n.addEventListener(`slotchange`,e,t)),this.hydrationComplete.then(()=>n.forEach(n=>{n.removeEventListener(`slotchange`,e,t),n.assignedNodes().length&&n.dispatchEvent(new Event(`slotchange`,{bubbles:!0}))})))}}static define(){if(!this.elementName)throw Error(`The static property "elementName" is not defined on ${this.name}. Please define it to register the custom element.`);if(!customElements.get(this.elementName)){customElements.define(this.elementName,this);let e=[],t=this;for(;t._$sbbElement$;)Array.isArray(t.elementDependencies)&&e.push(...t.elementDependencies),t=Object.getPrototypeOf(t);new Set(e).forEach(e=>e.define())}}static finalizeStyles(t){let n=[],r=this;for(;r&&r!==e;)Object.hasOwn(r,`styles`)&&r.styles&&n.unshift(r.styles),r=Object.getPrototypeOf(r);return super.finalizeStyles(n)}createRenderRoot(){let e=super.createRenderRoot();return this.shadowRoot?.addEventListener(`slotchange`,e=>this._slotchangeHandler(e,e.target)),this.shadowRoot?.addEventListener(`slottedchange`,e=>this._slotchangeHandler(e,e.slot),{capture:!0}),this.shadowRoot?.querySelectorAll?.(`slot`).forEach(e=>this._handleSlotChangeForSlottedState(e)),e}addController(e){super.addController(e),(this._controllers??=/* @__PURE__ */ new Set).add(e)}removeController(e){super.removeController(e),this._controllers?.delete(e)}requestUpdate(e,t,n,r,i){if(super.requestUpdate(e,t,n,r,i),e){let a={oldValue:t,value:r?i:this[e]};this._controllers?.forEach(t=>t.hostPropertyUpdate?.(e,a,n))}}update(e){super.update(e),this._hydrationRequired&&(this._hydrationRequired=!1,this._resolveHydration(!0))}toggleState(e,t){t||t!==!1&&!this.internals.states.has(e)?this.internals.states.add(e):this.internals.states.delete(e)}_slotchangeHandler(e,t){let n=this.shadowRoot.contains(t)?t:e.composedPath().find(e=>e instanceof HTMLSlotElement&&this.shadowRoot.contains(e));n&&this._handleSlotChangeForSlottedState(n)}_handleSlotChangeForSlottedState(e){this._updateSlottedState(e),e.name||this._observeTextNodesInSlot(e)}_updateSlottedState(e){let t=e.name?`slotted-${e.name}`:`slotted`,n=this._hasSlottedContent(e);n&&!this.internals.states.has(t)?(this.internals.states.add(t),this.dispatchEvent(new d(e))):!n&&this.internals.states.has(t)&&(this.internals.states.delete(t),this.dispatchEvent(new d(e)))}_observeTextNodesInSlot(e){this._textObserver?.disconnect(),this._textObserver??=new MutationObserver(()=>{let e=this.shadowRoot.querySelector(`slot:not([name])`);e?this._updateSlottedState(e):this._textObserver.disconnect()}),e.assignedNodes().filter(e=>e.nodeType===e.TEXT_NODE).forEach(e=>this._textObserver.observe(e,{characterData:!0}))}_hasSlottedContent(e){return e.name?e.assignedElements().some(e=>!(e instanceof HTMLSlotElement)||this._hasSlottedContent(e)):e.assignedNodes().some(e=>e instanceof HTMLSlotElement?this._hasSlottedContent(e):e.nodeType!==e.TEXT_NODE||!!e.textContent?.trim())}});const f=e=>(t,n)=>{let{kind:r,metadata:i,name:a}=n,o=globalThis.litPropertyMetadata.get(i)?.get(a)?.type??String;if(e??=o,e===String?e=e=>e==null?``:String(e):e===Number&&(e=e=>e==null?NaN:Number(e)),r===`accessor`)return{set(n){t.set.call(this,e(n))}};if(r===`setter`)return function(n){t.call(this,e(n))};throw Error(`Unsupported decorator location: ${r}`)},p=e=>(()=>{let t=e,n,r=[],i=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[f(),s({reflect:!0,type:Boolean})],a(this,null,n,{kind:`accessor`,name:`negative`,static:!1,private:!1,access:{has:e=>`negative`in e,get:e=>e.negative,set:(e,t)=>{e.negative=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#e=o(this,r,!1);get negative(){return this.#e}set negative(e){this.#e=e}constructor(){super(...arguments),o(this,i)}}})();var m=`:host{height:var(--sbb-logo-height);justify-content:center;align-items:center;display:flex}@media (forced-colors:active){:host{--sbb-logo-word-mark-color:ButtonText!important}}:host([negative]){--sbb-logo-word-mark-color:var(--sbb-color-white)}.sbb-logo__svg-container{height:var(--sbb-logo-svg-container-height,100%);width:100%;display:flex}svg{width:100%;height:100%}#sbb-logo__word-mark{fill:var(--sbb-logo-word-mark-color)}#sbb-logo__panel{fill:var(--sbb-logo-panel-color);stroke:var(--sbb-logo-panel-color)}#sbb-logo__signet{fill:var(--sbb-logo-signet-color)}
|
|
3
3
|
`;const h=e=>(()=>{let t=p(e),n,i=[],c=[],l,u=[],d=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[s({attribute:`protective-room`,reflect:!0})],l=[f(),s({attribute:`accessibility-label`})],a(this,null,n,{kind:`accessor`,name:`protectiveRoom`,static:!1,private:!1,access:{has:e=>`protectiveRoom`in e,get:e=>e.protectiveRoom,set:(e,t)=>{e.protectiveRoom=t}},metadata:e},i,c),a(this,null,l,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:e},u,d),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.styles=[r(m)]}#e=o(this,i,`ideal`);get protectiveRoom(){return this.#e}set protectiveRoom(e){this.#e=e}#t=(o(this,c),o(this,u,``));get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}constructor(){super(...arguments),o(this,d)}}})();var g=`:host{aspect-ratio:var(--sbb-logo-aspect-ratio)}:host([protective-room=minimal]){--sbb-logo-aspect-ratio:502 / 96;--sbb-logo-svg-container-height:50%}:host([protective-room=ideal]){--sbb-logo-aspect-ratio:550 / 144;--sbb-logo-svg-container-height:calc(48 / 144 * 100%)}
|
|
4
4
|
`,_=class extends h(i){static{this.elementName=`sbb-logo`}static{this.styles=[r(g)]}constructor(){super(),this.accessibilityLabel||=`Logo`}render(){return t`
|
|
5
5
|
<span class="sbb-logo__svg-container">
|
package/notification.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{SbbSecondaryButtonElement as s}from"./button.pure.js";import{SbbElement as c,SbbLanguageController as l,SbbReadonlyMixin as u,i18nCloseNotification as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";import{SbbIconNameMixin as m}from"./icon.pure.js";var h=`:host{--sbb-notification-border:var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-background-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),color-mix(in srgb, var(--sbb-notification-type-color) 35%, white));--sbb-notification-icon-color:var(--sbb-notification-type-color);--sbb-notification-border-radius-start:calc(var(--sbb-notification-base-border-radius) / 2);--sbb-notification-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-notification-icon-authoritative-font-size:1em;--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text);--_sbb-notification-inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);font-size:var(--sbb-notification-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])),:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}:host(:where(:is(:state(slotted-title),[state--slotted-title]),:is(:state(slotted-title),[state--slotted-title])[size=m])){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-5);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-heading)}:host(:is(:state(slotted-title),[state--slotted-title])[size=s]){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-6);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-notification-font-size:var(--sbb-text-font-size-xs);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);--sbb-notification-close-button-size:var(--sbb-button-min-height-size-s)}:host([size=m]){--sbb-notification-font-size:var(--sbb-text-font-size-s);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-notification-close-button-size:var(--sbb-button-min-height-size-m)}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color:var(--sbb-color-smoke);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=note]){--sbb-notification-type-color:var(--sbb-color-sky);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=success]){--sbb-notification-type-color:var(--sbb-color-success);--sbb-notification-divider-opacity-light:15%;--sbb-notification-divider-opacity-dark:30%}:host([type=warn]){--sbb-notification-type-color:var(--sbb-color-warning);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:25%;--sbb-notification-divider-opacity-dark:40%}:host([type=error]){--sbb-notification-type-color:var(--sbb-color-error);--sbb-notification-divider-opacity-light:10%;--sbb-notification-divider-opacity-dark:25%}.sbb-notification__wrapper{width:calc(100% - var(--_sbb-notification-inset-inline-start));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);opacity:0;max-height:0;margin:0;position:relative;inset-inline-start:var(--_sbb-notification-inset-inline-start)}.sbb-notification__wrapper:before{content:"";inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius);position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--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(:is(:state(state-opening),[state--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(:is(:state(state-closing),[state--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-duration,var(--sbb-animation-duration-2x))}.sbb-notification{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-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);background-color:var(--sbb-notification-background-color);grid-template-columns:auto 1fr auto auto;align-items:center;display:grid;position:relative;overflow:hidden}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);height:calc(1em * var(--_sbb-notification-icon-authoritative-line-height));--sbb-icon-svg-width:var(--sbb-notification-icon-size);align-self:flex-start;margin-block-start:calc((var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-notification__content{color-scheme:light only;padding-inline:var(--sbb-notification-content-padding-inline);align-content:center;align-self:flex-start}.sbb-notification__text{margin:0;padding:0;display:inline}.sbb-notification__divider{--sbb-divider-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color)),color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color)));height:calc(100% - var(--sbb-spacing-fixed-1x) * 2);margin-inline-end:calc(var(--sbb-notification-close-wrapper-gap) + var(--sbb-notification-close-button-size) - var(--sbb-divider-border-width));display:block;inset-inline-start:var(--sbb-border-width-1x)}.sbb-notification__close{position:absolute;inset-inline-end:var(--sbb-notification-padding-inline)}@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}}::slotted(sbb-title){font-size:var(--_sbb-notification-icon-authoritative-font-size);line-height:var(--_sbb-notification-icon-authoritative-line-height);margin:0}
|
|
2
|
-
`;const g
|
|
2
|
+
`;const g=/* @__PURE__ */ new Map([[`info`,`circle-information-small`],[`note`,`circle-information-small`],[`success`,`circle-tick-small`],[`warn`,`circle-exclamation-point-small`],[`error`,`circle-cross-small`]]);let _=(()=>{let _=m(u(c)),v,y=[],b=[],x,S=[],C=[],w,T=[],E=[];return class extends _{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(_[Symbol.metadata]??null):void 0;v=[o({reflect:!0})],x=[o({reflect:!0})],w=[o({reflect:!0})],e(this,null,v,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},S,C),e(this,null,w,{kind:`accessor`,name:`animation`,static:!1,private:!1,access:{has:e=>`animation`in e,get:e=>e.animation,set:(e,t)=>{e.animation=t}},metadata:t},T,E),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-notification`}static{this.elementDependencies=[s,p]}static{this.styles=[a(h)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get animation(){return this.#n}set animation(e){this.#n=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=t(this,y,`info`),this.#t=(t(this,b),t(this,S,null)),this.#n=(t(this,C),t(this,T,`all`)),this._stateInternal=t(this,E),this._resizeObserverTimeout=null,this._language=new l(this),this._notificationResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onNotificationResize()}),this._state=`closed`}_open(){this._state===`closed`&&(this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._state===`opened`&&this._dispatchBeforeCloseEvent()&&(this._state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_dispatchBeforeCloseEvent(){return this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0}))}firstUpdated(e){super.firstUpdated(e),this._notificationElement=this.shadowRoot?.querySelector(`.sbb-notification__wrapper`),this.updateComplete.then(()=>{this._setNotificationHeight(),this._open()})}_isZeroAnimationDuration(){return f(this,`--sbb-notification-animation-duration`)}_setNotificationHeight(){if(!this._notificationElement?.scrollHeight)return;let e=`${this._notificationElement.scrollHeight}px`;this.style.setProperty(`--sbb-notification-height`,e)}_onNotificationResize(){this._state===`opened`&&(this._resizeObserverTimeout&&clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`resize-disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`resize-disable-animation`),150),setTimeout(()=>this._setNotificationHeight()))}_onNotificationAnimationEnd(e){this._state===`opening`&&e.animationName===`open`&&this._handleOpening(),this._state===`closing`&&e.animationName===`close-height`&&this._handleClosing()}_handleOpening(){this._state=`opened`,this._notificationResizeObserver.observe(this._notificationElement),this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`)),this._notificationResizeObserver.unobserve(this._notificationElement),setTimeout(()=>this.remove())}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}renderIconName(){return super.renderIconName()||g.get(this.type)}render(){return r`
|
|
3
3
|
<div class="sbb-notification__wrapper" @animationend=${this._onNotificationAnimationEnd}>
|
|
4
4
|
<div class="sbb-notification">
|
|
5
5
|
${this.renderIconSlot(`sbb-notification__icon`)}
|
package/off-brand-theme.css
CHANGED
|
@@ -1294,7 +1294,7 @@ summary {
|
|
|
1294
1294
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1295
1295
|
--_sbb-dialog-max-width: 100%;
|
|
1296
1296
|
--_sbb-dialog-max-height: calc(
|
|
1297
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1297
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1298
1298
|
);
|
|
1299
1299
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1300
1300
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/overlay.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbEscapableOverlayController as a,SbbFocusTrapController as o,SbbInertController as s,SbbLanguageController as c,SbbNegativeMixin as l,SbbOpenCloseBaseElement as u,SbbScrollHandler as d,forceType as f,forwardEvent as p,i18nCloseDialog as m,i18nDialog as h,idReference as g,isZeroAnimationDuration as _,popoverResetStyles as v,removeAriaOverlayTriggerProperties as y,screenReaderOnlyStyles as b,scrollbarStyles as x,setAriaOverlayTriggerProperties as S}from"./core.js";import{ref as C}from"lit/directives/ref.js";import{html as w}from"lit/static-html.js";import{SbbSecondaryButtonElement as T}from"./button.pure.js";import{SbbContainerElement as E}from"./container.pure.js";const D=/* @__PURE__ */ new WeakMap;var O=class extends Event{constructor(e,{cancelable:t,closeAttribute:n,closeTarget:r,result:i}){super(e,{cancelable:t}),this.result=i??(r?D.get(r)??(r.getAttribute(n)?.trim()||null):null),this.closeTarget=r??null}};function k(e,t){D.set(e,t)}const A=[];let j=(()=>{let r=l(u),p,m=[],_=[],x,C=[],w=[],T,E=[],D=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,m,null),this.#t=(t(this,_),t(this,C,``)),this.#n=(t(this,w),t(this,E,!1)),this.lastFocusedElement=t(this,D),this.focusTrapController=new o(this),this.scrollHandler=new d,this.language=new c(this),this.inertController=new s(this),this.escapableOverlayController=new a(this),this._ariaLiveRefToggle=!1,this._triggerElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;p=[g(),i()],x=[f(),i({attribute:`accessibility-label`})],T=[f(),i({type:Boolean})],e(this,null,p,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},m,_),e(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},C,w),e(this,null,T,{kind:`accessor`,name:`skipFocusRestoration`,static:!1,private:!1,access:{has:e=>`skipFocusRestoration`in e,get:e=>e.skipFocusRestoration,set:(e,t)=>{e.skipFocusRestoration=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[v,b]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get accessibilityLabel(){return this.#t}set accessibilityLabel(e){this.#t=e}#n;get skipFocusRestoration(){return this.#n}set skipFocusRestoration(e){this.#n=e}open(){this.state!==`opening`&&this.state!==`opened`&&!this._hasClosedParent()&&this.dispatchBeforeOpenEvent()&&(this.lastFocusedElement=document.activeElement,this.showPopover?.(),this.state=`opening`,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),A.push(this),this.scrollHandler.disableScroll(),this.escapableOverlayController.connect(),this.attachOpenOverlayEvents(),this.isZeroAnimationDuration()&&this.handleOpening())}close(e){this._close(e,void 0)}_close(e,t){this.state!==`closing`&&this.state!==`closed`&&(this.lastResult=e??null,this.lastClosedTarget=t,this.dispatchBeforeCloseEvent()&&(this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this.removeAriaLiveRefContent(),this.isZeroAnimationDuration()&&this.handleClosing()))}_hasClosedParent(){let e=this.parentElement?.closest(`sbb-dialog, sbb-overlay`);return e?.state===`closed`||e?.state===`closing`}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),y(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(S(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal})))}firstUpdated(e){super.firstUpdated(e),this._ariaLiveRef=this.shadowRoot.querySelector(`.sbb-screen-reader-only`),this._configureTrigger(),this.isOpen&&setTimeout(()=>{this.focusTrapController.focusInitialElement()},0)}disconnectedCallback(){super.disconnectedCallback(),this.openOverlayController?.abort(),this.removeInstanceFromGlobalCollection(),this.scrollHandler.enableScroll(),this._triggerElement=null,this._triggerAbortController?.abort()}requestUpdate(e,t,r){super.requestUpdate(e,t,r),!n&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}attachOpenOverlayEvents(){this.openOverlayController=new AbortController,window.addEventListener(`keydown`,()=>{this.removeAriaLiveRefContent()},{signal:this.openOverlayController.signal}),window.addEventListener(`click`,()=>this.removeAriaLiveRefContent(),{signal:this.openOverlayController.signal})}removeInstanceFromGlobalCollection(){let e=A.indexOf(this);e>-1&&A.splice(e,1)}closeOnSbbOverlayCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(this.closeAttribute)||e.localName===this.closeTag)&&!e.hasAttribute(`disabled`)&&(e.closest(this.localName)===this||(this.shadowRoot?.contains(e)??!1)));t&&A.length&&A[A.length-1]._close(null,t)}removeAriaLiveRefContent(){this._ariaLiveRef&&(this._ariaLiveRef.textContent=``)}setAriaLiveRefContent(e){this._ariaLiveRef&&(this._ariaLiveRefToggle=!this._ariaLiveRefToggle,this._ariaLiveRef.textContent=`${h[this.language.current]}${e?`, ${e}`:``}${this._ariaLiveRefToggle?`\xA0`:``}`)}onOverlayAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this.handleOpening():e.animationName===`close`&&this.state===`closing`&&this.handleClosing()}}})();var M=`:host{--sbb-overlay-display:none;--sbb-overlay-inset:0 auto auto 0;--sbb-overlay-pointer-events:none;--sbb-overlay-container-display:none;--_sbb-overlay-padding-block:calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));display:var(--sbb-overlay-display);inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index,var(--sbb-overlay-default-z-index));position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-overlay-display:block;--sbb-overlay-container-display:flex}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events:all}:host(:not([negative])){--sbb-overlay-color:var(--sbb-color-1);--sbb-overlay-background-color:var(--sbb-background-color-3)}:host([negative]){--sbb-overlay-color:var(--sbb-color-1-negative);--sbb-overlay-background-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset:0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:var(--sbb-overlay-container-display);inset:var(--sbb-overlay-inset);align-items:center;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay__container{animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{height:var(--sbb-overlay-height);color:var(--sbb-overlay-color);border:none;margin:auto;padding:0;position:absolute;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{width:100%;height:var(--sbb-overlay-height);outline:none;flex-direction:column;display:flex;position:fixed}@media (width>=64rem){.sbb-overlay__wrapper{height:auto;position:sticky;inset-block-start:0}}.sbb-overlay__header{pointer-events:none;width:100%;padding:var(--sbb-spacing-responsive-xs);z-index:1;justify-content:space-between;align-items:start;padding-block-end:0;display:flex;position:absolute;inset-inline-start:0}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{-webkit-overflow-scrolling:touch;height:100vh;overflow:auto}.sbb-overlay__content-container{padding-block:var(--_sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0%)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0%)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}
|
|
2
2
|
`;let N=(()=>{let n=j,a,o=[],s=[],c,l=[],u=[];return class extends n{constructor(){super(...arguments),this.#e=t(this,o,!1),this.#t=(t(this,s),t(this,l,``)),this.closeAttribute=(t(this,u),`sbb-overlay-close`),this._overlayContentElement=null}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;a=[f(),i({reflect:!0,type:Boolean})],c=[f(),i({attribute:`accessibility-close-label`})],e(this,null,a,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},o,s),e(this,null,c,{kind:`accessor`,name:`accessibilityCloseLabel`,static:!1,private:!1,access:{has:e=>`accessibilityCloseLabel`in e,get:e=>e.accessibilityCloseLabel,set:(e,t)=>{e.accessibilityCloseLabel=t}},metadata:t},l,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-overlay`}static{this.elementDependencies=[T,E]}static{this.styles=[x,r(M)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get expanded(){return this.#e}set expanded(e){this.#e=e}#t;get accessibilityCloseLabel(){return this.#t}set accessibilityCloseLabel(e){this.#t=e}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.setAriaLiveRefContent()}isZeroAnimationDuration(){return _(this,`--sbb-overlay-animation-duration`)}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),setTimeout(()=>this.setAriaLiveRefContent(this.accessibilityLabel)),this.focusTrapController.enabled=!0,this.dispatchOpenEvent()}handleClosing(){this._overlayContentElement?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,this.removeInstanceFromGlobalCollection(),A.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}dispatchBeforeCloseEvent(){return this.dispatchEvent(new O(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new O(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return w`
|
|
3
3
|
<div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
|
|
4
4
|
<div class="sbb-overlay">
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.9.0-dev.
|
|
3
|
+
"version": "5.9.0-dev.1789969922",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/e7936551baf2df99099bc9002c0c4c17fb474ae5"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/popover.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,isServer as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{ref as c}from"lit/directives/ref.js";import{IS_FOCUSABLE_QUERY as l,SbbEscapableOverlayController as u,SbbFocusTrapController as d,SbbLanguageController as f,SbbMediaQueryPointerCoarse as p,SbbNegativeMixin as m,SbbOpenCloseBaseElement as h,SbbPropertyWatcherController as g,forceType as _,getElementPosition as v,i18nClosePopover as y,idReference as b,isEventOnElement as x,isFakeMousedownFromScreenReader as S,isZeroAnimationDuration as C,popoverResetStyles as w,readConfig as T,removeAriaOverlayTriggerProperties as E,sbbInputModalityDetector as D,scrollbarStyles as O,setAriaOverlayTriggerProperties as k,ɵstateController as A}from"./core.js";import{SbbSecondaryButtonElement as j}from"./button.pure.js";var M=`:host{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-popover-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-popover-inset:0 auto auto 0;--_sbb-popover-translate:0 var(--sbb-spacing-fixed-2x);--_sbb-popover-box-shadow:var(--sbb-box-shadow-level-9-hard);display:none;outline:none!important}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--_sbb-popover-inset:0;display:block}:host(:is(:state(position-above),[state--position-above])){--_sbb-popover-translate:0 calc(var(--sbb-spacing-fixed-2x) * -1)}.sbb-popover:after,.sbb-popover__content:before{content:"";width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--_sbb-popover-arrow-position-x,0);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;display:block;position:absolute;rotate:45deg}.sbb-popover__container{inset:var(--_sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-popover{top:var(--_sbb-popover-position-y,0);bottom:unset;left:var(--_sbb-popover-position-x,0);right:unset;background-color:var(--sbb-popover-background);max-width:var(--sbb-popover-max-width);width:max-content;box-shadow:var(--_sbb-popover-box-shadow);border-radius:var(--sbb-popover-border-radius);pointer-events:all;border:none;outline:none;padding:0;display:none;position:absolute}:host(:focus-visible) .sbb-popover{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-popover{animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{z-index:-1;box-shadow:var(--_sbb-popover-box-shadow)}@media (forced-colors:active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors:active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";z-index:-1;background-color:#0000;display:block;position:absolute;inset:0}:host(:is(:state(position-below),[state--position-below])) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host(:is(:state(position-above),[state--position-above])) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);background-color:var(--sbb-popover-background);outline:none}.sbb-popover__content:before{clip-path:polygon(100% 0,0% 0%,0% 100%)}:host(:is(:state(position-above),[state--position-above])) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2);clip-path:polygon(100% 0,100% 100%,0% 100%)}@keyframes open{0%{opacity:0;translate:var(--_sbb-popover-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--_sbb-popover-translate)}}
|
|
2
|
-
`;const N
|
|
2
|
+
`;const N=/* @__PURE__ */ new Set;var P=class extends Event{get closeTarget(){return this._closeTarget}constructor(e,{closeTarget:t,cancelable:n}){super(e,{cancelable:n}),this._closeTarget=t}};let F=(()=>{let s=h,f,p=[],m=[];return class extends s{constructor(){super(...arguments),this.#e=t(this,p,null),this._nextFocusedElement=t(this,m),this._skipCloseFocus=!1,this._resizeController=new n(this,{target:null,callback:()=>this._setPopoverPosition()}),this._escapableOverlayController=new u(this),this._focusTrapController=new d(this),this._blurTimeout=null,this._pointerDownListener=e=>{this._isPointerDownEventOnPopover=x(this.overlay,e)},this._closeOnBackdropClick=e=>{let t=e.composedPath();!this._isPointerDownEventOnPopover&&!x(this.overlay,e)&&(!this.trigger||!t.includes(this.trigger))&&(this._nextFocusedElement=t.filter(e=>e instanceof window.HTMLElement).find(e=>e.matches(l)),clearTimeout(this.closeTimeout),this.close())}}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;f=[b(),o()],e(this,null,f,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},p,m),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[w,a(M)]}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}open(){if((this.state===`closed`||this.state===`closing`)&&this.overlay&&this.dispatchBeforeOpenEvent()){for(let e of N)(e.state===`opened`||e.state===`opening`)&&e.close();this.showPopover?.(),this.state=`opening`,this.inert=!0,this._setPopoverPosition(),this._attachWindowEvents(),this._escapableOverlayController.connect(),this._nextFocusedElement=void 0,this._skipCloseFocus=!1,this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isZeroAnimationDuration()&&this._handleOpening()}}close(e){(this.state===`opened`||this.state===`opening`)&&(this._popoverCloseElement=e,this.dispatchBeforeCloseEvent({closeTarget:e??null})&&(this.state=`closing`,this.inert=!0,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()))}_isZeroAnimationDuration(){return C(this,`--sbb-popover-animation-duration`)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.overlay&&(this._resizeController.unobserve(this.overlay),this.overlay.firstElementChild?.scrollTo(0,0)),this.removeAttribute(`tabindex`),this._skipCloseFocus||(this._nextFocusedElement||this._triggerElement)?.focus(),this._escapableOverlayController.disconnect(),this._openStateController?.abort(),this._focusTrapController.enabled=!1,this.dispatchCloseEvent({closeTarget:this._popoverCloseElement??null})}_handleOpening(){this.state=`opened`,this.inert=!1,this._setPopoverFocus(),this._focusTrapController.enabled=!0,this.overlay&&this._resizeController.observe(this.overlay),this.dispatchOpenEvent()}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.state=`closed`,N.add(this),this.hasUpdated&&this._configureTrigger()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!i&&(!e||e===`trigger`||e===`hoverTrigger`)&&this.hasUpdated&&this._configureTrigger()}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._openStateController?.abort(),N.delete(this),this._blurTimeout&&clearTimeout(this._blurTimeout)}_configureTrigger(){if(!i){if(this.hydrationRequired){this.hydrationComplete.then(()=>this._configureTrigger());return}this.configureTrigger(this._triggerElement??null)}}configureTrigger(e){this._triggerAbortController?.abort(),E(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(k(this,this._triggerElement,`dialog`,this.state),this._triggerAbortController=new AbortController,this.registerTriggerListeners(this._triggerAbortController.signal))}registerTriggerListeners(e){this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:e})}_attachWindowEvents(){this._openStateController=new AbortController,document.addEventListener(`scroll`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setPopoverPosition(),{passive:!0,signal:this._openStateController.signal}),window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._openStateController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._openStateController.signal})}_closeOnSbbPopoverCloseClick(e){let t=e.composedPath().find((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&(e.hasAttribute(`sbb-popover-close`)||e.localName===`sbb-popover-close-button`)&&!e.hasAttribute(`disabled`));t&&(clearTimeout(this.closeTimeout),this.close(t))}_onPopoverAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_setPopoverFocus(){!this._focusTrapController.focusInitialElement()&&this._openStateController&&(this.setAttribute(`tabindex`,`0`),this.focus({preventScroll:!0}),this.addEventListener(`blur`,e=>{this._blurTimeout=setTimeout(()=>{if(document.visibilityState!==`hidden`){if(this.removeAttribute(`tabindex`),this.contains(e.relatedTarget)||e.relatedTarget===this.trigger)return;(this.state===`opened`||this.state===`opening`)&&(this._skipCloseFocus=!0),this.close()}})},{signal:this._openStateController.signal}))}_setPopoverPosition(){if(!this.overlay||!this._triggerElement)return;let e=v(this.overlay,this._triggerElement,this.shadowRoot.querySelector(`.sbb-popover__container`),{verticalOffset:16,horizontalOffset:32,centered:!0,responsiveHeight:!0}),t=e.alignment.vertical;for(let e of[`above`,`below`])this.toggleState(`position-${e}`,e===t);let n=this.overlay.offsetWidth,r=document.documentElement.clientWidth,i=Math.max(2,Math.min(e.left,r-n-2)),a=this._triggerElement.getBoundingClientRect(),o=parseFloat(getComputedStyle(this.overlay).borderTopLeftRadius)||0,s=a.left-i+a.width/2-8,c=Math.max(o,Math.min(s,n-o-16));this.style.setProperty(`--_sbb-popover-position-x`,`${i}px`),this.style.setProperty(`--_sbb-popover-position-y`,`${e.top}px`),this.style.setProperty(`--_sbb-popover-arrow-position-x`,`${c}px`),this.style.setProperty(`--_sbb-popover-max-height`,e.maxHeight)}dispatchBeforeCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`beforeclose`,{closeTarget:t,cancelable:!0}))}dispatchCloseEvent(e){let t=e?.closeTarget??null;return this.dispatchEvent(new P(`close`,{closeTarget:t,cancelable:!1}))}render(){return r`
|
|
3
3
|
<div class="sbb-popover__container">
|
|
4
4
|
<div
|
|
5
5
|
@animationend=${this._onPopoverAnimationEnd}
|
package/safety-theme.css
CHANGED
|
@@ -1314,7 +1314,7 @@ summary {
|
|
|
1314
1314
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1315
1315
|
--_sbb-dialog-max-width: 100%;
|
|
1316
1316
|
--_sbb-dialog-max-height: calc(
|
|
1317
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1317
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1318
1318
|
);
|
|
1319
1319
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1320
1320
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/sidebar.pure.js
CHANGED
|
@@ -3,7 +3,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbSecondaryButto
|
|
|
3
3
|
`,E=`:host{position:absolute;inset:0}
|
|
4
4
|
`,D=`:host{outline-color:var(--sbb-focus-outline-color);height:100%;display:block;position:relative;overflow:auto}
|
|
5
5
|
`;const O=n(E),k=n(D);n(T);var A=`:host{--sbb-sidebar-container-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-sidebar-container-animation-easing:var(--sbb-animation-easing);--sbb-sidebar-container-backdrop-opacity:0;--sbb-sidebar-container__backdrop-visibility:hidden;--sbb-sidebar-container-backdrop-animation-duration:var(--sbb-sidebar-container-animation-duration);display:block;overflow:hidden}@media (forced-colors:active){:host{--sbb-sidebar-container-backdrop-opacity:.5}}.sbb-sidebar-container-backdrop{visibility:var(--sbb-sidebar-container__backdrop-visibility);opacity:var(--sbb-sidebar-container-backdrop-opacity);background-color:var(--sbb-color-black);z-index:3;transition-duration:var(--sbb-sidebar-container-backdrop-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:opacity,visibility;position:absolute;inset:0}
|
|
6
|
-
`;const j
|
|
6
|
+
`;const j=/* @__PURE__ */ new Set;let M;var N=class extends a{constructor(){super(...arguments),this._forcedClosedSidebars=/* @__PURE__ */ new WeakSet}static{this.elementName=`sbb-sidebar-container`}static{this.styles=[O,n(A)]}get sidebars(){return Array.from(this.querySelectorAll?.(`:scope > sbb-sidebar`)??[])}get start(){return this.querySelector?.(`:scope > sbb-sidebar:not([position='end'])`)}get end(){return this.querySelector?.(`:scope > sbb-sidebar[position='end']`)}connectedCallback(){super.connectedCallback(),M??=!t&&new ResizeObserver(()=>this._handleWidthChange()),!t&&j.size===0&&M.observe(document?.documentElement),j.add(this),this._handleWidthChange()}disconnectedCallback(){super.disconnectedCallback(),j.delete(this),j.size===0&&M?.disconnect()}firstUpdated(e){super.firstUpdated(e),this._handleWidthChange()}_handleWidthChange(){Array.from(j).sort((e,t)=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING).forEach(e=>e._calculateSpaceState())}async _calculateSpaceState(){if(t)return;let e=this.parentElement?.closest?.(`sbb-sidebar-container`)?.sidebars??[];for(let t of e)await t.updateComplete.then(()=>t.animationComplete);let n=this.offsetWidth??0;if(n===0)return;let r=this.sidebars,i=e.some(e=>e.matches(`:is(:state(mode-over-forced),[state--mode-over-forced])`))??!1,a=n-r.filter(e=>e.mode===`side`).reduce((e,t)=>e+(t.offsetWidth??0),0)<320;for(let e of r){let t=e.matches(`:is(:state(mode-over-forced),[state--mode-over-forced])`),n=g(e);n.toggle(`mode-over-forced`,a),e.mode===`side`&&((a||i)&&e.opened&&!t?(e.isOpen&&!e.matches(`:is(:state(skip-animation),[state--skip-animation])`)&&n.add(`mode-over-forced-closing`),e.opened=!1,this._forcedClosedSidebars.add(e),e.matches(`:is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])`)&&e.updateComplete.then(()=>e.animationComplete).then(()=>n.delete(`mode-over-forced-closing`))):!a&&!i&&this._forcedClosedSidebars.has(e)&&(e.cedeFocus(),e.opened=!0,this._forcedClosedSidebars.delete(e)))}}render(){return e`<div
|
|
7
7
|
class="sbb-sidebar-container-backdrop"
|
|
8
8
|
@click=${()=>this.sidebars.forEach(e=>e.close())}
|
|
9
9
|
></div>
|
package/standard-theme.css
CHANGED
|
@@ -1314,7 +1314,7 @@ summary {
|
|
|
1314
1314
|
--sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
|
|
1315
1315
|
--_sbb-dialog-max-width: 100%;
|
|
1316
1316
|
--_sbb-dialog-max-height: calc(
|
|
1317
|
-
100dvh - env(safe-area-inset-top, 0) - var(--sbb-spacing-fixed-
|
|
1317
|
+
100dvh - env(safe-area-inset-top, 0) - min(var(--sbb-spacing-fixed-3x), 2dvh)
|
|
1318
1318
|
);
|
|
1319
1319
|
--sbb-divider-color: var(--sbb-background-color-4);
|
|
1320
1320
|
--sbb-divider-color-negative: var(--sbb-background-color-4-negative);
|
package/status.pure.js
CHANGED
|
@@ -7,4 +7,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,uns
|
|
|
7
7
|
<slot></slot>
|
|
8
8
|
</p>
|
|
9
9
|
</span>
|
|
10
|
-
`}constructor(){super(...arguments),this._statusTypes
|
|
10
|
+
`}constructor(){super(...arguments),this._statusTypes=/* @__PURE__ */ new Map([[`info`,`circle-information-small`],[`success`,`circle-tick-small`],[`warning`,`circle-exclamation-point-small`],[`error`,`circle-cross-small`],[`pending`,`circle-three-dots-small`],[`incomplete`,`circle-dotted-part-x-small`],[`not-started`,`circle-dotted-small`],[`in-progress`,`circle-dotted-part-small`]]),this.#e=t(this,u,`info`),t(this,d)}}})();export{c as SbbStatusElement};
|
package/time-input.pure.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,SbbLanguageController as s,i18nTimeInputChange as c,i18nTimeInvalid as l,i18nTimeMax as u,i18nTimeMaxLength as d,sbbLiveAnnouncer as f}from"./core.js";var p=`:host{min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
|
|
2
|
-
`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!this.isSelected()||t!==null&&!this._isSameTime(t,this._parseValue(this.value))){if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e
|
|
2
|
+
`;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!this.isSelected()||t!==null&&!this._isSameTime(t,this._parseValue(this.value))){if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=/* @__PURE__ */ new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,u[this.language.current])):(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,l[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeOverflow`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};
|
package/toast.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbTransparentButtonElement as o}from"./button.pure.js";import{SbbDarkModeController as s,SbbLanguageController as c,SbbOpenCloseBaseElement as l,SbbReadonlyMixin as u,forceType as d,i18nCloseAlert as f,isZeroAnimationDuration as p,popoverResetStyles as m}from"./core.js";import{SbbDividerElement as h}from"./divider.pure.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-toast-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-toast-container-display:flex;display:block}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-start}:host([position=top-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-start}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color:var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;display:var(--sbb-toast-container-display,none);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position);inset:0}.sbb-toast{z-index:var(--sbb-toast-z-index,var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);color:var(--sbb-toast-text-color);background-color:var(--sbb-toast-background-color);display:flex}:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast-wrapper{align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);display:flex}slot:not([name=icon]),.sbb-toast__close{color-scheme:light only}.sbb-toast__content{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-letter-spacing-heading);flex:1 1 0}.sbb-toast__close{align-items:center;display:flex}.sbb-toast__close-divider{padding-block:var(--sbb-toast-padding-block)}.sbb-toast__close-button{margin-inline:var(--sbb-spacing-responsive-xxxs)}@keyframes open{0%{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}to{visibility:visible;opacity:1;translate:0}}@keyframes close{0%{visibility:visible;opacity:1;translate:0}to{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}}
|
|
2
|
-
`;const v
|
|
2
|
+
`;const v=/* @__PURE__ */ new Set;let y=(()=>{let y=g(u(l)),b,x=[],S=[],C,w=[],T=[],E,D=[],O=[];return class extends y{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;b=[d(),a({type:Number})],C=[a({reflect:!0})],E=[a()],e(this,null,b,{kind:`accessor`,name:`timeout`,static:!1,private:!1,access:{has:e=>`timeout`in e,get:e=>e.timeout,set:(e,t)=>{e.timeout=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},w,T),e(this,null,E,{kind:`accessor`,name:`politeness`,static:!1,private:!1,access:{has:e=>`politeness`in e,get:e=>e.politeness,set:(e,t)=>{e.politeness=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toast`}static{this.elementDependencies=[o,h]}static{this.styles=[m,i(_)]}#e;get timeout(){return this.#e}set timeout(e){this.#e=e}#t;get position(){return this.#t}set position(e){this.#t=e}#n;get politeness(){return this.#n}set politeness(e){this.#n=e}constructor(){super(),this.#e=t(this,x,0),this.#t=(t(this,S),t(this,w,`bottom-center`)),this.#n=(t(this,T),t(this,D,`polite`)),this._closeTimeout=t(this,O),this._language=new c(this),this._darkModeController=new s(this,()=>{this._syncSlottedElements(),this.requestUpdate()}),this.addEventListener?.(`click`,e=>this._onClick(e))}connectedCallback(){this.popover=`manual`,super.connectedCallback(),v.add(this)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._closeTimeout),v.delete(this)}willUpdate(e){super.willUpdate(e),e.has(`politeness`)&&(this.internals.ariaLive=this.politeness)}open(){this.state!==`opened`&&this.state!==`opening`&&this.dispatchBeforeOpenEvent()&&(this._closeOtherToasts(),this.showPopover?.(),this.state=`opening`,this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state!==`closed`&&this.state!==`closing`&&this.dispatchBeforeCloseEvent()&&(clearTimeout(this._closeTimeout),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.dispatchCloseEvent()}_handleOpening(){if(this.state=`opened`,this.dispatchOpenEvent(),this.timeout){let e=globalThis,t=e[e.Zone?.__symbol__?.(`setTimeout`)]??e.setTimeout;this._closeTimeout=t(()=>this.close(),this.timeout)}}_onClick(e){e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&e.hasAttribute(`sbb-toast-close`)&&!e.hasAttribute(`disabled`))&&this.close()}_isZeroAnimationDuration(){return p(this,`--sbb-toast-animation-duration`)}_onContentSlotChange(e){let t=e.target.assignedNodes();if(t.some(e=>e.nodeType===Node.TEXT_NODE)){let e=document.createElement(`span`);this.prepend(e),e.append(...t)}this._syncSlottedElements()}_syncSlottedElements(){this.querySelectorAll(`sbb-transparent-button, sbb-transparent-button-link`).forEach(e=>{e.negative=this._isLightMode()}),this.querySelectorAll(`sbb-link, sbb-link-button, sbb-link-static`).forEach(e=>{e.negative=this._isLightMode()})}_onToastAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_closeOtherToasts(){v.forEach(e=>{(e.state===`opened`||e.state===`opening`)&&e.close()})}_isLightMode(){return!this._darkModeController.matches()}render(){return n`
|
|
3
3
|
<div class="sbb-toast__overlay-container">
|
|
4
4
|
<div class="sbb-toast" @animationend=${this._onToastAnimationEnd}>
|
|
5
5
|
<div class="sbb-toast-wrapper">
|
package/tooltip.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbEscapableOverlayController as s,SbbOpenCloseBaseElement as c,SbbOverlayPositionController as l,appendAriaElements as u,idReference as d,isAndroid as f,isIOS as p,isZeroAnimationDuration as m,popoverResetStyles as h,queueDomContentLoaded as g,readConfig as _,removeAriaElements as v,sbbInputModalityDetector as y,sbbOverlayOutsidePointerEventListener as b}from"./core.js";var x=`:host{--sbb-tooltip-max-width:min(25rem, calc(100vw - var(--sbb-spacing-fixed-2x)));--sbb-tooltip-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);pointer-events:var(--sbb-tooltip-pointer-events,all);z-index:var(--sbb-tooltip-z-index,var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);font-size:var(--sbb-tooltip-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:none;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name:open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name:close;--sbb-tooltip-pointer-events:none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\\ start],[data-position$=\\ end])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}
|
|
2
|
-
`;const S=f||p,C
|
|
2
|
+
`;const S=f||p,C=/* @__PURE__ */ new WeakMap;let w=(()=>{let f=o(c),p=[],w,T=[],E=[],D,O,k;return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;w=[d(),a()],D=[a({attribute:`open-delay`,type:Number})],O=[a({attribute:`close-delay`,type:Number})],k=[a({attribute:`long-press-close-delay`,type:Number})],e(this,null,w,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},T,E),e(this,null,D,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,p),e(this,null,O,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,p),e(this,null,k,{kind:`setter`,name:`longPressCloseDelay`,static:!1,private:!1,access:{has:e=>`longPressCloseDelay`in e,set:(e,t)=>{e.longPressCloseDelay=t}},metadata:t},null,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tooltip`}static{this.role=`tooltip`}static{this.styles=[h,i(x)]}static{r||g(()=>this._initializeTooltipOutlet())}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}set openDelay(e){this._openDelay=e}get openDelay(){return this._openDelay??_().tooltip?.openDelay??0}set closeDelay(e){this._closeDelay=e}get closeDelay(){return this._closeDelay??_().tooltip?.closeDelay??0}set longPressCloseDelay(e){this._longPressCloseDelay=+e}get longPressCloseDelay(){return this._longPressCloseDelay??_().tooltip?.longPressCloseDelay??1500}constructor(){super(),this.#e=(t(this,p),t(this,T,null)),this._openDelay=(t(this,E),null),this._closeDelay=null,this._triggerElement=null,this._escapableOverlayController=new s(this),this._overlayController=new l(this),this.addEventListener(`mouseleave`,e=>{(this.state===`opened`||this.state===`opening`)&&(!e.relatedTarget||!this._triggerElement?.contains(e.relatedTarget))&&this._delayedClose()},{passive:!0}),this.addEventListener(`overlayOutsidePointer`,()=>this.close(),{passive:!0}),this.addEventListener(`animationend`,e=>this._onTooltipAnimationEnd(e),{passive:!0})}static _initializeTooltipOutlet(){this._tooltipOutlet=document.createElement(`div`),this._tooltipOutlet.classList.add(`sbb-overlay-outlet`),document.body.appendChild(this._tooltipOutlet),new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleTooltipTrigger(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleTooltipTrigger(e),this._findAndHandleTooltipTriggers(e)}).observe(document.documentElement,{attributeFilter:[`sbb-tooltip`,`sbb-tooltip-open-delay`,`sbb-tooltip-close-delay`,`sbb-tooltip-position`],childList:!0,subtree:!0}),this._findAndHandleTooltipTriggers(document.body)}static _findAndHandleTooltipTriggers(e){e.querySelectorAll(`[sbb-tooltip]`).forEach(e=>this._handleTooltipTrigger(e))}static _handleTooltipTrigger(e){let t=e.getAttribute(`sbb-tooltip`),n=C.get(e);if(t&&e.isConnected){n||(n=document.createElement(`sbb-tooltip`),C.set(e,n),this._tooltipOutlet.appendChild(n),n.trigger=e),n.textContent=t,n.openDelay=e.hasAttribute(`sbb-tooltip-open-delay`)?+e.getAttribute(`sbb-tooltip-open-delay`):null,n.closeDelay=e.hasAttribute(`sbb-tooltip-close-delay`)?+e.getAttribute(`sbb-tooltip-close-delay`):null;let r=e.hasAttribute(`sbb-tooltip-position`)?e.getAttribute(`sbb-tooltip-position`).split(`,`).map(e=>e.trim()):e.tooltipPositions;r&&r.length>0?(n.style.setProperty(`--sbb-overlay-position-area`,r[0]),n.style.setProperty(`--sbb-overlay-position-try-fallbacks`,r.slice(1).join(`, `))):(n.style.removeProperty(`--sbb-overlay-position-area`),n.style.removeProperty(`--sbb-overlay-position-try-fallbacks`))}else n&&(C.delete(e),n._destroy?.())}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.state=`closed`,b.connect(this),this.hasUpdated&&this.trigger&&this._attach(this.trigger)}disconnectedCallback(){super.disconnectedCallback(),b.disconnect(this),this._detach()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`trigger`)&&this.hasUpdated&&this._attach(this.trigger)}firstUpdated(e){super.firstUpdated(e),this._attach(this.trigger)}open(){this._resetOpenCloseTimeout(),!(this.state!==`closed`&&this.state!==`closing`||this.disabled||!this.trigger||!this.dispatchBeforeOpenEvent())&&(this.showPopover?.(),this.state=`opening`,this._overlayController.connect(this.trigger),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._resetOpenCloseTimeout(),(this.state===`opened`||this.state===`opening`)&&(this.dispatchBeforeCloseEvent(),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_delayedOpen(){this._resetOpenCloseTimeout(),this._openTimeout=setTimeout(()=>this.open(),this.openDelay)}_handleOpening(){this.state=`opened`,this._escapableOverlayController.connect(),this.dispatchOpenEvent()}_delayedClose(){this._resetOpenCloseTimeout(),this._closeTimeout=setTimeout(()=>this.close(),this.closeDelay)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this._overlayController.disconnect(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._openStateController?.abort()}_onTooltipAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_attach(e){this._triggerElement&&this._detach(),this._triggerElement=e,this._triggerElement&&(this._triggerElement.ariaDescribedByElements=u(this._triggerElement.ariaDescribedByElements,this),this._addTriggerEventHandlers())}_detach(){this._triggerAbortController?.abort(),this._openStateController?.abort(),this._resetOpenCloseTimeout(),clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._triggerElement&&=(this._triggerElement.ariaDescribedByElements=v(this._triggerElement.ariaDescribedByElements,this),null)}_destroy(){this._detach(),this.remove()}_addTriggerEventHandlers(){let e=this._triggerElement;if(!e)return;this._triggerAbortController?.abort(),this._triggerAbortController=new AbortController;let t={signal:this._triggerAbortController.signal,passive:!0};S||(e.addEventListener(`mouseenter`,()=>this._delayedOpen(),t),e.addEventListener(`mouseleave`,e=>{let t=e.relatedTarget;(!t||t!==this)&&this._delayedClose()},t),e.addEventListener(`blur`,()=>this.close(),t),e.addEventListener(`focus`,()=>{y.mostRecentModality===`keyboard`&&this._delayedOpen()},t)),e.addEventListener(`touchstart`,()=>{clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._longPressOpenTimeout=setTimeout(()=>this.open(),500)},t),e.addEventListener(`touchend`,()=>{clearTimeout(this._longPressOpenTimeout),this._longPressCloseTimeout=setTimeout(()=>this.close(),this.longPressCloseDelay)},t),e.addEventListener(`touchcancel`,()=>{clearTimeout(this._longPressOpenTimeout)},t)}_isZeroAnimationDuration(){return m(this,`--sbb-tooltip-animation-duration`)}_resetOpenCloseTimeout(){clearTimeout(this._openTimeout),clearTimeout(this._closeTimeout)}render(){return n`
|
|
3
3
|
<div class="sbb-tooltip">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|