@sbb-esta/lyne-elements 4.7.0 → 4.8.1

package/file-selector/common/file-selector-common.js

@@ -1,243 +1,2 @@
-var q = (s) => {
-  throw TypeError(s);
-};
-var j = (s, l, r) => l.has(s) || q("Cannot " + r);
-var b = (s, l, r) => (j(s, l, "read from private field"), r ? r.call(s) : l.get(s)), g = (s, l, r) => l.has(s) ? q("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(s) : l.set(s, r), n = (s, l, r, u) => (j(s, l, "write to private field"), u ? u.call(s, r) : l.set(s, r), r);
-import { __runInitializers as c, __esDecorate as o } from "tslib";
-import { nothing as L } from "lit";
-import { property as h } from "lit/decorators.js";
-import { ref as G } from "lit/directives/ref.js";
-import { unsafeStatic as v, html as y } from "lit/static-html.js";
-import { sbbInputModalityDetector as O } from "../../core/a11y.js";
-import { SbbLanguageController as H } from "../../core/controllers.js";
-import { forceType as $ } from "../../core/decorators.js";
-import { isLean as J } from "../../core/dom.js";
-import { forwardEvent as K } from "../../core/eventing.js";
-import { i18nFileSelectorButtonLabelMultiple as Q, i18nFileSelectorButtonLabel as U, i18nFileSelectorCurrentlySelected as X, i18nFileSelectorDeleteFile as Y } from "../../core/i18n.js";
-import { SbbDisabledMixin as Z, SbbFormAssociatedMixin as ee, SbbElementInternalsMixin as te, ɵstateController as M } from "../../core/mixins.js";
-import "../../button/secondary-button.js";
-const be = (s) => (() => {
-  var d, f, p, _, m, a;
-  let r = Z(ee(te(s))), u = [], z, F = [], k = [], D, x = [], I = [], R, B = [], A = [], S, T = [], P = [], w, C = [], N = [], W, V;
-  return a = class extends r {
-    constructor() {
-      super(...arguments);
-      g(this, d);
-      g(this, f);
-      g(this, p);
-      g(this, _);
-      g(this, m);
-      n(this, d, (c(this, u), c(this, F, J() ? "s" : "m"))), n(this, f, (c(this, k), c(this, x, !1))), n(this, p, (c(this, I), c(this, B, "default"))), n(this, _, (c(this, A), c(this, T, ""))), n(this, m, (c(this, P), c(this, C, ""))), this._files = (c(this, N), []), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new H(this), this._counter = 0;
-    }
-    /**
-     * Size variant, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return b(this, d);
-    }
-    set size(t) {
-      n(this, d, t);
-    }
-    /** Whether more than one file can be selected. */
-    get multiple() {
-      return b(this, f);
-    }
-    set multiple(t) {
-      n(this, f, t);
-    }
-    /** Whether the newly added files should override the previously added ones. */
-    get multipleMode() {
-      return b(this, p);
-    }
-    set multipleMode(t) {
-      n(this, p, t);
-    }
-    /** A comma-separated list of allowed unique file type specifiers. */
-    get accept() {
-      return b(this, _);
-    }
-    set accept(t) {
-      n(this, _, t);
-    }
-    /** This will be forwarded as aria-label to the native input element. */
-    get accessibilityLabel() {
-      return b(this, m);
-    }
-    set accessibilityLabel(t) {
-      n(this, m, t);
-    }
-    /** The path of the first selected file. Empty string ('') if no file is selected */
-    set value(t) {
-      this._hiddenInput.value = t ?? "", t || (this.files = []);
-    }
-    get value() {
-      return this._hiddenInput?.value;
-    }
-    /** The list of selected files. */
-    set files(t) {
-      this._files = t ?? [];
-      const e = new DataTransfer();
-      this.files.forEach((i) => e.items.add(i)), this._hiddenInput.files = e.files, this.updateFormValue();
-    }
-    get files() {
-      return this._files;
-    }
-    /**
-     * Form type of element.
-     * @default 'file'
-     */
-    get type() {
-      return "file";
-    }
-    formResetCallback() {
-      this.files = [];
-    }
-    formStateRestoreCallback(t, e) {
-      t && (this.files = t.getAll(this.name));
-    }
-    updateFormValue() {
-      const t = new FormData();
-      this.files.forEach((e) => t.append(this.name, e)), this.internals.setFormValue(t);
-    }
-    _checkFileEquality(t, e) {
-      return t.name === e.name && t.size === e.size && t.lastModified === e.lastModified;
-    }
-    _onFocus() {
-      O.mostRecentModality === "keyboard" && M(this.loadButton).add("focus-visible");
-    }
-    _onBlur() {
-      M(this.loadButton).delete("focus-visible");
-    }
-    _readFiles(t) {
-      const e = t.target;
-      e.files && this.createFileList(e.files), K(t, this);
-    }
-    createFileList(t) {
-      const e = Array.from(t);
-      !this.multiple && t.length > 1 || this.accept && e.some((i) => !this.accept.split(",").some((E) => i.name.endsWith(E.trim()))) || (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = e : this.files = e.filter(
-        // Remove duplicates
-        (i) => this.files.findIndex((E) => this._checkFileEquality(i, E)) === -1
-      ).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent());
-    }
-    getButtonLabel() {
-      return this.multiple ? Q[this.language.current] : U[this.language.current];
-    }
-    _removeFile(t) {
-      this.files = this.files.filter((e) => !this._checkFileEquality(t, e)), this._updateA11yLiveRegion(), this.dispatchEvent(new InputEvent("input", {
-        bubbles: !0,
-        composed: !0
-      })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._dispatchFileChangedEvent();
-    }
-    _dispatchFileChangedEvent() {
-      this.dispatchEvent(new CustomEvent("filechanged", {
-        bubbles: !0,
-        composed: !0,
-        detail: this.files
-      }));
-    }
-    /** Calculates the correct unit for the file's size. */
-    _formatFileSize(t) {
-      const e = Math.floor(Math.log(t) / Math.log(1024));
-      return `${(t / Math.pow(1024, e)).toFixed(0)} ${this._suffixes[e]}`;
-    }
-    _updateA11yLiveRegion() {
-      this._liveRegion.innerText = X(this.files.map((t) => t.name))[this.language.current];
-    }
-    _renderFileList() {
-      const t = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
-      return y`
-      <${v(t.WRAPPER)} class='sbb-file-selector__file-list'>
-        ${this.files.map((e) => y`
-            <${v(t.ELEMENT)} class='sbb-file-selector__file'>
-                <span class='sbb-file-selector__file-details'>
-                  <span class='sbb-file-selector__file-name'>${e.name}</span>
-                  <span class='sbb-file-selector__file-size'>${this._formatFileSize(e.size)}</span>
-                </span>
-              <sbb-secondary-button
-                size='${this.size}'
-                icon-name='trash-small'
-                @click='${() => this._removeFile(e)}'
-                aria-label='${`${Y[this.language.current]} - ${e.name}`}'
-              ></sbb-secondary-button>
-            </${v(t.ELEMENT)}>`)}
-      </${v(t.WRAPPER)}>
-    `;
-    }
-    _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));
-    }
-    _blockEvent(t) {
-      t.stopPropagation(), t.preventDefault();
-    }
-    _setDragState(t = void 0, e = !1) {
-      this._dragTarget = t, this.toggleState("active", e), M(this.loadButton).toggle("active", e);
-    }
-    render() {
-      const t = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
-      return y`
-        <div class="sbb-file-selector">
-          <div
-            class="sbb-file-selector__input-container"
-            @dragenter=${this._onDragEnter}
-            @dragover=${this._blockEvent}
-            @dragleave=${this._onDragLeave}
-            @drop=${this._onFileDrop}
-          >
-            ${this.renderTemplate(y`<input
-                class="sbb-file-selector__visually-hidden"
-                type="file"
-                ?disabled="${this.disabled || this.formDisabled}"
-                ?multiple="${this.multiple}"
-                accept="${this.accept || L}"
-                aria-label="${t || L}"
-                @change="${this._readFiles}"
-                @focus="${this._onFocus}"
-                @blur="${this._onBlur}"
-                ${G((e) => {
-        this._hiddenInput = e;
-      })}
-              />`)}
-          </div>
-          <p
-            role="status"
-            class="sbb-file-selector__visually-hidden"
-            ${G((e) => this._liveRegion = e)}
-          ></p>
-          ${this.files.length > 0 ? this._renderFileList() : L}
-          <div class="sbb-file-selector__error">
-            <slot name="error"></slot>
-          </div>
-        </div>
-      `;
-    }
-  }, d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    z = [h({ reflect: !0 })], D = [$(), h({ type: Boolean })], R = [h({ attribute: "multiple-mode" })], S = [$(), h()], w = [$(), h({ attribute: "accessibility-label" })], W = [h({ attribute: !1 })], V = [h({ attribute: !1 })], o(a, null, z, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
-      e.size = i;
-    } }, metadata: t }, F, k), o(a, null, D, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (e) => "multiple" in e, get: (e) => e.multiple, set: (e, i) => {
-      e.multiple = i;
-    } }, metadata: t }, x, I), o(a, null, R, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (e) => "multipleMode" in e, get: (e) => e.multipleMode, set: (e, i) => {
-      e.multipleMode = i;
-    } }, metadata: t }, B, A), o(a, null, S, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (e) => "accept" in e, get: (e) => e.accept, set: (e, i) => {
-      e.accept = i;
-    } }, metadata: t }, T, P), o(a, null, w, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, i) => {
-      e.accessibilityLabel = i;
-    } }, metadata: t }, C, N), o(a, null, W, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
-      e.value = i;
-    } }, metadata: t }, null, u), o(a, null, V, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, i) => {
-      e.files = i;
-    } }, metadata: t }, null, u), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.events = {
-    filechanged: "filechanged"
-  }, a;
-})();
-export {
-  be as SbbFileSelectorCommonElementMixin
-};
+import { n as e, t } from "../../file-selector-common-C--h0Yj2.js";
+export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };

package/file-selector/common.js

@@ -1,6 +1,5 @@
-import { SbbFileSelectorCommonElementMixin as m } from "./common/file-selector-common.js";
-import { f as r } from "../file-selector-common-DbYkpr-x.js";
-export {
-  m as SbbFileSelectorCommonElementMixin,
-  r as fileSelectorCommonStyle
-};
+import { n as e, t } from "../file-selector-common-C--h0Yj2.js";
+//#region src/elements/file-selector/common.ts
+console.warn("The entrypoint '@sbb-esta/elements/file-selector/common.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
+//#endregion
+export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };

package/file-selector/file-selector/file-selector.component.js

@@ -1,39 +1,38 @@
-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 d } from "lit/directives/ref.js";
-import { html as u } from "lit/static-html.js";
-import { boxSizingStyles as f } from "../../core/styles.js";
-import { SbbFileSelectorCommonElementMixin as p, fileSelectorCommonStyle as S } from "../common.js";
+import "lit";
+import { SbbElement as e } from "../../core/base-elements.js";
+import { boxSizingStyles as t } from "../../core/styles.js";
+import { html as n } from "lit/static-html.js";
+import { ref as r } from "lit/directives/ref.js";
+import { SbbFileSelectorCommonElementMixin as i, fileSelectorCommonStyle as a } from "../common/file-selector-common.js";
 import "../../button/secondary-button-static.js";
-let $ = (() => {
-  var e;
-  let o = [b("sbb-file-selector")], a, i = [], t, s = p(c);
-  return e = class extends s {
-    renderTemplate(l) {
-      return u`
+//#region src/elements/file-selector/file-selector/file-selector.component.ts
+var o = class extends i(e) {
+	static {
+		this.elementName = "sbb-file-selector";
+	}
+	static {
+		this.styles = [t, a];
+	}
+	static {
+		this.events = { filechanged: "filechanged" };
+	}
+	renderTemplate(e) {
+		return n`
       <label>
         <sbb-secondary-button-static
           size=${this.size}
           icon-name="folder-open-small"
           ?disabled=${this.disabled || this.formDisabled}
-          ${d((r) => {
-        this.loadButton = r;
-      })}
+          ${r((e) => {
+			this.loadButton = e;
+		})}
         >
           ${this.getButtonLabel()}
         </sbb-secondary-button-static>
-        ${l}
+        ${e}
       </label>
     `;
-    }
-  }, t = e, (() => {
-    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    m(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: l }, null, i), t = a.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
-  })(), e.styles = [f, S], e.events = {
-    filechanged: "filechanged"
-  }, n(t, i), t;
-})();
-export {
-  $ as SbbFileSelectorElement
+	}
 };
+//#endregion
+export { o as SbbFileSelectorElement };

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

@@ -1,74 +1,2 @@
-var m = (e) => {
-  throw TypeError(e);
-};
-var d = (e, t, i) => t.has(e) || m("Cannot " + i);
-var u = (e, t, i) => (d(e, t, "read from private field"), i ? i.call(e) : t.get(e)), h = (e, t, i) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), g = (e, t, i, s) => (d(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
-import { __esDecorate as _, __runInitializers as n } from "tslib";
-import { css as z, LitElement as y } from "lit";
-import { customElement as x, property as S } from "lit/decorators.js";
-import { ref as C } from "lit/directives/ref.js";
-import { html as k } from "lit/static-html.js";
-import { forceType as $ } from "../../core/decorators.js";
-import { i18nFileSelectorSubtitleLabelMultiple as D, i18nFileSelectorSubtitleLabel as E } from "../../core/i18n.js";
-import { boxSizingStyles as w } from "../../core/styles.js";
-import { SbbFileSelectorCommonElementMixin as F, fileSelectorCommonStyle as L } from "../common.js";
-import "../../button/secondary-button-static.js";
-import "../../icon.js";
-const I = z`.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-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text);margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
-let Q = (() => {
-  var a, o;
-  let e = [x("sbb-file-selector-dropzone")], t, i = [], s, b = F(y), c, f = [], p = [];
-  return o = class extends b {
-    constructor() {
-      super(...arguments);
-      h(this, a, n(this, f, ""));
-      n(this, p);
-    }
-    /** The title displayed in `dropzone` variant. */
-    get titleContent() {
-      return u(this, a);
-    }
-    set titleContent(r) {
-      g(this, a, r);
-    }
-    renderTemplate(r) {
-      return k`
-      <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.multiple ? D[this.language.current] : E[this.language.current]}
-          </span>
-          <span class="sbb-file-selector__dropzone-area--button">
-            <sbb-secondary-button-static
-              size=${this.size}
-              ?disabled=${this.disabled || this.formDisabled}
-              ${C((l) => {
-        this.loadButton = l;
-      })}
-            >
-              ${this.getButtonLabel()}
-            </sbb-secondary-button-static>
-          </span>
-        </span>
-        ${r}
-      </label>
-    `;
-    }
-  }, a = new WeakMap(), s = o, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    c = [$(), S({ attribute: "title-content" })], _(o, null, c, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (l) => "titleContent" in l, get: (l) => l.titleContent, set: (l, v) => {
-      l.titleContent = v;
-    } }, metadata: r }, f, p), _(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, i), s = t.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), o.styles = [w, L, I], o.events = {
-    filechanged: "filechanged"
-  }, n(s, i), s;
-})();
-export {
-  Q as SbbFileSelectorDropzoneElement
-};
+import { t as e } from "../../file-selector-dropzone.component-BFlkqlsq.js";
+export { e as SbbFileSelectorDropzoneElement };

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

@@ -1,4 +1,4 @@
-import { SbbFileSelectorDropzoneElement as r } from "./file-selector-dropzone/file-selector-dropzone.component.js";
-export {
-  r as SbbFileSelectorDropzoneElement
-};
+import { t as e } from "../file-selector-dropzone.component-BFlkqlsq.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/file-selector/file-selector-dropzone.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
+//#endregion
+export { e as SbbFileSelectorDropzoneElement };

package/file-selector/file-selector.js

@@ -1,4 +1,4 @@
-import { SbbFileSelectorElement as o } from "./file-selector/file-selector.component.js";
-export {
-  o as SbbFileSelectorElement
-};
+import { SbbFileSelectorElement as e } from "./file-selector/file-selector.component.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/file-selector/file-selector.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
+//#endregion
+export { e as SbbFileSelectorElement };