@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

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

@@ -0,0 +1,20 @@
+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
+};
+//# sourceMappingURL=UUIFileSize.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,9 @@
+import { UUIFilePreviewElement } from './file-preview.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-file-preview': UUIFilePreviewElement;
+    }
+}
+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.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import '../symbol-folder/symbol-folder.js';
+import '../symbol-file-thumbnail/symbol-file-thumbnail.js';
+import '../symbol-file/symbol-file.js';
+/**
+ *  @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.
+ */
+export declare class UUIFilePreviewElement extends LitElement {
+    #private;
+    private _src;
+    get file(): File | undefined;
+    set file(newValue: File | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,175 @@
+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 "../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
+        .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
+      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`
+      <span id="file-name">
+        <span id="file-name-start">${nameStart}</span>
+        <span id="file-name-end">${nameEnd}</span>
+      </span>
+    `;
+};
+renderSize_fn = function() {
+  const size = __privateGet(this, _file)?.size ?? 0;
+  if (!size) return "";
+  return html`${UUIFileSize.humanFileSize(size, true)}`;
+};
+_UUIFilePreviewElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: grid;
+        /* These have to be changed together */
+        grid-template-rows: 100px 50px;
+        width: 150px;
+        height: 150px;
+        /* --------------------------------- */
+        box-sizing: border-box;
+        aspect-ratio: 1;
+        color: var(--uui-color-text);
+      }
+
+      :host(:hover) slot[name='actions']::slotted(*) {
+        opacity: 1;
+      }
+
+      slot[name='actions']::slotted(*) {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        max-width: 100%;
+        height: 32px;
+        font-size: 13px;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 150ms;
+      }
+
+      #file-symbol {
+        aspect-ratio: 1 / 1;
+        margin: auto;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      #file-info {
+        min-width: 0;
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+        font-size: 1rem;
+      }
+
+      #file-name {
+        display: flex;
+        justify-content: center;
+      }
+
+      #file-name-start {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      #file-name-end {
+        white-space: nowrap;
+      }
+
+      #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

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

@@ -0,0 +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;"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { UUIFormElement } from './form.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-form': UUIFormElement;
+    }
+}
+export * from './form.element.js';
+export { UUIFormElement as default } from './form.element.js';

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

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+/**
+ * @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.
+ */
+export declare class UUIFormElement extends LitElement {
+    private _formElement;
+    getFormElement(): HTMLFormElement | null;
+    private _onSlotChanged;
+    private _onSubmit;
+    private _onReset;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +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
+};
+//# sourceMappingURL=form.element.js.map

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

@@ -0,0 +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;"}

package/dist/components/form/form.js

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { UUIFormLayoutItemElement } from './form-layout-item.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-form-layout-item': UUIFormLayoutItemElement;
+    }
+}
+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.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '../form-validation-message/form-validation-message.js';
+/**
+ * @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
+ */
+export declare class UUIFormLayoutItemElement extends LitElement {
+    description: string | null;
+    private _labelSlotHasContent;
+    private readonly _labelSlotChanged;
+    private _descriptionSlotHasContent;
+    private readonly _descriptionSlotChanged;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,81 @@
+import { LitElement, html, css } from "lit";
+import { property, state } from "lit/decorators.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`
+      <div id="label" style=${this._labelSlotHasContent ? "" : "display: none"}>
+        <slot name="label" @slotchange=${this._labelSlotChanged}></slot>
+      </div>
+      <div
+        id="description"
+        style=${this._descriptionSlotHasContent || this.description !== null ? "" : "display: none"}>
+        ${this.description}
+        <slot
+          name="description"
+          @slotchange=${this._descriptionSlotChanged}></slot>
+      </div>
+      <uui-form-validation-message>
+        <slot></slot>
+        <slot name="message" slot="message"></slot>
+      </uui-form-validation-message>
+    `;
+  }
+};
+_UUIFormLayoutItemElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: block;
+        margin-top: var(--uui-size-space-5);
+        margin-bottom: var(--uui-size-space-5);
+      }
+      #label {
+        margin-top: -5px;
+        margin-bottom: 5px;
+      }
+      #description {
+        color: var(--uui-color-disabled-contrast);
+        font-size: var(--uui-type-small-size);
+      }
+      #label + #description {
+        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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIFormLayoutItemElement } from "./form-layout-item.element.js";
+defineElement("uui-form-layout-item", UUIFormLayoutItemElement);
+export {
+  UUIFormLayoutItemElement,
+  UUIFormLayoutItemElement as default
+};
+//# sourceMappingURL=form-layout-item.js.map

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

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

package/dist/components/form-validation-message/form-validation-message.d.ts

@@ -0,0 +1,8 @@
+import { UUIFormValidationMessageElement } from './form-validation-message.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-form-validation-message': UUIFormValidationMessageElement;
+    }
+}
+export * from './form-validation-message.element.js';
+export { UUIFormValidationMessageElement as default } from './form-validation-message.element.js';

package/dist/components/form-validation-message/form-validation-message.element.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-form-validation-message
+ * @description - Component for displaying one or more validation messages from UUI Form Control within the given scope.
+ * Notice: Only supports components that is build on the FormControlMixing.
+ * @slot - for button contents
+ * @slot message - for extras in the messages container
+ * @see FormControlMixin
+ */
+export declare class UUIFormValidationMessageElement extends LitElement {
+    /**
+     * Set the element containing Form Controls of interest.
+     * @type {string}
+     * @attr for
+     * @default this
+     */
+    get for(): HTMLElement | string | null;
+    set for(value: HTMLElement | string | null);
+    private _for;
+    constructor();
+    private readonly _messages;
+    private readonly _onControlInvalid;
+    private readonly _onControlValid;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/form-validation-message/form-validation-message.element.js

@@ -0,0 +1,100 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { UUIFormControlEvent } from "../../internal/events/UUIFormControlEvent.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key);
+  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 _UUIFormValidationMessageElement = class _UUIFormValidationMessageElement extends LitElement {
+  constructor() {
+    super();
+    this._for = null;
+    this._messages = /* @__PURE__ */ new Map();
+    this._onControlInvalid = (e) => {
+      const ctrl = e.composedPath()[0];
+      if (ctrl.pristine === false) {
+        this._messages.set(ctrl, ctrl.validationMessage);
+      } else {
+        this._messages.delete(ctrl);
+      }
+      this.requestUpdate("_messages");
+    };
+    this._onControlValid = (e) => {
+      const ctrl = e.composedPath()[0];
+      this._messages.delete(ctrl);
+      this.requestUpdate("_messages");
+    };
+    this.for ??= this;
+  }
+  get for() {
+    return this._for;
+  }
+  set for(value) {
+    let element = null;
+    if (typeof value === "string") {
+      const scope = this.getRootNode();
+      element = scope?.getElementById(value);
+    } else if (value instanceof HTMLElement) {
+      element = value;
+    }
+    const newScope = element ?? this;
+    const oldScope = this._for;
+    if (oldScope === newScope) {
+      return;
+    }
+    if (oldScope !== null) {
+      oldScope.removeEventListener(
+        UUIFormControlEvent.INVALID,
+        this._onControlInvalid
+      );
+      oldScope.removeEventListener(
+        UUIFormControlEvent.VALID,
+        this._onControlValid
+      );
+    }
+    this._for = newScope;
+    this._for.addEventListener(
+      UUIFormControlEvent.INVALID,
+      this._onControlInvalid
+    );
+    this._for.addEventListener(
+      UUIFormControlEvent.VALID,
+      this._onControlValid
+    );
+  }
+  render() {
+    return html`
+      <slot></slot>
+      <div id="messages">
+        ${repeat(
+      this._messages,
+      (item) => html`<div>${unsafeHTML(item[1])}</div>`
+    )}
+        <slot name="message"></slot>
+      </div>
+    `;
+  }
+};
+_UUIFormValidationMessageElement.styles = [
+  css`
+      #messages {
+        color: var(--uui-color-invalid-standalone);
+      }
+    `
+];
+let UUIFormValidationMessageElement = _UUIFormValidationMessageElement;
+__decorateClass([
+  property({ reflect: false, attribute: true })
+], UUIFormValidationMessageElement.prototype, "for");
+export {
+  UUIFormValidationMessageElement
+};
+//# sourceMappingURL=form-validation-message.element.js.map

package/dist/components/form-validation-message/form-validation-message.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-validation-message.element.js","sources":["../../../src/components/form-validation-message/form-validation-message.element.ts"],"sourcesContent":["import { UUIFormControlEvent } from '../../internal/events/index.js';\nimport type { UUIFormControlMixinInterface } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\n/**\n * @element uui-form-validation-message\n * @description - Component for displaying one or more validation messages from UUI Form Control within the given scope.\n * Notice: Only supports components that is build on the FormControlMixing.\n * @slot - for button contents\n * @slot message - for extras in the messages container\n * @see FormControlMixin\n */\n\nexport class UUIFormValidationMessageElement extends LitElement {\n  /**\n   * Set the element containing Form Controls of interest.\n   * @type {string}\n   * @attr for\n   * @default this\n   */\n  @property({ reflect: false, attribute: true })\n  public get for(): HTMLElement | string | null {\n    return this._for;\n  }\n  public set for(value: HTMLElement | string | null) {\n    let element = null;\n    if (typeof value === 'string') {\n      const scope = this.getRootNode();\n      element = (scope as DocumentFragment)?.getElementById(value);\n    } else if (value instanceof HTMLElement) {\n      element = value;\n    }\n    const newScope = element ?? this;\n    const oldScope = this._for;\n\n    if (oldScope === newScope) {\n      return;\n    }\n    if (oldScope !== null) {\n      oldScope.removeEventListener(\n        UUIFormControlEvent.INVALID,\n        this._onControlInvalid as EventListener,\n      );\n      oldScope.removeEventListener(\n        UUIFormControlEvent.VALID,\n        this._onControlValid as EventListener,\n      );\n    }\n    this._for = newScope;\n    this._for.addEventListener(\n      UUIFormControlEvent.INVALID,\n      this._onControlInvalid as EventListener,\n    );\n    this._for.addEventListener(\n      UUIFormControlEvent.VALID,\n      this._onControlValid as EventListener,\n    );\n  }\n  private _for: HTMLElement | null = null;\n\n  constructor() {\n    super();\n    this.for ??= this;\n  }\n\n  private readonly _messages = new Map<\n    UUIFormControlMixinInterface<unknown>,\n    string\n  >();\n\n  private readonly _onControlInvalid = (e: UUIFormControlEvent) => {\n    const ctrl = (e as any).composedPath()[0];\n    if (ctrl.pristine === false) {\n      // Currently we only show message from components who does have the pristine property. (we only want to show messages from fields that are NOT pristine aka. that are dirty or in a from that has been submitted)\n      this._messages.set(ctrl, ctrl.validationMessage);\n    } else {\n      this._messages.delete(ctrl);\n    }\n    this.requestUpdate('_messages');\n  };\n\n  private readonly _onControlValid = (e: UUIFormControlEvent) => {\n    const ctrl = (e as any).composedPath()[0];\n    this._messages.delete(ctrl);\n    this.requestUpdate('_messages');\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n      <div id=\"messages\">\n        ${repeat(\n          this._messages,\n          item => html`<div>${unsafeHTML(item[1])}</div>`,\n        )}\n        <slot name=\"message\"></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      #messages {\n        color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,mCAAN,MAAM,yCAAwC,WAAW;AAAA,EA+C9D,cAAc;AACZ,UAAA;AAHF,SAAQ,OAA2B;AAOnC,SAAiB,gCAAgB,IAAA;AAKjC,SAAiB,oBAAoB,CAAC,MAA2B;AAC/D,YAAM,OAAQ,EAAU,aAAA,EAAe,CAAC;AACxC,UAAI,KAAK,aAAa,OAAO;AAE3B,aAAK,UAAU,IAAI,MAAM,KAAK,iBAAiB;AAAA,MACjD,OAAO;AACL,aAAK,UAAU,OAAO,IAAI;AAAA,MAC5B;AACA,WAAK,cAAc,WAAW;AAAA,IAChC;AAEA,SAAiB,kBAAkB,CAAC,MAA2B;AAC7D,YAAM,OAAQ,EAAU,aAAA,EAAe,CAAC;AACxC,WAAK,UAAU,OAAO,IAAI;AAC1B,WAAK,cAAc,WAAW;AAAA,IAChC;AAvBE,SAAK,QAAQ;AAAA,EACf;AAAA,EA1CA,IAAW,MAAmC;AAC5C,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,IAAI,OAAoC;AACjD,QAAI,UAAU;AACd,QAAI,OAAO,UAAU,UAAU;AAC7B,YAAM,QAAQ,KAAK,YAAA;AACnB,gBAAW,OAA4B,eAAe,KAAK;AAAA,IAC7D,WAAW,iBAAiB,aAAa;AACvC,gBAAU;AAAA,IACZ;AACA,UAAM,WAAW,WAAW;AAC5B,UAAM,WAAW,KAAK;AAEtB,QAAI,aAAa,UAAU;AACzB;AAAA,IACF;AACA,QAAI,aAAa,MAAM;AACrB,eAAS;AAAA,QACP,oBAAoB;AAAA,QACpB,KAAK;AAAA,MAAA;AAEP,eAAS;AAAA,QACP,oBAAoB;AAAA,QACpB,KAAK;AAAA,MAAA;AAAA,IAET;AACA,SAAK,OAAO;AACZ,SAAK,KAAK;AAAA,MACR,oBAAoB;AAAA,MACpB,KAAK;AAAA,IAAA;AAEP,SAAK,KAAK;AAAA,MACR,oBAAoB;AAAA,MACpB,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EA8BA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,UAGD;AAAA,MACA,KAAK;AAAA,MACL,UAAQ,YAAY,WAAW,KAAK,CAAC,CAAC,CAAC;AAAA,IAAA,CACxC;AAAA;AAAA;AAAA;AAAA,EAIP;AASF;AAPE,iCAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAxFG,IAAM,kCAAN;AAQM,gBAAA;AAAA,EADV,SAAS,EAAE,SAAS,OAAO,WAAW,MAAM;AAAA,GAPlC,gCAQA,WAAA,KAAA;"}

package/dist/components/form-validation-message/form-validation-message.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIFormValidationMessageElement } from "./form-validation-message.element.js";
+defineElement("uui-form-validation-message", UUIFormValidationMessageElement);
+export {
+  UUIFormValidationMessageElement,
+  UUIFormValidationMessageElement as default
+};
+//# sourceMappingURL=form-validation-message.js.map