@sbb-esta/lyne-elements-dev 5.1.0-dev.1782868150 → 5.1.0-dev.1782984019

package/custom-elements.json

@@ -108950,6 +108950,10 @@
                   "type": {
                     "text": "FileList"
                   }
+                },
+                {
+                  "name": "emitNativeEvents",
+                  "default": "false"
                 }
               ]
             },
@@ -108981,6 +108985,16 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_dispatchNativeEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_dispatchFileChangedEvent",
@@ -110098,6 +110112,10 @@
                   "type": {
                     "text": "FileList"
                   }
+                },
+                {
+                  "name": "emitNativeEvents",
+                  "default": "false"
                 }
               ],
               "inheritedFrom": {
@@ -110141,6 +110159,20 @@
                 "module": "file-selector/common/file-selector-common.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "_dispatchNativeEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbFileSelectorCommonElementMixin",
+                "module": "file-selector/common/file-selector-common.js"
+              }
+            },
             {
               "kind": "method",
               "name": "_dispatchFileChangedEvent",
@@ -111572,6 +111604,10 @@
                   "type": {
                     "text": "FileList"
                   }
+                },
+                {
+                  "name": "emitNativeEvents",
+                  "default": "false"
                 }
               ],
               "inheritedFrom": {
@@ -111615,6 +111651,20 @@
                 "module": "file-selector/common/file-selector-common.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "_dispatchNativeEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbFileSelectorCommonElementMixin",
+                "module": "file-selector/common/file-selector-common.js"
+              }
+            },
             {
               "kind": "method",
               "name": "_dispatchFileChangedEvent",

package/development/file-selector.pure.js

@@ -279,13 +279,14 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				if (fileInput.files) this.createFileList(fileInput.files);
 				forwardEvent(event, this);
 			}
-			createFileList(files) {
+			createFileList(files, emitNativeEvents = false) {
 				const fileArray = Array.from(files);
 				if (!this.multiple && files.length > 1 || this.accept && fileArray.some((file) => !this.accept.split(",").some((a) => file.name.endsWith(a.trim())))) return;
 				if (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0) this.files = fileArray;
 				else this.files = fileArray.filter((newFile) => this.files.findIndex((oldFile) => this._checkFileEquality(newFile, oldFile)) === -1).concat(this.files);
 				this._updateA11yLiveRegion();
 				this._dispatchFileChangedEvent();
+				if (emitNativeEvents) this._dispatchNativeEvents();
 			}
 			getButtonLabel() {
 				return this.multiple ? i18nFileSelectorButtonLabelMultiple[this.language.current] : i18nFileSelectorButtonLabel[this.language.current];
@@ -293,6 +294,10 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 			_removeFile(file) {
 				this.files = this.files.filter((f) => !this._checkFileEquality(file, f));
 				this._updateA11yLiveRegion();
+				this._dispatchNativeEvents();
+				this._dispatchFileChangedEvent();
+			}
+			_dispatchNativeEvents() {
 				/** The input event fires when the value has been changed as a direct result of a user action. */
 				this.dispatchEvent(new InputEvent("input", {
 					bubbles: true,
@@ -304,7 +309,6 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				* for each alteration to an element's value.
 				*/
 				this.dispatchEvent(new Event("change", { bubbles: true }));
-				this._dispatchFileChangedEvent();
 			}
 			_dispatchFileChangedEvent() {
 				const filechanged = this.files;
@@ -367,7 +371,7 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				if (!this.disabled && !this.formDisabled) {
 					this._setDragState();
 					this._blockEvent(event);
-					this.createFileList(event.dataTransfer.files);
+					this.createFileList(event.dataTransfer.files, true);
 				}
 			}
 			_blockEvent(event) {

package/file-selector.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{html as o,unsafeStatic as s}from"lit/static-html.js";import{SbbSecondaryButtonElement as c,SbbSecondaryButtonStaticElement as l}from"./button.pure.js";import{SbbDisabledMixin as u,SbbElement as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,forceType as m,forwardEvent as h,i18nFileSelectorButtonLabel as g,i18nFileSelectorButtonLabelMultiple as _,i18nFileSelectorCurrentlySelected as v,i18nFileSelectorDeleteFile as y,i18nFileSelectorSubtitleLabel as b,i18nFileSelectorSubtitleLabelMultiple as x,sbbInputModalityDetector as S,screenReaderOnlyStyles as C,ɵstateController as w}from"./core.js";import{SbbIconElement as T}from"./icon.pure.js";var E=`:host{--sbb-file-selector-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));width:20rem;display:block}@media (forced-colors:active){:host(:disabled){--sbb-file-selector-color:GrayText;--sbb-file-selector-subtitle-color:GrayText;--sbb-file-selector-border-color:GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color:var(--sbb-background-color-3);--sbb-file-selector-border-color:light-dark(var(--sbb-color-storm),var(--sbb-color-anthracite))}@media (forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color:Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex}.sbb-file-selector__file-list{row-gap:var(--sbb-spacing-fixed-3x);padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);flex-direction:column;margin-block:0;display:flex}.sbb-file-selector__file{gap:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-s);justify-content:space-between;align-items:center;display:flex}.sbb-file-selector__file-details{justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);flex:1;display:flex;overflow:auto}.sbb-file-selector__file-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-file-selector__file-size{white-space:nowrap;color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}
-`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],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},T,O),e(this,null,k,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e){let t=Array.from(e);!this.multiple&&e.length>1||this.accept&&t.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?this.files=t:this.files=t.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})),this._dispatchFileChangedEvent()}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
+`,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],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},T,O),e(this,null,k,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{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},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e,t=!1){let n=Array.from(e);!this.multiple&&e.length>1||this.accept&&n.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?this.files=n:this.files=n.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent(),t&&this._dispatchNativeEvents())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this._dispatchNativeEvents(),this._dispatchFileChangedEvent()}_dispatchNativeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
       <${s(e.WRAPPER)} class="sbb-file-selector__file-list">
         ${this.files.map(t=>o`
             <${s(e.ELEMENT)} class="sbb-file-selector__file">
@@ -15,7 +15,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,
               ></sbb-secondary-button>
             </${s(e.ELEMENT)}>`)}
       </${s(e.WRAPPER)}>
-    `}_onDragEnter(e){this._counter++,!this.disabled&&!this.formDisabled&&(this._setDragState(e.target,!0),this._blockEvent(e))}_onDragLeave(e){this._counter--,!this.disabled&&!this.formDisabled&&e.target===this._dragTarget&&this._counter===0&&(this._setDragState(),this._blockEvent(e))}_onFileDrop(e){this._counter=0,!this.disabled&&!this.formDisabled&&(this._setDragState(),this._blockEvent(e),this.createFileList(e.dataTransfer.files))}_blockEvent(e){e.stopPropagation(),e.preventDefault()}_setDragState(e=void 0,t=!1){this._dragTarget=e,this.toggleState(`active`,t),w(this.loadButton).toggle(`active`,t)}render(){let e=this.accessibilityLabel?`${this.getButtonLabel()} - ${this.accessibilityLabel}`:void 0;return o`
+    `}_onDragEnter(e){this._counter++,!this.disabled&&!this.formDisabled&&(this._setDragState(e.target,!0),this._blockEvent(e))}_onDragLeave(e){this._counter--,!this.disabled&&!this.formDisabled&&e.target===this._dragTarget&&this._counter===0&&(this._setDragState(),this._blockEvent(e))}_onFileDrop(e){this._counter=0,!this.disabled&&!this.formDisabled&&(this._setDragState(),this._blockEvent(e),this.createFileList(e.dataTransfer.files,!0))}_blockEvent(e){e.stopPropagation(),e.preventDefault()}_setDragState(e=void 0,t=!1){this._dragTarget=e,this.toggleState(`active`,t),w(this.loadButton).toggle(`active`,t)}render(){let e=this.accessibilityLabel?`${this.getButtonLabel()} - ${this.accessibilityLabel}`:void 0;return o`
         <div
           class="sbb-file-selector__input-container"
           @dragenter=${this._onDragEnter}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.1.0-dev.1782868150",
+  "version": "5.1.0-dev.1782984019",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/b12ab53c043121b29501e2d2fae7a1d3ea027324"
+    "https://github.com/sbb-design-systems/lyne-components/commit/57be39bc1af5a0e83e8ad2e4d60ad90e18d9553d"
   ],
   "type": "module",
   "exports": {