udp-stencil-component-library 25.18.1 → 25.18.2-beta.10

package/dist/components/stencil-chip2.js

@@ -1,144 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
-import Close16 from '@carbon/icons/es/close/16';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const stencilChipCss = ".chip{display:inline-flex;align-items:center;padding:3px;padding-left:8px;font-size:14px;border-radius:16px;color:#333;cursor:pointer;background-color:transparent;height:26px}.chip--unclickable{cursor:default}.delete-button{margin-left:12px;background-color:#fff;border:none;border-radius:50%;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.delete-button svg{width:20px;height:20px;fill:#333;}.left-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:24px;height:24px;margin-right:8px;}";
-
-const StencilChip = /*@__PURE__*/ proxyCustomElement(class StencilChip extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.onDelete = createEvent(this, "onDelete");
-        this.onToggle = createEvent(this, "onToggle");
-        this.udpChipClicked = createEvent(this, "udpChipClicked");
-        this.color = 'primary';
-        this.level = 0;
-        this.defaultToggled = false; // New Prop
-        this.showLeftIcon = false; // New Prop to control display of Left Icon
-        this.showDelete = true;
-        this.clickable = true; // New Prop to turn off click ability
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-            this.udpChipClicked.emit(this.text); // emit the event when clicked
-        };
-        this.handleDelete = (event) => {
-            event.stopPropagation();
-            this.onDelete.emit();
-        };
-    }
-    externalStringChanged(newValue) {
-        if (newValue && newValue === this.text) {
-            this.toggleOff();
-        }
-    }
-    toggleOff() {
-        if (this.toggled) {
-            this.toggled = false;
-            this.onToggle.emit(this.toggled); // Optionally emit an event
-        }
-    }
-    // Initialize the toggle state with the default value
-    componentWillLoad() {
-        this.toggled = this.defaultToggled;
-    }
-    // Method to lighten the color based on the level
-    getLightenedColor(color, level) {
-        // Static HSL values for primary and secondary colors
-        const hslValues = {
-            primary: { hue: 156, saturation: 58, lightness: 67 },
-            secondary: { hue: 156, saturation: 58, lightness: 67 },
-        };
-        // Retrieve the correct color values
-        const { hue, saturation, lightness } = hslValues[color];
-        // Dramatically increase the lightness based on the level to ensure a noticeable difference
-        const lightnessIncrease = 15; // More substantial increase per level
-        const newLightness = Math.min(100, lightness + level * lightnessIncrease);
-        // Optional: Adjust hue for a more drastic change (future-proofing)
-        const hueAdjustment = 50; // Set to non-zero to see hue changes; keep at 0 for no change
-        const newHue = (hue + hueAdjustment * level) % 360; // Adjust hue based on level if needed
-        // Construct and return the HSL color string
-        return `hsl(${newHue}, ${saturation}%, ${newLightness}%)`;
-    }
-    render() {
-        const additionalPaddingWhenDeleteHidden = {
-            paddingRight: '8px', // Adjust this value according to your needs
-        };
-        const chipStyle = this.toggled ? Object.assign({
-            //backgroundColor: this.color === 'primary' ? 'var(--primary-color)' : 'var(--secondary-color)',
-            backgroundColor: this.getLightenedColor(this.color, this.level), color: '#000', border: '1px solid var(--secondary-color)'
-        }, (!this.showDelete ? additionalPaddingWhenDeleteHidden : {})) : Object.assign({ backgroundColor: 'transparent', color: '#393939', border: '1px solid var(--secondary-color)' }, (!this.showDelete ? additionalPaddingWhenDeleteHidden : {}));
-        const deleteButtonStyle = this.toggled
-            ? {
-                backgroundColor: '#fff',
-                color: '#333',
-            }
-            : {
-                backgroundColor: '#d3d3d3', // light grey background
-                color: '#393939',
-            };
-        const leftIconStyle = this.toggled
-            ? {
-                backgroundColor: '#fff',
-                color: '#333',
-            }
-            : {
-                backgroundColor: 'var(--primary-color)', // Or some darker shade
-                color: '#fff',
-            };
-        const leftIconData = this.leftIcon || Close16; // Fallback to Add16 if no icon is provided
-        return (h("div", { key: 'bba739d3ba05706d5b269365400309958b9f17cc', class: `chip${!this.clickable ? ' chip--unclickable' : ''}`, style: chipStyle, onClick: this.clickable ? this.handleClick : undefined }, this.leftIcon && (h("span", { key: '92f46c02408e1595e6da0c406b5fb93c67247a63', class: "left-icon", style: leftIconStyle }, h("svg", Object.assign({ key: 'a52aa67c707adff36e1e3f3e1dcadc54d9d428b5' }, leftIconData.attrs, { fill: leftIconStyle.color }), leftIconData.content.map((item, index) => {
-            if (item.elem === 'path') {
-                return h("path", Object.assign({}, item.attrs, { key: index }));
-            }
-            return null;
-        })))), h("unity-typography", { key: 'be31cc15bc9ff5c4e5890db2454b2d1a4c505493', variant: 'caption-text' }, h("span", { key: '22f5a9c742d5952f3b08e2a356eefbdfa547d466', class: 'remove-height' }, this.text)), this.showDelete && (h("button", { key: '2e5783b5f99e4348f6d1563dc2ce93d0d54cbeca', class: "delete-button", style: deleteButtonStyle, onClick: this.handleDelete }, h("svg", Object.assign({ key: '7f3846e85ceb651eebf7d332f12e2ac56a780884' }, Close16.attrs, { fill: deleteButtonStyle.color }), Close16.content.map((item, index) => {
-            if (item.elem === 'path') {
-                return h("path", Object.assign({}, item.attrs, { key: index }));
-            }
-            return null;
-        }))))));
-    }
-    static get watchers() { return {
-        "externalToggleString": ["externalStringChanged"]
-    }; }
-    static get style() { return stencilChipCss; }
-}, [257, "stencil-chip", {
-        "text": [1],
-        "color": [1],
-        "level": [2],
-        "defaultToggled": [4, "default-toggled"],
-        "leftIcon": [8, "left-icon"],
-        "showLeftIcon": [4, "show-left-icon"],
-        "showDelete": [4, "show-delete"],
-        "externalToggleString": [1, "external-toggle-string"],
-        "clickable": [4],
-        "toggled": [32]
-    }, undefined, {
-        "externalToggleString": ["externalStringChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stencil-chip", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stencil-chip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, StencilChip);
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { StencilChip as S, defineCustomElement as d };
-//# sourceMappingURL=stencil-chip2.js.map
-
-//# sourceMappingURL=stencil-chip2.js.map
+import{p as t,H as e,c as i,h as s,t as o}from"./index2.js";import r from"@carbon/icons/es/close/16";import{d as n}from"./unity-typography2.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.onDelete=i(this,"onDelete"),this.onToggle=i(this,"onToggle"),this.udpChipClicked=i(this,"udpChipClicked"),this.color="primary",this.level=0,this.defaultToggled=!1,this.showLeftIcon=!1,this.showDelete=!0,this.clickable=!0,this.handleClick=()=>{this.toggled=!this.toggled,this.udpChipClicked.emit(this.text)},this.handleDelete=t=>{t.stopPropagation(),this.onDelete.emit()}}externalStringChanged(t){t&&t===this.text&&this.toggleOff()}toggleOff(){this.toggled&&(this.toggled=!1,this.onToggle.emit(this.toggled))}componentWillLoad(){this.toggled=this.defaultToggled}getLightenedColor(t,e){const{hue:i,saturation:s,lightness:o}={primary:{hue:156,saturation:58,lightness:67},secondary:{hue:156,saturation:58,lightness:67}}[t];return`hsl(${(i+50*e)%360}, ${s}%, ${Math.min(100,o+15*e)}%)`}render(){const t=Object.assign(this.toggled?{backgroundColor:this.getLightenedColor(this.color,this.level),color:"#000",border:"1px solid var(--secondary-color)"}:{backgroundColor:"transparent",color:"#393939",border:"1px solid var(--secondary-color)"},this.showDelete?{}:{paddingRight:"8px"}),e=this.toggled?{backgroundColor:"#fff",color:"#333"}:{backgroundColor:"#d3d3d3",color:"#393939"},i=this.toggled?{backgroundColor:"#fff",color:"#333"}:{backgroundColor:"var(--primary-color)",color:"#fff"},o=this.leftIcon||r;return s("div",{key:"bba739d3ba05706d5b269365400309958b9f17cc",class:"chip"+(this.clickable?"":" chip--unclickable"),style:t,onClick:this.clickable?this.handleClick:void 0},this.leftIcon&&s("span",{key:"92f46c02408e1595e6da0c406b5fb93c67247a63",class:"left-icon",style:i},s("svg",Object.assign({key:"a52aa67c707adff36e1e3f3e1dcadc54d9d428b5"},o.attrs,{fill:i.color}),o.content.map(((t,e)=>"path"===t.elem?s("path",Object.assign({},t.attrs,{key:e})):null)))),s("unity-typography",{key:"be31cc15bc9ff5c4e5890db2454b2d1a4c505493",variant:"caption-text"},s("span",{key:"22f5a9c742d5952f3b08e2a356eefbdfa547d466",class:"remove-height"},this.text)),this.showDelete&&s("button",{key:"2e5783b5f99e4348f6d1563dc2ce93d0d54cbeca",class:"delete-button",style:e,onClick:this.handleDelete},s("svg",Object.assign({key:"7f3846e85ceb651eebf7d332f12e2ac56a780884"},r.attrs,{fill:e.color}),r.content.map(((t,e)=>"path"===t.elem?s("path",Object.assign({},t.attrs,{key:e})):null)))))}static get watchers(){return{externalToggleString:[{externalStringChanged:0}]}}static get style(){return".chip{display:inline-flex;align-items:center;padding:3px;padding-left:8px;font-size:14px;border-radius:16px;color:#333;cursor:pointer;background-color:transparent;height:26px}.chip--unclickable{cursor:default}.delete-button{margin-left:12px;background-color:#fff;border:none;border-radius:50%;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.delete-button svg{width:20px;height:20px;fill:#333;}.left-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:24px;height:24px;margin-right:8px;}"}},[1,"stencil-chip",{text:[1],color:[1],level:[2],defaultToggled:[4,"default-toggled"],leftIcon:[8,"left-icon"],showLeftIcon:[4,"show-left-icon"],showDelete:[4,"show-delete"],externalToggleString:[1,"external-toggle-string"],clickable:[4],toggled:[32]},void 0,{externalToggleString:[{externalStringChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["stencil-chip","unity-typography"].forEach((t=>{switch(t){case"stencil-chip":customElements.get(o(t))||customElements.define(o(t),c);break;case"unity-typography":customElements.get(o(t))||n()}}))}export{c as S,l as d}

package/dist/components/stencil-field.js

@@ -1,9 +1 @@
-import { S as StencilField$1, d as defineCustomElement$1 } from './stencil-field2.js';
-
-const StencilField = StencilField$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { StencilField, defineCustomElement };
-//# sourceMappingURL=stencil-field.js.map
-
-//# sourceMappingURL=stencil-field.js.map
+import{S as s,d as o}from"./stencil-field2.js";const t=s,e=o;export{t as StencilField,e as defineCustomElement}

package/dist/components/stencil-field2.js

@@ -1,285 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-
-const StencilField = /*@__PURE__*/ proxyCustomElement(class StencilField extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.required = false;
-        this.fieldIdentifierKey = null;
-        this.registerMetadata = false;
-        this.metadataFieldNames = null;
-        this.ignoreDirty = false; // If true, field changes won't mark form as dirty
-        this.registered = false;
-        this.finalFormBlur = () => { };
-        this.finalFormChange = () => { };
-        this.finalFormFocus = () => { };
-        this.finalFormChangeMetadata = {};
-    }
-    async setFormApi(formApi) {
-        this.state = formApi;
-        // --- Main field to register. mainly used for the VALUE field, but can be used with any field names --- // i.e "section1.question1.value"  or "section1.question1.metadata.timestamp"
-        this.state.api.registerField(`${this.name}`, fieldState => {
-            const { blur, change, focus, value } = fieldState;
-            if (!this.state.registeredFields[this.name]) {
-                this.state.registeredFields[this.name] = { required: this.required, ignoreDirty: this.ignoreDirty };
-                // first time, register event listeners
-                this.finalFormBlur = () => {
-                    var _a;
-                    blur();
-                    // 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
-                    this.injectPropsIntoSlottedElements();
-                };
-                this.finalFormFocus = focus;
-                this.registered = true;
-            }
-            // update value
-            this.value = value !== null && value !== void 0 ? value : '';
-        }, { value: true, error: false, touched: false });
-        // --- Used for Non User-input METADATA FIELDS (eg. signature location data, timestamp) --- //
-        if (this.registerMetadata && this.fieldIdentifierKey && Array.isArray(this.metadataFieldNames)) {
-            // Store callbacks per metadata key
-            if (!this.finalFormChangeMetadata) {
-                this.finalFormChangeMetadata = {};
-            }
-            for (const metadataKey of this.metadataFieldNames) {
-                this.state.api.registerField(`${this.fieldIdentifierKey}.metadata.${metadataKey}`, fieldState => {
-                    const { change } = fieldState;
-                    // keep callback for this key
-                    this.finalFormChangeMetadata[metadataKey] = (newVal) => {
-                        change(newVal);
-                    };
-                }, { value: true });
-            }
-        }
-    }
-    componentDidRender() {
-        this.injectPropsIntoSlottedElements();
-    }
-    componentDidUpdate() {
-        this.injectPropsIntoSlottedElements();
-    }
-    injectPropsIntoSlottedElements() {
-        const hasSlottedContent = this.el.children.length > 0;
-        if (hasSlottedContent) {
-            Array.from(this.el.children).forEach((element) => {
-                // Inject form field props
-                // Pass initial value only, don't control the component's value directly
-                if (this.value !== undefined && !element.hasAttribute('data-initial-value-set')) {
-                    element.initialValue = this.value;
-                    element.setAttribute('data-initial-value-set', 'true');
-                }
-                // Always update error state (including clearing it)
-                element.error = this.errorMessage || '';
-                if (this.name)
-                    element.name = this.name;
-                if (this.id)
-                    element.id = this.id;
-                if (this.label)
-                    element.label = this.label;
-                // Set up event handlers if not already bound
-                if (!element.hasAttribute('data-field-events-bound')) {
-                    element.addEventListener('input', this.handleInput.bind(this));
-                    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');
-                }
-            });
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        // Clean up the field from the registry when component is unmounted
-        if (!this.name) {
-            return;
-        }
-        if (this.state.registeredFields[this.name]) {
-            delete this.state.registeredFields[this.name];
-        }
-        // Final Form automatically handles field cleanup when no longer subscribed,
-        // but we can also explicitly remove the field value if needed
-        try {
-            if ((_a = this.state.api) === null || _a === void 0 ? void 0 : _a.change) {
-                this.state.api.change(this.name, undefined);
-            }
-        }
-        catch (error) {
-            // Silently handle any errors during cleanup
-            console.debug('Field cleanup warning:', error);
-        }
-        // Reset registration state
-        this.registered = false;
-    }
-    handleInput(e) {
-        var _a;
-        let value;
-        // Handle custom events from complex components
-        if (e instanceof CustomEvent && e.detail !== undefined) {
-            value = e.detail;
-        }
-        else {
-            // Handle standard DOM events - need to find the actual input element
-            const target = e.target;
-            // If target is a custom component, look for the actual input in its shadow DOM
-            if (target.shadowRoot) {
-                const input = target.shadowRoot.querySelector('input, textarea, select');
-                if (input) {
-                    value = input.value;
-                }
-            }
-            // If target is the actual input element
-            else if (target.tagName === 'INPUT' ||
-                target.tagName === 'TEXTAREA' ||
-                target.tagName === 'SELECT') {
-                value = target.value;
-            }
-            // Fallback: check if the custom component has a value property
-            else if ('value' in target) {
-                value = target.value;
-            }
-        }
-        if (value !== undefined) {
-            (_a = this.finalFormChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
-        }
-    }
-    handleChange(e) {
-        var _a, _b;
-        let value;
-        // Handle custom events from complex components
-        if (e instanceof CustomEvent && e.detail !== undefined) {
-            value = e.detail;
-        }
-        else {
-            // Handle standard DOM events - need to find the actual input element
-            const target = e.target;
-            // If target is a custom component, look for the actual input in its shadow DOM
-            if (target.shadowRoot) {
-                const input = target.shadowRoot.querySelector('input, textarea, select');
-                if (input) {
-                    value = input.value;
-                }
-            }
-            // If target is the actual input element
-            else if (target.tagName === 'INPUT' ||
-                target.tagName === 'TEXTAREA' ||
-                target.tagName === 'SELECT') {
-                value = target.value;
-            }
-            // Fallback: check if the custom component has a value property
-            else if ('value' in target) {
-                value = target.value;
-            }
-        }
-        if (value !== undefined) {
-            (_a = this.finalFormChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
-            // For complex components that emit custom events, also trigger blur validation
-            if (e instanceof CustomEvent) {
-                (_b = this.finalFormBlur) === null || _b === void 0 ? void 0 : _b.call(this, e);
-            }
-        }
-    }
-    handleMetadata(e) {
-        var _a;
-        const { key, value } = e.detail || {};
-        if (key && ((_a = this.finalFormChangeMetadata) === null || _a === void 0 ? void 0 : _a[key])) {
-            this.finalFormChangeMetadata[key](value);
-        }
-    }
-    handleFocus(e) {
-        var _a;
-        (_a = this.finalFormFocus) === null || _a === void 0 ? void 0 : _a.call(this, e);
-    }
-    handleBlur(e) {
-        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) {
-        // 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) {
-            return null;
-        }
-        // Always use slot-based rendering
-        return h("slot", null);
-    }
-    get el() { return this; }
-}, [260, "stencil-field", {
-        "id": [1],
-        "defaultValue": [1, "default-value"],
-        "name": [1],
-        "label": [1],
-        "required": [4],
-        "value": [1025],
-        "fieldIdentifierKey": [1, "field-identifier-key"],
-        "registerMetadata": [4, "register-metadata"],
-        "metadataFieldNames": [16],
-        "ignoreDirty": [4, "ignore-dirty"],
-        "errorMessage": [32],
-        "registered": [32],
-        "finalFormBlur": [32],
-        "finalFormChange": [32],
-        "finalFormFocus": [32],
-        "finalFormChangeMetadata": [32],
-        "setFormApi": [64]
-    }, [[0, "input", "handleInput"], [0, "change", "handleChange"], [0, "metadataEmit", "handleMetadata"], [0, "focus", "handleFocus"], [0, "blur", "handleBlur"], [16, "stencilFormInvalidEvent", "stencilInvalid"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["stencil-field"];
-    components.forEach(tagName => { switch (tagName) {
-        case "stencil-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, StencilField);
-            }
-            break;
-    } });
-}
-
-export { StencilField as S, defineCustomElement as d };
-//# sourceMappingURL=stencil-field2.js.map
-
-//# sourceMappingURL=stencil-field2.js.map
+import{p as t,H as i,h as s,t as e}from"./index2.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.required=!1,this.fieldIdentifierKey=null,this.registerMetadata=!1,this.metadataFieldNames=null,this.ignoreDirty=!1,this.registered=!1,this.finalFormBlur=()=>{},this.finalFormChange=()=>{},this.finalFormFocus=()=>{},this.finalFormChangeMetadata={}}async setFormApi(t){if(this.state=t,this.state.api.registerField(`${this.name}`,(t=>{const{blur:i,change:s,focus:e,value:h}=t;this.state.registeredFields[this.name]||(this.state.registeredFields[this.name]={required:this.required,ignoreDirty:this.ignoreDirty},this.finalFormBlur=()=>{var t;i();const s=null===(t=this.state.api.getFieldState(this.name))||void 0===t?void 0:t.error;this.errorMessage||(this.errorMessage=s||"")},this.finalFormChange=t=>{s(t),this.errorMessage="",this.injectPropsIntoSlottedElements()},this.finalFormFocus=e,this.registered=!0),this.value=null!=h?h:""}),{value:!0,error:!1,touched:!1}),this.registerMetadata&&this.fieldIdentifierKey&&Array.isArray(this.metadataFieldNames)){this.finalFormChangeMetadata||(this.finalFormChangeMetadata={});for(const t of this.metadataFieldNames)this.state.api.registerField(`${this.fieldIdentifierKey}.metadata.${t}`,(i=>{const{change:s}=i;this.finalFormChangeMetadata[t]=t=>{s(t)}}),{value:!0})}}componentDidRender(){this.injectPropsIntoSlottedElements()}componentDidUpdate(){this.injectPropsIntoSlottedElements()}injectPropsIntoSlottedElements(){this.el.children.length>0&&Array.from(this.el.children).forEach((t=>{void 0===this.value||t.hasAttribute("data-initial-value-set")||(t.initialValue=this.value,t.setAttribute("data-initial-value-set","true")),t.error=this.errorMessage||"",this.name&&(t.name=this.name),this.id&&(t.id=this.id),this.label&&(t.label=this.label),t.hasAttribute("data-field-events-bound")||(t.addEventListener("input",this.handleInput.bind(this)),t.addEventListener("change",this.handleChange.bind(this)),t.addEventListener("blur",this.handleBlur.bind(this)),t.addEventListener("focus",this.handleFocus.bind(this)),t.addEventListener("error",this.handleError.bind(this)),t.setAttribute("data-field-events-bound","true"))}))}disconnectedCallback(){var t;if(this.name){this.state.registeredFields[this.name]&&delete this.state.registeredFields[this.name];try{(null===(t=this.state.api)||void 0===t?void 0:t.change)&&this.state.api.change(this.name,void 0)}catch(t){console.debug("Field cleanup warning:",t)}this.registered=!1}}handleInput(t){var i;let s;if(t instanceof CustomEvent&&void 0!==t.detail)s=t.detail;else{const i=t.target;if(i.shadowRoot){const t=i.shadowRoot.querySelector("input, textarea, select");t&&(s=t.value)}else("INPUT"===i.tagName||"TEXTAREA"===i.tagName||"SELECT"===i.tagName||"value"in i)&&(s=i.value)}void 0!==s&&(null===(i=this.finalFormChange)||void 0===i||i.call(this,s))}handleChange(t){var i,s;let e;if(t instanceof CustomEvent&&void 0!==t.detail)e=t.detail;else{const i=t.target;if(i.shadowRoot){const t=i.shadowRoot.querySelector("input, textarea, select");t&&(e=t.value)}else("INPUT"===i.tagName||"TEXTAREA"===i.tagName||"SELECT"===i.tagName||"value"in i)&&(e=i.value)}void 0!==e&&(null===(i=this.finalFormChange)||void 0===i||i.call(this,e),t instanceof CustomEvent&&(null===(s=this.finalFormBlur)||void 0===s||s.call(this,t)))}handleMetadata(t){var i;const{key:s,value:e}=t.detail||{};s&&(null===(i=this.finalFormChangeMetadata)||void 0===i?void 0:i[s])&&this.finalFormChangeMetadata[s](e)}handleFocus(t){var i;null===(i=this.finalFormFocus)||void 0===i||i.call(this,t)}handleBlur(t){var i;null===(i=this.finalFormBlur)||void 0===i||i.call(this,t)}handleError(t){var i,s;if(void 0!==t.detail){if(this.errorMessage=t.detail,(null===(i=this.state)||void 0===i?void 0:i.registeredFields)&&this.name&&(this.state.customErrors||(this.state.customErrors={}),this.state.customErrors[this.name]=t.detail,this.state.api)){const t=null===(s=this.state.api.getFieldState(this.name))||void 0===s?void 0:s.value;this.state.api.change(this.name,t)}this.injectPropsIntoSlottedElements()}}stencilInvalid(t){t.detail&&this.name&&t.detail[this.name]&&(this.errorMessage=t.detail[this.name],this.injectPropsIntoSlottedElements())}render(){return this.registered?s("slot",null):null}get el(){return this}},[260,"stencil-field",{id:[1],defaultValue:[1,"default-value"],name:[1],label:[1],required:[4],value:[1025],fieldIdentifierKey:[1,"field-identifier-key"],registerMetadata:[4,"register-metadata"],metadataFieldNames:[16],ignoreDirty:[4,"ignore-dirty"],errorMessage:[32],registered:[32],finalFormBlur:[32],finalFormChange:[32],finalFormFocus:[32],finalFormChangeMetadata:[32],setFormApi:[64]},[[0,"input","handleInput"],[0,"change","handleChange"],[0,"metadataEmit","handleMetadata"],[0,"focus","handleFocus"],[0,"blur","handleBlur"],[16,"stencilFormInvalidEvent","stencilInvalid"]]]);function n(){"undefined"!=typeof customElements&&["stencil-field"].forEach((t=>{"stencil-field"===t&&(customElements.get(e(t))||customElements.define(e(t),h))}))}export{h as S,n as d}

package/dist/components/stencil-form.js

@@ -1,9 +1 @@
-import { S as StencilForm$1, d as defineCustomElement$1 } from './stencil-form2.js';
-
-const StencilForm = StencilForm$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { StencilForm, defineCustomElement };
-//# sourceMappingURL=stencil-form.js.map
-
-//# sourceMappingURL=stencil-form.js.map
+import{S as o,d as s}from"./stencil-form2.js";const r=o,t=s;export{r as StencilForm,t as defineCustomElement}