@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/file-preview/UUIFileSize.js

@@ -1,20 +1,47 @@
-class UUIFileSize {
-  static humanFileSize(bytes, si = false, decimalPlaces = 1) {
-    const thresh = si ? 1e3 : 1024;
-    if (Math.abs(bytes) < thresh) {
-      return bytes + " B";
-    }
-    const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
-    let u = -1;
-    const r = 10 ** decimalPlaces;
-    do {
-      bytes /= thresh;
-      ++u;
-    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-    return bytes.toFixed(decimalPlaces) + " " + units[u];
-  }
-}
-export {
-  UUIFileSize
+//#region src/components/file-preview/UUIFileSize.ts
+/**
+* Format bytes as human-readable text.
+*
+* @param bytes Number of bytes.
+* @param si True to use metric (SI) units, aka powers of 1000. False to use
+*           binary (IEC), aka powers of 1024.
+* @param dp Number of decimal places to display.
+*
+* @return Formatted string.
+*/
+var UUIFileSize = class {
+	static humanFileSize(bytes, si = false, decimalPlaces = 1) {
+		const thresh = si ? 1e3 : 1024;
+		if (Math.abs(bytes) < thresh) return bytes + " B";
+		const units = si ? [
+			"kB",
+			"MB",
+			"GB",
+			"TB",
+			"PB",
+			"EB",
+			"ZB",
+			"YB"
+		] : [
+			"KiB",
+			"MiB",
+			"GiB",
+			"TiB",
+			"PiB",
+			"EiB",
+			"ZiB",
+			"YiB"
+		];
+		let u = -1;
+		const r = 10 ** decimalPlaces;
+		do {
+			bytes /= thresh;
+			++u;
+		} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+		return bytes.toFixed(decimalPlaces) + " " + units[u];
+	}
 };
-//# sourceMappingURL=UUIFileSize.js.map
+//#endregion
+export { UUIFileSize };
+
+//# sourceMappingURL=UUIFileSize.js.map

package/dist/components/file-preview/UUIFileSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIFileSize.js","sources":["../../../src/components/file-preview/UUIFileSize.ts"],"sourcesContent":["/**\n * Format bytes as human-readable text.\n *\n * @param bytes Number of bytes.\n * @param si True to use metric (SI) units, aka powers of 1000. False to use\n *           binary (IEC), aka powers of 1024.\n * @param dp Number of decimal places to display.\n *\n * @return Formatted string.\n */\n\nexport class UUIFileSize {\n  static humanFileSize(bytes: number, si = false, decimalPlaces = 1) {\n    const thresh = si ? 1000 : 1024;\n\n    if (Math.abs(bytes) < thresh) {\n      return bytes + ' B';\n    }\n\n    const units = si\n      ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n      : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];\n    let u = -1;\n    const r = 10 ** decimalPlaces;\n\n    do {\n      bytes /= thresh;\n      ++u;\n    } while (\n      Math.round(Math.abs(bytes) * r) / r >= thresh &&\n      u < units.length - 1\n    );\n\n    return bytes.toFixed(decimalPlaces) + ' ' + units[u];\n  }\n}\n"],"names":[],"mappings":"AAWO,MAAM,YAAY;AAAA,EACvB,OAAO,cAAc,OAAe,KAAK,OAAO,gBAAgB,GAAG;AACjE,UAAM,SAAS,KAAK,MAAO;AAE3B,QAAI,KAAK,IAAI,KAAK,IAAI,QAAQ;AAC5B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,QAAQ,KACV,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI,IAC/C,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAC3D,QAAI,IAAI;AACR,UAAM,IAAI,MAAM;AAEhB,OAAG;AACD,eAAS;AACT,QAAE;AAAA,IACJ,SACE,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,UACvC,IAAI,MAAM,SAAS;AAGrB,WAAO,MAAM,QAAQ,aAAa,IAAI,MAAM,MAAM,CAAC;AAAA,EACrD;AACF;"}
+{"version":3,"file":"UUIFileSize.js","names":[],"sources":["../../../src/components/file-preview/UUIFileSize.ts"],"sourcesContent":["/**\n * Format bytes as human-readable text.\n *\n * @param bytes Number of bytes.\n * @param si True to use metric (SI) units, aka powers of 1000. False to use\n *           binary (IEC), aka powers of 1024.\n * @param dp Number of decimal places to display.\n *\n * @return Formatted string.\n */\n\nexport class UUIFileSize {\n  static humanFileSize(bytes: number, si = false, decimalPlaces = 1) {\n    const thresh = si ? 1000 : 1024;\n\n    if (Math.abs(bytes) < thresh) {\n      return bytes + ' B';\n    }\n\n    const units = si\n      ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n      : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];\n    let u = -1;\n    const r = 10 ** decimalPlaces;\n\n    do {\n      bytes /= thresh;\n      ++u;\n    } while (\n      Math.round(Math.abs(bytes) * r) / r >= thresh &&\n      u < units.length - 1\n    );\n\n    return bytes.toFixed(decimalPlaces) + ' ' + units[u];\n  }\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,cAAb,MAAyB;CACvB,OAAO,cAAc,OAAe,KAAK,OAAO,gBAAgB,GAAG;EACjE,MAAM,SAAS,KAAK,MAAO;EAE3B,IAAI,KAAK,IAAI,KAAK,IAAI,QACpB,OAAO,QAAQ;EAGjB,MAAM,QAAQ,KACV;GAAC;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;EAAI,IAC/C;GAAC;GAAO;GAAO;GAAO;GAAO;GAAO;GAAO;GAAO;EAAK;EAC3D,IAAI,IAAI;EACR,MAAM,IAAI,MAAM;EAEhB,GAAG;GACD,SAAS;GACT,EAAE;EACJ,SACE,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,UACvC,IAAI,MAAM,SAAS;EAGrB,OAAO,MAAM,QAAQ,aAAa,IAAI,MAAM,MAAM;CACpD;AACF"}

package/dist/components/file-preview/file-preview.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './file-preview.element.js';
 export * from './UUIFileSize.js';
-export { UUIFilePreviewElement as default } from './file-preview.element.js';

package/dist/components/file-preview/file-preview.element.js

@@ -1,103 +1,82 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _file, _UUIFilePreviewElement_instances, isImage_fn, loadThumbnail_fn, renderFileSymbol_fn, renderName_fn, renderSize_fn;
-import { state, property } from "lit/decorators.js";
-import { UUIFileSize } from "./UUIFileSize.js";
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import "../symbol-file/symbol-file.js";
 import "../symbol-folder/symbol-folder.js";
 import "../symbol-file-thumbnail/symbol-file-thumbnail.js";
-import "../symbol-file/symbol-file.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUIFilePreviewElement = class _UUIFilePreviewElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUIFilePreviewElement_instances);
-    __privateAdd(this, _file);
-    this._src = "";
-  }
-  get file() {
-    return __privateGet(this, _file);
-  }
-  set file(newValue) {
-    if (newValue instanceof File) {
-      __privateSet(this, _file, newValue);
-      this._src = "";
-      if (__privateMethod(this, _UUIFilePreviewElement_instances, isImage_fn).call(this, newValue)) {
-        __privateMethod(this, _UUIFilePreviewElement_instances, loadThumbnail_fn).call(this, newValue);
-      }
-      this.requestUpdate();
-    }
-  }
-  render() {
-    return html`
-      <slot id="actions" name="actions"></slot>
-      ${__privateMethod(this, _UUIFilePreviewElement_instances, renderFileSymbol_fn).call(this)}
-      <div id="file-info">
-        ${__privateMethod(this, _UUIFilePreviewElement_instances, renderName_fn).call(this)}
-        <span id="file-size">${__privateMethod(this, _UUIFilePreviewElement_instances, renderSize_fn).call(this)}</span>
-      </div>
-    `;
-  }
-};
-_file = new WeakMap();
-_UUIFilePreviewElement_instances = new WeakSet();
-isImage_fn = function(file) {
-  return file.type.split("/")[0] === "image";
-};
-loadThumbnail_fn = function(file) {
-  const reader = new FileReader();
-  reader.onload = () => {
-    this._src = reader.result;
-  };
-  reader.readAsDataURL(file);
-};
-renderFileSymbol_fn = function() {
-  if (__privateGet(this, _file) && __privateMethod(this, _UUIFilePreviewElement_instances, isImage_fn).call(this, __privateGet(this, _file))) {
-    const name = __privateGet(this, _file).name.split(".")[0];
-    return html`<uui-symbol-file-thumbnail
+import { UUIFileSize } from "./UUIFileSize.js";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/file-preview/file-preview.element.ts
+/**
+*  @element uui-file-preview
+*  @slot actions - To display one or more actions that can be executed on the file.
+*  @description - A file preview with file size.
+*/
+var UUIFilePreviewElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._src = "";
+	}
+	#file;
+	get file() {
+		return this.#file;
+	}
+	set file(newValue) {
+		if (newValue instanceof File) {
+			this.#file = newValue;
+			this._src = "";
+			if (this.#isImage(newValue)) this.#loadThumbnail(newValue);
+			this.requestUpdate();
+		}
+	}
+	#isImage(file) {
+		return file.type.split("/")[0] === "image";
+	}
+	#loadThumbnail(file) {
+		const reader = new FileReader();
+		reader.onload = () => {
+			this._src = reader.result;
+		};
+		reader.readAsDataURL(file);
+	}
+	#renderFileSymbol() {
+		if (this.#file && this.#isImage(this.#file)) {
+			const name = this.#file.name.split(".")[0];
+			return html`<uui-symbol-file-thumbnail
         .src=${this._src}
         .alt=${name}
         id="file-symbol"></uui-symbol-file-thumbnail>`;
-  }
-  const extension = __privateGet(this, _file)?.name.split(".")[1] ?? "";
-  return html`<uui-symbol-file
+		}
+		return html`<uui-symbol-file
       id="file-symbol"
-      .type=${extension}></uui-symbol-file>`;
-};
-renderName_fn = function() {
-  const name = __privateGet(this, _file)?.name.split(".")[0] ?? "";
-  const endCharCount = 6;
-  const nameStart = name.substring(0, name.length - endCharCount);
-  const nameEnd = name.substring(name.length - endCharCount, name.length);
-  return html`
+      .type=${this.#file?.name.split(".")[1] ?? ""}></uui-symbol-file>`;
+	}
+	#renderName() {
+		const name = this.#file?.name.split(".")[0] ?? "";
+		const endCharCount = 6;
+		return html`
       <span id="file-name">
-        <span id="file-name-start">${nameStart}</span>
-        <span id="file-name-end">${nameEnd}</span>
+        <span id="file-name-start">${name.substring(0, name.length - endCharCount)}</span>
+        <span id="file-name-end">${name.substring(name.length - endCharCount, name.length)}</span>
       </span>
     `;
-};
-renderSize_fn = function() {
-  const size = __privateGet(this, _file)?.size ?? 0;
-  if (!size) return "";
-  return html`${UUIFileSize.humanFileSize(size, true)}`;
-};
-_UUIFilePreviewElement.styles = [
-  css`
+	}
+	#renderSize() {
+		const size = this.#file?.size ?? 0;
+		if (!size) return "";
+		return html`${UUIFileSize.humanFileSize(size, true)}`;
+	}
+	render() {
+		return html`
+      <slot id="actions" name="actions"></slot>
+      ${this.#renderFileSymbol()}
+      <div id="file-info">
+        ${this.#renderName()}
+        <span id="file-size">${this.#renderSize()}</span>
+      </div>
+    `;
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: grid;
@@ -160,16 +139,12 @@ _UUIFilePreviewElement.styles = [
       #file-size {
         opacity: 0.6;
       }
-    `
-];
-let UUIFilePreviewElement = _UUIFilePreviewElement;
-__decorateClass([
-  state()
-], UUIFilePreviewElement.prototype, "_src", 2);
-__decorateClass([
-  property({ attribute: false })
-], UUIFilePreviewElement.prototype, "file", 1);
-export {
-  UUIFilePreviewElement
+    `];
+	}
 };
-//# sourceMappingURL=file-preview.element.js.map
+__decorate([state()], UUIFilePreviewElement.prototype, "_src", void 0);
+__decorate([property({ attribute: false })], UUIFilePreviewElement.prototype, "file", null);
+//#endregion
+export { UUIFilePreviewElement };
+
+//# sourceMappingURL=file-preview.element.js.map

package/dist/components/file-preview/file-preview.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview.element.js","sources":["../../../src/components/file-preview/file-preview.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { UUIFileSize } from './UUIFileSize.js';\n\nimport { css, html, LitElement } from 'lit';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file-thumbnail/symbol-file-thumbnail.js';\nimport '../symbol-file/symbol-file.js';\n\n/**\n *  @element uui-file-preview\n *  @slot actions - To display one or more actions that can be executed on the file.\n *  @description - A file preview with file size.\n */\nexport class UUIFilePreviewElement extends LitElement {\n  #file?: File;\n\n  @state()\n  private _src: string = '';\n\n  @property({ attribute: false })\n  public get file() {\n    return this.#file;\n  }\n  public set file(newValue) {\n    if (newValue instanceof File) {\n      this.#file = newValue;\n      this._src = '';\n\n      if (this.#isImage(newValue)) {\n        this.#loadThumbnail(newValue);\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  #isImage(file: File) {\n    return file.type.split('/')[0] === 'image';\n  }\n\n  #loadThumbnail(file: File) {\n    const reader = new FileReader();\n    reader.onload = () => {\n      this._src = reader.result as string;\n    };\n    reader.readAsDataURL(file);\n  }\n\n  #renderFileSymbol() {\n    if (this.#file && this.#isImage(this.#file)) {\n      const name = this.#file.name.split('.')[0];\n      return html`<uui-symbol-file-thumbnail\n        .src=${this._src}\n        .alt=${name}\n        id=\"file-symbol\"></uui-symbol-file-thumbnail>`;\n    }\n\n    const extension = this.#file?.name.split('.')[1] ?? '';\n    return html`<uui-symbol-file\n      id=\"file-symbol\"\n      .type=${extension}></uui-symbol-file>`;\n  }\n\n  #renderName() {\n    const name = this.#file?.name.split('.')[0] ?? '';\n    const endCharCount = 6;\n    const nameStart = name.substring(0, name.length - endCharCount);\n    const nameEnd = name.substring(name.length - endCharCount, name.length);\n    return html`\n      <span id=\"file-name\">\n        <span id=\"file-name-start\">${nameStart}</span>\n        <span id=\"file-name-end\">${nameEnd}</span>\n      </span>\n    `;\n  }\n\n  #renderSize() {\n    const size = this.#file?.size ?? 0;\n    if (!size) return '';\n    return html`${UUIFileSize.humanFileSize(size, true)}`;\n  }\n\n  render() {\n    return html`\n      <slot id=\"actions\" name=\"actions\"></slot>\n      ${this.#renderFileSymbol()}\n      <div id=\"file-info\">\n        ${this.#renderName()}\n        <span id=\"file-size\">${this.#renderSize()}</span>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: grid;\n        /* These have to be changed together */\n        grid-template-rows: 100px 50px;\n        width: 150px;\n        height: 150px;\n        /* --------------------------------- */\n        box-sizing: border-box;\n        aspect-ratio: 1;\n        color: var(--uui-color-text);\n      }\n\n      :host(:hover) slot[name='actions']::slotted(*) {\n        opacity: 1;\n      }\n\n      slot[name='actions']::slotted(*) {\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        max-width: 100%;\n        height: 32px;\n        font-size: 13px;\n        opacity: 0;\n        z-index: 1;\n        transition: opacity 150ms;\n      }\n\n      #file-symbol {\n        aspect-ratio: 1 / 1;\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      #file-info {\n        min-width: 0;\n        display: flex;\n        text-align: center;\n        flex-direction: column;\n        font-size: 1rem;\n      }\n\n      #file-name {\n        display: flex;\n        justify-content: center;\n      }\n\n      #file-name-start {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      #file-name-end {\n        white-space: nowrap;\n      }\n\n      #file-size {\n        opacity: 0.6;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AACL;AAGA,SAAQ,OAAe;AAAA,EAAA;AAAA,EAGvB,IAAW,OAAO;AAChB,WAAO,mBAAK;AAAA,EACd;AAAA,EACA,IAAW,KAAK,UAAU;AACxB,QAAI,oBAAoB,MAAM;AAC5B,yBAAK,OAAQ;AACb,WAAK,OAAO;AAEZ,UAAI,sBAAK,8CAAL,WAAc,WAAW;AAC3B,8BAAK,oDAAL,WAAoB;AAAA,MACtB;AAEA,WAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA,EAgDA,SAAS;AACP,WAAO;AAAA;AAAA,QAEH,sBAAK,uDAAL,UAAwB;AAAA;AAAA,UAEtB,sBAAK,iDAAL,UAAkB;AAAA,+BACG,sBAAK,iDAAL,UAAkB;AAAA;AAAA;AAAA,EAG/C;AAoEF;AAjJE;AADK;AAuBL,sBAAS,MAAY;AACnB,SAAO,KAAK,KAAK,MAAM,GAAG,EAAE,CAAC,MAAM;AACrC;AAEA,4BAAe,MAAY;AACzB,QAAM,SAAS,IAAI,WAAA;AACnB,SAAO,SAAS,MAAM;AACpB,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,SAAO,cAAc,IAAI;AAC3B;AAEA,sBAAA,WAAoB;AAClB,MAAI,mBAAK,UAAS,sBAAK,8CAAL,WAAc,mBAAK,SAAQ;AAC3C,UAAM,OAAO,mBAAK,OAAM,KAAK,MAAM,GAAG,EAAE,CAAC;AACzC,WAAO;AAAA,eACE,KAAK,IAAI;AAAA,eACT,IAAI;AAAA;AAAA,EAEf;AAEA,QAAM,YAAY,mBAAK,QAAO,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK;AACpD,SAAO;AAAA;AAAA,cAEG,SAAS;AACrB;AAEA,gBAAA,WAAc;AACZ,QAAM,OAAO,mBAAK,QAAO,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK;AAC/C,QAAM,eAAe;AACrB,QAAM,YAAY,KAAK,UAAU,GAAG,KAAK,SAAS,YAAY;AAC9D,QAAM,UAAU,KAAK,UAAU,KAAK,SAAS,cAAc,KAAK,MAAM;AACtE,SAAO;AAAA;AAAA,qCAE0B,SAAS;AAAA,mCACX,OAAO;AAAA;AAAA;AAGxC;AAEA,gBAAA,WAAc;AACZ,QAAM,OAAO,mBAAK,QAAO,QAAQ;AACjC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,OAAO,YAAY,cAAc,MAAM,IAAI,CAAC;AACrD;AAaA,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjFG,IAAM,wBAAN;AAIG,gBAAA;AAAA,EADP,MAAA;AAAM,GAHI,sBAIH,WAAA,QAAA,CAAA;AAGG,gBAAA;AAAA,EADV,SAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GANnB,sBAOA,WAAA,QAAA,CAAA;"}
+{"version":3,"file":"file-preview.element.js","names":["#file","#isImage","#loadThumbnail","#renderFileSymbol","#renderName","#renderSize"],"sources":["../../../src/components/file-preview/file-preview.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { UUIFileSize } from './UUIFileSize.js';\n\nimport { css, html, LitElement } from 'lit';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file-thumbnail/symbol-file-thumbnail.js';\nimport '../symbol-file/symbol-file.js';\n\n/**\n *  @element uui-file-preview\n *  @slot actions - To display one or more actions that can be executed on the file.\n *  @description - A file preview with file size.\n */\nexport class UUIFilePreviewElement extends LitElement {\n  #file?: File;\n\n  @state()\n  private _src: string = '';\n\n  @property({ attribute: false })\n  public get file() {\n    return this.#file;\n  }\n  public set file(newValue) {\n    if (newValue instanceof File) {\n      this.#file = newValue;\n      this._src = '';\n\n      if (this.#isImage(newValue)) {\n        this.#loadThumbnail(newValue);\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  #isImage(file: File) {\n    return file.type.split('/')[0] === 'image';\n  }\n\n  #loadThumbnail(file: File) {\n    const reader = new FileReader();\n    reader.onload = () => {\n      this._src = reader.result as string;\n    };\n    reader.readAsDataURL(file);\n  }\n\n  #renderFileSymbol() {\n    if (this.#file && this.#isImage(this.#file)) {\n      const name = this.#file.name.split('.')[0];\n      return html`<uui-symbol-file-thumbnail\n        .src=${this._src}\n        .alt=${name}\n        id=\"file-symbol\"></uui-symbol-file-thumbnail>`;\n    }\n\n    const extension = this.#file?.name.split('.')[1] ?? '';\n    return html`<uui-symbol-file\n      id=\"file-symbol\"\n      .type=${extension}></uui-symbol-file>`;\n  }\n\n  #renderName() {\n    const name = this.#file?.name.split('.')[0] ?? '';\n    const endCharCount = 6;\n    const nameStart = name.substring(0, name.length - endCharCount);\n    const nameEnd = name.substring(name.length - endCharCount, name.length);\n    return html`\n      <span id=\"file-name\">\n        <span id=\"file-name-start\">${nameStart}</span>\n        <span id=\"file-name-end\">${nameEnd}</span>\n      </span>\n    `;\n  }\n\n  #renderSize() {\n    const size = this.#file?.size ?? 0;\n    if (!size) return '';\n    return html`${UUIFileSize.humanFileSize(size, true)}`;\n  }\n\n  render() {\n    return html`\n      <slot id=\"actions\" name=\"actions\"></slot>\n      ${this.#renderFileSymbol()}\n      <div id=\"file-info\">\n        ${this.#renderName()}\n        <span id=\"file-size\">${this.#renderSize()}</span>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: grid;\n        /* These have to be changed together */\n        grid-template-rows: 100px 50px;\n        width: 150px;\n        height: 150px;\n        /* --------------------------------- */\n        box-sizing: border-box;\n        aspect-ratio: 1;\n        color: var(--uui-color-text);\n      }\n\n      :host(:hover) slot[name='actions']::slotted(*) {\n        opacity: 1;\n      }\n\n      slot[name='actions']::slotted(*) {\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        max-width: 100%;\n        height: 32px;\n        font-size: 13px;\n        opacity: 0;\n        z-index: 1;\n        transition: opacity 150ms;\n      }\n\n      #file-symbol {\n        aspect-ratio: 1 / 1;\n        margin: auto;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      #file-info {\n        min-width: 0;\n        display: flex;\n        text-align: center;\n        flex-direction: column;\n        font-size: 1rem;\n      }\n\n      #file-name {\n        display: flex;\n        justify-content: center;\n      }\n\n      #file-name-start {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      #file-name-end {\n        white-space: nowrap;\n      }\n\n      #file-size {\n        opacity: 0.6;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,IAAa,wBAAb,cAA2C,WAAW;;;cAI7B;;CAHvB;CAKA,IACW,OAAO;EAChB,OAAO,KAAKA;CACd;CACA,IAAW,KAAK,UAAU;EACxB,IAAI,oBAAoB,MAAM;GAC5B,KAAKA,QAAQ;GACb,KAAK,OAAO;GAEZ,IAAI,KAAKC,SAAS,QAAQ,GACxB,KAAKC,eAAe,QAAQ;GAG9B,KAAK,cAAc;EACrB;CACF;CAEA,SAAS,MAAY;EACnB,OAAO,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,OAAO;CACrC;CAEA,eAAe,MAAY;EACzB,MAAM,SAAS,IAAI,WAAW;EAC9B,OAAO,eAAe;GACpB,KAAK,OAAO,OAAO;EACrB;EACA,OAAO,cAAc,IAAI;CAC3B;CAEA,oBAAoB;EAClB,IAAI,KAAKF,SAAS,KAAKC,SAAS,KAAKD,KAAK,GAAG;GAC3C,MAAM,OAAO,KAAKA,MAAM,KAAK,MAAM,GAAG,CAAC,CAAC;GACxC,OAAO,IAAI;eACF,KAAK,KAAK;eACV,KAAK;;EAEhB;EAGA,OAAO,IAAI;;cADO,KAAKA,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC,MAAM,GAGhC;CACtB;CAEA,cAAc;EACZ,MAAM,OAAO,KAAKA,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC,MAAM;EAC/C,MAAM,eAAe;EAGrB,OAAO,IAAI;;qCAFO,KAAK,UAAU,GAAG,KAAK,SAAS,YAIjB,EAAU;mCAH3B,KAAK,UAAU,KAAK,SAAS,cAAc,KAAK,MAIjC,EAAQ;;;CAGzC;CAEA,cAAc;EACZ,MAAM,OAAO,KAAKA,OAAO,QAAQ;EACjC,IAAI,CAAC,MAAM,OAAO;EAClB,OAAO,IAAI,GAAG,YAAY,cAAc,MAAM,IAAI;CACpD;CAEA,SAAS;EACP,OAAO,IAAI;;QAEP,KAAKG,kBAAkB,EAAE;;UAEvB,KAAKC,YAAY,EAAE;+BACE,KAAKC,YAAY,EAAE;;;CAGhD;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEL;;AACF;YA/IG,MAAM,CAAA,GAAA,sBAAA,WAAA,QAAA,KAAA,CAAA;YAGN,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,sBAAA,WAAA,QAAA,IAAA"}

package/dist/components/file-preview/file-preview.js

@@ -1,8 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
+import { UUIFileSize } from "./UUIFileSize.js";
 import { UUIFilePreviewElement } from "./file-preview.element.js";
+//#region src/components/file-preview/file-preview.ts
 defineElement("uui-file-preview", UUIFilePreviewElement);
-export {
-  UUIFilePreviewElement,
-  UUIFilePreviewElement as default
-};
-//# sourceMappingURL=file-preview.js.map
+//#endregion
+export { UUIFilePreviewElement, UUIFileSize };
+
+//# sourceMappingURL=file-preview.js.map

package/dist/components/file-preview/file-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-preview.js","sources":["../../../src/components/file-preview/file-preview.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFilePreviewElement } from './file-preview.element.js';\n\ndefineElement('uui-file-preview', UUIFilePreviewElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-file-preview': UUIFilePreviewElement;\n  }\n}\n\nexport * from './file-preview.element.js';\nexport * from './UUIFileSize.js';\nexport { UUIFilePreviewElement as default } from './file-preview.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,oBAAoB,qBAAqB;"}
+{"version":3,"file":"file-preview.js","names":[],"sources":["../../../src/components/file-preview/file-preview.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFilePreviewElement } from './file-preview.element.js';\n\ndefineElement('uui-file-preview', UUIFilePreviewElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-file-preview': UUIFilePreviewElement;\n  }\n}\n\nexport * from './file-preview.element.js';\nexport * from './UUIFileSize.js';\n"],"mappings":";;;;AAGA,cAAc,oBAAoB,qBAAqB"}

package/dist/components/form/form.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './form.element.js';
-export { UUIFormElement as default } from './form.element.js';

package/dist/components/form/form.element.js

@@ -1,48 +1,48 @@
 import { LitElement, html } from "lit";
-class UUIFormElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._formElement = null;
-  }
-  getFormElement() {
-    return this._formElement;
-  }
-  _onSlotChanged(event) {
-    if (this._formElement) {
-      this._formElement.removeEventListener("submit", this._onSubmit);
-      this._formElement.removeEventListener("reset", this._onReset);
-    }
-    const formElements = event.target.assignedNodes({ flatten: true }).filter((x) => x instanceof HTMLFormElement);
-    this._formElement = formElements.length > 0 ? formElements[0] : null;
-    if (this._formElement) {
-      this._formElement.setAttribute("novalidate", "");
-      this._formElement.addEventListener("submit", this._onSubmit);
-      this._formElement.addEventListener("reset", this._onReset);
-    }
-  }
-  _onSubmit(event) {
-    if (event.target === null) {
-      return;
-    }
-    const formNode = event.target;
-    const isValid = formNode.checkValidity();
-    if (!isValid) {
-      formNode.setAttribute("submit-invalid", "");
-      return;
-    }
-    formNode.removeAttribute("submit-invalid");
-  }
-  _onReset(event) {
-    if (event.target === null) {
-      return;
-    }
-    event.target.removeAttribute("submit-invalid");
-  }
-  render() {
-    return html`<slot @slotchange=${this._onSlotChanged}></slot>`;
-  }
-}
-export {
-  UUIFormElement
+//#region src/components/form/form.element.ts
+/**
+* @element uui-form
+* @description uui-form must wrap a native form element. This ensures the User Experiences of the form fits with the Umbraco standard.
+*/
+var UUIFormElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._formElement = null;
+	}
+	getFormElement() {
+		return this._formElement;
+	}
+	_onSlotChanged(event) {
+		if (this._formElement) {
+			this._formElement.removeEventListener("submit", this._onSubmit);
+			this._formElement.removeEventListener("reset", this._onReset);
+		}
+		const formElements = event.target.assignedNodes({ flatten: true }).filter((x) => x instanceof HTMLFormElement);
+		this._formElement = formElements.length > 0 ? formElements[0] : null;
+		if (this._formElement) {
+			this._formElement.setAttribute("novalidate", "");
+			this._formElement.addEventListener("submit", this._onSubmit);
+			this._formElement.addEventListener("reset", this._onReset);
+		}
+	}
+	_onSubmit(event) {
+		if (event.target === null) return;
+		const formNode = event.target;
+		if (!formNode.checkValidity()) {
+			formNode.setAttribute("submit-invalid", "");
+			return;
+		}
+		formNode.removeAttribute("submit-invalid");
+	}
+	_onReset(event) {
+		if (event.target === null) return;
+		event.target.removeAttribute("submit-invalid");
+	}
+	render() {
+		return html`<slot @slotchange=${this._onSlotChanged}></slot>`;
+	}
 };
-//# sourceMappingURL=form.element.js.map
+//#endregion
+export { UUIFormElement };
+
+//# sourceMappingURL=form.element.js.map

package/dist/components/form/form.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.element.js","sources":["../../../src/components/form/form.element.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\n/**\n * @element uui-form\n * @description uui-form must wrap a native form element. This ensures the User Experiences of the form fits with the Umbraco standard.\n */\nexport class UUIFormElement extends LitElement {\n  private _formElement: HTMLFormElement | null = null;\n\n  public getFormElement(): HTMLFormElement | null {\n    return this._formElement;\n  }\n\n  private _onSlotChanged(event: Event) {\n    if (this._formElement) {\n      this._formElement.removeEventListener('submit', this._onSubmit);\n      this._formElement.removeEventListener('reset', this._onReset);\n    }\n\n    const formElements = (event.target as HTMLSlotElement)\n      .assignedNodes({ flatten: true })\n      .filter(x => x instanceof HTMLFormElement);\n    this._formElement = formElements.length > 0 ? formElements[0] : null;\n\n    if (this._formElement) {\n      this._formElement.setAttribute('novalidate', '');\n      this._formElement.addEventListener('submit', this._onSubmit);\n      this._formElement.addEventListener('reset', this._onReset);\n    }\n  }\n\n  private _onSubmit(event: SubmitEvent) {\n    if (event.target === null) {\n      return;\n    }\n    const formNode = event.target as HTMLFormElement;\n    const isValid = formNode.checkValidity();\n\n    if (!isValid) {\n      // submit-invalid attribute is used by descendant form controls to check wether submit has been requested without succeeding.\n      formNode.setAttribute('submit-invalid', '');\n      return;\n    }\n    formNode.removeAttribute('submit-invalid');\n  }\n\n  private _onReset(event: Event) {\n    if (event.target === null) {\n      return;\n    }\n    (event.target as HTMLFormElement).removeAttribute('submit-invalid');\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._onSlotChanged}></slot>`;\n  }\n}\n"],"names":[],"mappings":";AAMO,MAAM,uBAAuB,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,eAAuC;AAAA,EAAA;AAAA,EAExC,iBAAyC;AAC9C,WAAO,KAAK;AAAA,EACd;AAAA,EAEQ,eAAe,OAAc;AACnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,oBAAoB,UAAU,KAAK,SAAS;AAC9D,WAAK,aAAa,oBAAoB,SAAS,KAAK,QAAQ;AAAA,IAC9D;AAEA,UAAM,eAAgB,MAAM,OACzB,cAAc,EAAE,SAAS,KAAA,CAAM,EAC/B,OAAO,CAAA,MAAK,aAAa,eAAe;AAC3C,SAAK,eAAe,aAAa,SAAS,IAAI,aAAa,CAAC,IAAI;AAEhE,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,aAAa,cAAc,EAAE;AAC/C,WAAK,aAAa,iBAAiB,UAAU,KAAK,SAAS;AAC3D,WAAK,aAAa,iBAAiB,SAAS,KAAK,QAAQ;AAAA,IAC3D;AAAA,EACF;AAAA,EAEQ,UAAU,OAAoB;AACpC,QAAI,MAAM,WAAW,MAAM;AACzB;AAAA,IACF;AACA,UAAM,WAAW,MAAM;AACvB,UAAM,UAAU,SAAS,cAAA;AAEzB,QAAI,CAAC,SAAS;AAEZ,eAAS,aAAa,kBAAkB,EAAE;AAC1C;AAAA,IACF;AACA,aAAS,gBAAgB,gBAAgB;AAAA,EAC3C;AAAA,EAEQ,SAAS,OAAc;AAC7B,QAAI,MAAM,WAAW,MAAM;AACzB;AAAA,IACF;AACC,UAAM,OAA2B,gBAAgB,gBAAgB;AAAA,EACpE;AAAA,EAEA,SAAS;AACP,WAAO,yBAAyB,KAAK,cAAc;AAAA,EACrD;AACF;"}
+{"version":3,"file":"form.element.js","names":[],"sources":["../../../src/components/form/form.element.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\n/**\n * @element uui-form\n * @description uui-form must wrap a native form element. This ensures the User Experiences of the form fits with the Umbraco standard.\n */\nexport class UUIFormElement extends LitElement {\n  private _formElement: HTMLFormElement | null = null;\n\n  public getFormElement(): HTMLFormElement | null {\n    return this._formElement;\n  }\n\n  private _onSlotChanged(event: Event) {\n    if (this._formElement) {\n      this._formElement.removeEventListener('submit', this._onSubmit);\n      this._formElement.removeEventListener('reset', this._onReset);\n    }\n\n    const formElements = (event.target as HTMLSlotElement)\n      .assignedNodes({ flatten: true })\n      .filter(x => x instanceof HTMLFormElement);\n    this._formElement = formElements.length > 0 ? formElements[0] : null;\n\n    if (this._formElement) {\n      this._formElement.setAttribute('novalidate', '');\n      this._formElement.addEventListener('submit', this._onSubmit);\n      this._formElement.addEventListener('reset', this._onReset);\n    }\n  }\n\n  private _onSubmit(event: SubmitEvent) {\n    if (event.target === null) {\n      return;\n    }\n    const formNode = event.target as HTMLFormElement;\n    const isValid = formNode.checkValidity();\n\n    if (!isValid) {\n      // submit-invalid attribute is used by descendant form controls to check wether submit has been requested without succeeding.\n      formNode.setAttribute('submit-invalid', '');\n      return;\n    }\n    formNode.removeAttribute('submit-invalid');\n  }\n\n  private _onReset(event: Event) {\n    if (event.target === null) {\n      return;\n    }\n    (event.target as HTMLFormElement).removeAttribute('submit-invalid');\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._onSlotChanged}></slot>`;\n  }\n}\n"],"mappings":";;;;;;AAMA,IAAa,iBAAb,cAAoC,WAAW;;;sBACE;;CAE/C,iBAAgD;EAC9C,OAAO,KAAK;CACd;CAEA,eAAuB,OAAc;EACnC,IAAI,KAAK,cAAc;GACrB,KAAK,aAAa,oBAAoB,UAAU,KAAK,SAAS;GAC9D,KAAK,aAAa,oBAAoB,SAAS,KAAK,QAAQ;EAC9D;EAEA,MAAM,eAAgB,MAAM,OACzB,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAChC,QAAO,MAAK,aAAa,eAAe;EAC3C,KAAK,eAAe,aAAa,SAAS,IAAI,aAAa,KAAK;EAEhE,IAAI,KAAK,cAAc;GACrB,KAAK,aAAa,aAAa,cAAc,EAAE;GAC/C,KAAK,aAAa,iBAAiB,UAAU,KAAK,SAAS;GAC3D,KAAK,aAAa,iBAAiB,SAAS,KAAK,QAAQ;EAC3D;CACF;CAEA,UAAkB,OAAoB;EACpC,IAAI,MAAM,WAAW,MACnB;EAEF,MAAM,WAAW,MAAM;EAGvB,IAAI,CAFY,SAAS,cAEpB,GAAS;GAEZ,SAAS,aAAa,kBAAkB,EAAE;GAC1C;EACF;EACA,SAAS,gBAAgB,gBAAgB;CAC3C;CAEA,SAAiB,OAAc;EAC7B,IAAI,MAAM,WAAW,MACnB;EAEF,MAAO,OAA2B,gBAAgB,gBAAgB;CACpE;CAEA,SAAS;EACP,OAAO,IAAI,qBAAqB,KAAK,eAAe;CACtD;AACF"}

package/dist/components/form/form.js

@@ -1,8 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUIFormElement } from "./form.element.js";
+//#region src/components/form/form.ts
 defineElement("uui-form", UUIFormElement);
-export {
-  UUIFormElement,
-  UUIFormElement as default
-};
-//# sourceMappingURL=form.js.map
+//#endregion
+export { UUIFormElement };
+
+//# sourceMappingURL=form.js.map

package/dist/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../src/components/form/form.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFormElement } from './form.element.js';\n\ndefineElement('uui-form', UUIFormElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-form': UUIFormElement;\n  }\n}\n\nexport * from './form.element.js';\nexport { UUIFormElement as default } from './form.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,YAAY,cAAc;"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFormElement } from './form.element.js';\n\ndefineElement('uui-form', UUIFormElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-form': UUIFormElement;\n  }\n}\n\nexport * from './form.element.js';\n"],"mappings":";;;AAGA,cAAc,YAAY,cAAc"}

package/dist/components/form-layout-item/form-layout-item.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './form-layout-item.element.js';
-export { UUIFormLayoutItemElement as default } from './form-layout-item.element.js';

package/dist/components/form-layout-item/form-layout-item.element.js

@@ -1,30 +1,31 @@
-import { LitElement, html, css } from "lit";
-import { property, state } from "lit/decorators.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../form-validation-message/form-validation-message.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIFormLayoutItemElement = class _UUIFormLayoutItemElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.description = null;
-    this._labelSlotHasContent = false;
-    this._labelSlotChanged = (e) => {
-      this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
-    };
-    this._descriptionSlotHasContent = false;
-    this._descriptionSlotChanged = (e) => {
-      this._descriptionSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
-    };
-  }
-  render() {
-    return html`
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/form-layout-item/form-layout-item.element.ts
+/**
+* @element uui-form-layout-item
+* @description - Form item composes label, input and validation-messages in a proper layout.
+* @slot - for button contents
+* @slot message - for extras in the messages container
+* @slot description - for extras in the description container
+* @slot label - for label contents
+*/
+var UUIFormLayoutItemElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.description = null;
+		this._labelSlotHasContent = false;
+		this._labelSlotChanged = (e) => {
+			this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+		};
+		this._descriptionSlotHasContent = false;
+		this._descriptionSlotChanged = (e) => {
+			this._descriptionSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+		};
+	}
+	render() {
+		return html`
       <div id="label" style=${this._labelSlotHasContent ? "" : "display: none"}>
         <slot name="label" @slotchange=${this._labelSlotChanged}></slot>
       </div>
@@ -41,10 +42,9 @@ const _UUIFormLayoutItemElement = class _UUIFormLayoutItemElement extends LitEle
         <slot name="message" slot="message"></slot>
       </uui-form-validation-message>
     `;
-  }
-};
-_UUIFormLayoutItemElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: block;
@@ -63,19 +63,13 @@ _UUIFormLayoutItemElement.styles = [
         margin-top: -8px;
         min-height: 8px;
       }
-    `
-];
-let UUIFormLayoutItemElement = _UUIFormLayoutItemElement;
-__decorateClass([
-  property({ type: String })
-], UUIFormLayoutItemElement.prototype, "description");
-__decorateClass([
-  state()
-], UUIFormLayoutItemElement.prototype, "_labelSlotHasContent");
-__decorateClass([
-  state()
-], UUIFormLayoutItemElement.prototype, "_descriptionSlotHasContent");
-export {
-  UUIFormLayoutItemElement
+    `];
+	}
 };
-//# sourceMappingURL=form-layout-item.element.js.map
+__decorate([property({ type: String })], UUIFormLayoutItemElement.prototype, "description", void 0);
+__decorate([state()], UUIFormLayoutItemElement.prototype, "_labelSlotHasContent", void 0);
+__decorate([state()], UUIFormLayoutItemElement.prototype, "_descriptionSlotHasContent", void 0);
+//#endregion
+export { UUIFormLayoutItemElement };
+
+//# sourceMappingURL=form-layout-item.element.js.map

package/dist/components/form-layout-item/form-layout-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout-item.element.js","sources":["../../../src/components/form-layout-item/form-layout-item.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport '../form-validation-message/form-validation-message.js';\n\n// TODO: Make sure validation messages can be seen for the whole Form Item. Make them follow the screen if form controls are taller than available screen height.\n\n/**\n * @element uui-form-layout-item\n * @description - Form item composes label, input and validation-messages in a proper layout.\n * @slot - for button contents\n * @slot message - for extras in the messages container\n * @slot description - for extras in the description container\n * @slot label - for label contents\n */\n\nexport class UUIFormLayoutItemElement extends LitElement {\n  /*\n  @property({type: String})\n  label: string | null = null;\n  */\n\n  @property({ type: String })\n  description: string | null = null;\n\n  @state()\n  private _labelSlotHasContent = false;\n\n  private readonly _labelSlotChanged = (e: Event) => {\n    this._labelSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  @state()\n  private _descriptionSlotHasContent = false;\n\n  private readonly _descriptionSlotChanged = (e: Event) => {\n    this._descriptionSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    return html`\n      <div id=\"label\" style=${this._labelSlotHasContent ? '' : 'display: none'}>\n        <slot name=\"label\" @slotchange=${this._labelSlotChanged}></slot>\n      </div>\n      <div\n        id=\"description\"\n        style=${this._descriptionSlotHasContent || this.description !== null\n          ? ''\n          : 'display: none'}>\n        ${this.description}\n        <slot\n          name=\"description\"\n          @slotchange=${this._descriptionSlotChanged}></slot>\n      </div>\n      <uui-form-validation-message>\n        <slot></slot>\n        <slot name=\"message\" slot=\"message\"></slot>\n      </uui-form-validation-message>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        margin-top: var(--uui-size-space-5);\n        margin-bottom: var(--uui-size-space-5);\n      }\n      #label {\n        margin-top: -5px;\n        margin-bottom: 5px;\n      }\n      #description {\n        color: var(--uui-color-disabled-contrast);\n        font-size: var(--uui-type-small-size);\n      }\n      #label + #description {\n        margin-top: -8px;\n        min-height: 8px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAgBO,MAAM,4BAAN,MAAM,kCAAiC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,cAA6B;AAG7B,SAAQ,uBAAuB;AAE/B,SAAiB,oBAAoB,CAAC,MAAa;AACjD,WAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAGA,SAAQ,6BAA6B;AAErC,SAAiB,0BAA0B,CAAC,MAAa;AACvD,WAAK,6BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAAA,EAAA;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,8BACmB,KAAK,uBAAuB,KAAK,eAAe;AAAA,yCACrC,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,gBAI/C,KAAK,8BAA8B,KAAK,gBAAgB,OAC5D,KACA,eAAe;AAAA,UACjB,KAAK,WAAW;AAAA;AAAA;AAAA,wBAGF,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOlD;AAwBF;AAtBE,0BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAhDG,IAAM,2BAAN;AAOL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,yBAOX,WAAA,aAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GATI,yBAUH,WAAA,sBAAA;AAQA,gBAAA;AAAA,EADP,MAAA;AAAM,GAjBI,yBAkBH,WAAA,4BAAA;"}
+{"version":3,"file":"form-layout-item.element.js","names":[],"sources":["../../../src/components/form-layout-item/form-layout-item.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport '../form-validation-message/form-validation-message.js';\n\n// TODO: Make sure validation messages can be seen for the whole Form Item. Make them follow the screen if form controls are taller than available screen height.\n\n/**\n * @element uui-form-layout-item\n * @description - Form item composes label, input and validation-messages in a proper layout.\n * @slot - for button contents\n * @slot message - for extras in the messages container\n * @slot description - for extras in the description container\n * @slot label - for label contents\n */\n\nexport class UUIFormLayoutItemElement extends LitElement {\n  /*\n  @property({type: String})\n  label: string | null = null;\n  */\n\n  @property({ type: String })\n  description: string | null = null;\n\n  @state()\n  private _labelSlotHasContent = false;\n\n  private readonly _labelSlotChanged = (e: Event) => {\n    this._labelSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  @state()\n  private _descriptionSlotHasContent = false;\n\n  private readonly _descriptionSlotChanged = (e: Event) => {\n    this._descriptionSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    return html`\n      <div id=\"label\" style=${this._labelSlotHasContent ? '' : 'display: none'}>\n        <slot name=\"label\" @slotchange=${this._labelSlotChanged}></slot>\n      </div>\n      <div\n        id=\"description\"\n        style=${this._descriptionSlotHasContent || this.description !== null\n          ? ''\n          : 'display: none'}>\n        ${this.description}\n        <slot\n          name=\"description\"\n          @slotchange=${this._descriptionSlotChanged}></slot>\n      </div>\n      <uui-form-validation-message>\n        <slot></slot>\n        <slot name=\"message\" slot=\"message\"></slot>\n      </uui-form-validation-message>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        margin-top: var(--uui-size-space-5);\n        margin-bottom: var(--uui-size-space-5);\n      }\n      #label {\n        margin-top: -5px;\n        margin-bottom: 5px;\n      }\n      #description {\n        color: var(--uui-color-disabled-contrast);\n        font-size: var(--uui-type-small-size);\n      }\n      #label + #description {\n        margin-top: -8px;\n        min-height: 8px;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,2BAAb,cAA8C,WAAW;;;qBAO1B;8BAGE;4BAEO,MAAa;GACjD,KAAK,uBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAAS;EAC5E;oCAGqC;kCAEO,MAAa;GACvD,KAAK,6BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAAS;EAC5E;;CAEA,SAAS;EACP,OAAO,IAAI;8BACe,KAAK,uBAAuB,KAAK,gBAAgB;yCACtC,KAAK,kBAAkB;;;;gBAIhD,KAAK,8BAA8B,KAAK,gBAAgB,OAC5D,KACA,gBAAgB;UAClB,KAAK,YAAY;;;wBAGH,KAAK,wBAAwB;;;;;;;CAOnD;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;KAoBL;;AACF;YA/DG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,eAAA,KAAA,CAAA;YAGzB,MAAM,CAAA,GAAA,yBAAA,WAAA,wBAAA,KAAA,CAAA;YAQN,MAAM,CAAA,GAAA,yBAAA,WAAA,8BAAA,KAAA,CAAA"}