udp-stencil-component-library 25.18.2-beta.8 → 25.18.2

package/dist/components/check-box-group2.js

@@ -1,172 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { ChevronDown16, ChevronUp16 } from '@carbon/icons';
-import { isEmpty } from 'lodash';
-import { d as defineCustomElement$4 } from './stencil-icon-button2.js';
-import { d as defineCustomElement$3 } from './udp-ambient-tool-tip2.js';
-import { d as defineCustomElement$2 } from './udp-badge2.js';
-import { d as defineCustomElement$1 } from './unity-typography2.js';
-
-const checkBoxGroupCss = ".expand{transform:rotate(0deg);transition:transform 0.3s ease-in-out}.expandOpen{transform:rotate(180deg)}.iconButtonWrapper{border-radius:var(--spacing-01);margin:auto 0px;margin-bottom:var(--spacing-01)}.expandedList{margin-left:var(--spacing-05);display:flex;flex-direction:column}.checkboxGroup{display:flex;justify-content:space-between;align-items:'center'}.iconButtonContainer{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.form-control-label{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding-top:var(--spacing-01)}";
-
-const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.defaultExpandedListState = true;
-        this.checkedItems = {};
-        this.checkedParent = false;
-        this.expanded = this.defaultExpandedListState;
-        this.parentIndeterminate = false;
-        this.initializeCheckedItems = (values) => {
-            var _a;
-            let preCheckedItems = {};
-            (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(option => {
-                var _a;
-                if (!(option === null || option === void 0 ? void 0 : option.options) || ((_a = option === null || option === void 0 ? void 0 : option.options) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-                    preCheckedItems[option.value] = values === null || values === void 0 ? void 0 : values.includes(option.value);
-                }
-            });
-            this.checkedItems = preCheckedItems;
-            this.updateParentCheckboxState(this.checkedItems, values);
-        };
-        this.updateParentCheckboxState = (checkedItems, values) => {
-            const childrenValues = this.getChildrenValues();
-            const checkedAll = isEmpty(checkedItems)
-                ? childrenValues.length > 0 && childrenValues.every((val) => values.includes(val))
-                : Object.values(checkedItems).every(checked => checked);
-            this.checkedParent = checkedAll;
-            this.parentIndeterminate =
-                !checkedAll && (isEmpty(checkedItems) ? childrenValues.some((val) => values.includes(val)) : Object.values(checkedItems).some(checked => checked));
-        };
-        this.getChildrenValues = () => {
-            var _a;
-            return this.getChildrenObjectsWithNoChildren((_a = this.options) !== null && _a !== void 0 ? _a : [], 'value');
-        };
-        this.handleOnClickChildCheckboxOnChange = (event, values) => {
-            const target = event.target;
-            const name = target.name;
-            const checked = target.checked;
-            this.checkedItems = Object.assign(Object.assign({}, this.checkedItems), { [name]: checked });
-            const newValues = checked ? [...values, name] : values.filter(val => val !== name);
-            this.handleChange(newValues);
-        };
-        this.handleParentCheckboxOnChange = (event, values) => {
-            const target = event.target;
-            const checked = target.checked;
-            this.checkedParent = checked;
-            if (!checked) {
-                this.checkedItems = {};
-                this.handleChange(values.filter((val) => !this.getChildrenValues().includes(val)));
-            }
-            else {
-                const newValues = this.getChildrenValues().filter((option) => !values.includes(option));
-                let val = [...values, ...newValues];
-                for (let v of newValues) {
-                    this.checkedItems = Object.assign(Object.assign({}, this.checkedItems), { [v]: checked });
-                }
-                this.handleChange(val);
-            }
-            this.expanded = true;
-            this.parentIndeterminate = false;
-        };
-        this.getChildrenObjectsWithNoChildren = (arr, valueKey) => {
-            if (!!!arr)
-                return [];
-            return arr.reduce((result, obj) => {
-                var _a;
-                const children = (_a = obj === null || obj === void 0 ? void 0 : obj.options) !== null && _a !== void 0 ? _a : [];
-                const childrenWithNoChildren = this.getChildrenObjectsWithNoChildren(children, valueKey);
-                if (childrenWithNoChildren.length > 0) {
-                    result.push(...childrenWithNoChildren);
-                }
-                else if (children.length === 0) {
-                    result.push(obj[valueKey]);
-                }
-                return result;
-            }, []);
-        };
-    }
-    componentWillLoad() {
-        this.initializeCheckedItems(this.values);
-    }
-    componentWillUpdate() {
-        this.updateParentCheckboxState(this.checkedItems, this.values);
-    }
-    reinitializeCheckedState() {
-        this.initializeCheckedItems(this.values);
-    }
-    render() {
-        var _a, _b, _c;
-        const childrenList = (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => {
-            var _a;
-            if (((_a = option === null || option === void 0 ? void 0 : option.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                return h("check-box-group", { key: option.value, title: option.title, options: option.options, values: this.values, valueKey: option.value, handleChange: this.handleChange });
-            }
-            return (h("div", { class: "form-control-label" }, h("input", { type: "checkbox", checked: this.checkedItems[option.value] || false, onChange: event => this.handleOnClickChildCheckboxOnChange(event, this.values), name: option.value }), h("unity-typography", { variant: 'data-display-three' }, option.title)));
-        });
-        return (h("div", { class: "form-group" }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (h("div", { class: 'checkboxGroup' }, h("div", { class: "form-control-label" }, h("input", { type: "checkbox", checked: this.checkedParent, indeterminate: this.parentIndeterminate, onChange: event => this.handleParentCheckboxOnChange(event, this.values) }), h("unity-typography", { variant: 'data-display-three' }, this.title)), h("div", { class: 'iconButtonContainer' }, h("stencil-icon-button", { iconName: 'cancelBoxSelectionButton', iconClassName: 'iconButtonWrapper', tooltip: 'Expand', icon: this.expanded ? ChevronDown16 : ChevronUp16, buttonId: 'cancelBoxSelectionButton', onClick: () => (this.expanded = !this.expanded) })))) : (h("div", null, h("div", { class: "form-control-label" }, h("input", { type: "checkbox", checked: this.checkedItems[this.valueKey] || false, onChange: event => this.handleOnClickChildCheckboxOnChange(event, this.values), name: this.valueKey }), h("unity-typography", { variant: 'data-display-three' }, this.title)))), this.expanded && ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length) > 0 && h("div", { class: 'expandedList' }, childrenList)));
-    }
-    static get watchers() { return {
-        "options": ["reinitializeCheckedState"]
-    }; }
-    static get style() { return checkBoxGroupCss; }
-}, [257, "check-box-group", {
-        "title": [1],
-        "options": [16],
-        "handleChange": [8, "handle-change"],
-        "defaultExpandedListState": [4, "default-expanded-list-state"],
-        "values": [16],
-        "valueKey": [1, "value-key"],
-        "checkedItems": [32],
-        "checkedParent": [32],
-        "expanded": [32],
-        "parentIndeterminate": [32]
-    }, undefined, {
-        "options": ["reinitializeCheckedState"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["check-box-group", "check-box-group", "stencil-icon-button", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "check-box-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CheckboxGroup);
-            }
-            break;
-        case "check-box-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement();
-            }
-            break;
-        case "stencil-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "udp-ambient-tool-tip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "udp-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { CheckboxGroup as C, defineCustomElement as d };
-//# sourceMappingURL=check-box-group2.js.map
-
-//# sourceMappingURL=check-box-group2.js.map
+import{p as t,H as e,h as i,t as s}from"./index2.js";import{ChevronDown16 as n,ChevronUp16 as o}from"@carbon/icons";import{isEmpty as a}from"lodash";import{d as c}from"./stencil-icon-button2.js";import{d as l}from"./udp-ambient-tool-tip2.js";import{d as r}from"./udp-badge2.js";import{d as h}from"./unity-typography2.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.defaultExpandedListState=!0,this.checkedItems={},this.checkedParent=!1,this.expanded=this.defaultExpandedListState,this.parentIndeterminate=!1,this.initializeCheckedItems=t=>{var e;let i={};null===(e=this.options)||void 0===e||e.forEach((e=>{var s;(null==e?void 0:e.options)&&0!==(null===(s=null==e?void 0:e.options)||void 0===s?void 0:s.length)||(i[e.value]=null==t?void 0:t.includes(e.value))})),this.checkedItems=i,this.updateParentCheckboxState(this.checkedItems,t)},this.updateParentCheckboxState=(t,e)=>{const i=this.getChildrenValues(),s=a(t)?i.length>0&&i.every((t=>e.includes(t))):Object.values(t).every((t=>t));this.checkedParent=s,this.parentIndeterminate=!s&&(a(t)?i.some((t=>e.includes(t))):Object.values(t).some((t=>t)))},this.getChildrenValues=()=>{var t;return this.getChildrenObjectsWithNoChildren(null!==(t=this.options)&&void 0!==t?t:[],"value")},this.handleOnClickChildCheckboxOnChange=(t,e)=>{const i=t.target,s=i.name,n=i.checked;this.checkedItems=Object.assign(Object.assign({},this.checkedItems),{[s]:n});const o=n?[...e,s]:e.filter((t=>t!==s));this.handleChange(o)},this.handleParentCheckboxOnChange=(t,e)=>{const i=t.target.checked;if(this.checkedParent=i,i){const t=this.getChildrenValues().filter((t=>!e.includes(t)));let s=[...e,...t];for(let e of t)this.checkedItems=Object.assign(Object.assign({},this.checkedItems),{[e]:i});this.handleChange(s)}else this.checkedItems={},this.handleChange(e.filter((t=>!this.getChildrenValues().includes(t))));this.expanded=!0,this.parentIndeterminate=!1},this.getChildrenObjectsWithNoChildren=(t,e)=>t?t.reduce(((t,i)=>{var s;const n=null!==(s=null==i?void 0:i.options)&&void 0!==s?s:[],o=this.getChildrenObjectsWithNoChildren(n,e);return o.length>0?t.push(...o):0===n.length&&t.push(i[e]),t}),[]):[]}componentWillLoad(){this.initializeCheckedItems(this.values)}componentWillUpdate(){this.updateParentCheckboxState(this.checkedItems,this.values)}reinitializeCheckedState(){this.initializeCheckedItems(this.values)}render(){var t,e,s;const a=null===(t=this.options)||void 0===t?void 0:t.map((t=>{var e;return(null===(e=null==t?void 0:t.options)||void 0===e?void 0:e.length)>0?i("check-box-group",{key:t.value,title:t.title,options:t.options,values:this.values,valueKey:t.value,handleChange:this.handleChange}):i("div",{class:"form-control-label"},i("input",{type:"checkbox",checked:this.checkedItems[t.value]||!1,onChange:t=>this.handleOnClickChildCheckboxOnChange(t,this.values),name:t.value}),i("unity-typography",{variant:"data-display-three"},t.title))}));return i("div",{class:"form-group"},(null===(e=this.options)||void 0===e?void 0:e.length)>0?i("div",{class:"checkboxGroup"},i("div",{class:"form-control-label"},i("input",{type:"checkbox",checked:this.checkedParent,indeterminate:this.parentIndeterminate,onChange:t=>this.handleParentCheckboxOnChange(t,this.values)}),i("unity-typography",{variant:"data-display-three"},this.title)),i("div",{class:"iconButtonContainer"},i("stencil-icon-button",{iconName:"cancelBoxSelectionButton",iconClassName:"iconButtonWrapper",tooltip:"Expand",icon:this.expanded?n:o,buttonId:"cancelBoxSelectionButton",onClick:()=>this.expanded=!this.expanded}))):i("div",null,i("div",{class:"form-control-label"},i("input",{type:"checkbox",checked:this.checkedItems[this.valueKey]||!1,onChange:t=>this.handleOnClickChildCheckboxOnChange(t,this.values),name:this.valueKey}),i("unity-typography",{variant:"data-display-three"},this.title))),this.expanded&&(null===(s=this.options)||void 0===s?void 0:s.length)>0&&i("div",{class:"expandedList"},a))}static get watchers(){return{options:[{reinitializeCheckedState:0}]}}static get style(){return".expand{transform:rotate(0deg);transition:transform 0.3s ease-in-out}.expandOpen{transform:rotate(180deg)}.iconButtonWrapper{border-radius:var(--spacing-01);margin:auto 0px;margin-bottom:var(--spacing-01)}.expandedList{margin-left:var(--spacing-05);display:flex;flex-direction:column}.checkboxGroup{display:flex;justify-content:space-between;align-items:'center'}.iconButtonContainer{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.form-control-label{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding-top:var(--spacing-01)}"}},[1,"check-box-group",{title:[1],options:[16],handleChange:[8,"handle-change"],defaultExpandedListState:[4,"default-expanded-list-state"],values:[16],valueKey:[1,"value-key"],checkedItems:[32],checkedParent:[32],expanded:[32],parentIndeterminate:[32]},void 0,{options:[{reinitializeCheckedState:0}]}]);function p(){"undefined"!=typeof customElements&&["check-box-group","check-box-group","stencil-icon-button","udp-ambient-tool-tip","udp-badge","unity-typography"].forEach((t=>{switch(t){case"check-box-group":customElements.get(s(t))||customElements.define(s(t),d);break;case"check-box-group":customElements.get(s(t))||p();break;case"stencil-icon-button":customElements.get(s(t))||c();break;case"udp-ambient-tool-tip":customElements.get(s(t))||l();break;case"udp-badge":customElements.get(s(t))||r();break;case"unity-typography":customElements.get(s(t))||h()}}))}export{d as C,p as d}

package/dist/components/check-box.js

@@ -1,152 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './index2.js';
-
-const checkBoxCss = ".checkbox-container{display:flex;align-items:center}.checkbox-container input[type=\"checkbox\"]{margin-right:8px}";
-
-const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.change = createEvent(this, "change");
-        /**
-         * Current checked state of the checkbox. When provided, makes this a controlled component.
-         * The component will use this value and update it through events.
-         */
-        this.checked = false;
-        /**
-         * Whether the checkbox is disabled. Users cannot interact with the checkbox when disabled.
-         */
-        this.disabled = false;
-        /**
-         * Internal checked state. Manages the current checkbox state independently of props.
-         * @internal
-         */
-        this.internalChecked = false;
-        /**
-         * Handles checkbox change events. Updates internal state and emits events.
-         * For controlled components, also updates the checked prop.
-         * @param event - The native change event
-         * @internal
-         */
-        this.handleChange = (event) => {
-            const isChecked = event.target.checked;
-            this.internalChecked = isChecked;
-            // If this is a controlled component (checked prop provided), update the checked prop
-            if (this.checked !== undefined) {
-                this.checked = isChecked;
-            }
-            // Emit events with string values for form compatibility
-            const stringValue = isChecked ? 'true' : 'false';
-            this.change.emit(stringValue);
-        };
-    }
-    /**
-     * Updates the error message when the error prop changes.
-     * @internal
-     */
-    updateError() {
-        this.errorMessage = this.error;
-    }
-    /**
-     * Updates the internal checked state when initialValue prop changes.
-     * Only updates if current state is default or if this is an uncontrolled component.
-     * @internal
-     */
-    initialValueChanged(newValue) {
-        // Only update if we don't have a checked state yet or if this is uncontrolled (no checked prop)
-        if (!this.internalChecked || this.checked === undefined) {
-            if (newValue !== undefined) {
-                this.internalChecked = newValue === 'true' || newValue === '1' || newValue === 'on';
-            }
-        }
-    }
-    /**
-     * Updates the internal checked state when checked prop changes.
-     * For controlled components, the checked prop takes precedence.
-     * @internal
-     */
-    checkedChanged() {
-        // If checked prop is provided, this is a controlled component
-        if (this.checked !== undefined && this.checked !== this.internalChecked) {
-            this.internalChecked = this.checked;
-        }
-    }
-    /**
-     * Component lifecycle method. Initializes error message and internal checked state.
-     * @internal
-     */
-    componentWillLoad() {
-        // Initialize checked state: use checked prop if provided (controlled), otherwise use initialValue (uncontrolled)
-        if (this.checked !== undefined) {
-            this.internalChecked = this.checked;
-        }
-        else if (this.initialValue !== undefined) {
-            this.internalChecked = this.initialValue === 'true' || this.initialValue === '1' || this.initialValue === 'on';
-        }
-        else {
-            this.internalChecked = false;
-        }
-        if (this.error) {
-            this.errorMessage = this.error;
-        }
-    }
-    /**
-     * Renders the checkbox component with label and error message.
-     * @returns JSX element
-     * @internal
-     */
-    render() {
-        const isError = !!this.errorMessage;
-        return (h(Host, { key: 'ba1a4db32033c863a1f1afecfcaad608c084aef0', class: {
-                'udp-input': true,
-                'udp-input--error': isError,
-                'udp-input--disabled': this.disabled,
-                'udp-input--required': this.required,
-                'udp-input--checked': this.internalChecked
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '03e51c5abfe932c8b8c91fc4a2290d27ca7b417e', class: "checkbox-container" }, h("input", { key: '1a8402b5ae9bb2ddbd28ffe6081ff31bf80ac0ed', type: "checkbox", checked: this.internalChecked, onChange: this.handleChange, id: this.id, name: this.name, disabled: this.disabled, required: this.required }), this.label && h("label", { key: 'f24f76ce0772bc697153eb73a8ee3c50b971dd25', htmlFor: this.id }, this.label), this.errorMessage && h("div", { key: '9e4f9113b360b8b21e920096b17fa055ae9d8a0d', class: "error-message" }, this.errorMessage))));
-    }
-    static get watchers() { return {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "checked": ["checkedChanged"]
-    }; }
-    static get style() { return checkBoxCss; }
-}, [257, "check-box", {
-        "initialValue": [1, "initial-value"],
-        "checked": [1028],
-        "label": [1],
-        "id": [1],
-        "name": [1],
-        "disabled": [4],
-        "error": [1],
-        "required": [4],
-        "internalChecked": [32],
-        "errorMessage": [32]
-    }, undefined, {
-        "error": ["updateError"],
-        "initialValue": ["initialValueChanged"],
-        "checked": ["checkedChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["check-box"];
-    components.forEach(tagName => { switch (tagName) {
-        case "check-box":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Checkbox);
-            }
-            break;
-    } });
-}
-
-const CheckBox = Checkbox;
-const defineCustomElement = defineCustomElement$1;
-
-export { CheckBox, defineCustomElement };
-//# sourceMappingURL=check-box.js.map
-
-//# sourceMappingURL=check-box.js.map
+import{p as e,H as i,c as t,h as s,d as a,t as h}from"./index2.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.change=t(this,"change"),this.checked=!1,this.disabled=!1,this.internalChecked=!1,this.handleChange=e=>{const i=e.target.checked;this.internalChecked=i,void 0!==this.checked&&(this.checked=i),this.change.emit(i?"true":"false")}}updateError(){this.errorMessage=this.error}initialValueChanged(e){this.internalChecked&&void 0!==this.checked||void 0!==e&&(this.internalChecked="true"===e||"1"===e||"on"===e)}checkedChanged(){void 0!==this.checked&&this.checked!==this.internalChecked&&(this.internalChecked=this.checked)}componentWillLoad(){this.internalChecked=void 0!==this.checked?this.checked:void 0!==this.initialValue&&("true"===this.initialValue||"1"===this.initialValue||"on"===this.initialValue),this.error&&(this.errorMessage=this.error)}render(){const e=!!this.errorMessage;return s(a,{key:"ba1a4db32033c863a1f1afecfcaad608c084aef0",class:{"udp-input":!0,"udp-input--error":e,"udp-input--disabled":this.disabled,"udp-input--required":this.required,"udp-input--checked":this.internalChecked},"aria-invalid":e?"true":"false","aria-required":this.required?"true":"false"},s("div",{key:"03e51c5abfe932c8b8c91fc4a2290d27ca7b417e",class:"checkbox-container"},s("input",{key:"1a8402b5ae9bb2ddbd28ffe6081ff31bf80ac0ed",type:"checkbox",checked:this.internalChecked,onChange:this.handleChange,id:this.id,name:this.name,disabled:this.disabled,required:this.required}),this.label&&s("label",{key:"f24f76ce0772bc697153eb73a8ee3c50b971dd25",htmlFor:this.id},this.label),this.errorMessage&&s("div",{key:"9e4f9113b360b8b21e920096b17fa055ae9d8a0d",class:"error-message"},this.errorMessage)))}static get watchers(){return{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],checked:[{checkedChanged:0}]}}static get style(){return'.checkbox-container{display:flex;align-items:center}.checkbox-container input[type="checkbox"]{margin-right:8px}'}},[1,"check-box",{initialValue:[1,"initial-value"],checked:[1028],label:[1],id:[1],name:[1],disabled:[4],error:[1],required:[4],internalChecked:[32],errorMessage:[32]},void 0,{error:[{updateError:0}],initialValue:[{initialValueChanged:0}],checked:[{checkedChanged:0}]}]),r=c,d=function(){"undefined"!=typeof customElements&&["check-box"].forEach((e=>{"check-box"===e&&(customElements.get(h(e))||customElements.define(h(e),c))}))};export{r as CheckBox,d as defineCustomElement}

package/dist/components/chip-section.js

@@ -1,179 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-import { d as defineCustomElement$5 } from './stencil-chip2.js';
-import { d as defineCustomElement$4 } from './udp-dynamic-container-with-menu2.js';
-import { d as defineCustomElement$3 } from './udp-pop-over2.js';
-import { d as defineCustomElement$2 } from './unity-typography2.js';
-
-const chipSectionCss = ".wrapper{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex-grow:1;width:100%;}.chipHolder{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex:1 1 auto;overflow:scroll}.chipHolder::-webkit-scrollbar{display:none}.viewChip{background-color:var(--primary-color);color:white;max-width:150px;transition:opacity 0.3s ease}.filterChipMenuIcon{background:grey;padding:8px;color:#3f51b5;}.additionalFilterChip{}.KPI{margin-left:auto;display:flex;gap:8px;color:grey;width:auto}.kpiValue{color:black;font-size:1.1em}.kpiItem{display:flex;justify-content:center;width:max-content}.kpiLabel{width:max-content;margin-right:8px;}.clickedChip{background-color:var(--primary-color);color:white;max-width:150px}";
-
-const ChipSection$1 = /*@__PURE__*/ proxyCustomElement(class ChipSection extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        // Props
-        this.filterChips = [];
-        this.viewChips = [];
-        this.menuItems = [];
-        this.additionalFilterChips = [];
-        this.hideKpiSection = false;
-        this.kpiValues = [];
-        this.maxKPIsDisplayed = 4;
-        this.anchorEl = null;
-        this.chipsReceived = false;
-        this.selectedFilterChip = null;
-        // Helper Functions
-        this.abbrNum = (number, decPlaces) => {
-            if (typeof number === 'string' && !isNaN(Number(number))) {
-                number = Number(number);
-            }
-            else if (typeof number !== 'number') {
-                throw new Error('The input must be a number or a string that can be converted to a number.');
-            }
-            if (typeof decPlaces !== 'number') {
-                return null;
-            }
-            decPlaces = Math.pow(10, decPlaces);
-            let abbrev = ['k', 'm', 'b', 't'];
-            for (let i = abbrev.length - 1; i >= 0; i--) {
-                let size = Math.pow(10, (i + 1) * 3);
-                if (size <= number) {
-                    number = Math.round((number * decPlaces) / size) / decPlaces;
-                    if (number === 1000 && i < abbrev.length - 1) {
-                        number = 1;
-                        i++;
-                    }
-                    number += abbrev[i];
-                    break;
-                }
-            }
-            return number;
-        };
-        this.isEmpty = (array) => Array.isArray(array) && array.length === 0;
-        this.abbreviateLabel = (label) => {
-            const maxLength = 10;
-            if (label.length > maxLength) {
-                const newLabel = label.slice(0, maxLength - 3) + '...';
-                return newLabel;
-            }
-            else {
-                return null;
-            }
-        };
-        this.handleFilterChipToggle = (chip) => {
-            this.selectedFilterChip = chip; // <-- changed here
-            if (typeof chip.onToggle === 'function') {
-                chip.onToggle();
-            }
-        };
-        this.handleFilterChipUntoggle = () => {
-            if (this.selectedFilterChip) {
-                // if the user wants extra functionality when the filter chip is untoggled, call the function
-                if (typeof this.selectedFilterChip.onUntoggle === 'function') {
-                    this.selectedFilterChip.onUntoggle();
-                }
-                this.selectedFilterChip = null; // <-- changed here
-            }
-        };
-    }
-    // Watchers and lifecycle methods
-    filterChipsChanged(newValue) {
-        if (!this.chipsReceived && newValue.length > 0) {
-            this.allFilterChips = newValue;
-            this.visibleFilterChips = newValue;
-        }
-    }
-    componentWillLoad() {
-        // Equivalent to useEffect
-        console.log("componentWillLoad in ChipSection", this.filterChips);
-        if (!this.chipsReceived && this.filterChips.length > 0) {
-            this.allFilterChips = this.filterChips;
-            this.visibleFilterChips = this.filterChips;
-        }
-    }
-    componentDidLoad() {
-        console.log("componentDidLoad in ChipSection");
-        this.chipSectionContainer = this.el.shadowRoot.querySelector('#chipSectionContainer');
-        this.viewChipsContainer = this.el.shadowRoot.querySelector('#viewChipsContainer');
-        this.filterChipsContainer = this.el.shadowRoot.querySelector('#filterChipsContainer');
-        this.additionalFilterChipsContainer = this.el.shadowRoot.querySelector('#additionalFilterChipsContainer');
-        this.kpiContainer = this.el.shadowRoot.querySelector('#kpiContainer');
-    }
-    handleClick(ev) {
-        console.log("Click event", ev);
-    }
-    render() {
-        console.log("Rendering ChipSection", this.visibleFilterChips);
-        return (h("div", { key: '7d57f632fed9180970cc16bdfe929cdc86efa359', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: 'f609b0423b57e0c270d87b6dae6e4cb22c30b869', class: "chipHolder" }, h("div", { key: '2c64b4b347c29c64dc65ed1b645277725eb60bd7', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'd0b70c1ce9e1444a55621829d8ff3dee45f32b39', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: 'ea307f7514c5d7ecccac9ae7e1073f52f0e94e39', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
-            if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
-                console.log('returning null...');
-                return null;
-            }
-            return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
-        })), h("div", { key: '43e94f749885352f3812ffb341830bc22ff3f8cd', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '616441fe4812ba9f86db0a14b542fe0a0434daa4', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "filterChips": ["filterChipsChanged"]
-    }; }
-    static get style() { return chipSectionCss; }
-}, [257, "chip-section", {
-        "filterChips": [16],
-        "viewChips": [16],
-        "menuItems": [16],
-        "additionalFilterChips": [16],
-        "hideKpiSection": [4, "hide-kpi-section"],
-        "kpiValues": [16],
-        "maxKPIsDisplayed": [2, "max-k-p-is-displayed"],
-        "handleDelete": [16],
-        "allFilterChips": [32],
-        "visibleFilterChips": [32],
-        "anchorEl": [32],
-        "chipsReceived": [32],
-        "selectedFilterChip": [32]
-    }, [[2, "click", "handleClick"]], {
-        "filterChips": ["filterChipsChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["chip-section", "stencil-chip", "udp-dynamic-container-with-menu", "udp-pop-over", "unity-typography"];
-    components.forEach(tagName => { switch (tagName) {
-        case "chip-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ChipSection$1);
-            }
-            break;
-        case "stencil-chip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "udp-dynamic-container-with-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "udp-pop-over":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "unity-typography":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ChipSection = ChipSection$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ChipSection, defineCustomElement };
-//# sourceMappingURL=chip-section.js.map
-
-//# sourceMappingURL=chip-section.js.map
+import{p as i,H as e,h as t,t as s}from"./index2.js";import{d as n}from"./stencil-chip2.js";import{d as o}from"./udp-dynamic-container-with-menu2.js";import{d as a}from"./udp-pop-over2.js";import{d as c}from"./unity-typography2.js";const h=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.filterChips=[],this.viewChips=[],this.menuItems=[],this.additionalFilterChips=[],this.hideKpiSection=!1,this.kpiValues=[],this.maxKPIsDisplayed=4,this.anchorEl=null,this.chipsReceived=!1,this.selectedFilterChip=null,this.abbrNum=(i,e)=>{if("string"!=typeof i||isNaN(Number(i))){if("number"!=typeof i)throw Error("The input must be a number or a string that can be converted to a number.")}else i=Number(i);if("number"!=typeof e)return null;e=Math.pow(10,e);let t=["k","m","b","t"];for(let s=3;s>=0;s--){let n=Math.pow(10,3*(s+1));if(n<=i){1e3==(i=Math.round(i*e/n)/e)&&s<3&&(i=1,s++),i+=t[s];break}}return i},this.isEmpty=i=>Array.isArray(i)&&0===i.length,this.abbreviateLabel=i=>i.length>10?i.slice(0,7)+"...":null,this.handleFilterChipToggle=i=>{this.selectedFilterChip=i,"function"==typeof i.onToggle&&i.onToggle()},this.handleFilterChipUntoggle=()=>{this.selectedFilterChip&&("function"==typeof this.selectedFilterChip.onUntoggle&&this.selectedFilterChip.onUntoggle(),this.selectedFilterChip=null)}}filterChipsChanged(i){!this.chipsReceived&&i.length>0&&(this.allFilterChips=i,this.visibleFilterChips=i)}componentWillLoad(){console.log("componentWillLoad in ChipSection",this.filterChips),!this.chipsReceived&&this.filterChips.length>0&&(this.allFilterChips=this.filterChips,this.visibleFilterChips=this.filterChips)}componentDidLoad(){console.log("componentDidLoad in ChipSection"),this.chipSectionContainer=this.el.shadowRoot.querySelector("#chipSectionContainer"),this.viewChipsContainer=this.el.shadowRoot.querySelector("#viewChipsContainer"),this.filterChipsContainer=this.el.shadowRoot.querySelector("#filterChipsContainer"),this.additionalFilterChipsContainer=this.el.shadowRoot.querySelector("#additionalFilterChipsContainer"),this.kpiContainer=this.el.shadowRoot.querySelector("#kpiContainer")}handleClick(i){console.log("Click event",i)}render(){return console.log("Rendering ChipSection",this.visibleFilterChips),t("div",{key:"7d57f632fed9180970cc16bdfe929cdc86efa359",class:"wrapper",id:"chipSectionContainer"},t("div",{key:"f609b0423b57e0c270d87b6dae6e4cb22c30b869",class:"chipHolder"},t("div",{key:"2c64b4b347c29c64dc65ed1b645277725eb60bd7",id:"viewChipsContainer"},this.viewChips.map(((i,e)=>t("stencil-chip",{onOnDelete:()=>this.handleDelete("view",e),text:i.label,class:"viewChip"})))),t("udp-dynamic-container-with-menu",{key:"d0b70c1ce9e1444a55621829d8ff3dee45f32b39",id:"filterChipsContainer",menuItems:this.menuItems},this.selectedFilterChip&&t("stencil-chip",{key:"ea307f7514c5d7ecccac9ae7e1073f52f0e94e39",onOnDelete:this.handleFilterChipUntoggle,text:this.selectedFilterChip.label,class:"viewChip"}),console.log("filtering here...",this.filterChips),this.filterChips.map((i=>this.selectedFilterChip&&i.id===this.selectedFilterChip.id?(console.log("returning null..."),null):t("stencil-chip",{text:`${i.label} ${i.value}`,class:"filterChip",onClick:()=>this.handleFilterChipToggle(i)})))),t("div",{key:"43e94f749885352f3812ffb341830bc22ff3f8cd",id:"additionalFilterChipsContainer"},this.additionalFilterChips.map(((i,e)=>t("stencil-chip",{onOnDelete:()=>this.handleDelete("additionalFilter",e),text:i.label,class:"additionalFilterChip"})))),!this.hideKpiSection&&t("div",{key:"616441fe4812ba9f86db0a14b542fe0a0434daa4",class:"KPI",id:"kpiContainer"},this.kpiValues.slice(0,this.maxKPIsDisplayed).map((i=>t("div",{class:"kpiItem"},t("span",{class:"kpiLabel"},this.abbreviateLabel(i.label)||i.label),t("span",{class:"kpiValue"},this.abbrNum(i.value,1))))))))}get el(){return this}static get watchers(){return{filterChips:[{filterChipsChanged:0}]}}static get style(){return".wrapper{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex-grow:1;width:100%;}.chipHolder{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex:1 1 auto;overflow:scroll}.chipHolder::-webkit-scrollbar{display:none}.viewChip{background-color:var(--primary-color);color:white;max-width:150px;transition:opacity 0.3s ease}.filterChipMenuIcon{background:grey;padding:8px;color:#3f51b5;}.additionalFilterChip{}.KPI{margin-left:auto;display:flex;gap:8px;color:grey;width:auto}.kpiValue{color:black;font-size:1.1em}.kpiItem{display:flex;justify-content:center;width:max-content}.kpiLabel{width:max-content;margin-right:8px;}.clickedChip{background-color:var(--primary-color);color:white;max-width:150px}"}},[1,"chip-section",{filterChips:[16],viewChips:[16],menuItems:[16],additionalFilterChips:[16],hideKpiSection:[4,"hide-kpi-section"],kpiValues:[16],maxKPIsDisplayed:[2,"max-k-p-is-displayed"],handleDelete:[16],allFilterChips:[32],visibleFilterChips:[32],anchorEl:[32],chipsReceived:[32],selectedFilterChip:[32]},[[2,"click","handleClick"]],{filterChips:[{filterChipsChanged:0}]}]),l=h,r=function(){"undefined"!=typeof customElements&&["chip-section","stencil-chip","udp-dynamic-container-with-menu","udp-pop-over","unity-typography"].forEach((i=>{switch(i){case"chip-section":customElements.get(s(i))||customElements.define(s(i),h);break;case"stencil-chip":customElements.get(s(i))||n();break;case"udp-dynamic-container-with-menu":customElements.get(s(i))||o();break;case"udp-pop-over":customElements.get(s(i))||a();break;case"unity-typography":customElements.get(s(i))||c()}}))};export{l as ChipSection,r as defineCustomElement}

package/dist/components/client-side-grid.js

@@ -1,9 +1 @@
-import { C as ClientSideGrid$1, d as defineCustomElement$1 } from './client-side-grid2.js';
-
-const ClientSideGrid = ClientSideGrid$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ClientSideGrid, defineCustomElement };
-//# sourceMappingURL=client-side-grid.js.map
-
-//# sourceMappingURL=client-side-grid.js.map
+import{C as s,d as i}from"./client-side-grid2.js";const o=s,r=i;export{o as ClientSideGrid,r as defineCustomElement}