@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-input-password.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-password.js","mappings":"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","names":["DiwaInputPassword","getComponentCss"],"sources":["src/components/diwa-input-password/diwa-input-password.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-password-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-password',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputPassword {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Show the eye icon button to toggle password visibility. */\r\n  @Prop() showToggle: boolean = true;\r\n\r\n  /** Internal visibility state for the password toggle. */\r\n  @State() private showPassword: boolean = false;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  private handleToggle = (): void => {\r\n    this.showPassword = !this.showPassword;\r\n  };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n    const hasSuffix = this.showToggle && !this.disabled;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type={this.showPassword ? 'text' : 'password'}\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n            {hasSuffix && (\r\n              <button\r\n                class=\"suffix-btn\"\r\n                type=\"button\"\r\n                aria-label={this.showPassword ? 'Hide password' : 'Show password'}\r\n                onClick={this.handleToggle}\r\n              >\r\n                <diwa-icon name={this.showPassword ? 'eye-off' : 'eye'} size={16} />\r\n              </button>\r\n            )}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputSearch extends Components.DiwaInputSearch, HTMLElement {}
+export const DiwaInputSearch: {
+    prototype: DiwaInputSearch;
+    new (): DiwaInputSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input-search.js

@@ -0,0 +1,104 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+import { d as defineCustomElement$2 } from './p-302af10d.js';
+
+const DiwaInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputSearch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        /** Show the clear (×) button when the field has a value. */
+        this.showClearButton = true;
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+        this.handleClear = () => {
+            this.value = '';
+            this.input.emit('');
+            this.change.emit('');
+        };
+    }
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        const hasSuffix = this.showClearButton && !!this.value && !this.disabled && !this.readonly;
+        return (h(Host, { key: '3f49df473469b199d44e240572e09bb9e159cfd3', "data-theme": this.theme }, h("style", { key: '3dd2dcf3d7291af66789afc82d5d5deb6c56a27c', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), h("div", { key: '388430466029a911917ef8f61697e72abd46239c', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '3b6a12eca69a7efe4a3701f78c8e9892edd752f2', class: "label-row" }, h("label", { key: '66bac4991da6ba5a758717d3b84bb1ab234b4cd9', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: '30275a5cbe643516887f55b377ae8b0e0a9d6387', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '548dc2886eb1d0dfe6987ddf5ce5227aec30b90c', name: "label-after" }))), h("div", { key: '6f746707baccfa7c3668c26e53d40af2c6ffd6b3', class: "input-wrapper" }, this._hasStart && h("div", { key: '675fcd21531dbd7bc91c1580ce41ffe3542cbd07', class: "slot-start" }, h("slot", { key: '913ed407b729f851f719c5bf7e299eeffbb2bf4c', name: "start" })), h("input", { key: 'b751aedd290db42d8d297b2e58d355b8fb0a5032', id: inputId, class: "input", type: "search", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: 'eafa27ed273229c774e1c6e1bd92ba14a499418c', class: "slot-end" }, h("slot", { key: '910843c5913cb508fdb66c0aa171e4b1e05be583', name: "end" })), hasSuffix && (h("button", { key: '676246830cf3a5701d6820082af813cd55b76d61', class: "suffix-btn", type: "button", "aria-label": "Clear search", onClick: this.handleClear }, h("diwa-icon", { key: 'a03bd3b761dec94a4659f55780cabf47b5be9084', name: "x", size: 14 })))), !this.message && this.description && (h("p", { key: '57c2a7184df72cd5fc09ccb9e504638cbec520ed', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'a224ae6925af433f90a21dc811b8376ccb4fa176', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-search", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "showClearButton": [4, "show-clear-button"],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-search", "diwa-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputSearch$1);
+            }
+            break;
+        case "diwa-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputSearch = DiwaInputSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputSearch, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-search.js.map

package/dist-custom-elements/diwa-input-search.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-search.js","mappings":"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","names":["DiwaInputSearch","getComponentCss"],"sources":["src/components/diwa-input-search/diwa-input-search.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-search-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-search',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputSearch {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Show the clear (×) button when the field has a value. */\r\n  @Prop() showClearButton: boolean = true;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  private handleClear = (): void => {\r\n    this.value = '';\r\n    this.input.emit('');\r\n    this.change.emit('');\r\n  };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n    const hasSuffix = this.showClearButton && !!this.value && !this.disabled && !this.readonly;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"search\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n            {hasSuffix && (\r\n              <button\r\n                class=\"suffix-btn\"\r\n                type=\"button\"\r\n                aria-label=\"Clear search\"\r\n                onClick={this.handleClear}\r\n              >\r\n                <diwa-icon name=\"x\" size={14} />\r\n              </button>\r\n            )}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-tel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputTel extends Components.DiwaInputTel, HTMLElement {}
+export const DiwaInputTel: {
+    prototype: DiwaInputTel;
+    new (): DiwaInputTel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input-tel.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+
+const DiwaInputTel$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputTel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+    }
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: '6f16e8825a3a5ecddc50dfa71bd11037b514857c', "data-theme": this.theme }, h("style", { key: '869dd68dffed172a7609f208be8cf84b14d17ef0', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: '826553cb48211b80781177f28f546f0750e303c1', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'd765135a6a2461b994f64cc9e64a21d7aa2beea6', class: "label-row" }, h("label", { key: '31c39abad9f2e512002a741775ef6edd92d63977', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'e70488cf88dbadda577411125bcd691c4f0eb5db', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '8ee60e427526819d1f8be6d7ed61a1b26bfb65ec', name: "label-after" }))), h("div", { key: '1a28e5b5937aca1cb3c9e6470279e4072a62bbe0', class: "input-wrapper" }, this._hasStart && h("div", { key: '1e96aa02a0b11281b5c328fdc28ceba4c255cbf5', class: "slot-start" }, h("slot", { key: '28c564f01dac221e5d72ea17c88602ed9a05e199', name: "start" })), h("input", { key: 'b2eaeb80c1d83ef7d4d5e624f332272e5ed607ee', id: inputId, class: "input", type: "tel", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: 'efa69195e0c480335deb33e87e45edf4482b2cb4', class: "slot-end" }, h("slot", { key: 'c045de93902aa491f82b722e5b8b6a9c2a1e5552', name: "end" }))), !this.message && this.description && (h("p", { key: '284cd05849b2d42d0ce3069037c4907061bf6744', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '8bedd2ca829061a05d561e9e5c5c99700fee09f2', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-tel", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-tel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-tel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputTel$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputTel = DiwaInputTel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputTel, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-tel.js.map

package/dist-custom-elements/diwa-input-tel.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-tel.js","mappings":"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","names":["DiwaInputTel","getComponentCss"],"sources":["src/components/diwa-input-tel/diwa-input-tel.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-tel-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-tel',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputTel {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"tel\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputText extends Components.DiwaInputText, HTMLElement {}
+export const DiwaInputText: {
+    prototype: DiwaInputText;
+    new (): DiwaInputText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input-text.js

@@ -0,0 +1,94 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+
+const DiwaInputText$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputText extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        // ── Shared props ───────────────────────────────────────────────────────
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+    }
+    // ── Private ────────────────────────────────────────────────────────────
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: 'a33af1297d334f3a9acec8403154c96492657c91', "data-theme": this.theme }, h("style", { key: '37551d1e5512119fab5536d698a80af76825cbf2', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: 'c1bc70168334b6f24fdcfab73d09db078577ae25', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '2e8b3a309d7f61e5d7c199d3f6a68e9976972bcc', class: "label-row" }, h("label", { key: 'b0a4b4ca66113bfb3792873c5a4080ccc6c465a0', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: '1c964830bf67b8a3d940bdb9bad233e6d679160b', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: 'c50d80d0a9cd2f4bc3436b1fb5ba12a2b1c31c5f', name: "label-after" }))), h("div", { key: '9a8a3023abb52332d74330dbfd7c93fdc4ad40f3', class: "input-wrapper" }, this._hasStart && h("div", { key: 'ff085b2b283e1774e6cb71b21afc0b4647f4377d', class: "slot-start" }, h("slot", { key: '7cb492fc970f8a8f773872daecd97e5d6362e986', name: "start" })), h("input", { key: '944a49cd9b5277e32440044015ea60863ee197fe', id: inputId, class: "input", type: "text", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, maxLength: this.maxLength, minLength: this.minLength, spellcheck: this.spellCheck, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: '7f753a201a2bc3dcf0b687f4edd038e4d54572f3', class: "slot-end" }, h("slot", { key: 'f81ad5cf908f710f7dba08bf3c0b0d7afbf33c9b', name: "end" }))), !this.message && this.description && (h("p", { key: '19763f04411a10c5d4cb6565f01655b21982e919', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'dee92d6fb1e56760e29d9cf18f2e4ded55065192', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-text", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "maxLength": [2, "max-length"],
+        "minLength": [2, "min-length"],
+        "spellCheck": [4, "spell-check"],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputText$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputText = DiwaInputText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputText, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-text.js.map

package/dist-custom-elements/diwa-input-text.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-text.js","mappings":"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","names":["DiwaInputText","getComponentCss"],"sources":["src/components/diwa-input-text/diwa-input-text.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-text-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-text',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputText {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  // ── Shared props ───────────────────────────────────────────────────────\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  // ── Text-specific props ─────────────────────────────────────────────────\r\n\r\n  @Prop() maxLength?: number;\r\n  @Prop() minLength?: number;\r\n  @Prop() spellCheck?: boolean;\r\n\r\n  // ── Events ─────────────────────────────────────────────────────────────\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  // ── Private ────────────────────────────────────────────────────────────\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"text\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              maxLength={this.maxLength}\r\n              minLength={this.minLength}\r\n              spellcheck={this.spellCheck}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-time.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputTime extends Components.DiwaInputTime, HTMLElement {}
+export const DiwaInputTime: {
+    prototype: DiwaInputTime;
+    new (): DiwaInputTime;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-input-time.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getInputCss } from './p-35c7c864.js';
+
+const DiwaInputTime$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInputTime extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "change", 7);
+        this.input = createEvent(this, "input", 7);
+        this.blur = createEvent(this, "blur", 3);
+        this.focus = createEvent(this, "focus", 3);
+        this._hasStart = false;
+        this._hasEnd = false;
+        this.label = '';
+        this.description = '';
+        this.message = '';
+        this.state = 'none';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.hideLabel = false;
+        this.compact = false;
+        this.theme = 'dark';
+        this.handleInput = (e) => {
+            this.value = e.target.value;
+            this.input.emit(this.value);
+        };
+        this.handleChange = (e) => {
+            this.value = e.target.value;
+            this.change.emit(this.value);
+        };
+        this.handleBlur = (e) => { this.blur.emit(e); };
+        this.handleFocus = (e) => { this.focus.emit(e); };
+    }
+    connectedCallback() {
+        this._hasStart = !!this.el.querySelector('[slot="start"]');
+        this._hasEnd = !!this.el.querySelector('[slot="end"]');
+    }
+    render() {
+        const inputId = 'input';
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: '9e2fb73a34153b0744fbf2cc7490ecdc7a125233', "data-theme": this.theme }, h("style", { key: '58c7f12e339b06f9bf1fc1488a3c6821c9fcb637', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: 'ff7623be3338a9f7d1def2c68f36e698b192b699', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '6fe5fc532ab19643ff3c194e6230e6681c9b73d5', class: "label-row" }, h("label", { key: '641fc925b6a08f4c3ea7d620cf32a666cb4ed95a', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'e4d33a7a8e34d7c082f50b36faee293c73701d3f', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '42e84e07dfcda40b3dc81bb13934ecbaeb95e526', name: "label-after" }))), h("div", { key: 'fbb9fb0c4b1220d6d9e96d8f02d38f1d956ad844', class: "input-wrapper" }, this._hasStart && h("div", { key: '613a450467b3cd65e6193ecd61046c96b77ed8b7', class: "slot-start" }, h("slot", { key: '40a5d35691b771b88589cf075c550723b32493fb', name: "start" })), h("input", { key: '0f3095e1716e26680c0bd4209c957f38e5c9649d', id: inputId, class: "input", type: "time", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, step: this.step !== undefined ? String(this.step) : undefined, autocomplete: this.autoComplete, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus }), this._hasEnd && h("div", { key: '5b256b58d5b876cbdfd65c613ebfd41d59ca3f16', class: "slot-end" }, h("slot", { key: 'abe2bf623127eef3e5f9ed74d846459a975bfaff', name: "end" }))), !this.message && this.description && (h("p", { key: '9f38a0f8927a2c06fcccb43b9d20a116af2fc078', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'b6125f29b020d97fda309feb3803477c1e918e85', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+}, [17, "diwa-input-time", {
+        "label": [1],
+        "description": [1],
+        "message": [1],
+        "state": [1],
+        "name": [1],
+        "value": [1025],
+        "placeholder": [1],
+        "disabled": [516],
+        "required": [516],
+        "readonly": [516],
+        "hideLabel": [4, "hide-label"],
+        "compact": [4],
+        "autoComplete": [1, "auto-complete"],
+        "theme": [1],
+        "min": [1],
+        "max": [1],
+        "step": [2],
+        "_hasStart": [32],
+        "_hasEnd": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-input-time"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-input-time":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaInputTime$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaInputTime = DiwaInputTime$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaInputTime, defineCustomElement };
+
+//# sourceMappingURL=diwa-input-time.js.map

package/dist-custom-elements/diwa-input-time.js.map

@@ -0,0 +1 @@
+{"file":"diwa-input-time.js","mappings":"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","names":["DiwaInputTime","getComponentCss"],"sources":["src/components/diwa-input-time/diwa-input-time.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-time-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-time',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputTime {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Minimum time in HH:MM format. */\r\n  @Prop() min?: string;\r\n  /** Maximum time in HH:MM format. */\r\n  @Prop() max?: string;\r\n  /** Step in seconds. */\r\n  @Prop() step?: number;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"time\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              min={this.min}\r\n              max={this.max}\r\n              step={this.step !== undefined ? String(this.step) : undefined}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-url.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputUrl extends Components.DiwaInputUrl, HTMLElement {}
+export const DiwaInputUrl: {
+    prototype: DiwaInputUrl;
+    new (): DiwaInputUrl;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;