@sbb-esta/lyne-elements-dev 5.4.1-dev.1785859158 → 5.4.1-dev.1785915890

package/chip.pure.js

@@ -14,4 +14,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
       </sbb-mini-button>
       <span class="sbb-screen-reader-only">, ${g[this._language.current]}</span>
     `}}})();var w=`:host{gap:var(--sbb-chip-group-gap);width:100%;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text);flex-wrap:wrap;align-items:center;display:flex}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-s)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-s)}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-base-lm)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-m)}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-m)}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-l)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-l)}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}
-`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.elementDependencies=[C]}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips()}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t))}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault()}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){this.disabled=this._inputElement?.disabled??!1,this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};
+`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.elementDependencies=[C]}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips(),e.has(`disabled`)&&this._inputElement&&this._inputElement.disabled!==this.disabled&&(this._inputElement.disabled=this.disabled)}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t))}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault()}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){let e=this._inputElement?.disabled??!1;this.disabled!==e&&(this.disabled=e),this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};

package/development/chip.pure.js

@@ -320,6 +320,9 @@ let SbbChipGroupElement = (() => {
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
 			if (changedProperties.has("disabled") || changedProperties.has("formDisabled") || changedProperties.has("negative")) this._proxyStateToChips();
+			if (changedProperties.has("disabled") && this._inputElement) {
+				if (this._inputElement.disabled !== this.disabled) this._inputElement.disabled = this.disabled;
+			}
 		}
 		/** @internal */
 		formResetCallback() {
@@ -482,7 +485,8 @@ let SbbChipGroupElement = (() => {
 			this.insertBefore(newChip, this._inputElement ?? this.querySelector("input"));
 		}
 		_reactToInputChanges() {
-			this.disabled = this._inputElement?.disabled ?? false;
+			const inputDisabled = this._inputElement?.disabled ?? false;
+			if (this.disabled !== inputDisabled) this.disabled = inputDisabled;
 			this._proxyStateToChips();
 		}
 		_proxyStateToChips() {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.1-dev.1785859158",
+  "version": "5.4.1-dev.1785915890",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/35046027ac8bf842144393ffe984a99880323495"
+    "https://github.com/sbb-design-systems/lyne-components/commit/25dc6b15a63e6784527589a79cbf6a8c7c24c40c"
   ],
   "type": "module",
   "exports": {