udp-stencil-component-library 25.18.1-beta.7 → 25.18.1-beta.9

package/dist/cjs/stencil-chip.cjs.entry.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+var Close16 = require('@carbon/icons/es/close/16');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Close16__default = /*#__PURE__*/_interopDefault(Close16);
+
+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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.onDelete = index.createEvent(this, "onDelete");
+        this.onToggle = index.createEvent(this, "onToggle");
+        this.udpChipClicked = index.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__default.default; // Fallback to Add16 if no icon is provided
+        return (index.h("div", { key: 'd0c0538296aac1756d7f2642ac43ae457566566e', class: `chip${!this.clickable ? ' chip--unclickable' : ''}`, style: chipStyle, onClick: this.clickable ? this.handleClick : undefined }, this.leftIcon && (index.h("span", { key: 'dfaa69832291dd2f01d42662209fe20196e3efcf', class: "left-icon", style: leftIconStyle }, index.h("svg", Object.assign({ key: '6bc85a3d92f6ece7e5829f4bb678d5d778d9ceb9' }, leftIconData.attrs, { fill: leftIconStyle.color }), leftIconData.content.map((item, index$1) => {
+            if (item.elem === 'path') {
+                return index.h("path", Object.assign({}, item.attrs, { key: index$1 }));
+            }
+            return null;
+        })))), index.h("unity-typography", { key: '25f9c6aabc651a0aaa889dc459b0cc39a84c58cb', variant: 'caption-text' }, index.h("span", { key: 'eaa0164830c5ea242414abe2e07dd518e9940080', class: 'remove-height' }, this.text)), this.showDelete && (index.h("button", { key: '3899b6ea1c517cda4d054f37bd335aad777dcac5', class: "delete-button", style: deleteButtonStyle, onClick: this.handleDelete }, index.h("svg", Object.assign({ key: 'a812b760ff4250b055b16a5a0d9fea4d6ff755c6' }, Close16__default.default.attrs, { fill: deleteButtonStyle.color }), Close16__default.default.content.map((item, index$1) => {
+            if (item.elem === 'path') {
+                return index.h("path", Object.assign({}, item.attrs, { key: index$1 }));
+            }
+            return null;
+        }))))));
+    }
+    static get watchers() { return {
+        "externalToggleString": ["externalStringChanged"]
+    }; }
+};
+StencilChip.style = stencilChipCss;
+
+exports.stencil_chip = StencilChip;
+//# sourceMappingURL=stencil-chip.entry.cjs.js.map

package/dist/cjs/stencil-chip.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-chip.entry.cjs.js","sources":["src/components/my-component/UI/data-display/chips/stencil-chip/stencil-chip.css?tag=stencil-chip&encapsulation=shadow","src/components/my-component/UI/data-display/chips/stencil-chip/stencil-chip.tsx"],"sourcesContent":[".chip {\n  display: inline-flex; /* changed from inline-block */\n  align-items: center;\n  padding: 3px;\n  padding-left: 8px;\n  font-size: 14px;\n  border-radius: 16px;\n  color: #333;\n  cursor: pointer;\n  /* border: 1px solid #393939;   */\n  background-color: transparent; /* Make background transparent */\n  height: 26px;\n}\n\n.chip--unclickable {\n  cursor: default;\n}\n\n.delete-button {\n  margin-left: 12px; /* Increased spacing */\n  background-color: #fff; /* light circle */\n  border: none;\n  border-radius: 50%; /* make it round */\n  cursor: pointer;\n  width: 24px; /* Increased button dimensions */\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.delete-button svg {\n  width: 20px; /* Increased SVG dimensions */\n  height: 20px;\n  fill: #333; /* dark 'x' */\n}\n\n\n.left-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%; /* makes it round */\n  width: 24px;\n  height: 24px;\n  margin-right: 8px; /* add some spacing between the icon and the text */\n}\n\n\n","import { Component, Prop, h, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport Close16 from '@carbon/icons/es/close/16';\n\n/**\n * @deprecated This component is deprecated and will be removed in a future version.\n * Please use `udp-chip` instead\n */\n\n@Component({\n  tag: 'stencil-chip',\n  styleUrl: 'stencil-chip.css',\n  shadow: true,\n})\nexport class StencilChip {\n  @Prop() text: string;\n  @Prop() color: 'primary' | 'secondary' = 'primary';\n  @Prop() level: number = 0;\n  @Prop() defaultToggled: boolean = false; // New Prop\n  @Prop() leftIcon: any; // New Prop for Left Icon\n  @Prop() showLeftIcon: boolean = false; // New Prop to control display of Left Icon\n  @Prop() showDelete: boolean = true;\n  @Prop() externalToggleString: string;\n  @Prop() clickable: boolean = true; // New Prop to turn off click ability\n\n  @Event() onDelete: EventEmitter<void>;\n  @Event() onToggle: EventEmitter<boolean>;\n  @Event({ bubbles: true }) udpChipClicked: EventEmitter<string>;\n\n  @State() toggled: boolean;\n\n  @Watch('externalToggleString')\n  externalStringChanged(newValue: string) {\n    if (newValue && newValue === this.text) {\n      this.toggleOff();\n    }\n  }\n\n  private toggleOff() {\n    if (this.toggled) {\n      this.toggled = false;\n      this.onToggle.emit(this.toggled); // Optionally emit an event\n    }\n  }\n\n  // Initialize the toggle state with the default value\n  componentWillLoad() {\n    this.toggled = this.defaultToggled;\n  }\n\n  handleClick = () => {\n    this.toggled = !this.toggled;\n    this.udpChipClicked.emit(this.text); // emit the event when clicked\n  };\n\n  handleDelete = (event: Event) => {\n    event.stopPropagation();\n    this.onDelete.emit();\n  };\n\n  // Method to lighten the color based on the level\n  getLightenedColor(color: 'primary' | 'secondary', level: number): string {\n    // Static HSL values for primary and secondary colors\n    const hslValues = {\n      primary: { hue: 156, saturation: 58, lightness: 67 },\n      secondary: { hue: 156, saturation: 58, lightness: 67 },\n    };\n\n    // Retrieve the correct color values\n    const { hue, saturation, lightness } = hslValues[color];\n\n    // Dramatically increase the lightness based on the level to ensure a noticeable difference\n    const lightnessIncrease = 15; // More substantial increase per level\n    const newLightness = Math.min(100, lightness + level * lightnessIncrease);\n\n    // Optional: Adjust hue for a more drastic change (future-proofing)\n    const hueAdjustment = 50; // Set to non-zero to see hue changes; keep at 0 for no change\n    const newHue = (hue + hueAdjustment * level) % 360; // Adjust hue based on level if needed\n\n    // Construct and return the HSL color string\n    return `hsl(${newHue}, ${saturation}%, ${newLightness}%)`;\n  }\n\n  render() {\n    const additionalPaddingWhenDeleteHidden = {\n      paddingRight: '8px', // Adjust this value according to your needs\n    };\n\n    const chipStyle = this.toggled ? {\n      //backgroundColor: this.color === 'primary' ? 'var(--primary-color)' : 'var(--secondary-color)',\n      backgroundColor: this.getLightenedColor(this.color, this.level),\n      color: '#000',\n      border: '1px solid var(--secondary-color)',\n      ...(!this.showDelete ? additionalPaddingWhenDeleteHidden : {}),\n    } : {\n      backgroundColor: 'transparent',\n      color: '#393939',\n      border: '1px solid var(--secondary-color)',\n      ...(!this.showDelete ? additionalPaddingWhenDeleteHidden : {}),\n    };\n\n    const deleteButtonStyle = this.toggled\n      ? {\n          backgroundColor: '#fff',\n          color: '#333',\n        }\n      : {\n          backgroundColor: '#d3d3d3', // light grey background\n          color: '#393939',\n        };\n\n    const leftIconStyle = this.toggled\n      ? {\n          backgroundColor: '#fff',\n          color: '#333',\n        }\n      : {\n          backgroundColor: 'var(--primary-color)', // Or some darker shade\n          color: '#fff',\n        };\n\n    const leftIconData = this.leftIcon || Close16; // Fallback to Add16 if no icon is provided\n\nreturn (\n  <div class={`chip${!this.clickable ? ' chip--unclickable' : ''}`} style={chipStyle} onClick={this.clickable ? this.handleClick : undefined}>\n    {/* {this.leftIcon && (\n      <span class=\"left-icon\" style={leftIconStyle}>\n        <svg {...leftIconData.attrs} fill={leftIconStyle.color}>\n          {leftIconData.content.map((item, index) => {\n            if (item.elem === 'path') {\n              return <path {...item.attrs} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </span>\n    )} */}\n      {this.leftIcon && (\n        <span class=\"left-icon\" style={leftIconStyle}>\n          <svg {...leftIconData.attrs} fill={leftIconStyle.color}>\n            {leftIconData.content.map((item, index) => {\n              if (item.elem === 'path') {\n                return <path {...item.attrs} key={index} />;\n              }\n              return null;\n            })}\n          </svg>\n        </span>\n      )}\n    <unity-typography variant='caption-text'>\n      <span class='remove-height'>{this.text}</span>\n    </unity-typography>\n    {this.showDelete && (\n      <button class=\"delete-button\" style={deleteButtonStyle} onClick={this.handleDelete}>\n        <svg {...Close16.attrs} fill={deleteButtonStyle.color}>\n          {Close16.content.map((item, index) => {\n            if (item.elem === 'path') {\n              return <path {...item.attrs} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </button>\n    )}\n  </div>\n);\n\n  }\n}\n"],"names":["Close16","h","index"],"mappings":"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"}

package/dist/cjs/stencil-icon-button-grid-action-header.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+
+const stencilIconButtonGridActionHeaderCss = ".icon-button{background:rgb(255, 255, 255);border:0px;border-radius:25px;display:flex;align-items:center;justify-content:center;cursor:pointer;gap:4px;padding:10px}.icon-button-secondary{background:transparent;border:0px;color:var(--primary-color);border-radius:25px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;gap:4px;padding-right:16px;padding-left:16px}.icon-button.no-background{background:transparent;border:0px}button{position:relative}button[title]:not([title=\"Save View\"]):not([title='']):hover:after{content:attr(title);background-color:black;color:white;position:absolute;top:110%;padding:5px;border-radius:5px;z-index:10}";
+
+const StencilIconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.secondary = false;
+        this.noBackground = false;
+        this.darkIcon = true;
+        this.showLabel = true;
+        this.count = null;
+    }
+    render() {
+        let buttonClass = this.secondary ? 'icon-button-secondary' : 'icon-button'; // conditional class
+        let buttonStyle = this.showLabel ? {} : { paddingLeft: '10px', paddingRight: '10px' }; // conditional style
+        // Use the 'noBackground' prop to add another conditional class
+        if (this.noBackground) {
+            buttonClass += ' no-background';
+        }
+        // Your existing code for setting up the icon
+        let iconColor = this.darkIcon ? 'black' : 'white';
+        iconColor = this.tooltip.toLowerCase() === 'save view' ? '#1d6bfd' : iconColor;
+        const iconData = this.icon; // Removed the default value
+        // ToolTip style is being modified in the CSS under title
+        const Content = () => {
+            return (index.h("button", { class: buttonClass, onClick: this.onClick, title: this.showLabel ? '' : this.tooltip, style: buttonStyle }, iconData && (index.h("svg", Object.assign({}, iconData.attrs, { fill: iconColor }), iconData.content.map((item, index$1) => {
+                if (item.elem === 'path') {
+                    return index.h("path", Object.assign({}, item.attrs, { key: index$1 }));
+                }
+                return null;
+            }))), this.showLabel
+                ? !['grid options', 'clear grid'].includes(this.tooltip.toLocaleLowerCase()) && index.h("slot", null)
+                : (this.showLabel || this.tooltip.toLowerCase() === 'save view') && index.h("slot", null)));
+        };
+        return (this.count ? (index.h("udp-badge", { content: this.count }, index.h(Content, null))) : (index.h(Content, null)));
+    }
+};
+StencilIconButton.style = stencilIconButtonGridActionHeaderCss;
+
+exports.stencil_icon_button_grid_action_header = StencilIconButton;
+//# sourceMappingURL=stencil-icon-button-grid-action-header.entry.cjs.js.map

package/dist/cjs/stencil-icon-button-grid-action-header.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-icon-button-grid-action-header.entry.cjs.js","sources":["src/components/my-component/UI/buttons/icon-button/stencil-icon-button-grid-action-header.css?tag=stencil-icon-button-grid-action-header&encapsulation=shadow","src/components/my-component/UI/buttons/icon-button/stencil-icon-button-grid-action-header.tsx"],"sourcesContent":[".icon-button {\n    background: rgb(255, 255, 255);\n    /* border: 1px solid rgb(171, 177, 174); */\n    border: 0px;\n    border-radius: 25px;  /* Changed from 50% to 25px */\n    /* min-width: 110px;   */\n    /* height: 34px; */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    gap: 4px;\n    /* padding-right: 16px;\n    padding-left: 16px; */\n    padding: 10px;\n  }\n  \n  .icon-button-secondary {\n    background: transparent; \n    border: 0px;\n    color:  var(--primary-color);\n    border-radius: 25px;\n    height: 34px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    gap: 4px;\n    padding-right: 16px;\n    padding-left: 16px;\n  }\n  \n  .icon-button.no-background {\n    background: transparent;\n    border: 0px;\n  }\n\n  button{\n    position: relative;\n  }\n\n  button[title]:not([title=\"Save View\"]):not([title='']):hover:after{\n    content: attr(title);\n    background-color: black;\n    color:white;\n    position:absolute;\n    top:110%;\n    padding: 5px;\n    border-radius: 5px;\n    z-index: 10;\n  }","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'stencil-icon-button-grid-action-header',\n  styleUrl: 'stencil-icon-button-grid-action-header.css',\n  shadow: true,\n})\nexport class StencilIconButton {\n  @Prop() iconName: string;\n  //@Prop() onClick: () => void;\n  @Prop() onClick: (event: MouseEvent) => void;\n  @Prop() iconClassName: string;\n  @Prop() tooltip: string;\n  @Prop() icon: any; // Removed the default value\n  @Prop() secondary: boolean = false;\n  @Prop() noBackground: boolean = false;\n  @Prop() darkIcon: boolean = true;\n  @Prop() showLabel: boolean = true;\n  @Prop() count: number | null = null\n\n  render() {\n    let buttonClass = this.secondary ? 'icon-button-secondary' : 'icon-button'; // conditional class\n    let buttonStyle = this.showLabel ? {} : { paddingLeft: '10px', paddingRight: '10px' }; // conditional style\n\n    // Use the 'noBackground' prop to add another conditional class\n    if (this.noBackground) {\n      buttonClass += ' no-background';\n    }\n\n    // Your existing code for setting up the icon\n    let iconColor = this.darkIcon ? 'black' : 'white';\n    iconColor = this.tooltip.toLowerCase() === 'save view' ? '#1d6bfd' : iconColor;\n    const iconData = this.icon; // Removed the default value\n\n    // ToolTip style is being modified in the CSS under title\n\n    const Content = () =>{\n      return (\n        <button class={buttonClass} onClick={this.onClick} title={this.showLabel ? '' : this.tooltip} style={buttonStyle}>\n        {/* Conditionally render the icon if one is provided */}\n        {iconData && (\n          <svg {...iconData.attrs} fill={iconColor}>\n            {iconData.content.map((item, index) => {\n              if (item.elem === 'path') {\n                return <path {...item.attrs} key={index} />;\n              }\n              return null;\n            })}\n          </svg>\n        )}\n        {/* Render slot conditionally based on showLabel */}\n        {this.showLabel\n          ? !['grid options', 'clear grid'].includes(this.tooltip.toLocaleLowerCase()) && <slot></slot>\n          : (this.showLabel || this.tooltip.toLowerCase() === 'save view') && <slot></slot>}\n      </button>\n      )\n    }\n    return ( \n      this.count ? (\n      <udp-badge content={this.count}>\n        <Content/>\n        </udp-badge>\n     ) : (\n     <Content/>\n    ))\n    \n  }\n}\n"],"names":["h","index"],"mappings":";;;;AAAA,MAAM,oCAAoC,GAAG,kqBAAkqB;;MCOlsB,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AACzB,QAAA,IAAK,CAAA,KAAA,GAAkB,IAAI;AAiDpC;IA/CC,MAAM,GAAA;AACJ,QAAA,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,uBAAuB,GAAG,aAAa,CAAC;QAC3E,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;;AAGtF,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,WAAW,IAAI,gBAAgB;;;AAIjC,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,OAAO;AACjD,QAAA,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS;AAC9E,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;;QAI3B,MAAM,OAAO,GAAG,MAAK;AACnB,YAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAA,EAE/G,QAAQ,KACPA,OAAS,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,QAAQ,CAAC,KAAK,EAAA,EAAE,IAAI,EAAE,SAAS,EAAA,CAAA,EACrC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;AACpC,gBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;oBACxB,OAAOD,OAAA,CAAA,MAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAU,IAAI,CAAC,KAAK,IAAE,GAAG,EAAEC,OAAK,EAAA,CAAA,CAAI;;AAE7C,gBAAA,OAAO,IAAI;AACb,aAAC,CAAC,CACE,CACP,EAEA,IAAI,CAAC;kBACF,CAAC,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,IAAID,OAAa,CAAA,MAAA,EAAA,IAAA;kBAC3F,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,KAAKA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CAC5E;AAEX,SAAC;AACD,QAAA,QACE,IAAI,CAAC,KAAK,IACVA,OAAW,CAAA,WAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,KAAK,EAAA,EAC5BA,OAAA,CAAC,OAAO,EAAA,IAAA,CAAE,CACE,KAEfA,OAAC,CAAA,OAAO,EAAE,IAAA,CAAA,CACV;;;;;;;"}

package/dist/cjs/stencil-icon-button.udp-ambient-tool-tip.udp-badge.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil-icon-button.udp-ambient-tool-tip.udp-badge.entry.cjs.js","sources":["src/components/my-component/UI/buttons/icon-button/stencil-icon-button.css?tag=stencil-icon-button&encapsulation=shadow","src/components/my-component/UI/buttons/icon-button/stencil-icon-button.tsx","src/components/my-component/UI/data-display/tool-tip/udp-ambient-tool-tip.css?tag=udp-ambient-tool-tip&encapsulation=shadow","src/components/my-component/UI/data-display/tool-tip/udp-ambient-tool-tip.tsx","src/components/my-component/UI/data-display/badge/udp-badge.css?tag=udp-badge&encapsulation=shadow","src/components/my-component/UI/data-display/badge/udp-badge.tsx"],"sourcesContent":[".icon-button {\n  background: rgb(255, 255, 255);\n  border: 0px;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n\n.icon-button-secondary {\n  background: transparent;\n  border: 0px;\n  color: var(--primary-color);\n  width: 38px;\n  height: 38px;\n  /* Use 50% for a perfect circle */\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out;\n}\n\n.icon-button:hover {\n  background-color: #f5f5f5; /* Light gray background */\n}\n\n.icon-button-secondary:hover {\n  background-color: #f5f5f5; /* Light gray background */\n}\n\n.icon-button.no-background {\n  background: transparent;\n  border: 0px;\n}\n\n.icon-button.no-background:hover {\n  background-color: var(--primary-color-alpha-15);\n}\n\n.icon-button:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.icon-button-secondary:disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @deprecated This component is deprecated and will be removed in a future version.\n * Please use `udp-icon-button` instead, which provides better consistency with udp-button\n * and improved theming support.\n *\n * Migration guide:\n * - Replace `<stencil-icon-button>` with `<udp-icon-button>`\n * - `secondary=true` → `variant='text'` or `variant='outlined'`\n * - `noBackground=true` → `variant='text'`\n * - `darkIcon` → Use `color` prop instead\n * - `showLabel` → Use slot content (if content provided, label shows)\n * - `count` → Use `badgeContent` prop\n */\n@Component({\n  tag: 'stencil-icon-button',\n  styleUrl: 'stencil-icon-button.css',\n  shadow: true,\n})\n/**\n * @deprecated This component is deprecated and will be removed in a future version.\n * Please use `udp-icon-button` instead.\n */\nexport class StencilIconButton {\n  @Prop() iconName: string;\n  //@Prop() onClick: () => void;\n  @Prop() onClick: (event: MouseEvent) => void;\n\n  componentWillLoad() {\n    console.warn(\n      '⚠️ stencil-icon-button is deprecated and will be removed in a future version. ' +\n      'Please migrate to udp-icon-button for better consistency and theming support. ' +\n      'See component documentation for migration guide.'\n    );\n  }\n\n  @Prop() iconClassName: string;\n  @Prop() tooltip: string;\n  @Prop() icon: any; // Removed the default value\n  @Prop() secondary: boolean = false;\n  @Prop() noBackground: boolean = false;\n  @Prop() noTooltip: boolean = false;\n  @Prop() darkIcon: boolean = true;\n  @Prop() showLabel: boolean = true;\n  @Prop() disabled: boolean = false;\n  @Prop() buttonId: string;\n  @Prop() count : number | null = null\n\n  render() {\n    let buttonClass = this.secondary ? 'icon-button-secondary' : 'icon-button'; // conditional class\n    let buttonStyle = this.showLabel ? {} : { paddingLeft: '10px', paddingRight: '10px' }; // conditional style\n\n    // Use the 'noBackground' prop to add another conditional class\n    if (this.noBackground) {\n      buttonClass += ' no-background';\n    }\n\n    // Your existing code for setting up the icon\n    const iconColor = this.darkIcon ? 'black' : 'white';\n    const iconData = this.icon; // Removed the default value\n\n    const Content = () =>{\n      return (\n        <button disabled={this.disabled} class={buttonClass} onClick={this.onClick} title={this.showLabel ? this.tooltip : null} style={buttonStyle} id={this.buttonId}>\n        {/* Conditionally render the icon if one is provided */}\n        {iconData && (\n          <svg {...iconData.attrs} fill={iconColor}>\n            {iconData.content.map((item, index) => {\n              if (item.elem === 'path') {\n                return <path {...item.attrs} key={index} />;\n              } else if (item.elem === 'circle') {\n                return <circle {...item.attrs} key={index} />;\n              }\n              return null;\n            })}\n          </svg>\n        )}\n        {this.showLabel && <slot></slot>}\n      </button>\n      )\n    }\n    return (\n      <udp-ambient-tool-tip content={this.showLabel ? '' : this.tooltip} noTooltip={this.noTooltip}>\n        { this.count ? (\n           <udp-badge content={this.count}>\n             <Content/>\n           </udp-badge>\n        ) : (\n            <Content/>\n        )\n        }\n      </udp-ambient-tool-tip>\n    );\n  }\n}\n",".tooltip-wrapper {\n  display: inline-block;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport { createPopper, Instance as PopperInstance } from '@popperjs/core';\n\n// STEP 1: Define a unique ID for our style tag and the CSS rules it will contain.\n// We give the class a unique name to ensure it never conflicts with other styles.\nconst TOOLTIP_STYLE_ID = 'udp-ambient-tool-tip-styles';\n\nconst tooltipComponentStyles = `\n  .udp-tooltip-portal {\n    position: fixed; /* This is set by Popper, but we define it for clarity */\n    z-index: 10000;\n    background-color: var(--tooltip-background, #f8f9fa);\n    color: var(--tooltip-text-color, #212529);\n    border: 1px solid var(--tooltip-border-color, #dee2e6);\n    padding: 3px 6px;\n    border-radius: var(--border-radius, 6px);\n    font-size: 0.875rem;\n    max-width: 250px;\n    width: max-content;\n    text-align: center;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    white-space: normal;\n  }\n`;\n\n@Component({\n  tag: 'udp-ambient-tool-tip',\n  styleUrl: 'udp-ambient-tool-tip.css',\n  shadow: true, // Keep shadow DOM for the wrapper\n})\nexport class UdpAmbientToolTip {\n  @Prop() content: string;\n  @Prop() noTooltip: boolean;\n  @State() isVisible: boolean = false;\n\n  private wrapperEl: HTMLElement;\n  private tooltipContentEl: HTMLElement;\n  private popperInstance: PopperInstance;\n\n  // STEP 2: Create a function to inject the styles into the document <head>.\n  // This only runs once, the very first time any tooltip is shown on the page.\n  private ensureTooltipStyles() {\n    if (!document.getElementById(TOOLTIP_STYLE_ID)) {\n      const styleEl = document.createElement('style');\n      styleEl.id = TOOLTIP_STYLE_ID;\n      styleEl.innerHTML = tooltipComponentStyles;\n      document.head.appendChild(styleEl);\n    }\n  }\n\n  showTooltip = () => {\n    if (this.noTooltip || !this.content || this.content.trim() === '') {\n      return;\n    }\n\n    // STEP 3: Call our style injection function before making the tooltip visible.\n    this.ensureTooltipStyles();\n    this.isVisible = true;\n\n    requestAnimationFrame(() => {\n      if (!this.tooltipContentEl) return;\n      document.body.appendChild(this.tooltipContentEl);\n      this.setupPopper();\n    });\n  };\n\n  hideTooltip = () => {\n    this.destroyPopper();\n    if (this.tooltipContentEl && this.tooltipContentEl.parentElement === document.body) {\n      document.body.removeChild(this.tooltipContentEl);\n    }\n    this.isVisible = false;\n  };\n\n  private setupPopper = () => {\n    if (!this.wrapperEl || !this.tooltipContentEl) return;\n    this.popperInstance = createPopper(this.wrapperEl, this.tooltipContentEl, {\n      strategy: 'fixed',\n      placement: 'top',\n      modifiers: [\n        { name: 'offset', options: { offset: [0, 8] } },\n        { name: 'preventOverflow', options: { padding: 8 } },\n        { name: 'flip' },\n      ],\n    });\n  };\n\n  private destroyPopper = () => {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  };\n\n  disconnectedCallback() {\n    this.hideTooltip();\n  }\n\n  render() {\n    // Check if content is provided before rendering the tooltip content.\n    const shouldDisplayTooltip = !!this.isVisible && !!this.content && this.content.trim() !== '';\n\n    return (\n      <div\n        class=\"tooltip-wrapper\"\n        ref={el => (this.wrapperEl = el)}\n        onMouseOver={this.showTooltip}\n        onMouseOut={this.hideTooltip}\n        //onFocusIn={this.showTooltip}\n        //onFocusOut={this.hideTooltip}\n      >\n        <slot></slot>\n        {shouldDisplayTooltip && (\n          // STEP 4: Use the global class name we defined in our style string.\n          <div class=\"udp-tooltip-portal\" role=\"tooltip\" ref={el => (this.tooltipContentEl = el)}>\n            <unity-typography variant=\"caption-text\">{this.content}</unity-typography>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n",".badge-wrapper {\n    position: relative;\n    display: inline-block;\n  }\n\n  .badge-content {\n    position: absolute;\n    top: -12px;\n    right: -8px;\n    background-color: var(--primary-color);\n    color: white;\n    border-radius: 50%;\n    padding: 4px;\n    min-width: 18px;\n    text-align: center;\n    z-index: 1;\n  }\n","import { Component, h, Prop } from '@stencil/core';\nimport './udp-badge.css';\n\n@Component({\n  tag: 'udp-badge',\n  styleUrl: 'udp-badge.css',\n  shadow: true,\n})\nexport class UdpBadge {\n  @Prop() content: number = 0;\n  @Prop() max: number = 99;\n\n  render() {\n    const displayContent =\n      this.content > this.max ? `${this.max}+` : this.content;\n\n    return (\n      <div class=\"badge-wrapper\">\n        <slot></slot>\n        <span class=\"badge-content\">\n            <unity-typography variant='caption-text' > {displayContent} </unity-typography>\n            \n        </span>\n      </div>\n    );\n  }\n}\n"],"names":["h","index","createPopper"],"mappings":"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"}

package/dist/cjs/stencil-icon-button_3.cjs.entry.js

@@ -0,0 +1,158 @@
+'use strict';
+
+var index = require('./index-DrMNAZCL.js');
+var core = require('@popperjs/core');
+
+const stencilIconButtonCss = ".icon-button{background:rgb(255, 255, 255);border:0px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 0.2s ease-in-out}.icon-button-secondary{background:transparent;border:0px;color:var(--primary-color);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 0.2s ease-in-out}.icon-button:hover{background-color:#f5f5f5;}.icon-button-secondary:hover{background-color:#f5f5f5;}.icon-button.no-background{background:transparent;border:0px}.icon-button.no-background:hover{background-color:var(--primary-color-alpha-15)}.icon-button:disabled{opacity:0.4;pointer-events:none}.icon-button-secondary:disabled{opacity:0.4;pointer-events:none}";
+
+const StencilIconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.secondary = false;
+        this.noBackground = false;
+        this.noTooltip = false;
+        this.darkIcon = true;
+        this.showLabel = true;
+        this.disabled = false;
+        this.count = null;
+    }
+    componentWillLoad() {
+        console.warn('⚠️ stencil-icon-button is deprecated and will be removed in a future version. ' +
+            'Please migrate to udp-icon-button for better consistency and theming support. ' +
+            'See component documentation for migration guide.');
+    }
+    render() {
+        let buttonClass = this.secondary ? 'icon-button-secondary' : 'icon-button'; // conditional class
+        let buttonStyle = this.showLabel ? {} : { paddingLeft: '10px', paddingRight: '10px' }; // conditional style
+        // Use the 'noBackground' prop to add another conditional class
+        if (this.noBackground) {
+            buttonClass += ' no-background';
+        }
+        // Your existing code for setting up the icon
+        const iconColor = this.darkIcon ? 'black' : 'white';
+        const iconData = this.icon; // Removed the default value
+        const Content = () => {
+            return (index.h("button", { disabled: this.disabled, class: buttonClass, onClick: this.onClick, title: this.showLabel ? this.tooltip : null, style: buttonStyle, id: this.buttonId }, iconData && (index.h("svg", Object.assign({}, iconData.attrs, { fill: iconColor }), iconData.content.map((item, index$1) => {
+                if (item.elem === 'path') {
+                    return index.h("path", Object.assign({}, item.attrs, { key: index$1 }));
+                }
+                else if (item.elem === 'circle') {
+                    return index.h("circle", Object.assign({}, item.attrs, { key: index$1 }));
+                }
+                return null;
+            }))), this.showLabel && index.h("slot", null)));
+        };
+        return (index.h("udp-ambient-tool-tip", { content: this.showLabel ? '' : this.tooltip, noTooltip: this.noTooltip }, this.count ? (index.h("udp-badge", { content: this.count }, index.h(Content, null))) : (index.h(Content, null))));
+    }
+};
+StencilIconButton.style = stencilIconButtonCss;
+
+const udpAmbientToolTipCss = ".tooltip-wrapper{display:inline-block}";
+
+// STEP 1: Define a unique ID for our style tag and the CSS rules it will contain.
+// We give the class a unique name to ensure it never conflicts with other styles.
+const TOOLTIP_STYLE_ID = 'udp-ambient-tool-tip-styles';
+const tooltipComponentStyles = `
+  .udp-tooltip-portal {
+    position: fixed; /* This is set by Popper, but we define it for clarity */
+    z-index: 10000;
+    background-color: var(--tooltip-background, #f8f9fa);
+    color: var(--tooltip-text-color, #212529);
+    border: 1px solid var(--tooltip-border-color, #dee2e6);
+    padding: 3px 6px;
+    border-radius: var(--border-radius, 6px);
+    font-size: 0.875rem;
+    max-width: 250px;
+    width: max-content;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    white-space: normal;
+  }
+`;
+const UdpAmbientToolTip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isVisible = false;
+        this.showTooltip = () => {
+            if (this.noTooltip || !this.content || this.content.trim() === '') {
+                return;
+            }
+            // STEP 3: Call our style injection function before making the tooltip visible.
+            this.ensureTooltipStyles();
+            this.isVisible = true;
+            requestAnimationFrame(() => {
+                if (!this.tooltipContentEl)
+                    return;
+                document.body.appendChild(this.tooltipContentEl);
+                this.setupPopper();
+            });
+        };
+        this.hideTooltip = () => {
+            this.destroyPopper();
+            if (this.tooltipContentEl && this.tooltipContentEl.parentElement === document.body) {
+                document.body.removeChild(this.tooltipContentEl);
+            }
+            this.isVisible = false;
+        };
+        this.setupPopper = () => {
+            if (!this.wrapperEl || !this.tooltipContentEl)
+                return;
+            this.popperInstance = core.createPopper(this.wrapperEl, this.tooltipContentEl, {
+                strategy: 'fixed',
+                placement: 'top',
+                modifiers: [
+                    { name: 'offset', options: { offset: [0, 8] } },
+                    { name: 'preventOverflow', options: { padding: 8 } },
+                    { name: 'flip' },
+                ],
+            });
+        };
+        this.destroyPopper = () => {
+            if (this.popperInstance) {
+                this.popperInstance.destroy();
+                this.popperInstance = null;
+            }
+        };
+    }
+    // STEP 2: Create a function to inject the styles into the document <head>.
+    // This only runs once, the very first time any tooltip is shown on the page.
+    ensureTooltipStyles() {
+        if (!document.getElementById(TOOLTIP_STYLE_ID)) {
+            const styleEl = document.createElement('style');
+            styleEl.id = TOOLTIP_STYLE_ID;
+            styleEl.innerHTML = tooltipComponentStyles;
+            document.head.appendChild(styleEl);
+        }
+    }
+    disconnectedCallback() {
+        this.hideTooltip();
+    }
+    render() {
+        // Check if content is provided before rendering the tooltip content.
+        const shouldDisplayTooltip = !!this.isVisible && !!this.content && this.content.trim() !== '';
+        return (index.h("div", { key: '6dca85ed6456dcc026d5b7073c8b424dae26ade1', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, index.h("slot", { key: '925b646f233290114510d0ea4bfbcd34f7ff659d' }), shouldDisplayTooltip && (
+        // STEP 4: Use the global class name we defined in our style string.
+        index.h("div", { key: 'ec25609944d49d8a0a693f0a6c11d907ffbda826', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, index.h("unity-typography", { key: '663a37bd25c4d7228c345a270e0ecc1196256432', variant: "caption-text" }, this.content)))));
+    }
+};
+UdpAmbientToolTip.style = udpAmbientToolTipCss;
+
+const udpBadgeCss = ".badge-wrapper{position:relative;display:inline-block}.badge-content{position:absolute;top:-12px;right:-8px;background-color:var(--primary-color);color:white;border-radius:50%;padding:4px;min-width:18px;text-align:center;z-index:1}";
+
+const UdpBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.content = 0;
+        this.max = 99;
+    }
+    render() {
+        const displayContent = this.content > this.max ? `${this.max}+` : this.content;
+        return (index.h("div", { key: '291c4c86e239ee96e9cc37458a03c50656c48415', class: "badge-wrapper" }, index.h("slot", { key: '3a9a8ce473aa3e520107fe15e4b7134fe835bca3' }), index.h("span", { key: '399dce91383974d53dda18b3c35f7735b3fc3354', class: "badge-content" }, index.h("unity-typography", { key: '76694919b5be85f9f2240b0bb500a21e444d8dfc', variant: 'caption-text' }, " ", displayContent, " "))));
+    }
+};
+UdpBadge.style = udpBadgeCss;
+
+exports.stencil_icon_button = StencilIconButton;
+exports.udp_ambient_tool_tip = UdpAmbientToolTip;
+exports.udp_badge = UdpBadge;
+//# sourceMappingURL=stencil-icon-button.udp-ambient-tool-tip.udp-badge.entry.cjs.js.map