globuswebcomponents 2.8.7 → 2.8.9

package/dist/types/components.d.ts

@@ -751,7 +751,10 @@ export namespace Components {
           * @default false
          */
         "twentyfourHr": boolean;
-        "value": string | string[];
+        /**
+          * @default null
+         */
+        "value": Date | Date[] | null;
     }
     interface GbDatePickerListItem {
         /**
@@ -1003,6 +1006,10 @@ export namespace Components {
     }
     interface GbFileUploadItemBase {
         "allowedType": string;
+        /**
+          * @default 'Upload failed, please try again'
+         */
+        "errorSupportingText": string;
         "fileName": string;
         "fileSize": number;
         "fileType": FileIconTypes;
@@ -1023,6 +1030,10 @@ export namespace Components {
           * @default 0
          */
         "progress": number;
+        /**
+          * @default false
+         */
+        "required": boolean;
         /**
           * @default true
          */
@@ -1182,7 +1193,7 @@ export namespace Components {
         "fullWidth": boolean;
         "size": GeneralSizes;
         /**
-          * @default [     {       name: 'All accounts',       index: 0,       badgeCount: '5',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
          */
         "tabs": { name: string; index: number; badgeCount?: string }[];
         "type": TabTypes;
@@ -1304,6 +1315,10 @@ export namespace Components {
     }
     interface GbInputDropdownMenuItem {
         "color": ColorTypes;
+        /**
+          * @default true
+         */
+        "ellipsed": boolean;
         /**
           * @default false
          */
@@ -2127,10 +2142,26 @@ export namespace Components {
           * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo'   ]
          */
         "dateItems": any[];
+        /**
+          * @default false
+         */
+        "datePickerDisabled": boolean;
+        /**
+          * @default 'right'
+         */
+        "datePickerDropdownPosition": CloseButtonPositions;
+        /**
+          * @default 'left'
+         */
+        "datePickerIconPosition": CloseButtonPositions;
         /**
           * @default 'Start date - end date'
          */
         "datePickerPlaceholder": string;
+        /**
+          * @default false
+         */
+        "enableTime": boolean;
         /**
           * @default 'default'
          */
@@ -2144,10 +2175,18 @@ export namespace Components {
          */
         "filterCount": number;
         "filterState": StateType;
+        /**
+          * @default 'M j, Y'
+         */
+        "format": string;
         /**
           * @default 'single'
          */
         "mode": 'single' | 'range';
+        /**
+          * @default false
+         */
+        "noCalendar": boolean;
         /**
           * @default StateEnum.Default
          */
@@ -2176,6 +2215,10 @@ export namespace Components {
           * @default false
          */
         "showLayoutToggle": boolean;
+        /**
+          * @default 2
+         */
+        "showMonths": number;
         /**
           * @default false
          */
@@ -2192,6 +2235,10 @@ export namespace Components {
           * @default ''
          */
         "tableHeadingLabel": string;
+        /**
+          * @default false
+         */
+        "twentyfourHr": boolean;
     }
     interface GbTag {
         "action": 'X_close' | 'text_only' | 'count';
@@ -2896,7 +2943,7 @@ declare global {
         new (): HTMLGbContactHelpDropdownElement;
     };
     interface HTMLGbDatePickerElementEventMap {
-        "dateChange": string | string[];
+        "dateChange": Date | Date[];
     }
     interface HTMLGbDatePickerElement extends Components.GbDatePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLGbDatePickerElementEventMap>(type: K, listener: (this: HTMLGbDatePickerElement, ev: GbDatePickerCustomEvent<HTMLGbDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4628,7 +4675,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "noCalendar"?: boolean;
-        "onDateChange"?: (event: GbDatePickerCustomEvent<string | string[]>) => void;
+        "onDateChange"?: (event: GbDatePickerCustomEvent<Date | Date[]>) => void;
         /**
           * @default 'Start date - end date'
          */
@@ -4641,7 +4688,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "twentyfourHr"?: boolean;
-        "value"?: string | string[];
+        /**
+          * @default null
+         */
+        "value"?: Date | Date[] | null;
     }
     interface GbDatePickerListItem {
         /**
@@ -4900,6 +4950,10 @@ declare namespace LocalJSX {
     }
     interface GbFileUploadItemBase {
         "allowedType"?: string;
+        /**
+          * @default 'Upload failed, please try again'
+         */
+        "errorSupportingText"?: string;
         "fileName"?: string;
         "fileSize"?: number;
         "fileType"?: FileIconTypes;
@@ -4924,6 +4978,10 @@ declare namespace LocalJSX {
           * @default 0
          */
         "progress"?: number;
+        /**
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * @default true
          */
@@ -5089,7 +5147,7 @@ declare namespace LocalJSX {
         "onTabItemClicked"?: (event: GbHorizontalTabsCustomEvent<number>) => void;
         "size"?: GeneralSizes;
         /**
-          * @default [     {       name: 'All accounts',       index: 0,       badgeCount: '5',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     // {     //   name: 'All accounts',     //   index: 0,     //   badgeCount: '5',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
          */
         "tabs"?: { name: string; index: number; badgeCount?: string }[];
         "type"?: TabTypes;
@@ -5210,6 +5268,10 @@ declare namespace LocalJSX {
     }
     interface GbInputDropdownMenuItem {
         "color"?: ColorTypes;
+        /**
+          * @default true
+         */
+        "ellipsed"?: boolean;
         /**
           * @default false
          */
@@ -6055,10 +6117,26 @@ declare namespace LocalJSX {
           * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo'   ]
          */
         "dateItems"?: any[];
+        /**
+          * @default false
+         */
+        "datePickerDisabled"?: boolean;
+        /**
+          * @default 'right'
+         */
+        "datePickerDropdownPosition"?: CloseButtonPositions;
+        /**
+          * @default 'left'
+         */
+        "datePickerIconPosition"?: CloseButtonPositions;
         /**
           * @default 'Start date - end date'
          */
         "datePickerPlaceholder"?: string;
+        /**
+          * @default false
+         */
+        "enableTime"?: boolean;
         /**
           * @default 'default'
          */
@@ -6072,10 +6150,18 @@ declare namespace LocalJSX {
          */
         "filterCount"?: number;
         "filterState"?: StateType;
+        /**
+          * @default 'M j, Y'
+         */
+        "format"?: string;
         /**
           * @default 'single'
          */
         "mode"?: 'single' | 'range';
+        /**
+          * @default false
+         */
+        "noCalendar"?: boolean;
         "onDateChange"?: (event: GbTableHeaderCustomEvent<string | string[]>) => void;
         "onExportClicked"?: (event: GbTableHeaderCustomEvent<void>) => void;
         "onFilterButtonClicked"?: (event: GbTableHeaderCustomEvent<void>) => void;
@@ -6110,6 +6196,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "showLayoutToggle"?: boolean;
+        /**
+          * @default 2
+         */
+        "showMonths"?: number;
         /**
           * @default false
          */
@@ -6126,6 +6216,10 @@ declare namespace LocalJSX {
           * @default ''
          */
         "tableHeadingLabel"?: string;
+        /**
+          * @default false
+         */
+        "twentyfourHr"?: boolean;
     }
     interface GbTag {
         "action"?: 'X_close' | 'text_only' | 'count';

package/dist/types/models/reusableModels.d.ts

@@ -34,7 +34,7 @@ export type DropdownItemTypes = string | number | {
 };
 export type PaginationDotTypes = 'dot' | 'line';
 export type FileIconStyles = 'default' | 'gray' | 'solid';
-export type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png';
+export type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';
 export type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';
 export type ProgressStepStatus = 'incomplete' | 'current' | 'complete';
 export type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "2.8.7",
+  "version": "2.8.9",
   "description": "Globus One",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/gb-nav-bar-sidemenu.cjs.entry.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var index = require('./index-DbfwG5OL.js');
-
-const gbNavBarSidemenuCss = ".nav_bar_wrapper{display:flex;width:17.5rem;height:100%;padding:var(--spacing-6) var(--spacing-7);flex-direction:column;justify-content:space-between;align-items:flex-start;border-right:1px solid var(--color-border-subtler, #e3e8ef);background:var(--color-surface, #ffffff);box-sizing:border-box}.vertical_tabs{width:100%}.wrapper{display:flex;padding:var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--spacing-4);align-self:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #e3e8ef);background:var(--color-background-gray-subtlest, #f6f8fa);position:relative;height:auto;overflow:hidden}.wrapper_pattern{position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:multiply}::slotted([slot='application_name']){color:var(--color-text-information-bold, #042f59) !important}.application_icon path[stroke]{stroke:var(--color-icon-information-bold, #042F59)}.application_icon path[fill]{fill:var(--color-icon-information-bold, #042F59)}";
-
-const GbNavBarSidemenu = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.navBarItemClicked = index.createEvent(this, "navBarItemClicked");
-        this.applicationName = '';
-        this.applicationIcon = '';
-        this.activeIndex = 0;
-        this.tabs = [
-        // {
-        //   name: 'Accounts',
-        //   index: 0,
-        // },
-        // {
-        //   name: 'Transaction history lite',
-        //   index: 1,
-        // },
-        // {
-        //   name: 'TPP report',
-        //   index: 1,
-        // },
-        // {
-        //   name: 'Check dump history',
-        //   index: 1,
-        // },
-        ];
-        this.leadingIconSvg = '';
-    }
-    async loadIcon(iconName) {
-        const iconPath = index.getAssetPath(`${iconName}`);
-        const response = await fetch(iconPath);
-        const svg = await response.text();
-        this.leadingIconSvg = svg;
-    }
-    onTabItemClicked(event) {
-        this.navBarItemClicked.emit(event.detail);
-    }
-    componentWillLoad() {
-        this.loadIcon(this.applicationIcon);
-    }
-    componentDidLoad() {
-        const applicationName = this.el.querySelector('[slot="application_name"]');
-        if (applicationName) {
-            applicationName.classList.add('text-lg-bold');
-        }
-    }
-    render() {
-        const patternSrc = index.getAssetPath(`assets/pattern_wrapper.svg`);
-        // return (
-        //   <div class="top_bar_sidemenu_div">
-        //     <div class="vertical_tabs_div">
-        //       <gb-vertical-tabs size="md" tabs={this.tabs} type="button_primary" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>
-        //     </div>
-        //     <div class="wrapper">
-        //       <div class="wrapper_pattern">
-        //         <img src={patternSrc} alt="" />
-        //       </div>
-        //       <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>
-        //       <div class="application_name">
-        //         <slot name="application_name"></slot>
-        //       </div>
-        //     </div>
-        //   </div>
-        // );
-        return (index.h("div", { key: 'a83290e664d21af5b152ab0c02f71b531086e25d', class: "nav_bar_wrapper" }, index.h("gb-vertical-tabs", { key: 'aa5c02e355926f157f0329710f30879102240d49', class: "vertical_tabs", size: "sm", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) }), index.h("div", { key: 'd4f0e991c81467f3daa72c3b21f29829f0636ec9', class: "wrapper" }, index.h("div", { key: '8a55adff086f57fa0b0740f19a8a775aaad51abf', class: "wrapper_pattern" }, index.h("img", { key: '3bfd9ea69d129a651b8953b26509b2b2a4d727f2', src: patternSrc, alt: "" })), index.h("div", { key: '898d276ab8667832c84595401430f01c469b7685', class: `application_icon`, innerHTML: this.leadingIconSvg }), index.h("slot", { key: '45ac2c3362dc47f438307f29ea1bde8440db6e6a', name: "application_name" }))));
-    }
-    get el() { return index.getElement(this); }
-};
-GbNavBarSidemenu.style = gbNavBarSidemenuCss;
-
-exports.gb_nav_bar_sidemenu = GbNavBarSidemenu;
-//# sourceMappingURL=gb-nav-bar-sidemenu.entry.cjs.js.map

package/dist/cjs/gb-nav-bar-sidemenu.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gb-nav-bar-sidemenu.entry.cjs.js","sources":["src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.css?tag=gb-nav-bar-sidemenu&encapsulation=shadow","src/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.tsx"],"sourcesContent":[".nav_bar_wrapper {\r\n  display: flex;\r\n  width: 17.5rem;\r\n  height: 100%;\r\n  padding: var(--spacing-6) var(--spacing-7);\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  border-right: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-surface, #ffffff);\r\n  box-sizing: border-box;\r\n}\r\n\r\n.vertical_tabs {\r\n  width: 100%;\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-background-gray-subtlest, #f6f8fa);\r\n  position: relative;\r\n  height: auto;\r\n  overflow: hidden;\r\n}\r\n\r\n.wrapper_pattern {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\n::slotted([slot='application_name']) {\r\n  color: var(--color-text-information-bold, #042f59) !important;\r\n}\r\n\r\n.application_icon path[stroke]{\r\n  stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon path[fill]{\r\n  fill: var(--color-icon-information-bold, #042F59);\r\n}","import { Component, Element, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-nav-bar-sidemenu',\r\n  styleUrl: 'gb-nav-bar-sidemenu.css',\r\n  shadow: true,\r\n})\r\nexport class GbNavBarSidemenu {\r\n  @Prop() applicationName: string = '';\r\n  @Prop() applicationIcon: string = '';\r\n  @Prop() activeIndex: number = 0;\r\n  @Prop() tabs: { name: string; index: number }[] = [\r\n    // {\r\n    //   name: 'Accounts',\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   name: 'Transaction history lite',\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   name: 'TPP report',\r\n    //   index: 1,\r\n    // },\r\n    // {\r\n    //   name: 'Check dump history',\r\n    //   index: 1,\r\n    // },\r\n  ];\r\n  @State() leadingIconSvg: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<void>;\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  onTabItemClicked(event) {\r\n    this.navBarItemClicked.emit(event.detail);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.applicationIcon);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    if (applicationName) {\r\n      applicationName.classList.add('text-lg-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n\r\n    // return (\r\n    //   <div class=\"top_bar_sidemenu_div\">\r\n    //     <div class=\"vertical_tabs_div\">\r\n    //       <gb-vertical-tabs size=\"md\" tabs={this.tabs} type=\"button_primary\" active-index={this.activeIndex} onTabItemClicked={this.onTabItemClicked.bind(this)}></gb-vertical-tabs>\r\n    //     </div>\r\n    //     <div class=\"wrapper\">\r\n    //       <div class=\"wrapper_pattern\">\r\n    //         <img src={patternSrc} alt=\"\" />\r\n    //       </div>\r\n    //       <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n    //       <div class=\"application_name\">\r\n    //         <slot name=\"application_name\"></slot>\r\n    //       </div>\r\n    //     </div>\r\n    //   </div>\r\n    // );\r\n\r\n    return (\r\n      <div class=\"nav_bar_wrapper\">\r\n        <gb-vertical-tabs\r\n          class=\"vertical_tabs\"\r\n          size=\"sm\"\r\n          tabs={this.tabs}\r\n          type=\"button_primary\"\r\n          active-index={this.activeIndex}\r\n          onTabItemClicked={this.onTabItemClicked.bind(this)}\r\n        ></gb-vertical-tabs>\r\n        <div class=\"wrapper\">\r\n          <div class=\"wrapper_pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n          <div class={`application_icon`} innerHTML={this.leadingIconSvg}></div>\r\n          <slot name=\"application_name\"></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["getAssetPath","h"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ijCAAijC;;MCOhkC,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC5B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC5B,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;QACvB,IAAA,CAAA,IAAI,GAAsC;;;;;;;;;;;;;;;;;SAiBjD;AACQ,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAmErC;IA/DC,MAAM,QAAQ,CAAC,QAAgB,EAAA;QAC7B,MAAM,QAAQ,GAAGA,kBAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,GAAG;;AAG3B,IAAA,gBAAgB,CAAC,KAAK,EAAA;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;IAG3C,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;;IAGrC,gBAAgB,GAAA;QACd,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,2BAA2B,CAAC;QAE1E,IAAI,eAAe,EAAE;AACnB,YAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;;IAIjD,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAGA,kBAAY,CAAC,CAAA,0BAAA,CAA4B,CAAC;;;;;;;;;;;;;;;;;AAmB7D,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,gBAAgB,EAAA,cAAA,EACP,IAAI,CAAC,WAAW,EAC9B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,CAAA,EACpBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC3B,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAkB,gBAAA,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,EACtEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF;;;;;;;;"}

package/dist/cjs/gb-vertical-tabs.cjs.entry.js

@@ -1,44 +0,0 @@
-'use strict';
-
-var index = require('./index-DbfwG5OL.js');
-
-const gbVerticalTabsCss = ".vertical_tab_div{display:flex;flex-direction:column;gap:var(--spacing-1);width:100%}";
-
-const GbVerticalTabs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.tabItemClicked = index.createEvent(this, "tabItemClicked");
-        this.activeIndex = 0;
-        this.tabs = [
-        // {
-        //   name: 'Hiiii',
-        //   index: 0,
-        // },
-        // {
-        //   name: 'There',
-        //   index: 1,
-        // },
-        ];
-        this.internalTabs = [...this.tabs];
-    }
-    onTabsChanged(newTabs) {
-        this.internalTabs = newTabs;
-    }
-    componentWillLoad() {
-        this.internalTabs = this.tabs;
-    }
-    async handleTabClick(index, label) {
-        this.activeIndex = index;
-        this.tabItemClicked.emit({ index, label });
-    }
-    render() {
-        return (index.h("div", { key: '4683768faaacb14cd18c3bf3fb6a1e0d109e76cf', class: `vertical_tab_div` }, this.internalTabs.map((tab, index$1) => (index.h("gb-tab-button-base", { size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": tab.name, current: this.activeIndex === index$1, onClick: () => this.handleTabClick(index$1, tab.name), alignment: "vertical" })))));
-    }
-    static get watchers() { return {
-        "tabs": ["onTabsChanged"]
-    }; }
-};
-GbVerticalTabs.style = gbVerticalTabsCss;
-
-exports.gb_vertical_tabs = GbVerticalTabs;
-//# sourceMappingURL=gb-vertical-tabs.entry.cjs.js.map

package/dist/cjs/gb-vertical-tabs.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gb-vertical-tabs.entry.cjs.js","sources":["src/components/gb-vertical-tabs/gb-vertical-tabs.css?tag=gb-vertical-tabs&encapsulation=shadow","src/components/gb-vertical-tabs/gb-vertical-tabs.tsx"],"sourcesContent":[".vertical_tab_div{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-1);\r\n    width: 100%;\r\n}","import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-vertical-tabs',\r\n  styleUrl: 'gb-vertical-tabs.css',\r\n  shadow: true,\r\n})\r\nexport class GbVerticalTabs {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: TabTypes;\r\n  @Prop({ mutable: true }) activeIndex: number = 0;\r\n  @Prop() tabs: { name: string; index: number }[] = [\r\n    // {\r\n    //   name: 'Hiiii',\r\n    //   index: 0,\r\n    // },\r\n    // {\r\n    //   name: 'There',\r\n    //   index: 1,\r\n    // },\r\n  ];\r\n  @State() internalTabs: { name: string; index: number }[] = [...this.tabs];\r\n  @Event() tabItemClicked: EventEmitter<{ index: number; label: string }>;\r\n\r\n  @Watch('tabs')\r\n  onTabsChanged(newTabs: { name: string; index: number }[]) {\r\n    this.internalTabs = newTabs;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalTabs = this.tabs;\r\n  }\r\n\r\n  async handleTabClick(index: number, label: string) {\r\n    this.activeIndex = index;\r\n    this.tabItemClicked.emit({ index, label });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`vertical_tab_div`}>\r\n        {this.internalTabs.map((tab, index) => (\r\n          <gb-tab-button-base\r\n            size={this.size}\r\n            type={this.type === 'button_gray_border' ? 'button_white' : this.type}\r\n            tab-name={tab.name}\r\n            current={this.activeIndex === index}\r\n            onClick={() => this.handleTabClick(index, tab.name)}\r\n            alignment=\"vertical\"\r\n          ></gb-tab-button-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","index"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,uFAAuF;;MCQpG,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQ2B,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;QACxC,IAAA,CAAA,IAAI,GAAsC;;;;;;;;;SASjD;QACQ,IAAA,CAAA,YAAY,GAAsC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;AAiC1E;AA7BC,IAAA,aAAa,CAAC,OAA0C,EAAA;AACtD,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO;;IAG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;AAG/B,IAAA,MAAM,cAAc,CAAC,KAAa,EAAE,KAAa,EAAA;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;IAG5C,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,CAAkB,IAC3B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEC,OAAK,MAChCD,OAAA,CAAA,oBAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAAC,IAAI,EAAA,UAAA,EAC3D,GAAG,CAAC,IAAI,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,KAAKC,OAAK,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAACA,OAAK,EAAE,GAAG,CAAC,IAAI,CAAC,EACnD,SAAS,EAAC,UAAU,EAAA,CACA,CACvB,CAAC,CACE;;;;;;;;;;"}

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

@@ -1 +0,0 @@
-{"file":"p-B0qW4uoE.js","mappings":";;;;;;;AAAA,MAAM,0BAA0B,GAAG,+iwEAA+iwE;;MCQrkwE,uBAAuB,iBAAAA,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;AALpC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AACd,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAG1C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC3B,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AA8HrC;IAzHC,MAAM,QAAQ,CAAC,QAAgB,EAAA;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,CAAA,CAAE,CAAC;AAC5C,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAEjC,QAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC;AAC3D,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe;;QAGzC,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC;AACpE,QAAA,mBAAmB,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/B,YAAA,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AACjC,SAAC,CAAC;;AAGF,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS;;AAExC,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAGnC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;;IAGrC,gBAAgB,GAAA;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC;QACvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC;QAC5E,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;QAE/D,IAAI,QAAQ,EAAE;AACZ,YAAA,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACxC,YAAA,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;;QAGnC,IAAI,YAAY,EAAE;AAChB,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;;QAGjD,IAAI,kBAAkB,EAAE;AACtB,YAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;;;AAIvD,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE;;IAGjC,MAAM,GAAA;QACJ;;AAEE,QAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC/D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,gBAAA,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;AACrC,gBAAA,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;AACpC,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AAClB,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,KAAK,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,EAAA,EAE3D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,EACpI,IAAI,CAAC,IAAI,KAAK,gBAAgB,KAC7B,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAQ,CAAA,CACnC,CACb,EACA,IAAI,CAAC,IAAI,KAAK,aAAa,KAC1B,CACG,CAAA,QAAA,EAAA,IAAA,EAAA,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,WAAK,EAAE,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1G,CAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,CACzC,KAEN,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAG,CACzC,CACP,CACA,CACJ,EACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAgB,CAAA,EAC9I,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,EACxB,IAAI,CAAC,cAAc,KAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAQ,CAAA,CAC/B,CACR,CACG,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAM,IAAA,CAAA,EACf,EAAA,IAAI,CAAC,KAAK,KAAK,UAAU,IACxB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACnH,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,wGAAwG,EAC1G,MAAM,EAAC,SAAS,EAAA,cAAA,EACH,SAAS,EAAA,gBAAA,EACP,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,wGAAwG,EAC1G,MAAM,EAAC,SAAS,kBACH,SAAS,EAAA,gBAAA,EACP,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,CACP,CACG,CACP,CACG,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css?tag=gb-input-dropdown-menu-item&encapsulation=shadow","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.dropdown-container {\r\n  display: flex;\r\n  padding: 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.dropdown-item {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  flex: 1 0 0;\r\n  min-width: 0;\r\n  border-radius: var(--rounded-xs);\r\n  cursor: pointer;\r\n  font-family: var(--Font-Family-Body, Sora);\r\n  font-style: normal;\r\n  letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n/* .name_text{\r\n    max-width: 5rem;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n} */\r\n\r\n.content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem; /* if needed */\r\n  min-width: 0; /* ❗ critical for ellipsis to work */\r\n}\r\n\r\n::slotted([slot='name']) {\r\n  width: 100%;\r\n  /* max-width: 15rem; */\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  flex: 1 1 auto;\r\n  white-space: nowrap;\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n::slotted([slot='supporting_text']) {\r\n  font-size: var(--Font-Size-T-sm, 14px);\r\n  font-weight: var(--Font-Weight-Regular, 400);\r\n  line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n/* Icon Styles */\r\n.icon_leading {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.icon_leading svg {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.icon_leading path[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading path#Accent[fill] {\r\n    fill: var(--color-Accent, #4B5565);\r\n}\r\n\r\n.icon_leading path#Icon[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading circle[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon_leading circle[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n/* State Styles */\r\n.dropdown-item:hover {\r\n  background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.dropdown-item:active {\r\n  background-color: var(--color-background-gray-subtle, #e3e8ef);\r\n}\r\n\r\n.dropdown-item.default.selected,\r\n.dropdown-item.icon_leading.selected,\r\n.dropdown-item.avatar_leading.selected,\r\n.dropdown-item.dot_leading.selected {\r\n  background-color: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.dropdown-item.default.selected:hover,\r\n.dropdown-item.icon_leading.selected:hover,\r\n.dropdown-item.avatar_leading.selected:hover,\r\n.dropdown-item.dot_leading.selected:hover {\r\n  background-color: var(--color-background-discovery-subtlest, #f0f9ff);\r\n}\r\n\r\n.dropdown-item.default.selected:active,\r\n.dropdown-item.icon_leading.selected:active,\r\n.dropdown-item.avatar_leading.selected:active,\r\n.dropdown-item.dot_leading.selected:active {\r\n  background-color: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.dropdown-item.default.selected.disabled,\r\n.dropdown-item.icon_leading.selected.disabled,\r\n.dropdown-item.avatar_leading.selected.disabled,\r\n.dropdown-item.dot_leading.selected.disabled,\r\n.dropdown-item.checkbox.selected.disabled {\r\n  background-color: transparent;\r\n  color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  min-height: 2.5rem;\r\n  padding: 0 var(--spacing-2);\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: var(--spacing-2);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.dropdown-item--selected slot {\r\n  flex-grow: 1;\r\n  margin-right: 8px;\r\n}\r\n\r\n.dropdown-item--selected svg:last-of-type {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.tick {\r\n  display: flex;\r\n  align-items: center;\r\n  padding-right: var(--spacing-2);\r\n}\r\n","import { Component, Element, Prop, h, Fragment, Event, EventEmitter, State, getAssetPath } from '@stencil/core';\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() dropdownItemClicked: EventEmitter<void>;\r\n\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\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Add `has-opacity` class to all elements that have an opacity attribute\r\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n    elementsWithOpacity.forEach(el => {\r\n      el.classList.add('has_opacity');\r\n    });\r\n\r\n    // Serialize and store\r\n    const modifiedSvg = svgElement.outerHTML;\r\n    // console.log(modifiedSvg)\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconLeadingSwap);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n    const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add('text-md-medium');\r\n      nameSlot.classList.add('no_wrap');\r\n    }\r\n\r\n    if (initialsSlot) {\r\n      initialsSlot.classList.add('text-xs-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  async handleClick() {\r\n    this.dropdownItemClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'selected': this.selected,\r\n            'disabled': this.state === 'disabled',\r\n            'checkbox': this.type === 'checkbox',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && this.iconLeading && <div class={`icon_leading ${this.state}`} innerHTML={this.leadingIconSvg}></div>}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n                <slot name=\"initials\" slot=\"initials\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <>\r\n                {this.state === 'default' ? (\r\n                  <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n                  </svg>\r\n                ) : (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n                  </svg>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <div class={`tick`}>\r\n              {this.state !== 'disabled' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#075DB2\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#CDD5DF\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}