wj-elements 0.7.6 → 0.8.0

package/dist/wje-input-file.js

@@ -1,114 +1,53 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Input File ]\n*/\n\n:host {\n    --wje-input-font-family: var(--wje-font-family);\n    --wje-input-background-color: var(--wje-background);\n    --wje-input-color: var(--wje-color);\n    --wje-input-color-invalid: var(--wje-color-danger);\n    --wje-input-border-color: var(--wje-border-color);\n    --wje-input-border-color-focus: var(--wje-color-primary);\n    --wje-input-border-width: 1px;\n    --wje-input-border-style: solid;\n    --wje-input-border-radius: 4px;\n    --wje-input-margin-bottom: 0.5rem;\n    --wje-input-line-height: 20px;\n    --wje-input-slot-padding-inline: 0.5rem;\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n\n    .wrapper {\n        display: flex;\n        width: 100%;\n    }\n    .native-input {\n        .input-wrapper {\n            width: 100%;\n            position: relative;\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                margin-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                margin: 0;\n                display: block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            label {\n                margin: 0;\n                display: inline-block;\n                opacity: 1;\n                cursor: text;\n                transition: opacity 0.2s ease;\n                line-height: var(--wje-input-line-height);\n            }\n            .input-wrapper {\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            .error-message {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([required]) .input-wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: '*';\n    font-family: var(--wje-force-mac-font-family);\n    font-size: 20px;\n    position: absolute;\n    right: 10px;\n    top: 2px;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    top: 0;\n}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    font-family: var(--wje-input-font-family);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n.error-message {\n    display: none;\n    position: absolute;\n    width: auto;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: 12px;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
-class InputFile extends WJElement {
-  /**
-   * Constructor for the InputFile class.
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class r extends t {
   constructor() {
     super();
-    /**
-     * The class name for the InputFile class.
-     * @type {string}
-     */
     __publicField(this, "className", "Input");
     this._value = "";
   }
-  /**
-   * @summary Sets the value of the input file.
-   * @param {string} value The value to set for the input file.
-   */
-  set value(value) {
-    this._value = value;
+  set value(t2) {
+    this._value = t2;
   }
-  /**
-   * Gets the value of the input file.
-   * @returns {string}
-   */
   get value() {
     return this._value;
   }
-  /**
-   * Returns the CSS stylesheet.
-   * @static
-   * @returns {object} styles
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-input-font-family: var(--wje-font-family);--wje-input-background-color: var(--wje-background);--wje-input-color: var(--wje-color);--wje-input-color-invalid: var(--wje-color-danger);--wje-input-border-color: var(--wje-border-color);--wje-input-border-color-focus: var(--wje-color-primary);--wje-input-border-width: 1px;--wje-input-border-style: solid;--wje-input-border-radius: 4px;--wje-input-margin-bottom: .5rem;--wje-input-line-height: 20px;--wje-input-slot-padding-inline: .5rem;width:100%;margin-bottom:var(--wje-input-margin-bottom);display:block}:host .wrapper{display:flex;width:100%}:host .native-input .input-wrapper{width:100%;position:relative}:host .native-input.default{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:0;padding-top:.25rem;padding-bottom:.25rem;transition:background-color .2s ease;cursor:text}:host .native-input.default .input-wrapper{margin-inline:.5rem}:host .native-input.default.focused{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.default.focused label{opacity:.67;font-size:12px;letter-spacing:normal}:host .native-input.default input{border:none;height:25px;min-height:25px;padding:0;margin-top:-4px;background:none;box-shadow:none;width:100%}:host .native-input.default label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.default label.fade{opacity:.5;font-size:12px;letter-spacing:normal}:host .native-input.default ::slotted([slot="start"]){border-left:none;border-top:none;border-bottom:none}:host .native-input.default ::slotted([slot="end"]){border-right:none;border-top:none;border-bottom:none}:host .native-input.standard{background-color:var(--wje-input-background-color);font-family:var(--wje-input-font-family);position:relative;border-radius:var(--wje-input-border-radius);padding-inline:0;padding-top:0;padding-bottom:0;transition:background-color .2s ease;cursor:text}:host .native-input.standard.focused input{border-color:var(--wje-input-border-color-focus)!important}:host .native-input.standard input{display:block;min-height:32px;padding-inline:.5rem;padding-top:0;padding-bottom:0;background:none;box-shadow:none;width:100%;box-sizing:border-box;border-radius:var(--wje-input-border-radius);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color)}:host .native-input.standard label{margin:0;display:inline-block;opacity:1;cursor:text;transition:opacity .2s ease;line-height:var(--wje-input-line-height)}:host .native-input.standard .input-wrapper:hover .clear{visibility:visible}:host .native-input.standard ::slotted([slot="start"]){border-right:none;border-radius:var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius)}:host .native-input.standard ::slotted([slot="end"]){border-left:none;border-radius:0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0}:host .native-input.standard.has-start input{border-top-left-radius:0;border-bottom-left-radius:0}:host .native-input.standard.has-end input{border-top-right-radius:0;border-bottom-right-radius:0}:host .native-input.standard .error-message{position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px;line-height:normal}.clear{visibility:hidden;position:absolute;right:0;top:3px;--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}:host([required]) .input-wrapper:after{color:var(--wje-input-color-invalid);content:"*";font-family:var(--wje-force-mac-font-family);font-size:20px;position:absolute;right:10px;top:2px}:host([required]) .standard .input-wrapper:after{top:0}:host([invalid]) .error-message{display:block}:host([invalid]) .default label{opacity:1!important;color:var(--wje-input-color-invalid)!important;animation-name:shake;animation-duration:.4s;animation-iteration-count:1}::slotted([slot="start"]),::slotted([slot="end"]){display:flex;align-items:center;border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);padding-inline:var(--wje-input-slot-padding-inline)}slot[name=start],slot[name=end]{display:flex}input{background-color:var(--wje-input-background-color);border-width:var(--wje-input-border-width);border-style:var(--wje-input-border-style);border-color:var(--wje-input-border-color);font-family:var(--wje-input-font-family);color:var(--wje-input-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;padding:.25rem .5rem;line-height:var(--wje-input-line-height);font-size:14px;font-weight:400;vertical-align:middle;min-height:32px}.error-message{display:none;position:absolute;width:auto;max-width:100%;min-width:auto;border-radius:50px;background:#000;padding:.25rem .5rem;top:0;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;line-height:normal}@keyframes shake{8%,41%{transform:translate(-4px)}25%,58%{transform:translate(4px)}75%{transform:translate(-2px)}92%{transform:translate(2px)}0%,to{transform:translate(0)}}';
   }
-  /**
-   * Returns the observed attributes.
-   * @static
-   * @returns {Array} An empty array
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({ role: "group" });
+    this.isShadowRoot = "open", this.setAriaState({ role: "group" });
   }
-  /**
-   * Draws the component.
-   * @returns {object} Document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-input-file", this.variant || "default");
-    let fileInput = document.createElement("input");
-    fileInput.setAttribute("type", "file");
-    fileInput.setAttribute("multiple", "");
-    fileInput.setAttribute("hidden", "");
-    fileInput.setAttribute("aria-hidden", "true");
-    let input = document.createElement("wje-input");
-    input.setAttribute("variant", "standard");
-    input.setAttribute("type", "text");
-    input.setAttribute("placeholder", "Click to upload");
-    input.setAttribute("readonly", "");
-    let span = document.createElement("span");
-    span.setAttribute("slot", "start");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("slot", "icon-only");
-    icon.setAttribute("name", "cloud-upload");
-    span.appendChild(icon);
-    input.appendChild(span);
-    native.appendChild(input);
-    native.appendChild(fileInput);
-    fragment.appendChild(native);
-    this.native = native;
-    this.input = input;
-    this.fileInput = fileInput;
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "native"), e2.classList.add("native-input-file", this.variant || "default");
+    let r2 = document.createElement("input");
+    r2.setAttribute("type", "file"), r2.setAttribute("multiple", ""), r2.setAttribute("hidden", ""), r2.setAttribute("aria-hidden", "true");
+    let i = document.createElement("wje-input");
+    i.setAttribute("variant", "standard"), i.setAttribute("type", "text"), i.setAttribute("placeholder", "Click to upload"), i.setAttribute("readonly", "");
+    let o = document.createElement("span");
+    o.setAttribute("slot", "start");
+    let n = document.createElement("wje-icon");
+    return n.setAttribute("slot", "icon-only"), n.setAttribute("name", "cloud-upload"), o.appendChild(n), i.appendChild(o), e2.appendChild(i), e2.appendChild(r2), t2.appendChild(e2), this.native = e2, this.input = i, this.fileInput = r2, t2;
   }
-  /**
-   * After draw method for the InputFile class.
-   */
   afterDraw() {
     this.input.addEventListener("click", () => {
       this.fileInput.click();
-    });
-    this.fileInput.addEventListener("change", (e) => {
-      let files = e.target.files;
-      let fileNames = [];
-      for (let i = 0; i < files.length; i++) {
-        fileNames.push(files[i].name);
-      }
-      this.input.value = fileNames.join(", ");
-      this.value = files;
-      event.dispatchCustomEvent(this, "wje-input-file:change", { files });
+    }), this.fileInput.addEventListener("change", (t2) => {
+      let r2 = t2.target.files, i = [];
+      for (let t3 = 0; t3 < r2.length; t3++) i.push(r2[t3].name);
+      this.input.value = i.join(", "), this.value = r2, e.dispatchCustomEvent(this, "wje-input-file:change", { files: r2 });
     });
   }
 }
-InputFile.define("wje-input-file", InputFile);
+r.define("wje-input-file", r);
 export {
-  InputFile as default
+  r as default
 };
 //# sourceMappingURL=wje-input-file.js.map

package/dist/wje-input-file.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-input-file.js","sources":["../packages/wje-input-file/input-file.element.js","../packages/wje-input-file/input-file.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InputFile` is a custom web component that represents a file input.\n * @summary This element represents a file input.\n * @documentation https://elements.webjet.sk/components/input-file\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native file input wrapper.\n * @csspart input - The text input.\n * @csspart file-input - The file input element.\n * // @fires wje-input-file:change - Event fired when the file input changes.\n * @tag wje-input-file\n */\nexport default class InputFile extends WJElement {\n    /**\n     * Constructor for the InputFile class.\n     */\n    constructor() {\n        super();\n        this._value = '';\n    }\n\n    /**\n     * @summary Sets the value of the input file.\n     * @param {string} value The value to set for the input file.\n     */\n    set value(value) {\n        this._value = value;\n    }\n\n    /**\n     * Gets the value of the input file.\n     * @returns {string}\n     */\n    get value() {\n        return this._value;\n    }\n\n    /**\n     * The class name for the InputFile class.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Returns the CSS stylesheet.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input-file', this.variant || 'default');\n\n        // File Input\n        let fileInput = document.createElement('input');\n        fileInput.setAttribute('type', 'file');\n        fileInput.setAttribute('multiple', '');\n        fileInput.setAttribute('hidden', '');\n        fileInput.setAttribute('aria-hidden', 'true');\n\n        // Input\n        let input = document.createElement('wje-input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('type', 'text');\n        input.setAttribute('placeholder', 'Click to upload');\n        input.setAttribute('readonly', '');\n\n        let span = document.createElement('span');\n        span.setAttribute('slot', 'start');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'cloud-upload');\n\n        span.appendChild(icon);\n        input.appendChild(span);\n\n        native.appendChild(input);\n        native.appendChild(fileInput);\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.input = input;\n        this.fileInput = fileInput;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the InputFile class.\n     */\n    afterDraw() {\n        this.input.addEventListener('click', () => {\n            this.fileInput.click();\n        });\n\n        this.fileInput.addEventListener('change', (e) => {\n            let files = e.target.files;\n            let fileNames = [];\n\n            for (let i = 0; i < files.length; i++) {\n                fileNames.push(files[i].name);\n            }\n\n            this.input.value = fileNames.join(', ');\n            this.value = files;\n            event.dispatchCustomEvent(this, 'wje-input-file:change', { files: files });\n        });\n    }\n}\n","import InputFile from './input-file.element.js';\n\nexport default InputFile;\n\nInputFile.define('wje-input-file', InputFile);\n"],"names":[],"mappings":";;;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV,UAAK;AAwBT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvBR,SAAK,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,SAAK,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,QAAO,CAAE;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAG9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,qBAAqB,KAAK,WAAW,SAAS;AAGnE,QAAI,YAAY,SAAS,cAAc,OAAO;AAC9C,cAAU,aAAa,QAAQ,MAAM;AACrC,cAAU,aAAa,YAAY,EAAE;AACrC,cAAU,aAAa,UAAU,EAAE;AACnC,cAAU,aAAa,eAAe,MAAM;AAG5C,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,WAAW,UAAU;AACxC,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,eAAe,iBAAiB;AACnD,UAAM,aAAa,YAAY,EAAE;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,OAAO;AAEjC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,aAAa,QAAQ,cAAc;AAExC,SAAK,YAAY,IAAI;AACrB,UAAM,YAAY,IAAI;AAEtB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,SAAS;AAC5B,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,QAAQ;AACb,SAAK,YAAY;AAEjB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,MAAM,iBAAiB,SAAS,MAAM;AACvC,WAAK,UAAU,MAAK;AAAA,IACxB,CAAC;AAED,SAAK,UAAU,iBAAiB,UAAU,CAAC,MAAM;AAC7C,UAAI,QAAQ,EAAE,OAAO;AACrB,UAAI,YAAY,CAAA;AAEhB,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACnC,kBAAU,KAAK,MAAM,CAAC,EAAE,IAAI;AAAA,MAChC;AAEA,WAAK,MAAM,QAAQ,UAAU,KAAK,IAAI;AACtC,WAAK,QAAQ;AACb,YAAM,oBAAoB,MAAM,yBAAyB,EAAE,OAAc;AAAA,IAC7E,CAAC;AAAA,EACL;AACJ;ACxIA,UAAU,OAAO,kBAAkB,SAAS;"}
+{"version":3,"file":"wje-input-file.js","sources":["../packages/wje-input-file/input-file.element.js","../packages/wje-input-file/input-file.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InputFile` is a custom web component that represents a file input.\n * @summary This element represents a file input.\n * @documentation https://elements.webjet.sk/components/input-file\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native file input wrapper.\n * @csspart input - The text input.\n * @csspart file-input - The file input element.\n * // @fires wje-input-file:change - Event fired when the file input changes.\n * @tag wje-input-file\n */\nexport default class InputFile extends WJElement {\n    /**\n     * Constructor for the InputFile class.\n     */\n    constructor() {\n        super();\n        this._value = '';\n    }\n\n    /**\n     * @summary Sets the value of the input file.\n     * @param {string} value The value to set for the input file.\n     */\n    set value(value) {\n        this._value = value;\n    }\n\n    /**\n     * Gets the value of the input file.\n     * @returns {string}\n     */\n    get value() {\n        return this._value;\n    }\n\n    /**\n     * The class name for the InputFile class.\n     * @type {string}\n     */\n    className = 'Input';\n\n    /**\n     * Returns the CSS stylesheet.\n     * @static\n     * @returns {object} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'group' });\n    }\n\n    /**\n     * Draws the component.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        // Wrapper\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-input-file', this.variant || 'default');\n\n        // File Input\n        let fileInput = document.createElement('input');\n        fileInput.setAttribute('type', 'file');\n        fileInput.setAttribute('multiple', '');\n        fileInput.setAttribute('hidden', '');\n        fileInput.setAttribute('aria-hidden', 'true');\n\n        // Input\n        let input = document.createElement('wje-input');\n        input.setAttribute('variant', 'standard');\n        input.setAttribute('type', 'text');\n        input.setAttribute('placeholder', 'Click to upload');\n        input.setAttribute('readonly', '');\n\n        let span = document.createElement('span');\n        span.setAttribute('slot', 'start');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'cloud-upload');\n\n        span.appendChild(icon);\n        input.appendChild(span);\n\n        native.appendChild(input);\n        native.appendChild(fileInput);\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.input = input;\n        this.fileInput = fileInput;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the InputFile class.\n     */\n    afterDraw() {\n        this.input.addEventListener('click', () => {\n            this.fileInput.click();\n        });\n\n        this.fileInput.addEventListener('change', (e) => {\n            let files = e.target.files;\n            let fileNames = [];\n\n            for (let i = 0; i < files.length; i++) {\n                fileNames.push(files[i].name);\n            }\n\n            this.input.value = fileNames.join(', ');\n            this.value = files;\n            event.dispatchCustomEvent(this, 'wje-input-file:change', { files: files });\n        });\n    }\n}\n","import InputFile from './input-file.element.js';\n\nexport default InputFile;\n\nInputFile.define('wje-input-file', InputFile);\n"],"names":["InputFile","WJElement","constructor","super","className","this","_value","value","cssStyleSheet","observedAttributes","isShadowRoot","setAriaState","role","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","classList","add","variant","fileInput","input","span","icon","appendChild","afterDraw","addEventListener","click","e","files","target","fileNames","i","length","push","name","join","event","dispatchCustomEvent","define"],"mappings":";;;;;AAee,MAAMA,UAAkBC,EAAAA;AAAAA,EAInC,cAAAC;AACIC,UAAAA;AAwBJC,qCAAY;AAvBRC,SAAKC,SAAS;AAAA,EAClB;AAAA,EAMA,IAAA,MAAUC,IAAAA;AACNF,SAAKC,SAASC;AAAAA,EAClB;AAAA,EAMA,IAAA,QAAIA;AACA,WAAOF,KAAKC;AAAAA,EAChB;AAAA,EAaA,WAAA,gBAAWE;AACP;EACJ;AAAA,EAOA,WAAA,qBAAWC;AACP,WAAO,CAAA;AAAA,EACX;AAAA,EAKA;AACIJ,SAAKK,eAAe,QACpBL,KAAKM,aAAa,EAAEC,MAAM,QAAA,CAAA;AAAA,EAC9B;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAGpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOE,aAAa,QAAQ,QAAA,GAC5BF,GAAOG,UAAUC,IAAI,qBAAqBhB,KAAKiB,WAAW,SAAA;AAG1D,QAAIC,KAAYR,SAASG,cAAc,OAAA;AACvCK,IAAAA,GAAUJ,aAAa,QAAQ,MAAA,GAC/BI,GAAUJ,aAAa,YAAY,EAAA,GACnCI,GAAUJ,aAAa,UAAU,EAAA,GACjCI,GAAUJ,aAAa,eAAe,MAAA;AAGtC,QAAIK,IAAQT,SAASG,cAAc,WAAA;AACnCM,MAAML,aAAa,WAAW,UAAA,GAC9BK,EAAML,aAAa,QAAQ,MAAA,GAC3BK,EAAML,aAAa,eAAe,iBAAA,GAClCK,EAAML,aAAa,YAAY;AAE/B,QAAIM,IAAOV,SAASG,cAAc,MAAA;AAClCO,MAAKN,aAAa,QAAQ,OAAA;AAE1B,QAAIO,IAAOX,SAASG,cAAc,UAAA;AAelC,WAdAQ,EAAKP,aAAa,QAAQ,WAAA,GAC1BO,EAAKP,aAAa,QAAQ,cAAA,GAE1BM,EAAKE,YAAYD,CAAAA,GACjBF,EAAMG,YAAYF,CAAAA,GAElBR,GAAOU,YAAYH,CAAAA,GACnBP,GAAOU,YAAYJ,EAAAA,GACnBT,GAASa,YAAYV,KAErBZ,KAAKY,SAASA,IACdZ,KAAKmB,QAAQA,GACbnB,KAAKkB,YAAYA,IAEVT;AAAAA,EACX;AAAA,EAKA,YAAAc;AACIvB,SAAKmB,MAAMK,iBAAiB,SAAS,MAAA;AACjCxB,WAAKkB,UAAUO,MAAAA;AAAAA,IAAAA,CAAAA,GAGnBzB,KAAKkB,UAAUM,iBAAiB,UAAWE,CAAAA,OAAAA;AACvC,UAAIC,KAAQD,GAAEE,OAAOD,OACjBE,IAAY,CAAA;AAEhB,eAASC,KAAI,GAAGA,KAAIH,GAAMI,QAAQD,KAC9BD,GAAUG,KAAKL,GAAMG,EAAAA,EAAGG,IAAAA;AAG5BjC,WAAKmB,MAAMjB,QAAQ2B,EAAUK,KAAK,IAAA,GAClClC,KAAKE,QAAQyB,IACbQ,EAAMC,oBAAoBpC,MAAM,yBAAyB,EAAE2B,OAAOA;;EAE1E;AAAA;ACvIJhC,EAAU0C,OAAO,kBAAkB1C,CAAAA;"}