udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/collection/components/my-component/UI/buttons/udp-icon-button/udp-icon-button.js

@@ -0,0 +1,392 @@
+import { h } from "@stencil/core";
+/**
+ * UdpIconButton is a versatile icon button component that matches the udp-button API.
+ * It's designed to replace the deprecated `stencil-icon-button` with better consistency.
+ *
+ * Key improvements over `stencil-icon-button`:
+ * - Consistent API with `udp-button`
+ * - Better theming support using global CSS variables
+ * - Improved accessibility
+ * - Cleaner prop structure
+ * - Better TypeScript support
+ *
+ * Migration from `stencil-icon-button`:
+ * - `iconName` → Not needed, use `icon` prop directly
+ * - `iconClassName` → Not needed, styling handled by component
+ * - `secondary=true` → `variant='text'` or `variant='outlined'`
+ * - `noBackground=true` → `variant='text'`
+ * - `darkIcon` → Use `color` prop instead
+ * - `showLabel` → Use slot content (if content provided, label shows)
+ * - `count` → Use `badgeContent` prop
+ */
+export class UdpIconButton {
+    constructor() {
+        /**
+         * The variant to use.
+         * - `text`: Typically used for less-pronounced actions (replaces noBackground=true).
+         * - `outlined`: Emphasizes actions with a border.
+         * - `contained`: High-emphasis, distinguished by a background color.
+         */
+        this.variant = 'text';
+        /**
+         * The color of the component. It supports theming using global CSS variables.
+         * `inherit` will inherit the color from its parent.
+         */
+        this.color = 'primary';
+        /**
+         * The size of the component.
+         */
+        this.size = 'medium';
+        /**
+         * If `true`, the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * The type of the button. Only used if `href` is not set.
+         * Corresponds to the native `type` attribute of a `<button>` element.
+         */
+        this.type = 'button';
+        this.handleClick = (event) => {
+            if (!this.disabled) {
+                this.click.emit(event);
+            }
+        };
+    }
+    renderIcon() {
+        if (!this.icon)
+            return null;
+        const iconData = this.icon;
+        const iconColorClass = this.iconColor ? `icon-color-${this.iconColor}` : '';
+        return (h("svg", Object.assign({}, iconData.attrs, { class: `icon ${iconColorClass}`.trim() }), iconData.content.map((item, index) => {
+            if (item.elem === 'path') {
+                return h("path", Object.assign({}, item.attrs, { key: index }));
+            }
+            else if (item.elem === 'circle') {
+                return h("circle", Object.assign({}, item.attrs, { key: index }));
+            }
+            return null;
+        })));
+    }
+    renderButton() {
+        var _a;
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const ariaLabel = this.ariaLabel || this.tooltip || undefined;
+        const buttonClasses = {
+            'udp-icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            [`size-${this.size}`]: true,
+            'has-label': !!hasLabel,
+            'icon-only': !hasLabel,
+        };
+        const buttonContent = (h("button", { type: this.type, disabled: this.disabled, class: buttonClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (h("span", { class: "label" }, h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (h("udp-badge", { content: this.badgeContent }, buttonContent));
+        }
+        return buttonContent;
+    }
+    renderLink() {
+        var _a;
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const ariaLabel = this.ariaLabel || this.tooltip || undefined;
+        const linkClasses = {
+            'udp-icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            [`size-${this.size}`]: true,
+            'has-label': !!hasLabel,
+            'icon-only': !hasLabel,
+        };
+        const linkContent = (h("a", { href: this.href, class: linkClasses, onClick: this.handleClick, "aria-label": ariaLabel, title: this.tooltip, id: this.buttonId }, h("span", { class: "icon-container" }, this.renderIcon()), hasLabel && (h("span", { class: "label" }, h("slot", null)))));
+        // Wrap with badge if badgeContent is provided
+        if (this.badgeContent) {
+            return (h("udp-badge", { content: this.badgeContent }, linkContent));
+        }
+        return linkContent;
+    }
+    render() {
+        var _a;
+        // Wrap with tooltip if tooltiprovided and no label
+        const hasLabel = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const content = this.href ? this.renderLink() : this.renderButton();
+        if (this.tooltip && !hasLabel) {
+            return (h("udp-ambient-tool-tip", { content: this.tooltip }, content));
+        }
+        return content;
+    }
+    static get is() { return "udp-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-icon-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'outlined' | 'contained'",
+                    "resolved": "\"contained\" | \"outlined\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant to use.\n- `text`: Typically used for less-pronounced actions (replaces noBackground=true).\n- `outlined`: Emphasizes actions with a border.\n- `contained`: High-emphasis, distinguished by a background color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit'",
+                    "resolved": "\"error\" | \"info\" | \"inherit\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the component. It supports theming using global CSS variables.\n`inherit` will inherit the color from its parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the component is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to link to when the button is clicked. If provided, the component renders as an `<a>` tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the button. Only used if `href` is not set.\nCorresponds to the native `type` attribute of a `<button>` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "icon": {
+                "type": "any",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display. Should be a Carbon icon or similar SVG icon object.\nExpected format: { attrs: {...}, content: [...] }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text to display on hover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "badgeContent": {
+                "type": "number",
+                "attribute": "badge-content",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If provided, displays a badge with this content over the icon.\nReplaces the old `count` prop from stencil-icon-button.\nMust be a number as required by udp-badge component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional aria-label for accessibility.\nIf not provided and tooltip exists, tooltip will be used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonId": {
+                "type": "string",
+                "attribute": "button-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional button ID for testing/tracking purposes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconColor": {
+                "type": "string",
+                "attribute": "icon-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit'",
+                    "resolved": "\"error\" | \"info\" | \"inherit\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon. If not provided, uses the button's color.\nAllows independent control of icon color from button color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=udp-icon-button.js.map

package/dist/collection/components/my-component/UI/buttons/udp-icon-button/udp-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-icon-button.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/buttons/udp-icon-button/udp-icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * UdpIconButton is a versatile icon button component that matches the udp-button API.\n * It's designed to replace the deprecated `stencil-icon-button` with better consistency.\n *\n * Key improvements over `stencil-icon-button`:\n * - Consistent API with `udp-button`\n * - Better theming support using global CSS variables\n * - Improved accessibility\n * - Cleaner prop structure\n * - Better TypeScript support\n *\n * Migration from `stencil-icon-button`:\n * - `iconName` → Not needed, use `icon` prop directly\n * - `iconClassName` → Not needed, styling handled by component\n * - `secondary=true` → `variant='text'` or `variant='outlined'`\n * - `noBackground=true` → `variant='text'`\n * - `darkIcon` → Use `color` prop instead\n * - `showLabel` → Use slot content (if content provided, label shows)\n * - `count` → Use `badgeContent` prop\n */\n@Component({\n  tag: 'udp-icon-button',\n  styleUrl: 'udp-icon-button.css',\n  shadow: true,\n})\nexport class UdpIconButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   * - `text`: Typically used for less-pronounced actions (replaces noBackground=true).\n   * - `outlined`: Emphasizes actions with a border.\n   * - `contained`: High-emphasis, distinguished by a background color.\n   */\n  @Prop() variant: 'text' | 'outlined' | 'contained' = 'text';\n\n  /**\n   * The color of the component. It supports theming using global CSS variables.\n   * `inherit` will inherit the color from its parent.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit' = 'primary';\n\n  /**\n   * The size of the component.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * If `true`, the component is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The URL to link to when the button is clicked. If provided, the component renders as an `<a>` tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The type of the button. Only used if `href` is not set.\n   * Corresponds to the native `type` attribute of a `<button>` element.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The icon to display. Should be a Carbon icon or similar SVG icon object.\n   * Expected format: { attrs: {...}, content: [...] }\n   */\n  @Prop() icon: any;\n\n  /**\n   * Tooltip text to display on hover.\n   */\n  @Prop() tooltip?: string;\n\n  /**\n   * If provided, displays a badge with this content over the icon.\n   * Replaces the old `count` prop from stencil-icon-button.\n   * Must be a number as required by udp-badge component.\n   */\n  @Prop() badgeContent?: number;\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() click: EventEmitter<MouseEvent>;\n\n  /**\n   * Optional aria-label for accessibility.\n   * If not provided and tooltip exists, tooltip will be used.\n   */\n  @Prop() ariaLabel?: string;\n\n  /**\n   * Optional button ID for testing/tracking purposes.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * The color of the icon. If not provided, uses the button's color.\n   * Allows independent control of icon color from button color.\n   */\n  @Prop() iconColor?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled) {\n      this.click.emit(event);\n    }\n  };\n\n  private renderIcon() {\n    if (!this.icon) return null;\n\n    const iconData = this.icon;\n    const iconColorClass = this.iconColor ? `icon-color-${this.iconColor}` : '';\n\n    return (\n      <svg {...iconData.attrs} class={`icon ${iconColorClass}`.trim()}>\n        {iconData.content.map((item, index) => {\n          if (item.elem === 'path') {\n            return <path {...item.attrs} key={index} />;\n          } else if (item.elem === 'circle') {\n            return <circle {...item.attrs} key={index} />;\n          }\n          return null;\n        })}\n      </svg>\n    );\n  }\n\n  private renderButton() {\n    const hasLabel = this.el.textContent?.trim();\n    const ariaLabel = this.ariaLabel || this.tooltip || undefined;\n\n    const buttonClasses = {\n      'udp-icon-button': true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      [`size-${this.size}`]: true,\n      'has-label': !!hasLabel,\n      'icon-only': !hasLabel,\n    };\n\n    const buttonContent = (\n      <button\n        type={this.type}\n        disabled={this.disabled}\n        class={buttonClasses}\n        onClick={this.handleClick}\n        aria-label={ariaLabel}\n        title={this.tooltip}\n        id={this.buttonId}\n      >\n        <span class=\"icon-container\">\n          {this.renderIcon()}\n        </span>\n        {hasLabel && (\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        )}\n      </button>\n    );\n\n    // Wrap with badge if badgeContent is provided\n    if (this.badgeContent) {\n      return (\n        <udp-badge content={this.badgeContent}>\n          {buttonContent}\n        </udp-badge>\n      );\n    }\n\n    return buttonContent;\n  }\n\n  private renderLink() {\n    const hasLabel = this.el.textContent?.trim();\n    const ariaLabel = this.ariaLabel || this.tooltip || undefined;\n\n    const linkClasses = {\n      'udp-icon-button': true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      [`size-${this.size}`]: true,\n      'has-label': !!hasLabel,\n      'icon-only': !hasLabel,\n    };\n\n    const linkContent = (\n      <a\n        href={this.href}\n        class={linkClasses}\n        onClick={this.handleClick}\n        aria-label={ariaLabel}\n        title={this.tooltip}\n        id={this.buttonId}\n      >\n        <span class=\"icon-container\">\n          {this.renderIcon()}\n        </span>\n        {hasLabel && (\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        )}\n      </a>\n    );\n\n    // Wrap with badge if badgeContent is provided\n    if (this.badgeContent) {\n      return (\n        <udp-badge content={this.badgeContent}>\n          {linkContent}\n        </udp-badge>\n      );\n    }\n\n    return linkContent;\n  }\n\n  render() {\n    // Wrap with tooltip if tooltiprovided and no label\n    const hasLabel = this.el.textContent?.trim();\n    const content = this.href ? this.renderLink() : this.renderButton();\n\n    if (this.tooltip && !hasLabel) {\n      return (\n        <udp-ambient-tool-tip content={this.tooltip}>\n          {content}\n        </udp-ambient-tool-tip>\n      );\n    }\n\n    return content;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/forms/form/stencil-field.js

@@ -114,20 +114,24 @@ export class StencilField {
                 this.finalFormBlur = () => {
                     var _a;
                     blur();
-                    this.errorMessage = (_a = this.state.api.getFieldState(this.name)) === null || _a === void 0 ? void 0 : _a.error;
+                    // Preserve custom errors - only use Final Form errors if no custom error exists
+                    const finalFormError = (_a = this.state.api.getFieldState(this.name)) === null || _a === void 0 ? void 0 : _a.error;
+                    if (!this.errorMessage) {
+                        this.errorMessage = finalFormError || '';
+                    }
                 };
                 this.finalFormChange = event => {
                     change(event);
                     // reset the error on change, error state will be re-evaluated when the blur event is triggered
                     this.errorMessage = '';
-                    // Force re-render to inject cleared error into child components
+                    // // Force re-render to inject cleared error into child components
                     this.injectPropsIntoSlottedElements();
                 };
                 this.finalFormFocus = focus;
                 this.registered = true;
             }
             // update value
-            this.value = value;
+            this.value = value !== null && value !== void 0 ? value : "";
         }, {
             value: true,
             error: false,
@@ -164,6 +168,7 @@ export class StencilField {
                     element.addEventListener('change', this.handleChange.bind(this));
                     element.addEventListener('blur', this.handleBlur.bind(this));
                     element.addEventListener('focus', this.handleFocus.bind(this));
+                    element.addEventListener('error', this.handleError.bind(this));
                     element.setAttribute('data-field-events-bound', 'true');
                 }
             });
@@ -264,8 +269,37 @@ export class StencilField {
         var _a;
         (_a = this.finalFormBlur) === null || _a === void 0 ? void 0 : _a.call(this, e);
     }
+    handleError(e) {
+        var _a, _b;
+        // Handle error events from slotted child components
+        if (e.detail !== undefined) {
+            this.errorMessage = e.detail;
+            // Store the custom error in the form's custom errors registry
+            if (((_a = this.state) === null || _a === void 0 ? void 0 : _a.registeredFields) && this.name) {
+                if (!this.state.customErrors) {
+                    this.state.customErrors = {};
+                }
+                this.state.customErrors[this.name] = e.detail;
+                // Trigger form validation to include custom errors
+                if (this.state.api) {
+                    // Force re-validation by changing the field value to itself
+                    const currentValue = (_b = this.state.api.getFieldState(this.name)) === null || _b === void 0 ? void 0 : _b.value;
+                    this.state.api.change(this.name, currentValue);
+                }
+            }
+            // Force re-render to inject error state
+            this.injectPropsIntoSlottedElements();
+        }
+    }
     stencilInvalid(e) {
-        this.finalFormBlur(e);
+        // Handle form validation errors
+        if (e.detail && this.name && e.detail[this.name]) {
+            // Set the error message for this specific field
+            this.errorMessage = e.detail[this.name];
+            // Force re-render to inject error into child components
+            this.injectPropsIntoSlottedElements();
+        }
+        // Don't call finalFormBlur here as it might overwrite custom errors
     }
     render() {
         if (!this.registered) {
@@ -275,16 +309,6 @@ export class StencilField {
         return h("slot", null);
     }
     static get is() { return "stencil-field"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["stencil-field.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["stencil-field.css"]
-        };
-    }
     static get properties() {
         return {
             "id": {

package/dist/collection/components/my-component/UI/forms/form/stencil-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/forms/form/stencil-field.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * StencilField - Form field wrapper component that integrates with Final Form\n *\n * This component acts as a bridge between form input components and Final Form state management.\n * It uses slot-based rendering and property injection to work with any child input component.\n *\n * REQUIREMENTS FOR CHILD COMPONENTS:\n *\n * 1. VALUE HANDLING:\n *    - SIMPLE INPUTS: Manage own value state, receive initialValue prop from stencil-field\n *    - COMPLEX INPUTS: Same approach - internal value management with initialValue\n *    - stencil-field reads values from DOM events or custom events, never directly modifies component value\n *\n * 2. ERROR HANDLING:\n *    - Child component should have an @Prop() error: string\n *    - Use @Watch('error') to react to validation errors\n *\n * 3. EVENT HANDLERS:\n *    - Child component must emit standard DOM events (input, change, blur, focus)\n *    - SIMPLE INPUTS: Standard HTML input/textarea that emits native events\n *    - COMPLEX INPUTS: Emit CustomEvent with detail containing the value\n *\n * 4. STANDARD FORM PROPS:\n *    - @Prop() name: string (for form field identification)\n *    - @Prop() id: string (for accessibility)\n *    - @Prop() label: string (for field labeling)\n *    - @Prop() initialValue: string (for setting initial/default values)\n *\n * EXAMPLE SIMPLE INPUT:\n * ```tsx\n * @Component({ tag: 'simple-input' })\n * export class SimpleInput {\n *   @Prop() error: string;\n *   @Prop() name: string;\n *   @Prop() id: string;\n *   @Prop() label: string;\n *   @Prop() initialValue: string;\n *   @State() value: string;\n *\n *   componentWillLoad() {\n *     this.value = this.initialValue || '';\n *   }\n *\n *   private onChange = (e: Event) => {\n *     this.value = (e.target as HTMLInputElement).value;\n *   }\n *\n *   render() {\n *     return <input name={this.name} id={this.id} value={this.value} onInput={this.onChange} />;\n *   }\n * }\n * ```\n *\n * EXAMPLE COMPLEX INPUT:\n * ```tsx\n * @Component({ tag: 'complex-input' })\n * export class ComplexInput {\n *   @Prop() error: string;\n *   @Prop() name: string;\n *   @Prop() id: string;\n *   @Prop() label: string;\n *   @Prop() initialValue: string;\n *   @State() value: string;\n *\n *   componentWillLoad() {\n *     this.value = this.initialValue || '';\n *   }\n *\n *   @Watch('error')\n *   updateError() {\n *     // Handle error display\n *   }\n *\n *   private onChange = (newValue: string) => {\n *     this.value = newValue; // Update internal state\n *     // Emit custom event for stencil-field\n *     this.el.dispatchEvent(new CustomEvent('input', {\n *       detail: newValue,\n *       bubbles: true\n *     }));\n *   }\n * }\n * ```\n *\n * USAGE:\n * ```tsx\n * <!-- Simple input with initial value -->\n * <stencil-field name=\"email\" label=\"Email\" required>\n *   <simple-input />\n * </stencil-field>\n *\n * <!-- Complex component -->\n * <stencil-field name=\"tags\" label=\"Tags\" required>\n *   <tag-selector />\n * </stencil-field>\n * ```\n */\nimport { Component, Prop, h, State, Listen, Element, Method } from '@stencil/core';\n\n@Component({\n  tag: 'stencil-field',\n  styleUrl: 'stencil-field.css',\n  shadow: false,\n})\nexport class StencilField {\n  @Element() el: HTMLElement;\n  @Prop() id: string;\n  @Prop() defaultValue: string;\n  @Prop() name: string;\n  @Prop() label: string;\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) value: string;\n  @State() errorMessage: string;\n  @State() registered: boolean = false;\n  @State() finalFormBlur: (e: Event) => void = () => {};\n  @State() finalFormChange: (value: any) => void = () => {};\n  @State() finalFormFocus: (e: Event) => void = () => {};\n\n  private state: any;\n\n  @Method()\n  async setFormApi(formApi: any) {\n    this.state = formApi;\n    this.state.api.registerField(\n      this.name,\n      fieldState => {\n        const { blur, change, focus, value } = fieldState;\n        if (!this.state.registeredFields[this.name]) {\n          this.state.registeredFields[this.name] = { required: this.required };\n          // first time, register event listeners\n\n          this.finalFormBlur = () => {\n            blur();\n            this.errorMessage = this.state.api.getFieldState(this.name)?.error;\n          };\n          this.finalFormChange = event => {\n            change(event);\n            // reset the error on change, error state will be re-evaluated when the blur event is triggered\n            this.errorMessage = '';\n            // Force re-render to inject cleared error into child components\n            this.injectPropsIntoSlottedElements();\n          };\n          this.finalFormFocus = focus;\n          this.registered = true;\n        }\n\n        // update value\n\n        this.value = value;\n      },\n      {\n        value: true,\n        error: false,\n        touched: false,\n      },\n    );\n  }\n\n  componentDidRender() {\n    this.injectPropsIntoSlottedElements();\n  }\n\n  componentDidUpdate() {\n    this.injectPropsIntoSlottedElements();\n  }\n\n  private injectPropsIntoSlottedElements() {\n    const hasSlottedContent = this.el.children.length > 0;\n\n    if (hasSlottedContent) {\n      Array.from(this.el.children).forEach((element: any) => {\n        // Inject form field props\n        // Pass initial value only, don't control the component's value directly\n        if (this.value !== undefined && !element.hasAttribute('data-initial-value-set')) {\n          element.initialValue = this.value;\n          element.setAttribute('data-initial-value-set', 'true');\n        }\n\n        // Always update error state (including clearing it)\n        element.error = this.errorMessage || '';\n\n        if (this.name) element.name = this.name;\n        if (this.id) element.id = this.id;\n        if (this.label) element.label = this.label;\n\n        // Set up event handlers if not already bound\n        if (!element.hasAttribute('data-field-events-bound')) {\n          element.addEventListener('input', this.handleInput.bind(this));\n          element.addEventListener('change', this.handleChange.bind(this));\n          element.addEventListener('blur', this.handleBlur.bind(this));\n          element.addEventListener('focus', this.handleFocus.bind(this));\n          element.setAttribute('data-field-events-bound', 'true');\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up the field from the registry when component is unmounted\n    if (!this.name) {\n      return;\n    }\n    if (this.state.registeredFields[this.name]) {\n      delete this.state.registeredFields[this.name];\n    }\n\n    // Final Form automatically handles field cleanup when no longer subscribed,\n    // but we can also explicitly remove the field value if needed\n    try {\n      if (this.state.api?.change) {\n        this.state.api.change(this.name, undefined);\n      }\n    } catch (error) {\n      // Silently handle any errors during cleanup\n      console.debug('Field cleanup warning:', error);\n    }\n\n    // Reset registration state\n    this.registered = false;\n  }\n\n  @Listen('input')\n  handleInput(e: Event) {\n    let value;\n\n    // Handle custom events from complex components\n    if (e instanceof CustomEvent && e.detail !== undefined) {\n      value = e.detail;\n    } else {\n      // Handle standard DOM events - need to find the actual input element\n      const target = e.target as HTMLElement;\n\n      // If target is a custom component, look for the actual input in its shadow DOM\n      if (target.shadowRoot) {\n        const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n        if (input) {\n          value = input.value;\n        }\n      }\n      // If target is the actual input element\n      else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n        value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n      }\n      // Fallback: check if the custom component has a value property\n      else if ('value' in target) {\n        value = (target as any).value;\n      }\n    }\n\n    if (value !== undefined) {\n      this.finalFormChange?.(value);\n    }\n  }\n\n  @Listen('change')\n  handleChange(e: Event) {\n    let value;\n\n    // Handle custom events from complex components\n    if (e instanceof CustomEvent && e.detail !== undefined) {\n      value = e.detail;\n    } else {\n      // Handle standard DOM events - need to find the actual input element\n      const target = e.target as HTMLElement;\n\n      // If target is a custom component, look for the actual input in its shadow DOM\n      if (target.shadowRoot) {\n        const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n        if (input) {\n          value = input.value;\n        }\n      }\n      // If target is the actual input element\n      else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n        value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n      }\n      // Fallback: check if the custom component has a value property\n      else if ('value' in target) {\n        value = (target as any).value;\n      }\n    }\n\n    if (value !== undefined) {\n      this.finalFormChange?.(value);\n      // For complex components that emit custom events, also trigger blur validation\n      if (e instanceof CustomEvent) {\n        this.finalFormBlur?.(e);\n      }\n    }\n  }\n\n  @Listen('focus')\n  handleFocus(e: FocusEvent) {\n    this.finalFormFocus?.(e);\n  }\n\n  @Listen('blur')\n  handleBlur(e: FocusEvent) {\n    this.finalFormBlur?.(e);\n  }\n\n  @Listen('stencilFormInvalidEvent', {target: 'body'})\n  stencilInvalid(e){\n    this.finalFormBlur(e);\n  }\n  render() {\n    if (!this.registered) {\n      return null;\n    }\n\n    // Always use slot-based rendering\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"stencil-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/forms/form/stencil-field.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * StencilField - Form field wrapper component that integrates with Final Form\n *\n * This component acts as a bridge between form input components and Final Form state management.\n * It uses slot-based rendering and property injection to work with any child input component.\n *\n * REQUIREMENTS FOR CHILD COMPONENTS:\n *\n * 1. VALUE HANDLING:\n *    - SIMPLE INPUTS: Manage own value state, receive initialValue prop from stencil-field\n *    - COMPLEX INPUTS: Same approach - internal value management with initialValue\n *    - stencil-field reads values from DOM events or custom events, never directly modifies component value\n *\n * 2. ERROR HANDLING:\n *    - Child component should have an @Prop() error: string\n *    - Use @Watch('error') to react to validation errors\n *\n * 3. EVENT HANDLERS:\n *    - Child component must emit standard DOM events (input, change, blur, focus)\n *    - SIMPLE INPUTS: Standard HTML input/textarea that emits native events\n *    - COMPLEX INPUTS: Emit CustomEvent with detail containing the value\n *\n * 4. STANDARD FORM PROPS:\n *    - @Prop() name: string (for form field identification)\n *    - @Prop() id: string (for accessibility)\n *    - @Prop() label: string (for field labeling)\n *    - @Prop() initialValue: string (for setting initial/default values)\n *\n * EXAMPLE SIMPLE INPUT:\n * ```tsx\n * @Component({ tag: 'simple-input' })\n * export class SimpleInput {\n *   @Prop() error: string;\n *   @Prop() name: string;\n *   @Prop() id: string;\n *   @Prop() label: string;\n *   @Prop() initialValue: string;\n *   @State() value: string;\n *\n *   componentWillLoad() {\n *     this.value = this.initialValue || '';\n *   }\n *\n *   private onChange = (e: Event) => {\n *     this.value = (e.target as HTMLInputElement).value;\n *   }\n *\n *   render() {\n *     return <input name={this.name} id={this.id} value={this.value} onInput={this.onChange} />;\n *   }\n * }\n * ```\n *\n * EXAMPLE COMPLEX INPUT:\n * ```tsx\n * @Component({ tag: 'complex-input' })\n * export class ComplexInput {\n *   @Prop() error: string;\n *   @Prop() name: string;\n *   @Prop() id: string;\n *   @Prop() label: string;\n *   @Prop() initialValue: string;\n *   @State() value: string;\n *\n *   componentWillLoad() {\n *     this.value = this.initialValue || '';\n *   }\n *\n *   @Watch('error')\n *   updateError() {\n *     // Handle error display\n *   }\n *\n *   private onChange = (newValue: string) => {\n *     this.value = newValue; // Update internal state\n *     // Emit custom event for stencil-field\n *     this.el.dispatchEvent(new CustomEvent('input', {\n *       detail: newValue,\n *       bubbles: true\n *     }));\n *   }\n * }\n * ```\n *\n * USAGE:\n * ```tsx\n * <!-- Simple input with initial value -->\n * <stencil-field name=\"email\" label=\"Email\" required>\n *   <simple-input />\n * </stencil-field>\n *\n * <!-- Complex component -->\n * <stencil-field name=\"tags\" label=\"Tags\" required>\n *   <tag-selector />\n * </stencil-field>\n * ```\n */\nimport { Component, Prop, h, State, Listen, Element, Method } from '@stencil/core';\n\n@Component({\n  tag: 'stencil-field',\n  shadow: false,\n})\nexport class StencilField {\n  @Element() el: HTMLElement;\n  @Prop() id: string;\n  @Prop() defaultValue: string;\n  @Prop() name: string;\n  @Prop() label: string;\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) value: string;\n  @State() errorMessage: string;\n  @State() registered: boolean = false;\n  @State() finalFormBlur: (e: Event) => void = () => { };\n  @State() finalFormChange: (value: any) => void = () => { };\n  @State() finalFormFocus: (e: Event) => void = () => { };\n\n  private state: any;\n\n  @Method()\n  async setFormApi(formApi: any) {\n    this.state = formApi;\n    this.state.api.registerField(\n      this.name,\n      fieldState => {\n        const { blur, change, focus, value } = fieldState;\n        if (!this.state.registeredFields[this.name]) {\n          this.state.registeredFields[this.name] = { required: this.required };\n          // first time, register event listeners\n\n          this.finalFormBlur = () => {\n            blur();\n            // Preserve custom errors - only use Final Form errors if no custom error exists\n            const finalFormError = this.state.api.getFieldState(this.name)?.error;\n            if (!this.errorMessage) {\n              this.errorMessage = finalFormError || '';\n            }\n          };\n          this.finalFormChange = event => {\n            change(event);\n            // reset the error on change, error state will be re-evaluated when the blur event is triggered\n             this.errorMessage = '';\n            // // Force re-render to inject cleared error into child components\n            this.injectPropsIntoSlottedElements();\n          };\n          this.finalFormFocus = focus;\n          this.registered = true;\n        }\n\n        // update value\n\n        this.value = value ?? \"\";\n      },\n      {\n        value: true,\n        error: false,\n        touched: false,\n      },\n    );\n  }\n\n  componentDidRender() {\n    this.injectPropsIntoSlottedElements();\n  }\n\n  componentDidUpdate() {\n    this.injectPropsIntoSlottedElements();\n  }\n\n  private injectPropsIntoSlottedElements() {\n    const hasSlottedContent = this.el.children.length > 0;\n\n    if (hasSlottedContent) {\n      Array.from(this.el.children).forEach((element: any) => {\n        // Inject form field props\n        // Pass initial value only, don't control the component's value directly\n        if (this.value !== undefined && !element.hasAttribute('data-initial-value-set')) {\n          element.initialValue = this.value;\n          element.setAttribute('data-initial-value-set', 'true');\n        }\n\n        // Always update error state (including clearing it)\n        element.error = this.errorMessage || '';\n\n        if (this.name) element.name = this.name;\n        if (this.id) element.id = this.id;\n        if (this.label) element.label = this.label;\n\n        // Set up event handlers if not already bound\n        if (!element.hasAttribute('data-field-events-bound')) {\n          element.addEventListener('input', this.handleInput.bind(this));\n          element.addEventListener('change', this.handleChange.bind(this));\n          element.addEventListener('blur', this.handleBlur.bind(this));\n          element.addEventListener('focus', this.handleFocus.bind(this));\n          element.addEventListener('error', this.handleError.bind(this));\n          element.setAttribute('data-field-events-bound', 'true');\n        }\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up the field from the registry when component is unmounted\n    if (!this.name) {\n      return;\n    }\n    if (this.state.registeredFields[this.name]) {\n      delete this.state.registeredFields[this.name];\n    }\n\n    // Final Form automatically handles field cleanup when no longer subscribed,\n    // but we can also explicitly remove the field value if needed\n    try {\n      if (this.state.api?.change) {\n        this.state.api.change(this.name, undefined);\n      }\n    } catch (error) {\n      // Silently handle any errors during cleanup\n      console.debug('Field cleanup warning:', error);\n    }\n\n    // Reset registration state\n    this.registered = false;\n  }\n\n  @Listen('input')\n  handleInput(e: Event) {\n    let value;\n\n    // Handle custom events from complex components\n    if (e instanceof CustomEvent && e.detail !== undefined) {\n      value = e.detail;\n    } else {\n      // Handle standard DOM events - need to find the actual input element\n      const target = e.target as HTMLElement;\n\n      // If target is a custom component, look for the actual input in its shadow DOM\n      if (target.shadowRoot) {\n        const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n        if (input) {\n          value = input.value;\n        }\n      }\n      // If target is the actual input element\n      else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n        value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n      }\n      // Fallback: check if the custom component has a value property\n      else if ('value' in target) {\n        value = (target as any).value;\n      }\n    }\n\n    if (value !== undefined) {\n      this.finalFormChange?.(value);\n    }\n  }\n\n  @Listen('change')\n  handleChange(e: Event) {\n    let value;\n\n    // Handle custom events from complex components\n    if (e instanceof CustomEvent && e.detail !== undefined) {\n      value = e.detail;\n    } else {\n      // Handle standard DOM events - need to find the actual input element\n      const target = e.target as HTMLElement;\n\n      // If target is a custom component, look for the actual input in its shadow DOM\n      if (target.shadowRoot) {\n        const input = target.shadowRoot.querySelector('input, textarea, select') as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n        if (input) {\n          value = input.value;\n        }\n      }\n      // If target is the actual input element\n      else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {\n        value = (target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value;\n      }\n      // Fallback: check if the custom component has a value property\n      else if ('value' in target) {\n        value = (target as any).value;\n      }\n    }\n\n    if (value !== undefined) {\n      this.finalFormChange?.(value);\n      // For complex components that emit custom events, also trigger blur validation\n      if (e instanceof CustomEvent) {\n        this.finalFormBlur?.(e);\n      }\n    }\n  }\n\n  @Listen('focus')\n  handleFocus(e: FocusEvent) {\n    this.finalFormFocus?.(e);\n  }\n\n  @Listen('blur')\n  handleBlur(e: FocusEvent) {\n    this.finalFormBlur?.(e);\n  }\n\n  handleError(e: CustomEvent) {\n    // Handle error events from slotted child components\n    if (e.detail !== undefined) {\n      this.errorMessage = e.detail;\n\n      // Store the custom error in the form's custom errors registry\n      if (this.state?.registeredFields && this.name) {\n        if (!this.state.customErrors) {\n          this.state.customErrors = {};\n        }\n        this.state.customErrors[this.name] = e.detail;\n\n        // Trigger form validation to include custom errors\n        if (this.state.api) {\n          // Force re-validation by changing the field value to itself\n          const currentValue = this.state.api.getFieldState(this.name)?.value;\n          this.state.api.change(this.name, currentValue);\n        }\n      }\n\n      // Force re-render to inject error state\n      this.injectPropsIntoSlottedElements();\n    }\n  }\n\n  @Listen('stencilFormInvalidEvent', { target: 'body' })\n  stencilInvalid(e: CustomEvent) {\n    // Handle form validation errors\n    if (e.detail && this.name && e.detail[this.name]) {\n      // Set the error message for this specific field\n      this.errorMessage = e.detail[this.name];\n      // Force re-render to inject error into child components\n      this.injectPropsIntoSlottedElements();\n    }\n    // Don't call finalFormBlur here as it might overwrite custom errors\n  }\n  render() {\n    if (!this.registered) {\n      return null;\n    }\n\n    // Always use slot-based rendering\n    return <slot />;\n  }\n}\n"]}