udp-stencil-component-library 1.0.0

package/dist/components/p-BEwTqpWE.js

@@ -0,0 +1,118 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$7 } from './p-TrvRIo8e.js';
+import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$5 } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$4 } from './p-DeS7YSzc.js';
+import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const chartContainerCss = ".chart-container-data-container{display:flex}.chart-container-data-container-top{flex-direction:column}.chart-container-kpi-container{display:flex;flex-direction:column;justify-content:flex-start;position:absolute;gap:30px;padding-top:20px;padding-left:10px}.chart-container-kpi-container-top{flex-direction:row;justify-content:space-evenly;position:relative}.chart-container-spacer{flex-grow:1}";
+
+const sizes = {
+    small: { height: 250, width: 250, cardWidth: 275 },
+    medium: { height: 350, width: 350, cardWidth: 375 },
+    large: { height: 500, width: 500, cardWidth: 525 },
+};
+const ChartContainer = /*@__PURE__*/ proxyCustomElement(class ChartContainer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.size = 'medium';
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        this.hideAdornment = false;
+    }
+    componentWillLoad() {
+        if (!this.chartId) {
+            console.error('chartId prop is required on component chart-container');
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        if (!this.chartId)
+            return null;
+        let cardWidth = (_a = this.customCardWidth) !== null && _a !== void 0 ? _a : sizes[this.size].cardWidth;
+        let chartWidth = (_b = this.customWidth) !== null && _b !== void 0 ? _b : sizes[this.size].width;
+        let chartHeight = (_c = this.customHeight) !== null && _c !== void 0 ? _c : sizes[this.size].height;
+        if (this.adjustChartWidthForKpis && ((_d = this.kpis) === null || _d === void 0 ? void 0 : _d.length) && this.kpisPosition === 'left') {
+            chartWidth -= 50;
+            chartHeight -= 30;
+        }
+        let dataContainerPosition = "";
+        let kpiContainerPosition = "";
+        if (this.kpisPosition === 'top') {
+            dataContainerPosition = "chart-container-data-container-top";
+            kpiContainerPosition = "chart-container-kpi-container-top";
+        }
+        return (h("udp-ambient-card", { width: `${cardWidth}px`, style: this.customCardStyle, hideAdornment: this.hideAdornment }, h("div", { class: "header" }, h("unity-typography", { variant: "h3" }, this.title), h("unity-typography", null, this.subheader)), h("div", { class: `chart-container-data-container ${dataContainerPosition}` }, ((_e = this.kpis) === null || _e === void 0 ? void 0 : _e.length) ? (h("div", { class: `chart-container-kpi-container ${kpiContainerPosition}` }, this.kpis.map(kpi => (h("chart-kpi", Object.assign({}, kpi)))))) : (''), this.adjustChartWidthForKpis ? h("div", { class: "chart-container-spacer" }) : '', h("div", { id: this.chartId, style: { height: `${chartHeight}px`, width: this.kpisPosition === 'top' ? '100%' : `${chartWidth}px`, float: 'right' } }))));
+    }
+    get el() { return this; }
+    static get style() { return chartContainerCss; }
+}, [0, "chart-container", {
+        "title": [1],
+        "subheader": [1],
+        "size": [1],
+        "customWidth": [2, "custom-width"],
+        "customHeight": [2, "custom-height"],
+        "customCardWidth": [2, "custom-card-width"],
+        "customCardStyle": [16, "custom-card-style"],
+        "chartId": [1, "chart-id"],
+        "kpis": [16],
+        "kpisPosition": [1, "kpis-position"],
+        "adjustChartWidthForKpis": [4, "adjust-chart-width-for-kpis"],
+        "hideAdornment": [4, "hide-adornment"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["chart-container", "chart-kpi", "stencil-icon-button", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "chart-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ChartContainer);
+            }
+            break;
+        case "chart-kpi":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stencil-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-ambient-card":
+            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 { ChartContainer as C, defineCustomElement as d };
+//# sourceMappingURL=p-BEwTqpWE.js.map
+
+//# sourceMappingURL=p-BEwTqpWE.js.map

package/dist/components/p-BEwTqpWE.js.map

@@ -0,0 +1 @@
+{"file":"p-BEwTqpWE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/charts/chart-container/chart-container.css?tag=chart-container","src/components/my-component/UI/charts/chart-container/chart-container.tsx"],"sourcesContent":[".chart-container-data-container{\n    display: flex;\n}\n\n.chart-container-data-container-top{\n    flex-direction: column;\n}\n\n.chart-container-kpi-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    position: absolute;\n    gap: 30px;\n    padding-top: 20px;\n    padding-left: 10px;\n}\n\n.chart-container-kpi-container-top {\n    flex-direction: row;\n    justify-content: space-evenly;\n    position: relative;\n}\n\n.chart-container-spacer{\n    flex-grow: 1;\n}\n","import { h, Component, Prop, Element } from '@stencil/core';\n\nconst sizes = {\n  small: { height: 250, width: 250, cardWidth: 275 },\n  medium: { height: 350, width: 350, cardWidth: 375 },\n  large: { height: 500, width: 500, cardWidth: 525 },\n};\n@Component({\n  tag: 'chart-container',\n  styleUrl: 'chart-container.css',\n})\nexport class ChartContainer {\n  @Element() el: HTMLElement;\n\n  @Prop() title: string;\n  @Prop() subheader: string;\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() customWidth?: number;\n  @Prop() customHeight?: number;\n  @Prop() customCardWidth?: number;\n  @Prop() customCardStyle?: { [key: string]: string } = {};\n  @Prop() chartId: string;\n  @Prop() kpis: { label: string; value: string }[];\n  @Prop() kpisPosition: 'left' | 'top' = 'left';\n  @Prop() adjustChartWidthForKpis: boolean;\n  @Prop() hideAdornment: boolean = false;\n\n  componentWillLoad() {\n    if (!this.chartId) {\n      console.error('chartId prop is required on component chart-container');\n    }\n  }\n\n  render() {\n    if (!this.chartId) return null;\n    let cardWidth = this.customCardWidth ?? sizes[this.size].cardWidth;\n    let chartWidth = this.customWidth ?? sizes[this.size].width;\n    let chartHeight = this.customHeight ?? sizes[this.size].height;\n    if (this.adjustChartWidthForKpis && this.kpis?.length && this.kpisPosition === 'left') {\n      chartWidth -= 50;\n      chartHeight -= 30;\n    }\n\n    let dataContainerPosition = \"\";\n    let kpiContainerPosition = \"\";\n    if(this.kpisPosition === 'top'){\n      dataContainerPosition = \"chart-container-data-container-top\";\n      kpiContainerPosition = \"chart-container-kpi-container-top\";\n    }\n\n    return (\n      <udp-ambient-card width={`${cardWidth}px`} style={this.customCardStyle} hideAdornment={this.hideAdornment}>\n        <div class=\"header\">\n          <unity-typography variant=\"h3\">{this.title}</unity-typography>\n          <unity-typography>{this.subheader}</unity-typography>\n        </div>\n        <div class={`chart-container-data-container ${dataContainerPosition}`}>\n          {this.kpis?.length ? (\n            <div class={`chart-container-kpi-container ${kpiContainerPosition}`}>\n              {this.kpis.map(kpi => (\n                <chart-kpi {...kpi} />\n              ))}\n            </div>\n          ) : (\n            ''\n          )}\n          {this.adjustChartWidthForKpis ? <div class=\"chart-container-spacer\"/> : ''} \n            <div id={this.chartId} style={{ height: `${chartHeight}px`, width: this.kpisPosition === 'top' ? '100%' : `${chartWidth}px`, float: 'right' }}></div>\n          </div>\n      </udp-ambient-card>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BGjVmQGN.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DPon6DDX.js';
+
+const udpAdornmentCss = ":host{display:block}";
+
+const UdpAdornment = /*@__PURE__*/ proxyCustomElement(class UdpAdornment extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    // Method to determine the color based on status
+    getColor() {
+        switch (this.status) {
+            case 'success':
+                return 'var(--success-color-main)';
+            case 'warning':
+                return 'var(--warning-color-main)';
+            case 'error':
+                return 'var(--error-color-main)';
+            case 'info':
+                return 'var(--info-color-main)';
+            case 'disabled':
+                return 'var(--disabled-color-main)'; // Assuming this is the correct variable for disabled
+            default:
+                return 'transparent';
+        }
+    }
+    render() {
+        const style = { width: '4px', height: '100%', backgroundColor: this.getColor() };
+        return h(Host, { key: 'df8d013feeca0855f0b7fed28a42d27f7d8477c4', style: style });
+    }
+    static get style() { return udpAdornmentCss; }
+}, [1, "udp-adornment", {
+        "status": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-adornment"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpAdornment);
+            }
+            break;
+    } });
+}
+
+export { UdpAdornment as U, defineCustomElement as d };
+//# sourceMappingURL=p-BGjVmQGN.js.map
+
+//# sourceMappingURL=p-BGjVmQGN.js.map

package/dist/components/p-BGjVmQGN.js.map

@@ -0,0 +1 @@
+{"file":"p-BGjVmQGN.js","mappings":";;AAAA,MAAM,eAAe,GAAG,sBAAsB;;MCOjC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;IAKf,QAAQ,GAAA;AACd,QAAA,QAAQ,IAAI,CAAC,MAAM;AACjB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,2BAA2B;AACpC,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,2BAA2B;AACpC,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,yBAAyB;AAClC,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,wBAAwB;AACjC,YAAA,KAAK,UAAU;gBACb,OAAO,4BAA4B,CAAC;AACtC,YAAA;AACE,gBAAA,OAAO,aAAa;;;IAI1B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE;AAEhF,QAAA,OAAO,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,KAAK,GAAS;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/adornment/udp-adornment/udp-adornment.css?tag=udp-adornment&encapsulation=shadow","src/components/my-component/UI/data-display/adornment/udp-adornment/udp-adornment.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'udp-adornment',\n  styleUrl: 'udp-adornment.css',\n  shadow: true,\n})\nexport class UdpAdornment {\n  // Prop to accept the status\n  @Prop() status: 'success' | 'warning' | 'error' | 'info' | 'disabled';\n\n  // Method to determine the color based on status\n  private getColor(): string {\n    switch (this.status) {\n      case 'success':\n        return 'var(--success-color-main)';\n      case 'warning':\n        return 'var(--warning-color-main)';\n      case 'error':\n        return 'var(--error-color-main)';\n      case 'info':\n        return 'var(--info-color-main)';\n      case 'disabled':\n        return 'var(--disabled-color-main)'; // Assuming this is the correct variable for disabled\n      default:\n        return 'transparent';\n    }\n  }\n\n  render() {\n    const style = { width: '4px', height: '100%', backgroundColor: this.getColor() };\n\n    return <Host style={style}></Host>;\n  }\n}\n"],"version":3}

package/dist/components/p-BIglXKmh.js

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$5 } from './p-DpLtIIwx.js';
+import { d as defineCustomElement$4 } from './p-BuRv3dp5.js';
+import { d as defineCustomElement$3 } from './p-Dx-EPCPD.js';
+import { d as defineCustomElement$2 } from './p-DaQoPi4y.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const editViewFormDialogCss = ".info-columns{display:flex}.column{width:100px}.toggle-options{display:flex;gap:16px;align-items:center;margin-bottom:16px}";
+
+const EditViewFormDialog = /*@__PURE__*/ proxyCustomElement(class EditViewFormDialog extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Initialize name with the value of currentName
+        this.name = '';
+        // Change isPrivate to be a number, defaulting to 2 (false/not private)
+        this.isPrivate = 2;
+        this.isDefault = false;
+        this.fetchedCurrentView = false;
+        this.handleGetExistingView = () => {
+            this.isPrivate = this.currentGridViewVisibilityTypeId;
+            this.isDefault = this.currentIsDefault;
+            console.log("isPrivate:", this.isPrivate, "isDefault:", this.isDefault);
+            this.fetchedCurrentView = true;
+        };
+        this.handleNameChange = (event) => {
+            this.currentName = event.target.value;
+            this.name = event.target.value;
+        };
+        this.handlePrivateChange = () => {
+            this.isPrivate = this.isPrivate === 1 ? 2 : 1;
+            this.currentGridViewVisibilityTypeId = this.currentGridViewVisibilityTypeId === 1 ? 2 : 1;
+            console.log(this.isPrivate);
+        };
+        this.handleDefaultChange = () => {
+            this.isDefault = !this.isDefault;
+            this.currentIsDefault = !this.currentIsDefault;
+            console.log(this.isDefault);
+        };
+        this.handleSubmit = () => {
+            this.handleFormSubmit(this.gridId, this.name, this.isPrivate, this.isDefault);
+        };
+    }
+    componentDidUpdate() {
+        if (this.open) {
+            this.handleGetExistingView();
+        }
+    }
+    componentWillRender() {
+        // console.log("rerendered name");
+        this.name = this.currentName;
+        this.gridId = this.currentGridId;
+    }
+    resetFetchedCurrentView() {
+        this.fetchedCurrentView = false;
+    }
+    render() {
+        return (h("fluent-dialog", { key: '7ae42e6f69f060f569716933993bc507fc41d295', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: 'f9bec70ccd900651966aae660820ef5adaf8c552', class: "edit-form" }, h("text-field", { key: 'e6e422e7df335078e6d3793d428fc1881c449ec3', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
+            h("div", { key: 'ef3e51b431a55bb7bebd2aa643ed5dafdd5a7134', class: "toggle-options" }, h("div", { key: '73ab76f4a0834e491871dbe67cad0ed9331660a3' }, h("stencil-toggle", { key: '9a90a59a1e07e2ad44f102098f6d6f73a4155c85', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: 'e417953e542fe97a3d421328d262432ec9dceff5' }, h("stencil-toggle", { key: '395f964c14274c897ad553fafaf56b5664b26796', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+    }
+    get el() { return this; }
+    static get style() { return editViewFormDialogCss; }
+}, [1, "edit-view-form-dialog", {
+        "open": [4],
+        "title": [1],
+        "handleClose": [16, "handle-close"],
+        "tenant": [1],
+        "application": [1],
+        "entity": [1],
+        "user": [8],
+        "refetchViews": [16, "refetch-views"],
+        "gApi": [8, "g-api"],
+        "gcApi": [8, "gc-api"],
+        "gridId": [8, "grid-id"],
+        "domain": [8],
+        "apiCatalogId": [8, "api-catalog-id"],
+        "closeDialog": [8, "close-dialog"],
+        "currentGridId": [1, "current-grid-id"],
+        "currentName": [1, "current-name"],
+        "currentGridViewVisibilityTypeId": [2, "current-grid-view-visibility-type-id"],
+        "currentIsDefault": [4, "current-is-default"],
+        "handleFormSubmit": [16, "handle-form-submit"],
+        "name": [32],
+        "isPrivate": [32],
+        "isDefault": [32],
+        "fetchedCurrentView": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["edit-view-form-dialog", "custom-button", "fluent-dialog", "stencil-toggle", "text-field", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "edit-view-form-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EditViewFormDialog);
+            }
+            break;
+        case "custom-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "fluent-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stencil-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EditViewFormDialog as E, defineCustomElement as d };
+//# sourceMappingURL=p-BIglXKmh.js.map
+
+//# sourceMappingURL=p-BIglXKmh.js.map

package/dist/components/p-BIglXKmh.js.map

@@ -0,0 +1 @@
+{"file":"p-BIglXKmh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/edit-view-form/edit-view-form-dialog.css?tag=edit-view-form-dialog&encapsulation=shadow","src/components/my-component/UI/forms/edit-view-form/edit-view-form.tsx"],"sourcesContent":[".info-columns{\n    display: flex;\n}\n\n.column{\n    width: 100px\n}\n\n.toggle-options {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 16px;\n}","import { Component, Prop, h, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'edit-view-form-dialog',\n  styleUrl: 'edit-view-form-dialog.css',\n  shadow: true,\n})\nexport class EditViewFormDialog {\n  @Element() el: HTMLElement;\n  @Prop() open: boolean;\n  @Prop() title: string;\n  @Prop() handleClose: Function;\n  @Prop() tenant: string;\n  @Prop() application: string;\n  @Prop() entity: string;\n  @Prop() user: any;\n  @Prop() refetchViews: () => void;\n  @Prop() gApi: any;\n  @Prop() gcApi: any;\n  @Prop() gridId: any;\n  @Prop() domain: any;\n  @Prop() apiCatalogId: any;\n  @Prop() closeDialog: any;\n  @Prop() currentGridId: string;\n  @Prop() currentName: string;\n  @Prop() currentGridViewVisibilityTypeId: number;\n  @Prop() currentIsDefault: boolean;\n\n  // Adjust the handleFormSubmit to accept a number for isPrivate\n  @Prop() handleFormSubmit: (gridId: any, name: string, isPrivate: number, isDefault: boolean) => void;\n\n  // Initialize name with the value of currentName\n  @State() name: string = '';\n  // Change isPrivate to be a number, defaulting to 2 (false/not private)\n  @State() isPrivate: number = 2;\n  @State() isDefault: boolean = false;\n  @State() fetchedCurrentView: boolean = false;\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.handleGetExistingView();\n    }\n  }\n\n  componentWillRender() {\n    // console.log(\"rerendered name\");\n    this.name = this.currentName;\n    this.gridId = this.currentGridId;\n  }\n\n  handleGetExistingView = () => {\n    this.isPrivate = this.currentGridViewVisibilityTypeId;\n    this.isDefault = this.currentIsDefault;\n    console.log(\"isPrivate:\", this.isPrivate, \"isDefault:\", this.isDefault);\n    this.fetchedCurrentView = true;\n  };\n\n  resetFetchedCurrentView() {\n    this.fetchedCurrentView = false;\n  }\n\n  handleNameChange = (event) => {\n    this.currentName = event.target.value;\n    this.name = event.target.value;\n  };\n\n  handlePrivateChange = () => {\n    this.isPrivate = this.isPrivate === 1 ? 2 : 1;\n    this.currentGridViewVisibilityTypeId = this.currentGridViewVisibilityTypeId === 1 ? 2 : 1;\n    console.log(this.isPrivate);\n  };\n\n  handleDefaultChange = () => {\n    this.isDefault = !this.isDefault;\n    this.currentIsDefault = !this.currentIsDefault;\n    console.log(this.isDefault);\n  };\n\n  handleSubmit = () => {\n    this.handleFormSubmit(this.gridId, this.name, this.isPrivate, this.isDefault );\n  };\n\n  render() {\n    return (\n      <fluent-dialog\n        open={this.open}\n        actionOne={() => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }}\n        actionTwo={() => { this.closeDialog(); this.resetFetchedCurrentView(); }}\n        handleClose={this.handleClose}\n        labelOne=\"Save Update\"\n        labelTwo=\"Cancel\"\n        title={this.title}\n        disableOne={!this.name}\n      >\n        <form class=\"edit-form\">\n          <text-field\n            label=\"View Name\"\n            value={this.name}\n            onInput={(event: any) => this.handleNameChange(event)}\n          ></text-field>\n          { this.fetchedCurrentView &&\n            <div class=\"toggle-options\" >\n              <div><stencil-toggle label=\"Private\" checked={this.isPrivate === 1} onToggledChange={this.handlePrivateChange}></stencil-toggle> </div>\n              <div><stencil-toggle label=\"Default\" checked={this.isDefault} onToggledChange={this.handleDefaultChange} style={{ marginTop: '10px' }}></stencil-toggle></div>\n            </div>\n          }\n        </form>\n      </fluent-dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BJAj5sbP.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$2 } from './p-D_p1JpLt.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpAvatarCss = ".avatar{width:35px;height:35px;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold}.avatar.circular{border-radius:50%}.avatar.rounded{border-radius:4px}.avatar.square{border-radius:0}.avatar.color-primary{background-color:var(--primary-color)}.avatar.color-secondary{background-color:var(--secondary-color)}.avatar.color-success{background-color:var(--success-color-main)}.avatar.color-warning{background-color:var(--warning-color-main)}.avatar.color-error{background-color:var(--error-color-main)}.avatar.color-info{background-color:var(--info-color-main)}.avatar.color-note{background-color:var(--note-color-main)}";
+
+const UdpAvatar = /*@__PURE__*/ proxyCustomElement(class UdpAvatar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.variant = 'circular';
+        this.colors = [
+            '#F44336',
+            '#E91E63',
+            '#9C27B0',
+            '#673AB7',
+            '#3F51B5',
+            '#2196F3',
+            '#03A9F4',
+            '#00BCD4',
+            '#009688',
+            '#4CAF50',
+            '#8BC34A',
+            '#CDDC39',
+            '#FFC107',
+            '#FF9800',
+            '#FF5722',
+            '#795548',
+        ];
+    }
+    getInitial() {
+        return this.username ? this.username[0].toUpperCase() : '?';
+    }
+    getColorForUsername() {
+        const charCode = this.username ? this.username.charCodeAt(0) : 0;
+        return this.colors[charCode % this.colors.length];
+    }
+    render() {
+        const systemColors = ['primary', 'secondary', 'info', 'error', 'success', 'warning', 'note'];
+        const isSystemColor = systemColors.includes(this.color);
+        const style = {};
+        const classes = ['avatar', this.variant];
+        if (isSystemColor) {
+            classes.push(`color-${this.color}`);
+        }
+        else if (this.color) {
+            style['background-color'] = this.color;
+        }
+        else {
+            style['background-color'] = this.getColorForUsername();
+        }
+        return (h("div", { key: '433199f4dbd1183f897d482eb4c1fb139c8bfe05', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
+    }
+    static get style() { return udpAvatarCss; }
+}, [1, "udp-avatar", {
+        "username": [1],
+        "iconName": [1, "icon-name"],
+        "variant": [1],
+        "color": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-avatar", "udp-icon", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpAvatar);
+            }
+            break;
+        case "udp-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpAvatar as U, defineCustomElement as d };
+//# sourceMappingURL=p-BJAj5sbP.js.map
+
+//# sourceMappingURL=p-BJAj5sbP.js.map

package/dist/components/p-BJAj5sbP.js.map

@@ -0,0 +1 @@
+{"file":"p-BJAj5sbP.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0oBAA0oB;;MCOlpB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAsC,UAAU;QAGvD,IAAA,CAAA,MAAM,GAAG;YACf,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;AAgCF;IA9BC,UAAU,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG;;IAGrD,mBAAmB,GAAA;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;AAChE,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;;IAGnD,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC;QAC5F,MAAM,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QAEvD,MAAM,KAAK,GAAG,EAAE;QAChB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;QAExC,IAAI,aAAa,EAAE;YACjB,OAAO,CAAC,IAAI,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAE,CAAA,CAAC;;AAC9B,aAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACrB,YAAA,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,KAAK;;aACjC;YACL,KAAK,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE;;AAGxD,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EACxC,EAAA,IAAI,CAAC,QAAQ,GAAG,gBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAa,GAAG,CAAkB,CAAA,kBAAA,EAAA,EAAA,OAAO,EAAC,kBAAkB,EAAA,OAAG,IAAI,CAAC,UAAU,EAAE,CAAoB,CACnK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/udp-avatar/udp-avatar.css?tag=udp-avatar&encapsulation=shadow","src/components/my-component/UI/data-display/udp-avatar/udp-avatar.tsx"],"sourcesContent":[".avatar {\n    width: 35px;\n    height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-weight: bold;\n  }\n\n  .avatar.circular {\n    border-radius: 50%;\n  }\n  \n  .avatar.rounded {\n    border-radius: 4px;\n  }\n  \n  .avatar.square {\n    border-radius: 0;\n  }\n  \n  .avatar.color-primary {\n    background-color: var(--primary-color);\n  }\n  \n  .avatar.color-secondary {\n    background-color: var(--secondary-color);\n  }\n  \n  .avatar.color-success {\n    background-color: var(--success-color-main);\n  }\n  \n  .avatar.color-warning {\n    background-color: var(--warning-color-main);\n  }\n  \n  .avatar.color-error {\n    background-color: var(--error-color-main);\n  }\n  \n  .avatar.color-info {\n    background-color: var(--info-color-main);\n  }\n  \n  .avatar.color-note {\n    background-color: var(--note-color-main);\n  }\n  ","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'udp-avatar',\n  styleUrl: 'udp-avatar.css',\n  shadow: true,\n})\nexport class UdpAvatar {\n  @Prop() username: string;\n  @Prop() iconName: string;\n  @Prop() variant: 'circular' | 'rounded' | 'square' = 'circular';\n  @Prop() color: string;\n\n  private colors = [\n    '#F44336',\n    '#E91E63',\n    '#9C27B0',\n    '#673AB7',\n    '#3F51B5',\n    '#2196F3',\n    '#03A9F4',\n    '#00BCD4',\n    '#009688',\n    '#4CAF50',\n    '#8BC34A',\n    '#CDDC39',\n    '#FFC107',\n    '#FF9800',\n    '#FF5722',\n    '#795548',\n  ];\n\n  getInitial() {\n    return this.username ? this.username[0].toUpperCase() : '?';\n  }\n\n  private getColorForUsername() {\n    const charCode = this.username ? this.username.charCodeAt(0) : 0;\n    return this.colors[charCode % this.colors.length];\n  }\n\n  render() {\n    const systemColors = ['primary', 'secondary', 'info', 'error', 'success', 'warning', 'note'];\n    const isSystemColor = systemColors.includes(this.color);\n\n    const style = {};\n    const classes = ['avatar', this.variant];\n\n    if (isSystemColor) {\n      classes.push(`color-${this.color}`);\n    } else if (this.color) {\n      style['background-color'] = this.color;\n    } else {\n      style['background-color'] = this.getColorForUsername();\n    }\n\n    return (\n      <div class={classes.join(' ')} style={style}>\n        {this.iconName ? <udp-icon iconName={this.iconName} darkIcon={false}></udp-icon> : <unity-typography variant=\"data-display-two\"> {this.getInitial()}</unity-typography>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BJerffMg.js

@@ -0,0 +1,216 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import * as am5 from '@amcharts/amcharts5/index';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import { d as defineCustomElement$8 } from './p-BEwTqpWE.js';
+import { d as defineCustomElement$7 } from './p-TrvRIo8e.js';
+import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$5 } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$4 } from './p-DeS7YSzc.js';
+import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpDonutChartCss = "";
+
+const UdpDonutChart = /*@__PURE__*/ proxyCustomElement(class UdpDonutChart extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.data = undefined;
+        this.valueField = '';
+        this.labelField = '';
+        this.title = undefined;
+        this.subheader = undefined;
+        this.hideLegend = false;
+        this.size = 'medium';
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        this.kpis = undefined;
+        this.hideAdornment = false;
+        this.chartId = 'udp-donut-chart';
+    }
+    async renderChart() {
+        // sometimes the element cannot be found right away so loop umtil it loads
+        if (this.el.shadowRoot.getElementById(this.chartId) === null) {
+            await setTimeout(this.renderChart, 50);
+        }
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+        if (!this.valueField)
+            return;
+        this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));
+        // Set themes
+        // https://www.amcharts.com/docs/v5/concepts/themes/
+        this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);
+        // Create chart
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+        let chart = this.chartRoot.container.children.push(am5percent.PieChart.new(this.chartRoot, {
+            layout: this.chartRoot.verticalLayout,
+            innerRadius: am5.percent(65),
+        }));
+        // Create series
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
+        let series = chart.series.push(am5percent.PieSeries.new(this.chartRoot, {
+            valueField: this.valueField,
+            categoryField: this.labelField,
+            alignLabels: false,
+        }));
+        series.labels.template.setAll({
+            textType: 'circular',
+            centerX: 0,
+            centerY: 0,
+            text: `{${this.valueField}}`,
+            tooltipText: `{${this.labelField}}: {${this.valueField}}`,
+            oversizedBehavior: 'truncate',
+            maxWidth: 100,
+            maxHeight: 100,
+            ellipsis: '...',
+        });
+        series.labels.template.adapters.add('y', function (y, target) {
+            let dataItem = target.dataItem;
+            if (dataItem) {
+                //@ts-ignore
+                let tick = dataItem.get('tick');
+                if (tick) {
+                    //@ts-ignore
+                    if (dataItem.get('valuePercentTotal') < 5) {
+                        target.set('forceHidden', true);
+                        //@ts-ignore
+                        tick.set('forceHidden', true);
+                    }
+                    else {
+                        target.set('forceHidden', false);
+                        //@ts-ignore
+                        tick.set('forceHidden', false);
+                    }
+                }
+                return y;
+            }
+        });
+        // Set data
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
+        series.data.setAll(this.data);
+        // Create legend
+        // https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
+        let legend = this.size !== 'small' && !this.hideLegend
+            ? chart.children.push(am5.Legend.new(this.chartRoot, {
+                centerX: am5.percent(50),
+                x: am5.percent(50),
+                marginTop: 15,
+                marginBottom: 15,
+            }))
+            : null;
+        legend === null || legend === void 0 ? void 0 : legend.data.setAll(series.dataItems);
+        if (legend && this.size !== 'small') {
+            // Set maxWidth for labels within the legend items
+            legend.labels.template.setAll({
+                maxWidth: this.chartRoot.width() * 0.24,
+                oversizedBehavior: 'truncate', // Ensures text wraps if it exceeds maxWidth
+            });
+        }
+        // Play initial series animation
+        // https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+        series.appear(1000, 100);
+    }
+    componentDidLoad() {
+        this.renderChart();
+    }
+    disconnectedCallback() {
+        // Clean up chart instance on component removal
+        if (this.chartRoot) {
+            this.chartRoot.dispose();
+        }
+    }
+    render() {
+        return (h("chart-container", { key: '5c5a6d1ff4b8c87e3239045ab15c0e652e43d781', kpis: this.kpis, chartId: this.chartId, title: this.title, subheader: this.subheader, size: this.size, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment }));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "valueField": ["renderChart"],
+        "labelField": ["renderChart"],
+        "hideLegend": ["renderChart"],
+        "data": ["renderChart"]
+    }; }
+    static get style() { return udpDonutChartCss; }
+}, [1, "udp-donut-chart", {
+        "data": [16],
+        "valueField": [1, "value-field"],
+        "labelField": [1, "label-field"],
+        "title": [1],
+        "subheader": [1],
+        "hideLegend": [4, "hide-legend"],
+        "size": [1],
+        "customWidth": [2, "custom-width"],
+        "customHeight": [2, "custom-height"],
+        "customCardWidth": [2, "custom-card-width"],
+        "customCardStyle": [16, "custom-card-style"],
+        "kpisPosition": [1, "kpis-position"],
+        "kpis": [16],
+        "hideAdornment": [4, "hide-adornment"]
+    }, undefined, {
+        "valueField": ["renderChart"],
+        "labelField": ["renderChart"],
+        "hideLegend": ["renderChart"],
+        "data": ["renderChart"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-donut-chart", "chart-container", "chart-kpi", "stencil-icon-button", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-donut-chart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpDonutChart);
+            }
+            break;
+        case "chart-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "chart-kpi":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stencil-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-ambient-card":
+            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 { UdpDonutChart as U, defineCustomElement as d };
+//# sourceMappingURL=p-BJerffMg.js.map
+
+//# sourceMappingURL=p-BJerffMg.js.map