@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-input-search/diwa-input-search.js

@@ -0,0 +1,448 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-input-search-styles";
+export class DiwaInputSearch {
+    constructor() {
+        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: getComponentCss(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 is() { return "diwa-input-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputFieldState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "InputFieldState": {
+                            "location": "import",
+                            "path": "../diwa-input/types",
+                            "id": "src/components/diwa-input/types.ts::InputFieldState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-complete",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the clear (\u00D7) button when the field has a value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-clear-button",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_hasStart": {},
+            "_hasEnd": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "input",
+                "name": "input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "blur",
+                "name": "blur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "focus",
+                "name": "focus",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=diwa-input-search.js.map

package/dist/collection/components/diwa-input-search/diwa-input-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-input-search.js","sourceRoot":"","sources":["../../../src/components/diwa-input-search/diwa-input-search.tsx"],"names":[],"mappings":"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","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"]}

package/dist/collection/components/diwa-input-tel/diwa-input-tel-styles.js

@@ -0,0 +1,2 @@
+export { getInputCss as getComponentCss } from '../diwa-input/input-styles';
+//# sourceMappingURL=diwa-input-tel-styles.js.map

package/dist/collection/components/diwa-input-tel/diwa-input-tel-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-input-tel-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-input-tel/diwa-input-tel-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { getInputCss as getComponentCss } from '../diwa-input/input-styles';\n"]}