npm - @diwacopilot/components - Versions diffs - 1.0.0 - Mend

@diwacopilot/components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1089) hide show

package/dist/esm/diwa-inline-notification.entry.js ADDED Viewed

@@ -0,0 +1,175 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3fa02c74.js';
+/**
+ * diwa-inline-notification-styles.ts
+ * ====================================
+ * CSS-in-JS styles for <diwa-inline-notification>.
+ *
+ * The notification is a static flex-row banner:
+ *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]
+ *
+ * Background and border colours are driven entirely by the `state` prop.
+ * All values are CSS custom properties so that the [data-theme="light"]
+ * overrides in app.css cascade into the Shadow DOM correctly.
+ */
+const STATE_TOKENS = {
+    info: {
+        bg: 'var(--diwa-notification-info-soft)',
+        border: 'var(--diwa-color-info-300)',
+        iconColor: 'var(--diwa-notification-info)',
+    },
+    success: {
+        bg: 'var(--diwa-notification-success-soft)',
+        border: 'var(--diwa-color-success-100)',
+        iconColor: 'var(--diwa-notification-success)',
+    },
+    warning: {
+        bg: 'var(--diwa-notification-warning-soft)',
+        border: 'var(--diwa-color-warning-100)',
+        iconColor: 'var(--diwa-notification-warning)',
+    },
+    error: {
+        bg: 'var(--diwa-notification-error-soft)',
+        border: 'var(--diwa-color-danger-200)',
+        iconColor: 'var(--diwa-notification-error)',
+    },
+};
+const getComponentCss = (state) => {
+    const { bg, border, iconColor } = STATE_TOKENS[state];
+    return `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+  :host {
+    display: block;
+    width: 100%;
+    font-family: var(--diwa-font-family-base);
+  }
+  :host([hidden]) {
+    display: none;
+  }
+  /* ── Root wrapper — carries all visual styling ───────────────────── */
+  .root {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-5) var(--diwa-space-6);
+    border-radius: var(--diwa-radius-md);
+    border: var(--diwa-border-width-thin) solid ${border};
+    background: ${bg};
+    box-sizing: border-box;
+    width: 100%;
+  }
+  /* ── Status icon ────────────────────────────────────────────────────── */
+  .icon-wrap {
+    flex-shrink: 0;
+    margin-top: var(--diwa-space-px);
+    color: ${iconColor};
+    line-height: 0;
+  }
+  /* ── Content ────────────────────────────────────────────────────────── */
+  .content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-1);
+  }
+  .heading {
+    display: block;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-primary);
+    line-height: var(--diwa-line-height-tight);
+  }
+  .description {
+    margin: 0;
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+  }
+  /* ── Actions ────────────────────────────────────────────────────────── */
+  .actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    margin-top: var(--diwa-space-px);
+  }
+`;
+};
+const STATE_ICON = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+    error: 'circle-alert',
+};
+const DiwaInlineNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dismiss = createEvent(this, "dismiss", 1);
+        this.action = createEvent(this, "action", 1);
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /**
+         * Semantic state — governs colour treatment, icon, and ARIA live role.
+         * - `info`    — neutral informational  (role="status", polite)
+         * - `success` — positive confirmation  (role="status", polite)
+         * - `warning` — non-blocking caution   (role="status", polite)
+         * - `error`   — critical or blocking   (role="alert",  assertive)
+         */
+        this.state = 'info';
+        /** Bold heading text rendered above the description. */
+        this.heading = '';
+        /**
+         * Description text.
+         * When empty, the default slot is rendered instead — allowing rich markup.
+         */
+        this.description = '';
+        /**
+         * Whether to show the dismiss (×) button.
+         * When `false`, the notification can only be removed programmatically.
+         */
+        this.dismissButton = true;
+        /**
+         * Shows a loading indicator on the action button and blocks its interaction.
+         * Has no effect when `actionLabel` is not set.
+         */
+        this.actionLoading = false;
+        // ──────────────────────────────────────────────────────────────
+        // Handlers
+        // ──────────────────────────────────────────────────────────────
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+        this.handleAction = () => {
+            this.action.emit();
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const isAlert = this.state === 'error';
+        const showActions = this.dismissButton || Boolean(this.actionLabel);
+        return (h(Host, { key: '9c5daaa90736893373306014a7a81ceff288038e', "data-theme": this.theme }, h("style", { key: '703bad80df2e60ab7348d4c769ac3ef68def40e8', innerHTML: getComponentCss(this.state) }), h("div", { key: '8bcc89834f5664f7bc0bcd856735ec4793346ea7', class: "root" }, h("div", { key: '252d48eb839a4bf50039607bf7740c520d0ac78f', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '968fbde38c713c9de87571d9470f48845c398dab', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '5d7a97ac06d8eadb6e586d8460d9bcd593a80abb', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: 'b3e0f71b3fd449585b262c4cd6eb05837cee7713', class: "heading" }, this.heading), h("p", { key: '91da63ee4efbbe5333f96ff80d548fe9546c4284', class: "description" }, this.description || h("slot", { key: '562c57c90e98b8623e9b64f751bfcc4f3ee7a08c' }))), showActions && (h("div", { key: '9e9b140ff5968750cbba94bc793fa9643bad75bb', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: '12794cd50df008bba55ad71808c5392ef18344ed', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '23c15e5eb4fb8114fbb760f65d7e09652c45d862', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
+    }
+};
+export { DiwaInlineNotification as diwa_inline_notification };
+//# sourceMappingURL=diwa-inline-notification.entry.js.map

package/dist/esm/diwa-inline-notification.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-inline-notification.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-inline-notification/diwa-inline-notification-styles.ts","src/components/diwa-inline-notification/diwa-inline-notification.tsx"],"sourcesContent":["/**\r\n * diwa-inline-notification-styles.ts\r\n * ====================================\r\n * CSS-in-JS styles for <diwa-inline-notification>.\r\n *\r\n * The notification is a static flex-row banner:\r\n * [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]\r\n *\r\n * Background and border colours are driven entirely by the `state` prop.\r\n * All values are CSS custom properties so that the [data-theme=\"light\"]\r\n * overrides in app.css cascade into the Shadow DOM correctly.\r\n */\r\n\r\nimport type { InlineNotificationState } from './types';\r\n\r\ntype StateTokens = { bg: string; border: string; iconColor: string };\r\n\r\nconst STATE_TOKENS: Record<InlineNotificationState, StateTokens> = {\r\n info: {\r\n bg: 'var(--diwa-notification-info-soft)',\r\n border: 'var(--diwa-color-info-300)',\r\n iconColor: 'var(--diwa-notification-info)',\r\n },\r\n success: {\r\n bg: 'var(--diwa-notification-success-soft)',\r\n border: 'var(--diwa-color-success-100)',\r\n iconColor: 'var(--diwa-notification-success)',\r\n },\r\n warning: {\r\n bg: 'var(--diwa-notification-warning-soft)',\r\n border: 'var(--diwa-color-warning-100)',\r\n iconColor: 'var(--diwa-notification-warning)',\r\n },\r\n error: {\r\n bg: 'var(--diwa-notification-error-soft)',\r\n border: 'var(--diwa-color-danger-200)',\r\n iconColor: 'var(--diwa-notification-error)',\r\n },\r\n};\r\n\r\nexport const getComponentCss = (state: InlineNotificationState): string => {\r\n const { bg, border, iconColor } = STATE_TOKENS[state];\r\n\r\n return `\r\n /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n display: block;\r\n width: 100%;\r\n font-family: var(--diwa-font-family-base);\r\n }\r\n\r\n :host([hidden]) {\r\n display: none;\r\n }\r\n\r\n /* ── Root wrapper — carries all visual styling ───────────────────── */\r\n\r\n .root {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--diwa-space-3);\r\n padding: var(--diwa-space-5) var(--diwa-space-6);\r\n border-radius: var(--diwa-radius-md);\r\n border: var(--diwa-border-width-thin) solid ${border};\r\n background: ${bg};\r\n box-sizing: border-box;\r\n width: 100%;\r\n }\r\n\r\n /* ── Status icon ────────────────────────────────────────────────────── */\r\n\r\n .icon-wrap {\r\n flex-shrink: 0;\r\n margin-top: var(--diwa-space-px);\r\n color: ${iconColor};\r\n line-height: 0;\r\n }\r\n\r\n /* ── Content ────────────────────────────────────────────────────────── */\r\n\r\n .content {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--diwa-space-1);\r\n }\r\n\r\n .heading {\r\n display: block;\r\n font-size: var(--diwa-font-size-base);\r\n font-weight: var(--diwa-font-weight-semibold);\r\n color: var(--diwa-text-primary);\r\n line-height: var(--diwa-line-height-tight);\r\n }\r\n\r\n .description {\r\n margin: 0;\r\n font-size: var(--diwa-font-size-sm);\r\n color: var(--diwa-text-secondary);\r\n line-height: var(--diwa-line-height-normal);\r\n }\r\n\r\n /* ── Actions ────────────────────────────────────────────────────────── */\r\n\r\n .actions {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--diwa-space-2);\r\n margin-top: var(--diwa-space-px);\r\n }\r\n`;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InlineNotificationState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-inline-notification-styles';\r\n\r\nconst STATE_ICON: Record<InlineNotificationState, string> = {\r\n info: 'info',\r\n success: 'circle-check',\r\n warning: 'triangle-alert',\r\n error: 'circle-alert',\r\n};\r\n\r\n/**\r\n * @component diwa-inline-notification\r\n *\r\n * A static inline banner that communicates contextual feedback.\r\n * Supports four semantic states — info, success, warning, error — each with\r\n * a distinct colour treatment and Lucide status icon.\r\n *\r\n * Accessibility:\r\n * - state=\"error\" uses role=\"alert\" (assertive live region)\r\n * - All other states use role=\"status\" (polite live region)\r\n * - The icon is aria-hidden — semantic meaning is carried by the text\r\n * - The dismiss button has an accessible label via label + hideLabel\r\n *\r\n * Usage:\r\n * <diwa-inline-notification\r\n * state=\"success\"\r\n * heading=\"Saved\"\r\n * description=\"Your changes have been saved.\"\r\n * />\r\n *\r\n * @slot default — Fallback description content when the description prop is empty.\r\n */\r\n@Component({\r\n tag: 'diwa-inline-notification',\r\n shadow: true,\r\n})\r\nexport class DiwaInlineNotification {\r\n // ──────────────────────────────────────────────────────────────\r\n // Props\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /** Per-component theme override (`light` / `dark`). */\r\n @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n /**\r\n * Semantic state — governs colour treatment, icon, and ARIA live role.\r\n * - `info` — neutral informational (role=\"status\", polite)\r\n * - `success` — positive confirmation (role=\"status\", polite)\r\n * - `warning` — non-blocking caution (role=\"status\", polite)\r\n * - `error` — critical or blocking (role=\"alert\", assertive)\r\n */\r\n @Prop({ reflect: true }) state: InlineNotificationState = 'info';\r\n\r\n /** Bold heading text rendered above the description. */\r\n @Prop() heading: string = '';\r\n\r\n /**\r\n * Description text.\r\n * When empty, the default slot is rendered instead — allowing rich markup.\r\n */\r\n @Prop() description: string = '';\r\n\r\n /**\r\n * Whether to show the dismiss (×) button.\r\n * When `false`, the notification can only be removed programmatically.\r\n */\r\n @Prop() dismissButton: boolean = true;\r\n\r\n /**\r\n * Optional label for a secondary action button rendered beside the dismiss button.\r\n * When set, a diwa-button-pure with an arrow icon emits the `action` event on click.\r\n */\r\n @Prop() actionLabel?: string;\r\n\r\n /**\r\n * Shows a loading indicator on the action button and blocks its interaction.\r\n * Has no effect when `actionLabel` is not set.\r\n */\r\n @Prop() actionLoading: boolean = false;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Events\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Emitted when the dismiss (×) button is clicked.\r\n * The consumer is responsible for removing or hiding the notification in response.\r\n */\r\n @Event({ bubbles: false, composed: false })\r\n dismiss!: EventEmitter<void>;\r\n\r\n /**\r\n * Emitted when the action button is clicked.\r\n * Only fired when `actionLabel` is set and the button is not in a loading state.\r\n */\r\n @Event({ bubbles: false, composed: false })\r\n action!: EventEmitter<void>;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Handlers\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private handleDismiss = (): void => {\r\n this.dismiss.emit();\r\n };\r\n\r\n private handleAction = (): void => {\r\n this.action.emit();\r\n };\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n const isAlert = this.state === 'error';\r\n const showActions = this.dismissButton || Boolean(this.actionLabel);\r\n\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style innerHTML={getComponentCss(this.state)} />\r\n\r\n <div class=\"root\">\r\n {/* Status icon — decorative, hidden from assistive technology */}\r\n <div class=\"icon-wrap\" aria-hidden=\"true\">\r\n <diwa-icon name={STATE_ICON[this.state]} size={16} />\r\n </div>\r\n\r\n {/* Content — ARIA live region */}\r\n <div\r\n class=\"content\"\r\n role={isAlert ? 'alert' : 'status'}\r\n aria-live={isAlert ? 'assertive' : 'polite'}\r\n >\r\n {this.heading && <span class=\"heading\">{this.heading}</span>}\r\n <p class=\"description\">{this.description || <slot />}</p>\r\n </div>\r\n\r\n {/* Actions row */}\r\n {showActions && (\r\n <div class=\"actions\">\r\n {this.actionLabel && (\r\n <diwa-button-pure\r\n icon=\"arrow-right\"\r\n size=\"sm\"\r\n loading={this.actionLoading}\r\n theme={this.theme}\r\n onClick={this.handleAction}\r\n >\r\n {this.actionLabel}\r\n </diwa-button-pure>\r\n )}\r\n {this.dismissButton && (\r\n <diwa-button-pure\r\n icon=\"x\"\r\n label=\"Dismiss notification\"\r\n hideLabel={true}\r\n size=\"sm\"\r\n theme={this.theme}\r\n onClick={this.handleDismiss}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-input-date.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getInputCss } from './input-styles-c4f4fa96.js';
+import './styles-e5a47a2d.js';
+const DiwaInputDate = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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: '5f4369927da0d74c2564b4b147dc4964820cd2dd', "data-theme": this.theme }, h("style", { key: '5662055af38b2245350dd16e72ad01cfc88f7884', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: 'eebc09dc97886920cee9ff5680c49697cd1d7637', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'd6b3d2a4d2338132b9c8fc86b6a4de5aba65605c', class: "label-row" }, h("label", { key: 'f9f3cd718b6c43ce95f4d3b0ad691ba817955552', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'bd542448712be17c8c67725b5cc9346944a1b11b', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '24a53071abaaa6ac6a377eecc10b26a9422ad5b0', name: "label-after" }))), h("div", { key: '4aed4bb669fc3f4a13fec05e2845961672f56d73', class: "input-wrapper" }, this._hasStart && h("div", { key: '32ef1a846195d61b5001deabc0a63fec5e1b4252', class: "slot-start" }, h("slot", { key: 'aeab0a7ac116d58b9256b78097a3e8ba2ef4df7e', name: "start" })), h("input", { key: 'd638d2a0b495e12d3b74e4868302c03733d5a505', id: inputId, class: "input", type: "date", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, 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: 'b528ac2bdd016d563f8786111907850543da776e', class: "slot-end" }, h("slot", { key: '9ec29e9ac4340f47c34201156b70ad0cf2f8b35f', name: "end" }))), !this.message && this.description && (h("p", { key: '404219ce20aa844461ca10964d23d63cfe21a5fb', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '8c59dabacdfc8f553bc2308549fe9a51fb9ef224', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+};
+export { DiwaInputDate as diwa_input_date };
+//# sourceMappingURL=diwa-input-date.entry.js.map

package/dist/esm/diwa-input-date.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-input-date.entry.js","mappings":"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","names":["getComponentCss"],"sources":["src/components/diwa-input-date/diwa-input-date.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-date-styles';\r\n\r\n@Component({\r\n tag: 'diwa-input-date',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputDate {\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 /** ISO 8601 date string (YYYY-MM-DD) for the minimum allowed date. */\r\n @Prop() min?: string;\r\n /** ISO 8601 date string (YYYY-MM-DD) for the maximum allowed date. */\r\n @Prop() max?: string;\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=\"date\"\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 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/esm/diwa-input-email.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getInputCss } from './input-styles-c4f4fa96.js';
+import './styles-e5a47a2d.js';
+const DiwaInputEmail = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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: '1a6687d10bd153eec0539353d3268e3dc2290b32', "data-theme": this.theme }, h("style", { key: '09469b584447016ad849afb25e925f057330e863', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: 'ba00b4ecf8ab9afb5d7a57d503383eab8d2edf98', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '22389218bba90ee2fff6ab51d9d45bb5801e6173', class: "label-row" }, h("label", { key: '06e1d34f6c601df85b58165e7fb21e09ca12bcca', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: '5588e28c407f8635ebcce2e1279b6be6c539263e', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: 'f7643dca94c7b4091fbd2133181612745cc84ef6', name: "label-after" }))), h("div", { key: '135ba5099bab6c8221ee7b5e873aa3f12bdcc7c7', class: "input-wrapper" }, this._hasStart && h("div", { key: '63f1226e41d09fec87678bbd68ec19139b20f221', class: "slot-start" }, h("slot", { key: '98740dc661a2dcbc15124abf589a230200259c55', name: "start" })), h("input", { key: '1dce2b09f9bbb77b1f308879a9c905362938e48b', id: inputId, class: "input", type: "email", 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: '4e651437e42eaf82bdcba017fe4d744e4697c911', class: "slot-end" }, h("slot", { key: 'f999ab791c914938a73b589ca53d28ff9b357734', name: "end" }))), !this.message && this.description && (h("p", { key: 'c19e97d4d817f4c215005a2981bcb1d2860a0904', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '050b53ccb7310f186e4d1e767d1ff20efd5e7064', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+};
+export { DiwaInputEmail as diwa_input_email };
+//# sourceMappingURL=diwa-input-email.entry.js.map

package/dist/esm/diwa-input-email.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-input-email.entry.js","mappings":"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","names":["getComponentCss"],"sources":["src/components/diwa-input-email/diwa-input-email.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-email-styles';\r\n\r\n@Component({\r\n tag: 'diwa-input-email',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputEmail {\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=\"email\"\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/esm/diwa-input-month.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getInputCss } from './input-styles-c4f4fa96.js';
+import './styles-e5a47a2d.js';
+const DiwaInputMonth = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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: 'e7b42335a448f264e605a22e8c973a4703027711', "data-theme": this.theme }, h("style", { key: '97a4f13c5867744270eced8aa13b209f9139f582', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: '4d20197cbf918b7be8cf1b67e5f0fdc3e338f2f4', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '0e79bf6e67eab3600a3a1e5d3f2d7a73a83abdc9', class: "label-row" }, h("label", { key: '7adcf80c3a0e61c1ba0634308657fef73054e7ea', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: 'd8cf7249d82461d2fd51f000737a4f0ebd15afc4', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '738298b5cd67496e40173687a02432191754ebd6', name: "label-after" }))), h("div", { key: '0fb96733077c26851196e46220a80af39b8dd757', class: "input-wrapper" }, this._hasStart && h("div", { key: 'f13788a2afa4855aa772db164ee436aa0356f0cf', class: "slot-start" }, h("slot", { key: '06a5012bd82608a9b6ff4d84d89a8b1a8dadc2d3', name: "start" })), h("input", { key: '1bebc847823145ec56aa3a540a3e55463990fd6d', id: inputId, class: "input", type: "month", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, 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: '7fad070fcca5acd9dc849e3f1549708c49ad85f9', class: "slot-end" }, h("slot", { key: '58f0310c841b893f7b9679ec0ee0c702150e6476', name: "end" }))), !this.message && this.description && (h("p", { key: '6889e36e3f5f1e859f2c2be2fee4aa4766b9898c', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'bfb61253f688d25ede2e488306cf6d61ed8cc8e9', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+};
+export { DiwaInputMonth as diwa_input_month };
+//# sourceMappingURL=diwa-input-month.entry.js.map

package/dist/esm/diwa-input-month.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-input-month.entry.js","mappings":"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","names":["getComponentCss"],"sources":["src/components/diwa-input-month/diwa-input-month.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-month-styles';\r\n\r\n@Component({\r\n tag: 'diwa-input-month',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputMonth {\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 month in YYYY-MM format. */\r\n @Prop() min?: string;\r\n /** Maximum month in YYYY-MM format. */\r\n @Prop() max?: string;\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=\"month\"\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 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/esm/diwa-input-number.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getInputCss } from './input-styles-c4f4fa96.js';
+import './styles-e5a47a2d.js';
+const DiwaInputNumber = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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: '09f9b5cf859ef7c03ef84256357c2ff08ee49e0d', "data-theme": this.theme }, h("style", { key: '3bbe107a46f9b4e98a58fb93e71f3d80225188bc', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), h("div", { key: '0809b3f8e6540f2bca95ab41682cbdd1bf087718', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '93e3454fda5faef279f540d8ff4179e08c7fd1f1', class: "label-row" }, h("label", { key: '171ab7d14f740ef31bff359cb51ad25d54b183ce', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: '707c033e74161a76254cdfe9c798a78772d22833', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '5eb701dd4c2d30d80cb11b07c07b1f9d48333ab6', name: "label-after" }))), h("div", { key: 'adc124185bbcbe37f0f1ff56a3b0fa8d0d725e07', class: "input-wrapper" }, this._hasStart && h("div", { key: 'a2ee97d7ce58f3f3f16dd0dab5cd6695573160fc', class: "slot-start" }, h("slot", { key: 'fe16cba2f95ce86de6721fff8a61236b618e8485', name: "start" })), h("input", { key: 'a1f15b79921da77f172033d34a91daf6548722ee', id: inputId, class: "input", type: "number", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min !== undefined ? String(this.min) : undefined, max: this.max !== undefined ? String(this.max) : undefined, 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: 'e2772476adc180f91281a784200f9e4b53038a0c', class: "slot-end" }, h("slot", { key: '11cb85cf049deab38a7fec5a7841c082391b2009', name: "end" }))), !this.message && this.description && (h("p", { key: '6c64debb7f04fa9da7483854c04888842267898b', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '8f34cc860cac36c591ab7e3cf4e89722cb907da7', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+};
+export { DiwaInputNumber as diwa_input_number };
+//# sourceMappingURL=diwa-input-number.entry.js.map

package/dist/esm/diwa-input-number.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-input-number.entry.js","mappings":"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","names":["getComponentCss"],"sources":["src/components/diwa-input-number/diwa-input-number.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-number-styles';\r\n\r\n@Component({\r\n tag: 'diwa-input-number',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputNumber {\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 allowed value. */\r\n @Prop() min?: number;\r\n /** Maximum allowed value. */\r\n @Prop() max?: number;\r\n /** Step increment. */\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=\"number\"\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 min={this.min !== undefined ? String(this.min) : undefined}\r\n max={this.max !== undefined ? String(this.max) : undefined}\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/esm/diwa-input-password.entry.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getInputCss } from './input-styles-c4f4fa96.js';
+import './styles-e5a47a2d.js';
+const DiwaInputPassword = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 eye icon button to toggle password visibility. */
+        this.showToggle = true;
+        /** Internal visibility state for the password toggle. */
+        this.showPassword = false;
+        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.handleToggle = () => {
+            this.showPassword = !this.showPassword;
+        };
+    }
+    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.showToggle && !this.disabled;
+        return (h(Host, { key: 'a7d1c2c451e9eb743f2cc211cf644409620b0e3e', "data-theme": this.theme }, h("style", { key: 'c1cde1b42b4ebb897bb1d2a3e9f7ff29b8a3a669', innerHTML: getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), h("div", { key: 'ec516af67a3fb9e8b070a5a4d3ef7611fdd09fd9', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'fa07e74dca79660dc1f300f72008fad7b71ee5da', class: "label-row" }, h("label", { key: 'a60036096fd791a62ca1b8ebddd91e22baacae9b', class: "label", htmlFor: inputId }, this.label, this.required && h("span", { key: '199100c093d8d8e7ec5ee49adf063ec8929160e4', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: 'ca35bdaf076776a53dabd36b4ab4f8203982da43', name: "label-after" }))), h("div", { key: '8e7a21233a3b41e04cdc23ce66f2899fee409707', class: "input-wrapper" }, this._hasStart && h("div", { key: 'e7b2175413d06a766612db4eba899f172fb4e0cc', class: "slot-start" }, h("slot", { key: '0fe18213e7cdebe3e77857050ace2d5b7e2fa1c9', name: "start" })), h("input", { key: '33503e876400fba6914fa39e9dab5272db655144', id: inputId, class: "input", type: this.showPassword ? 'text' : 'password', 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: '796c7a85e6ac142d76dbb4789b774f67c9ce457f', class: "slot-end" }, h("slot", { key: '11802f147f1b820ef6bf50d25e551503fa9a6685', name: "end" })), hasSuffix && (h("button", { key: '526415a8043733850a39415f653f74e282db83b8', class: "suffix-btn", type: "button", "aria-label": this.showPassword ? 'Hide password' : 'Show password', onClick: this.handleToggle }, h("diwa-icon", { key: 'b2b40c55f74d7917aa69656ce1447d2ca4d455bf', name: this.showPassword ? 'eye-off' : 'eye', size: 16 })))), !this.message && this.description && (h("p", { key: '2f2a7c3da7c326077fadc8faa9d9f5d41d89fa25', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '5fd706ae0de4235b60493438b5be67caa2aae317', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+};
+export { DiwaInputPassword as diwa_input_password };
+//# sourceMappingURL=diwa-input-password.entry.js.map

package/dist/esm/diwa-input-password.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"diwa-input-password.entry.js","mappings":"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","names":["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}