globuswebcomponents 0.9.0 → 0.9.2

package/dist/components/{p-beff7573.js → p-ef5f92ef.js}

@@ -11,7 +11,7 @@ const GbTagCount = /*@__PURE__*/ proxyCustomElement(class GbTagCount extends H {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'd843f4c9670c9013ef4edd2b5aa88484b27e2125', class: this.size }, h("slot", { key: 'ffb5f2b96bb4b493fa6cdd25702752f0ab268c95', name: "count" })));
+        return (h("div", { key: '9a14e581caa59652bff61a0daae1647b11a79da0', class: this.size }, h("slot", { key: '138e42d0b12f8543250d6f677aeb36e86a1eb729', name: "count" })));
     }
     static get style() { return GbTagCountStyle0; }
 }, [1, "gb-tag-count", {
@@ -34,4 +34,4 @@ defineCustomElement();
 
 export { GbTagCount as G, defineCustomElement as d };
 
-//# sourceMappingURL=p-beff7573.js.map
+//# sourceMappingURL=p-ef5f92ef.js.map

package/dist/components/{p-beff7573.js.map → p-ef5f92ef.js.map}

@@ -1 +1 @@
-{"file":"p-beff7573.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m7rEAAm7rE,CAAC;AAC18rE,yBAAe,aAAa;;MCQf,UAAU;;;;;;;IAGnB,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tag-count/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tag-count/gb-tag-count.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    flex-shrink: 0;\r\n    border-radius: 3px;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}  \r\n\r\ndiv.sm {\r\n    width: 16px;\r\n    height: 16px;\r\n    padding: var(--spacing-none) var(--spacing-1);\r\n}\r\n\r\n.sm p{\r\n    width: 8px;\r\n    height: 16px; \r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\ndiv.md {\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n    padding: var(--spacing-none) 5px;\r\n}\r\n\r\n.md p{\r\n    width: 0.5625rem;\r\n    height: 1.125rem;\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem); \r\n}\r\n\r\ndiv.lg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.lg p{\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem);\r\n}\r\n\r\np{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    color: var(--color-text, #4B5565);\r\n    text-align: center;\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n\r\n","import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-count',\r\n    styleUrl: 'gb-tag-count.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <slot name=\"count\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}
+{"file":"p-ef5f92ef.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m7rEAAm7rE,CAAC;AAC18rE,yBAAe,aAAa;;MCQf,UAAU;;;;;;;IAGnB,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tag-count/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tag-count/gb-tag-count.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    flex-shrink: 0;\r\n    border-radius: 3px;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}  \r\n\r\ndiv.sm {\r\n    width: 16px;\r\n    height: 16px;\r\n    padding: var(--spacing-none) var(--spacing-1);\r\n}\r\n\r\n.sm p{\r\n    width: 8px;\r\n    height: 16px; \r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\ndiv.md {\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n    padding: var(--spacing-none) 5px;\r\n}\r\n\r\n.md p{\r\n    width: 0.5625rem;\r\n    height: 1.125rem;\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem); \r\n}\r\n\r\ndiv.lg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.lg p{\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem);\r\n}\r\n\r\np{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    color: var(--color-text, #4B5565);\r\n    text-align: center;\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n\r\n","import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-count',\r\n    styleUrl: 'gb-tag-count.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <slot name=\"count\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}

package/dist/components/{p-7f44101b.js → p-ff5d7f71.js}

@@ -31,7 +31,7 @@ const GbDropdownShortcut = /*@__PURE__*/ proxyCustomElement(class GbDropdownShor
         this.loadIcon(this.iconSrc);
     }
     render() {
-        return (h("div", { key: '6174cf7418b3ff4d51e9820daa60adc02cead8fa', class: "shortcut-container" }, h("div", { key: 'df9eebd280b3260faf871022c8c0988e6c0de414', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}` }, this.icon && (h("div", { key: '9583ef7166f39a8f5d13dcce7cd5114e47d2d355', class: "icon_div" }, h("div", { key: '7a9e3452ae22f8299bdca2e2320b9ee9ab5b7324', class: `icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg }))), this.checkbox && !this.icon && h("gb-checkbox", { key: 'd0d17e6ff1be4ecc35f8c3947818565343518fbf', class: "checkbox", size: "sm", type: "checkbox", state: StateEnum.Default }), h("span", { key: '969566f21e651ff1f4833ef6e671700ecffe9072', class: "label_div" }, h("p", { key: 'ac01ed5ae73bb537ae5d15926258fdff556ecd67', class: `label text-sm-medium ${this.destructive ? 'destructive' : ''}` }, this.label)), this.shortcut && (h("span", { key: 'c8215e2b01537deec3ec2ffed4c23c3097e7b50c', class: "shortcut-icon" }, h("slot", { key: '2eb30c118592710e5ba262f6f0671be4d49ca230' }, "\u2318", this.shortcutIcon))))));
+        return (h("div", { key: '9853d122c737ffd16ed7d0b376e6fd3a076e86a7', class: "shortcut-container" }, h("div", { key: '4211a473485200d7f56a75b5dcac23bd0a27ac5b', class: `shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}` }, this.icon && (h("div", { key: '26bb3cd18f2e92eef05372f89a0c7ca285dca41c', class: "icon_div" }, h("div", { key: '5659fb515e38a572713723e85c55e533288e7d9b', class: `icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg }))), this.checkbox && !this.icon && h("gb-checkbox", { key: 'a67dc53f81969fd813df7aaf582d323aeecd29b0', class: "checkbox", size: "sm", type: "checkbox", state: StateEnum.Default }), h("span", { key: '56b7c92ceaf2acb204d882716733110a8ada313b', class: "label_div" }, h("p", { key: '7bb174b46e8c366842901377bf82858d96f54f26', class: `label text-sm-medium ${this.destructive ? 'destructive' : ''}` }, this.label)), this.shortcut && (h("span", { key: 'fbf5bdf785a1d55685739176d76e6aa9e2fc0b28', class: "shortcut-icon" }, h("slot", { key: 'fd734398ddcc9246e9433701cba9fd1830a0738f' }, "\u2318", this.shortcutIcon))))));
     }
     get el() { return this; }
     static get style() { return GbDropdownItemsWithShortcutStyle0; }
@@ -73,4 +73,4 @@ defineCustomElement();
 
 export { GbDropdownShortcut as G, defineCustomElement as d };
 
-//# sourceMappingURL=p-7f44101b.js.map
+//# sourceMappingURL=p-ff5d7f71.js.map

package/dist/components/{p-7f44101b.js.map → p-ff5d7f71.js.map}

@@ -1 +1 @@
-{"file":"p-7f44101b.js","mappings":";;;;;AAAA,MAAM,8BAA8B,GAAG,ygvEAAygvE,CAAC;AACjjvE,0CAAe,8BAA8B;;MCOhC,kBAAkB;;;;;oBACL,KAAK;;wBAED,KAAK;;4BAEF,EAAE;qBACT,EAAE;qBACc,SAAS;2BAClB,KAAK;8BACF,EAAE;;IAGpC,MAAM,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;KAC3B;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,IAC3G,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,UAAU,IACnB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAC9I,CACP,EACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,EAChI,6DAAM,KAAK,EAAC,WAAW,IACrB,0DAAG,KAAK,EAAE,wBAAwB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACtF,EACN,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,eAAe,IACzB,yEAAQ,IAAI,CAAC,YAAY,CAAQ,CAC5B,CACR,CACG,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css?tag=gb-dropdown-items-with-shortcut&encapsulation=shadow","src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.shortcut-container {\r\n    display: flex;\r\n    width: 100%;\r\n    padding: var(--spacing-half) var(--spacing-1);\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);   \r\n    cursor: pointer;\r\n}\r\n\r\n.shortcut {\r\n    display: flex;\r\n    padding: var(--spacing-2);\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n    border-radius: var(--rounded-xs);\r\n}\r\n\r\n.shortcut.destructive:hover{\r\n    background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.shortcut.destructive:active{\r\n    background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\n.label_div {\r\n    flex-grow: 1;\r\n}\r\n\r\n.label {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.label.destructive {\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.shortcut-icon {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-size: var(--Font-Size-T-xs, 12px);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Regular, 400);\r\n    line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */\r\n    letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n}\r\n\r\n.icon_div {\r\n    padding-left: 7px;\r\n    width: 20px;\r\n    height: 20px;\r\n}\r\n\r\n.icon path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon path[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.disabled path[stroke],\r\n.icon.disabled.destructive path[stroke] {\r\n    stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.icon.disabled path[fill],\r\n.icon.disabled.destructive path[fill] {\r\n    fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.icon.destructive path[stroke] {\r\n    stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.icon.destructive path[fill] {\r\n    fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\ngb-checkbox {\r\n    padding-top: 4px;\r\n    padding-left: 7px;\r\n}\r\n\r\n.shortcut:hover {\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n.shortcut:active {\r\n    background: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.shortcut.disabled {\r\n    background-color: var(---color-background-card, #ffffff);\r\n    color: var(--color-text-disabled, #CDD5DF);\r\n    pointer-events: none;\r\n}\r\n\r\n.shortcut.disabled .label,\r\n.shortcut.disabled .shortcut-icon,\r\n.shortcut.disabled gb-checkbox {\r\n    color: var(--color-text-disabled, #CDD5DF); /* Ensures all text/icons use the disabled color */\r\n}\r\n\r\n.shortcut.disabled .icon img {\r\n    opacity: 0.5;\r\n    stroke: var(--color-icon-disabled, #CDD5DF); /* Reduce opacity for the icon in disabled state */\r\n}\r\n\r\n/* Optional: You can also change the checkbox appearance */\r\n.shortcut.disabled gb-checkbox {\r\n    pointer-events: none;\r\n    opacity: 0.5; /* Dim the checkbox when disabled */\r\n}\r\n\r\n","import { Component, Prop, h, getAssetPath, Element, State } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-dropdown-items-with-shortcut',\r\n  styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n  shadow: true,\r\n})\r\nexport class GbDropdownShortcut {\r\n  @Prop() icon: boolean = false;\r\n  @Prop() iconSrc: string;\r\n  @Prop() checkbox: boolean = false;\r\n  @Prop() shortcut: boolean;\r\n  @Prop() shortcutIcon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() state: 'default' | 'disabled' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"shortcut-container\">\r\n        <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`}>\r\n          {this.icon && (\r\n            <div class=\"icon_div\">\r\n              <div class={`icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n            </div>\r\n          )}\r\n          {this.checkbox && !this.icon && <gb-checkbox class=\"checkbox\" size=\"sm\" type=\"checkbox\" state={StateEnum.Default}></gb-checkbox>}\r\n          <span class=\"label_div\">\r\n            <p class={`label text-sm-medium ${this.destructive ? 'destructive' : ''}`}>{this.label}</p>\r\n          </span>\r\n          {this.shortcut && (\r\n            <span class=\"shortcut-icon\">\r\n              <slot>⌘{this.shortcutIcon}</slot>\r\n            </span>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-ff5d7f71.js","mappings":";;;;;AAAA,MAAM,8BAA8B,GAAG,ygvEAAygvE,CAAC;AACjjvE,0CAAe,8BAA8B;;MCOhC,kBAAkB;;;;;oBACL,KAAK;;wBAED,KAAK;;4BAEF,EAAE;qBACT,EAAE;qBACc,SAAS;2BAClB,KAAK;8BACF,EAAE;;IAGpC,MAAM,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;KAC3B;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,IAC3G,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,UAAU,IACnB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAC9I,CACP,EACA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,oEAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,GAAgB,EAChI,6DAAM,KAAK,EAAC,WAAW,IACrB,0DAAG,KAAK,EAAE,wBAAwB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACtF,EACN,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,eAAe,IACzB,yEAAQ,IAAI,CAAC,YAAY,CAAQ,CAC5B,CACR,CACG,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css?tag=gb-dropdown-items-with-shortcut&encapsulation=shadow","src/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.shortcut-container {\r\n    display: flex;\r\n    width: 100%;\r\n    padding: var(--spacing-half) var(--spacing-1);\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);   \r\n    cursor: pointer;\r\n}\r\n\r\n.shortcut {\r\n    display: flex;\r\n    padding: var(--spacing-2);\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n    border-radius: var(--rounded-xs);\r\n}\r\n\r\n.shortcut.destructive:hover{\r\n    background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.shortcut.destructive:active{\r\n    background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\n.label_div {\r\n    flex-grow: 1;\r\n}\r\n\r\n.label {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.label.destructive {\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.shortcut-icon {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-size: var(--Font-Size-T-xs, 12px);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Regular, 400);\r\n    line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */\r\n    letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n}\r\n\r\n.icon_div {\r\n    padding-left: 7px;\r\n    width: 20px;\r\n    height: 20px;\r\n}\r\n\r\n.icon path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon path[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.disabled path[stroke],\r\n.icon.disabled.destructive path[stroke] {\r\n    stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.icon.disabled path[fill],\r\n.icon.disabled.destructive path[fill] {\r\n    fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.icon.destructive path[stroke] {\r\n    stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.icon.destructive path[fill] {\r\n    fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\ngb-checkbox {\r\n    padding-top: 4px;\r\n    padding-left: 7px;\r\n}\r\n\r\n.shortcut:hover {\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n.shortcut:active {\r\n    background: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.shortcut.disabled {\r\n    background-color: var(---color-background-card, #ffffff);\r\n    color: var(--color-text-disabled, #CDD5DF);\r\n    pointer-events: none;\r\n}\r\n\r\n.shortcut.disabled .label,\r\n.shortcut.disabled .shortcut-icon,\r\n.shortcut.disabled gb-checkbox {\r\n    color: var(--color-text-disabled, #CDD5DF); /* Ensures all text/icons use the disabled color */\r\n}\r\n\r\n.shortcut.disabled .icon img {\r\n    opacity: 0.5;\r\n    stroke: var(--color-icon-disabled, #CDD5DF); /* Reduce opacity for the icon in disabled state */\r\n}\r\n\r\n/* Optional: You can also change the checkbox appearance */\r\n.shortcut.disabled gb-checkbox {\r\n    pointer-events: none;\r\n    opacity: 0.5; /* Dim the checkbox when disabled */\r\n}\r\n\r\n","import { Component, Prop, h, getAssetPath, Element, State } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-dropdown-items-with-shortcut',\r\n  styleUrl: 'gb-dropdown-items-with-shortcut.css',\r\n  shadow: true,\r\n})\r\nexport class GbDropdownShortcut {\r\n  @Prop() icon: boolean = false;\r\n  @Prop() iconSrc: string;\r\n  @Prop() checkbox: boolean = false;\r\n  @Prop() shortcut: boolean;\r\n  @Prop() shortcutIcon: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() state: 'default' | 'disabled' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconSrc);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"shortcut-container\">\r\n        <div class={`shortcut ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`}>\r\n          {this.icon && (\r\n            <div class=\"icon_div\">\r\n              <div class={`icon ${this.state === 'disabled' ? 'disabled' : ''} ${this.destructive ? 'destructive' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n            </div>\r\n          )}\r\n          {this.checkbox && !this.icon && <gb-checkbox class=\"checkbox\" size=\"sm\" type=\"checkbox\" state={StateEnum.Default}></gb-checkbox>}\r\n          <span class=\"label_div\">\r\n            <p class={`label text-sm-medium ${this.destructive ? 'destructive' : ''}`}>{this.label}</p>\r\n          </span>\r\n          {this.shortcut && (\r\n            <span class=\"shortcut-icon\">\r\n              <slot>⌘{this.shortcutIcon}</slot>\r\n            </span>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-96d8d9cd.js → p-ff7a3231.js}

@@ -24,7 +24,7 @@ const GbPaginationNumberBase = /*@__PURE__*/ proxyCustomElement(class GbPaginati
         }
     }
     render() {
-        return (h("div", { key: 'eaf62beb1b733fd2c9326e6ca8c107a0456038a3', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: '42c56fa3de4e253b94c93c71a44987d75dae14e5', name: "page_number" })));
+        return (h("div", { key: 'd094d00d3a90d3f99a40364f5fab418d1243ac06', class: `page_number_base ${this.shape} ${this.state}` }, h("slot", { key: 'd5c3077ecde3c75343b31a43e6cfbb11523f8836', name: "page_number" })));
     }
     get el() { return this; }
     static get style() { return GbPaginationNumberBaseStyle0; }
@@ -49,4 +49,4 @@ defineCustomElement();
 
 export { GbPaginationNumberBase as G, defineCustomElement as d };
 
-//# sourceMappingURL=p-96d8d9cd.js.map
+//# sourceMappingURL=p-ff7a3231.js.map

package/dist/components/{p-96d8d9cd.js.map → p-ff7a3231.js.map}

@@ -1 +1 @@
-{"file":"p-96d8d9cd.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,q0qEAAq0qE,CAAC;AACx2qE,qCAAe,yBAAyB;;MCQ3B,sBAAsB;;;;;;;;IAK/B,gBAAgB;QACZ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAErE,IAAG,cAAc,EAAE;YACf,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;SACzC;QAED,IAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACxB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1C;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IACtD,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-pagination-number-base/gb-pagination-number-base.css?tag=gb-pagination-number-base&encapsulation=shadow","src/components/gb-pagination-number-base/gb-pagination-number-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.page_number_base{\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n    cursor: pointer;\r\n}\r\n\r\n/* Shape Styles */\r\n.page_number_base.square{\r\n    border-radius: var(--rounded-sm);\r\n}\r\n\r\n.page_number_base.circle{\r\n    border-radius: 1.25rem;\r\n}\r\n\r\n/* State Styles */\r\n.page_number_base:hover{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.page_number_base:active,\r\n.page_number_base.active{\r\n    background-color: var(--color-background-information-subtle, #9AC7F4);\r\n}\r\n\r\n::slotted([slot=\"page_number\"].default) {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"page_number\"].active) {\r\n    color: var(--color-text-bold, #202939);\r\n}","import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { PaginationNumberShapes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-pagination-number-base',\r\n    styleUrl: 'gb-pagination-number-base.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbPaginationNumberBase {\r\n    @Prop() shape: PaginationNumberShapes;\r\n    @Prop() state: 'default' | 'active' | 'pressed';\r\n    @Element() el: HTMLElement;\r\n\r\n    componentDidLoad() {\r\n        const slottedContent = this.el.querySelector('[slot=\"page_number\"]');\r\n\r\n        if(slottedContent) {\r\n            slottedContent.classList.add('text-sm-medium');\r\n        }\r\n\r\n        if (this.state === 'default') {\r\n          slottedContent.classList.add('default');\r\n        }\r\n\r\n        if(this.state === 'active') {\r\n            slottedContent.classList.add('active');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`page_number_base ${this.shape} ${this.state}`}>\r\n                <slot name=\"page_number\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}
+{"file":"p-ff7a3231.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,q0qEAAq0qE,CAAC;AACx2qE,qCAAe,yBAAyB;;MCQ3B,sBAAsB;;;;;;;;IAK/B,gBAAgB;QACZ,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAErE,IAAG,cAAc,EAAE;YACf,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;SAClD;QAED,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;SACzC;QAED,IAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACxB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1C;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,IACtD,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC9B,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-pagination-number-base/gb-pagination-number-base.css?tag=gb-pagination-number-base&encapsulation=shadow","src/components/gb-pagination-number-base/gb-pagination-number-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.page_number_base{\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n    cursor: pointer;\r\n}\r\n\r\n/* Shape Styles */\r\n.page_number_base.square{\r\n    border-radius: var(--rounded-sm);\r\n}\r\n\r\n.page_number_base.circle{\r\n    border-radius: 1.25rem;\r\n}\r\n\r\n/* State Styles */\r\n.page_number_base:hover{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.page_number_base:active,\r\n.page_number_base.active{\r\n    background-color: var(--color-background-information-subtle, #9AC7F4);\r\n}\r\n\r\n::slotted([slot=\"page_number\"].default) {\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"page_number\"].active) {\r\n    color: var(--color-text-bold, #202939);\r\n}","import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { PaginationNumberShapes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-pagination-number-base',\r\n    styleUrl: 'gb-pagination-number-base.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbPaginationNumberBase {\r\n    @Prop() shape: PaginationNumberShapes;\r\n    @Prop() state: 'default' | 'active' | 'pressed';\r\n    @Element() el: HTMLElement;\r\n\r\n    componentDidLoad() {\r\n        const slottedContent = this.el.querySelector('[slot=\"page_number\"]');\r\n\r\n        if(slottedContent) {\r\n            slottedContent.classList.add('text-sm-medium');\r\n        }\r\n\r\n        if (this.state === 'default') {\r\n          slottedContent.classList.add('default');\r\n        }\r\n\r\n        if(this.state === 'active') {\r\n            slottedContent.classList.add('active');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`page_number_base ${this.shape} ${this.state}`}>\r\n                <slot name=\"page_number\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}

package/dist/components/test-input-tag.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-e1b8bc90.js';
 import { S as StateEnum } from './p-47052b60.js';
-import { d as defineCustomElement$b } from './p-82a3ab58.js';
+import { d as defineCustomElement$b } from './p-d723ded7.js';
 import { d as defineCustomElement$a } from './p-5380ac75.js';
 import { d as defineCustomElement$9 } from './p-97c51629.js';
 import { d as defineCustomElement$8 } from './p-6c5b2ef4.js';
-import { d as defineCustomElement$7 } from './p-8c105c41.js';
-import { d as defineCustomElement$6 } from './p-5f678e32.js';
-import { d as defineCustomElement$5 } from './p-f41d7ec5.js';
-import { d as defineCustomElement$4 } from './p-696a1f4a.js';
-import { d as defineCustomElement$3 } from './p-33e637b4.js';
-import { d as defineCustomElement$2 } from './p-beff7573.js';
+import { d as defineCustomElement$7 } from './p-af12bef4.js';
+import { d as defineCustomElement$6 } from './p-73c46fd0.js';
+import { d as defineCustomElement$5 } from './p-c48515b7.js';
+import { d as defineCustomElement$4 } from './p-73c903c0.js';
+import { d as defineCustomElement$3 } from './p-18800371.js';
+import { d as defineCustomElement$2 } from './p-ef5f92ef.js';
 
 const testInputTagCss = ".input_group{--height:auto;--inputheight:4.5rem;--weight:100%;display:flex;position:relative}.input_like_parent{width:100%;border:1px solid var(--color-border-input, #CDD5DF);border-radius:var(--rounded-sm);padding:0.625rem 0.875rem 0.625rem var(--spacing-3)}.input_like{width:100%;overflow-y:scroll;transition:height 50ms ease-in-out}.results_display{display:flex;flex-wrap:wrap;gap:0.5rem;background-color:var(--color-surface, #FFFFFF);display:none;margin-top:0.5rem}.results_display.show_results{display:block}.tags{padding-top:1rem}.dropdown_list.show{display:block}.dropdown_menu{display:flex;width:100%;max-height:15rem;padding:var(--spacing-none);flex-direction:column;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-surface, #FFFFFF);box-shadow:var(--shadow-sm);position:absolute;top:100%;z-index:10;gap:var(--spacing-none);transition:1s ease-in-out}";
 const TestInputTagStyle0 = testInputTagCss;
@@ -91,7 +91,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (h("div", { key: '8bad8372b5bea93609307bb7036858652f3f8c49', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: '9d8444b09692d0841e743ecd300ae2a42c5d931c', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '67e31e8b47e2b3ef66a25ebc10d79a9f4abc5730', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '54e1c188e26599173f1bebcdcc2fb3def5ff8c95', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '8ddb3cba3659f72ab4612da325cf956bef05e83f', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
+        return (h("div", { key: 'f38c4206960ee90f2ae7df587ba1bf0dbc5f9e67', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: '75ad43707e5d2f9100b238a4d55aac0d817b0cf7', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '62343bb7416cb866668a3e4ba218b17e3239639b', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '3a8435b75a60b6bd97d30d5d45c805dcb55b9362', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '3137dcb62dd6cfe03347e16ec6a489289eb72913', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -100,7 +100,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'ea997cf4aa0e8e4aafe27b23f3d1f930cd884caf', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'd5098796a74b4ce41f740f8e7fb39dfe9f48fc32', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>