@sbb-esta/lyne-elements 1.16.0 → 2.0.0

package/file-selector/file-selector-dropzone.js

@@ -0,0 +1,97 @@
+var p = (e) => {
+  throw TypeError(e);
+};
+var m = (e, i, s) => i.has(e) || p("Cannot " + s);
+var g = (e, i, s) => (m(e, i, "read from private field"), s ? s.call(e) : i.get(e)), _ = (e, i, s) => i.has(e) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, s), n = (e, i, s, r) => (m(e, i, "write to private field"), r ? r.call(e, s) : i.set(e, s), s);
+import { __runInitializers as b, __esDecorate as u } from "tslib";
+import { css as y, LitElement as z } from "lit";
+import { customElement as x, property as S } from "lit/decorators.js";
+import { ref as D } from "lit/directives/ref.js";
+import { html as k } from "lit/static-html.js";
+import { slotState as C, forceType as E } from "../core/decorators.js";
+import { i18nFileSelectorSubtitleLabel as $, i18nFileSelectorButtonLabel as F } from "../core/i18n.js";
+import { SbbFileSelectorCommonElementMixin as L, fileSelectorCommonStyle as T } from "./common.js";
+import "../button/secondary-button.js";
+import "../button/secondary-button-static.js";
+import "../icon.js";
+const w = y`*,:before,:after{box-sizing:border-box}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
+let Q = (() => {
+  var l, a;
+  let e = [x("sbb-file-selector-dropzone"), C()], i, s = [], r, c = L(z), d, f = [], h = [];
+  return a = class extends c {
+    constructor() {
+      super(...arguments);
+      _(this, l);
+      n(this, l, b(this, f, "")), this._counter = (b(this, h), 0);
+    }
+    /** The title displayed in `dropzone` variant. */
+    get titleContent() {
+      return g(this, l);
+    }
+    set titleContent(t) {
+      n(this, l, t);
+    }
+    _blockEvent(t) {
+      t.stopPropagation(), t.preventDefault();
+    }
+    _onDragEnter(t) {
+      this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(t.target, !0), this._blockEvent(t));
+    }
+    _onDragLeave(t) {
+      this._counter--, !this.disabled && !this.formDisabled && t.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(t));
+    }
+    _onFileDrop(t) {
+      this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(t), this.createFileList(t.dataTransfer.files));
+    }
+    _setDragState(t = void 0, o = !1) {
+      this._dragTarget = t, this.toggleAttribute("data-active", o), this.loadButton.toggleAttribute("data-active", o);
+    }
+    renderTemplate(t) {
+      return k`
+      <div
+        class="sbb-file-selector__input-container"
+        @dragenter=${this._onDragEnter}
+        @dragover=${this._blockEvent}
+        @dragleave=${this._onDragLeave}
+        @drop=${this._onFileDrop}
+      >
+        <label>
+          <span class="sbb-file-selector__dropzone-area">
+            <span class="sbb-file-selector__dropzone-area--icon">
+              <sbb-icon
+                name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
+              ></sbb-icon>
+            </span>
+            <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
+            <span class="sbb-file-selector__dropzone-area--subtitle">
+              ${$[this.language.current]}
+            </span>
+            <span class="sbb-file-selector__dropzone-area--button">
+              <sbb-secondary-button-static
+                size=${this.size}
+                ?disabled=${this.disabled || this.formDisabled}
+                ${D((o) => {
+        this.loadButton = o;
+      })}
+              >
+                ${F[this.language.current]}
+              </sbb-secondary-button-static>
+            </span>
+          </span>
+          ${t}
+        </label>
+      </div>
+    `;
+    }
+  }, l = new WeakMap(), r = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    d = [E(), S({ attribute: "title-content" })], u(a, null, d, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (o) => "titleContent" in o, get: (o) => o.titleContent, set: (o, v) => {
+      o.titleContent = v;
+    } }, metadata: t }, f, h), u(null, i = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, s), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = [T, w], a.events = {
+    fileChangedEvent: "fileChanged"
+  }, b(r, s), r;
+})();
+export {
+  Q as SbbFileSelectorDropzoneElement
+};

package/file-selector/file-selector.d.ts

@@ -1,88 +1,2 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-import { FormRestoreReason, FormRestoreState } from '../core/mixins.js';
-export type DOMEvent = globalThis.Event;
-declare const SbbFileSelectorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedMixinType<string>> & typeof LitElement;
-/**
- * It allows to select one or more file from storage devices and display them.
- *
- * @slot error - Use this to provide a `sbb-form-error` to show an error message.
- * @event {CustomEvent<File[]>} fileChanged - An event which is emitted each time the file list changes.
- * @event change - An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value
- * @event input - An event which is emitted each time the value changes as a direct result of a user action.
- * @overrideType value - string | null
- */
-export declare class SbbFileSelectorElement extends SbbFileSelectorElement_base {
-    static styles: CSSResultGroup;
-    static readonly events: {
-        readonly fileChangedEvent: "fileChanged";
-    };
-    /** Whether the component has a dropzone area or not. */
-    accessor variant: 'default' | 'dropzone';
-    /** Size variant, either s or m. */
-    accessor size: 's' | 'm';
-    /** Whether more than one file can be selected. */
-    accessor multiple: boolean;
-    /** Whether the newly added files should override the previously added ones. */
-    accessor multipleMode: 'default' | 'persistent';
-    /** A comma-separated list of allowed unique file type specifiers. */
-    accessor accept: string;
-    /** The title displayed in `dropzone` variant. */
-    accessor titleContent: string;
-    /** This will be forwarded as aria-label to the native input element. */
-    accessor accessibilityLabel: string;
-    /** The path of the first selected file. Empty string ('') if no file is selected */
-    set value(value: string | null);
-    get value(): string | null;
-    /**
-     * The list of selected files.
-     */
-    set files(value: File[]);
-    get files(): File[];
-    private _files;
-    /**
-     * Form type of element.
-     * @default 'file'
-     */
-    get type(): string;
-    /** An event which is emitted each time the file list changes. */
-    private _fileChangedEvent;
-    private _counter;
-    private _loadButton;
-    private _dragTarget?;
-    private _hiddenInput;
-    private _suffixes;
-    private _liveRegion;
-    private _language;
-    /**
-     * @deprecated use the 'files' property instead
-     */
-    getFiles(): File[];
-    formResetCallback(): void;
-    formStateRestoreCallback(state: FormRestoreState | null, _reason?: FormRestoreReason): void;
-    protected updateFormValue(): void;
-    private _blockEvent;
-    private _checkFileEquality;
-    private _onDragEnter;
-    private _onDragLeave;
-    private _onFileDrop;
-    private _onFocus;
-    private _onBlur;
-    private _setDragState;
-    private _readFiles;
-    private _createFileList;
-    private _removeFile;
-    /** Calculates the correct unit for the file's size. */
-    private _formatFileSize;
-    private _updateA11yLiveRegion;
-    private _renderDefaultMode;
-    private _renderDropzoneArea;
-    private _renderFileList;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sbb-file-selector': SbbFileSelectorElement;
-    }
-}
-export {};
+export * from './file-selector/file-selector.js';
 //# sourceMappingURL=file-selector.d.ts.map

package/file-selector/file-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../../src/elements/file-selector/file-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBpF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;;AAExC;;;;;;;;GAQG;AACH,qBAGM,sBAAuB,SAAQ,2BAAoD;IACvF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,wDAAwD;IACxD,SAA4B,OAAO,EAAE,SAAS,GAAG,UAAU,CAAa;IAExE,mCAAmC;IACnC,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAEnE,kDAAkD;IAClD,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,+EAA+E;IAC/E,SACgB,YAAY,EAAE,SAAS,GAAG,YAAY,CAAa;IAEnE,qEAAqE;IACrE,SAEgB,MAAM,EAAE,MAAM,CAAM;IAEpC,iDAAiD;IACjD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,wEAAwE;IACxE,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,oFAAoF;IACpF,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAM7C;IACD,IAAoB,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzC;IAED;;OAEG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,EAS7B;IACD,IAAW,KAAK,IAAI,IAAI,EAAE,CAEzB;IACD,OAAO,CAAC,MAAM,CAAc;IAE5B;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED,iEAAiE;IACjE,OAAO,CAAC,iBAAiB,CAGvB;IAIF,OAAO,CAAC,QAAQ,CAAa;IAE7B,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,YAAY,CAAoB;IACxC,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACI,QAAQ,IAAI,IAAI,EAAE;IAIT,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,CACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI;cAOY,eAAe,IAAI,IAAI;IAM1C,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,WAAW;IAUnB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,eAAe;cA4BJ,MAAM,IAAI,cAAc;CA2C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../../src/elements/file-selector/file-selector.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

package/file-selector/file-selector.js

@@ -0,0 +1,44 @@
+import { __esDecorate as m, __runInitializers as n } from "tslib";
+import { LitElement as c } from "lit";
+import { customElement as b } from "lit/decorators.js";
+import { ref as u } from "lit/directives/ref.js";
+import { html as d } from "lit/static-html.js";
+import { slotState as f } from "../core/decorators.js";
+import { i18nFileSelectorButtonLabel as p } from "../core/i18n.js";
+import { SbbFileSelectorCommonElementMixin as S, fileSelectorCommonStyle as h } from "./common.js";
+import "../button/secondary-button.js";
+import "../button/secondary-button-static.js";
+import "../icon.js";
+let j = (() => {
+  var e;
+  let o = [b("sbb-file-selector"), f()], i, a = [], t, r = S(c);
+  return e = class extends r {
+    renderTemplate(l) {
+      return d`
+      <div class="sbb-file-selector__input-container">
+        <label>
+          <sbb-secondary-button-static
+            size=${this.size}
+            icon-name="folder-open-small"
+            ?disabled=${this.disabled || this.formDisabled}
+            ${u((s) => {
+        this.loadButton = s;
+      })}
+          >
+            ${p[this.language.current]}
+          </sbb-secondary-button-static>
+          ${l}
+        </label>
+      </div>
+    `;
+    }
+  }, t = e, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    m(null, i = { value: t }, o, { kind: "class", name: t.name, metadata: l }, null, a), t = i.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), e.styles = h, e.events = {
+    fileChangedEvent: "fileChanged"
+  }, n(t, a), t;
+})();
+export {
+  j as SbbFileSelectorElement
+};

package/file-selector.d.ts

@@ -1,2 +1,4 @@
+export * from './file-selector/common.js';
+export * from './file-selector/file-selector-dropzone.js';
 export * from './file-selector/file-selector.js';
 //# sourceMappingURL=file-selector.d.ts.map

package/file-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../src/elements/file-selector.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../src/elements/file-selector.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kCAAkC,CAAC"}

package/file-selector.js

@@ -1,301 +1,3 @@
-var Z = (s) => {
-  throw TypeError(s);
-};
-var ee = (s, r, n) => r.has(s) || Z("Cannot " + n);
-var h = (s, r, n) => (ee(s, r, "read from private field"), n ? n.call(s) : r.get(s)), f = (s, r, n) => r.has(s) ? Z("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, n), o = (s, r, n, c) => (ee(s, r, "write to private field"), c ? c.call(s, n) : r.set(s, n), n);
-import { __runInitializers as l, __esDecorate as b } from "tslib";
-import { css as se, LitElement as ae, nothing as L } from "lit";
-import { customElement as le, property as d } from "lit/decorators.js";
-import { ref as z } from "lit/directives/ref.js";
-import { html as x, unsafeStatic as E } from "lit/static-html.js";
-import { sbbInputModalityDetector as te } from "./core/a11y.js";
-import { SbbLanguageController as re } from "./core/controllers.js";
-import { slotState as oe, forceType as $ } from "./core/decorators.js";
-import { EventEmitter as ne, forwardEventToHost as ce } from "./core/eventing.js";
-import { i18nFileSelectorCurrentlySelected as be, i18nFileSelectorButtonLabel as w, i18nFileSelectorSubtitleLabel as de, i18nFileSelectorDeleteFile as he } from "./core/i18n.js";
-import { SbbDisabledMixin as fe, SbbFormAssociatedMixin as ue } from "./core/mixins.js";
-import "./button/secondary-button.js";
-import "./button/secondary-button-static.js";
-import "./icon.js";
-const _e = se`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host([data-active]){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-active]){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
-let Ce = (() => {
-  var u, _, p, m, g, v, y, a;
-  let s = [le("sbb-file-selector"), oe()], r, n = [], c, M = fe(ue(ae)), k = [], D, S = [], C = [], A, I = [], R = [], T, B = [], P = [], G, N = [], j = [], V, W = [], q = [], H, O = [], J = [], K, Q = [], U = [], X, Y;
-  var F = (a = class extends M {
-    constructor() {
-      super(...arguments);
-      f(this, u);
-      f(this, _);
-      f(this, p);
-      f(this, m);
-      f(this, g);
-      f(this, v);
-      f(this, y);
-      o(this, u, (l(this, k), l(this, S, "default"))), o(this, _, (l(this, C), l(this, I, "m"))), o(this, p, (l(this, R), l(this, B, !1))), o(this, m, (l(this, P), l(this, N, "default"))), o(this, g, (l(this, j), l(this, W, ""))), o(this, v, (l(this, q), l(this, O, ""))), o(this, y, (l(this, J), l(this, Q, ""))), this._files = (l(this, U), []), this._fileChangedEvent = new ne(this, F.events.fileChangedEvent), this._counter = 0, this._suffixes = ["B", "kB", "MB", "GB", "TB"], this._language = new re(this);
-    }
-    /** Whether the component has a dropzone area or not. */
-    get variant() {
-      return h(this, u);
-    }
-    set variant(e) {
-      o(this, u, e);
-    }
-    /** Size variant, either s or m. */
-    get size() {
-      return h(this, _);
-    }
-    set size(e) {
-      o(this, _, e);
-    }
-    /** Whether more than one file can be selected. */
-    get multiple() {
-      return h(this, p);
-    }
-    set multiple(e) {
-      o(this, p, e);
-    }
-    /** Whether the newly added files should override the previously added ones. */
-    get multipleMode() {
-      return h(this, m);
-    }
-    set multipleMode(e) {
-      o(this, m, e);
-    }
-    /** A comma-separated list of allowed unique file type specifiers. */
-    get accept() {
-      return h(this, g);
-    }
-    set accept(e) {
-      o(this, g, e);
-    }
-    /** The title displayed in `dropzone` variant. */
-    get titleContent() {
-      return h(this, v);
-    }
-    set titleContent(e) {
-      o(this, v, e);
-    }
-    /** This will be forwarded as aria-label to the native input element. */
-    get accessibilityLabel() {
-      return h(this, y);
-    }
-    set accessibilityLabel(e) {
-      o(this, y, e);
-    }
-    /** The path of the first selected file. Empty string ('') if no file is selected */
-    set value(e) {
-      this._hiddenInput.value = e ?? "", e || (this.files = []);
-    }
-    get value() {
-      var e;
-      return (e = this._hiddenInput) == null ? void 0 : e.value;
-    }
-    /**
-     * The list of selected files.
-     */
-    set files(e) {
-      this._files = e ?? [];
-      const t = new DataTransfer();
-      this.files.forEach((i) => t.items.add(i)), this._hiddenInput.files = t.files, this.updateFormValue();
-    }
-    get files() {
-      return this._files;
-    }
-    /**
-     * Form type of element.
-     * @default 'file'
-     */
-    get type() {
-      return "file";
-    }
-    /**
-     * @deprecated use the 'files' property instead
-     */
-    getFiles() {
-      return this.files;
-    }
-    formResetCallback() {
-      this.files = [];
-    }
-    formStateRestoreCallback(e, t) {
-      e && (this.files = e.map(([i, ie]) => ie));
-    }
-    updateFormValue() {
-      const e = new FormData();
-      this.files.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e);
-    }
-    _blockEvent(e) {
-      e.stopPropagation(), e.preventDefault();
-    }
-    _checkFileEquality(e, t) {
-      return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
-    }
-    _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));
-    }
-    _onFocus() {
-      te.mostRecentModality === "keyboard" && this._loadButton.toggleAttribute("data-focus-visible", !0);
-    }
-    _onBlur() {
-      te.mostRecentModality === "keyboard" && this._loadButton.removeAttribute("data-focus-visible");
-    }
-    _setDragState(e = void 0, t = !1) {
-      this._dragTarget = e, this.toggleAttribute("data-active", t), this._loadButton.toggleAttribute("data-active", t);
-    }
-    _readFiles(e) {
-      const t = e.target;
-      t.files && this._createFileList(t.files), ce(e, this);
-    }
-    _createFileList(e) {
-      !this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = Array.from(e) : this.files = Array.from(e).filter(
-        // Remove duplicates
-        (t) => this.files.findIndex((i) => this._checkFileEquality(t, i)) === -1
-      ).concat(this.files), this._updateA11yLiveRegion(), this._fileChangedEvent.emit(this.files);
-    }
-    _removeFile(e) {
-      this.files = this.files.filter((t) => !this._checkFileEquality(e, t)), this._updateA11yLiveRegion(), this.dispatchEvent(new Event("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._fileChangedEvent.emit(this.files);
-    }
-    /** Calculates the correct unit for the file's size. */
-    _formatFileSize(e) {
-      const t = Math.floor(Math.log(e) / Math.log(1024));
-      return `${(e / Math.pow(1024, t)).toFixed(0)} ${this._suffixes[t]}`;
-    }
-    _updateA11yLiveRegion() {
-      this._liveRegion.innerText = be(this.files.map((e) => e.name))[this._language.current];
-    }
-    _renderDefaultMode() {
-      return x`
-      <sbb-secondary-button-static
-        size=${this.size}
-        icon-name="folder-open-small"
-        ?disabled=${this.disabled || this.formDisabled}
-        ${z((e) => {
-        this._loadButton = e;
-      })}
-      >
-        ${w[this._language.current]}
-      </sbb-secondary-button-static>
-    `;
-    }
-    _renderDropzoneArea() {
-      return x`
-      <span class="sbb-file-selector__dropzone-area">
-        <span class="sbb-file-selector__dropzone-area--icon">
-          <sbb-icon
-            name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
-          ></sbb-icon>
-        </span>
-        <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
-        <span class="sbb-file-selector__dropzone-area--subtitle">
-          ${de[this._language.current]}
-        </span>
-        <span class="sbb-file-selector__dropzone-area--button">
-          <sbb-secondary-button-static
-            size=${this.size}
-            ?disabled=${this.disabled || this.formDisabled}
-            ${z((e) => {
-        this._loadButton = e;
-      })}
-          >
-            ${w[this._language.current]}
-          </sbb-secondary-button-static>
-        </span>
-      </span>
-    `;
-    }
-    _renderFileList() {
-      const e = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
-      return x`
-      <${E(e.WRAPPER)} class="sbb-file-selector__file-list">
-        ${this.files.map((t) => x`
-          <${E(e.ELEMENT)} class="sbb-file-selector__file">
-            <span class="sbb-file-selector__file-details">
-              <span class="sbb-file-selector__file-name">${t.name}</span>
-              <span class="sbb-file-selector__file-size">${this._formatFileSize(t.size)}</span>
-            </span>
-            <sbb-secondary-button
-              size=${this.size}
-              icon-name="trash-small"
-              @click=${() => this._removeFile(t)}
-              aria-label=${`${he[this._language.current]} - ${t.name}`}
-            ></sbb-secondary-button>
-          </${E(e.ELEMENT)}>`)}
-      </${E(e.WRAPPER)}>
-    `;
-    }
-    render() {
-      const e = this.accessibilityLabel ? `${w[this._language.current]} - ${this.accessibilityLabel}` : void 0;
-      return x`
-      <div class="sbb-file-selector">
-        <div
-          class="sbb-file-selector__input-container"
-          @dragenter=${this._onDragEnter}
-          @dragover=${this._blockEvent}
-          @dragleave=${this._onDragLeave}
-          @drop=${this._onFileDrop}
-        >
-          <label>
-            ${this.variant === "default" ? this._renderDefaultMode() : this._renderDropzoneArea()}
-            <input
-              class="sbb-file-selector__visually-hidden"
-              type="file"
-              ?disabled=${this.disabled || this.formDisabled}
-              ?multiple=${this.multiple}
-              accept=${this.accept || L}
-              aria-label=${e || L}
-              @change=${this._readFiles}
-              @focus=${this._onFocus}
-              @blur=${this._onBlur}
-              ${z((t) => {
-        this._hiddenInput = t;
-      })}
-            />
-          </label>
-        </div>
-        <p
-          role="status"
-          class="sbb-file-selector__visually-hidden"
-          ${z((t) => this._liveRegion = t)}
-        ></p>
-        ${this.files.length > 0 ? this._renderFileList() : L}
-        <div class="sbb-file-selector__error">
-          <slot name="error"></slot>
-        </div>
-      </div>
-    `;
-    }
-  }, u = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), c = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(M[Symbol.metadata] ?? null) : void 0;
-    D = [d()], A = [d({ reflect: !0 })], T = [$(), d({ type: Boolean })], G = [d({ attribute: "multiple-mode" })], V = [$(), d()], H = [$(), d({ attribute: "title-content" })], K = [$(), d({ attribute: "accessibility-label" })], X = [d({ attribute: !1 })], Y = [d({ attribute: !1 })], b(a, null, D, { kind: "accessor", name: "variant", static: !1, private: !1, access: { has: (t) => "variant" in t, get: (t) => t.variant, set: (t, i) => {
-      t.variant = i;
-    } }, metadata: e }, S, C), b(a, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, I, R), b(a, null, T, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, i) => {
-      t.multiple = i;
-    } }, metadata: e }, B, P), b(a, null, G, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (t) => "multipleMode" in t, get: (t) => t.multipleMode, set: (t, i) => {
-      t.multipleMode = i;
-    } }, metadata: e }, N, j), b(a, null, V, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (t) => "accept" in t, get: (t) => t.accept, set: (t, i) => {
-      t.accept = i;
-    } }, metadata: e }, W, q), b(a, null, H, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (t) => "titleContent" in t, get: (t) => t.titleContent, set: (t, i) => {
-      t.titleContent = i;
-    } }, metadata: e }, O, J), b(a, null, K, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, i) => {
-      t.accessibilityLabel = i;
-    } }, metadata: e }, Q, U), b(a, null, X, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
-      t.value = i;
-    } }, metadata: e }, null, k), b(a, null, Y, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (t) => "files" in t, set: (t, i) => {
-      t.files = i;
-    } }, metadata: e }, null, k), b(null, r = { value: c }, s, { kind: "class", name: c.name, metadata: e }, null, n), F = c = r.value, e && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = _e, a.events = {
-    fileChangedEvent: "fileChanged"
-  }, l(c, n), a);
-  return F = c;
-})();
-export {
-  Ce as SbbFileSelectorElement
-};
+export * from "./file-selector/common.js";
+export * from "./file-selector/file-selector-dropzone.js";
+export * from "./file-selector/file-selector.js";

package/flip-card/flip-card-details.js

@@ -4,7 +4,7 @@ import { css as p, html as f, LitElement as m } from "lit";
 import { customElement as u } from "lit/decorators.js";
 import { IS_FOCUSABLE_QUERY as v } from "../core/a11y.js";
 import { hostAttributes as y } from "../core/decorators.js";
-const h = p`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
+const h = p`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);--sbb-flip-card-details-padding-block-end: calc( var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m) );display:contents}.sbb-flip-card-details--wrapper{position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host([data-flipped]) .sbb-flip-card-details--wrapper{transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-details-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}`;
 let E = (() => {
   var a;
   let d = [u("sbb-flip-card-details"), y({
@@ -22,8 +22,8 @@ let E = (() => {
     }
     _checkForSlottedActions() {
       var o;
-      const e = "data-card-focusable";
-      Array.from(((o = this.querySelectorAll) == null ? void 0 : o.call(this, v)) ?? []).filter((s) => !s.hasAttribute(e)).forEach((s) => s.setAttribute(e, ""));
+      const s = "data-card-focusable";
+      Array.from(((o = this.querySelectorAll) == null ? void 0 : o.call(this, v)) ?? []).filter((e) => !e.hasAttribute(s)).forEach((e) => e.setAttribute(s, ""));
     }
     render() {
       return f`
@@ -35,8 +35,8 @@ let E = (() => {
     `;
     }
   }, t = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    n(null, i = { value: t }, d, { kind: "class", name: t.name, metadata: e }, null, r), t = i.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    n(null, i = { value: t }, d, { kind: "class", name: t.name, metadata: s }, null, r), t = i.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
   })(), a.styles = h, b(t, r), t;
 })();
 export {

package/flip-card/flip-card-summary.js

@@ -1,23 +1,23 @@
-var p = (a) => {
+var c = (a) => {
   throw TypeError(a);
 };
-var u = (a, e, t) => e.has(a) || p("Cannot " + t);
-var f = (a, e, t) => (u(a, e, "read from private field"), t ? t.call(a) : e.get(a)), h = (a, e, t) => e.has(a) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), y = (a, e, t, i) => (u(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
+var u = (a, e, t) => e.has(a) || c("Cannot " + t);
+var f = (a, e, t) => (u(a, e, "read from private field"), t ? t.call(a) : e.get(a)), h = (a, e, t) => e.has(a) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), y = (a, e, t, i) => (u(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
 import { __esDecorate as v, __runInitializers as o } from "tslib";
 import { css as w, html as _, LitElement as A } from "lit";
 import { customElement as x, property as S } from "lit/decorators.js";
 import { hostAttributes as z } from "../core/decorators.js";
-const E = w`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){--sbb-image-border-radius: 0;--sbb-image-aspect-ratio: auto;width:100%;height:100%}`;
+const E = w`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);margin:0;grid-area:1/1/2/2}@media (min-width: 37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (min-width: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media (min-width: 37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}`;
 let C = (() => {
   var l, s;
   let a = [x("sbb-flip-card-summary"), z({
     slot: "summary"
-  })], e, t = [], i, d = A, b, g = [], c = [];
+  })], e, t = [], i, d = A, b, g = [], p = [];
   return s = class extends d {
     constructor() {
       super(...arguments);
       h(this, l, o(this, g, "after"));
-      o(this, c);
+      o(this, p);
     }
     /** The position where to render the image. */
     get imageAlignment() {
@@ -44,7 +44,7 @@ let C = (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
     b = [S({ attribute: "image-alignment", reflect: !0 })], v(s, null, b, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (m) => "imageAlignment" in m, get: (m) => m.imageAlignment, set: (m, n) => {
       m.imageAlignment = n;
-    } }, metadata: r }, g, c), v(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, t), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+    } }, metadata: r }, g, p), v(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, t), i = e.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), s.styles = E, o(i, t), i;
 })();
 export {