globuswebcomponents 2.16.6 → 2.16.7

package/dist/types/components/gb-button/gb-button.d.ts

@@ -21,6 +21,7 @@ export declare class GbButton {
         iconLeadingStyle: string;
         iconLeadingType: string;
     };
+    fullWidth: boolean;
     el: HTMLElement;
     leadingIconSvg: string;
     trailingIconSvg: string;

package/dist/types/components/gb-table/gb-table.d.ts

@@ -19,6 +19,7 @@ export declare class GbTable {
         };
     };
     tableHeaderConfig: {
+        type: 'default' | 'table_control';
         tableHeading?: boolean;
         tableHeadingLabel?: string;
         showDateFilter?: boolean;
@@ -37,6 +38,7 @@ export declare class GbTable {
         datePickerMode?: 'single' | 'range';
         inputPlaceholder?: string;
         datePickerPlaceholder?: string;
+        searchMode?: 'internal' | 'external';
     };
     paginationConfig: {
         paginationMode: 'internal' | 'external';
@@ -75,8 +77,7 @@ export declare class GbTable {
     showCheckbox: boolean;
     tableHeadColor: 'gray' | 'blue';
     rowKey: string | ((row: any) => string);
-    filterMode: 'internal' | 'external';
-    searchMode: 'internal' | 'external';
+    tableHeaderType: 'default' | 'table_control';
     slicedData: any[];
     internalCurrentPage: number;
     internalPageSize: number;
@@ -128,6 +129,7 @@ export declare class GbTable {
     }>;
     filterApplied: EventEmitter<any>;
     filterCleared: EventEmitter<void>;
+    tableControlClicked: EventEmitter<string>;
     private isDraggingModal;
     private dragOffset;
     private actionButtonRefs;
@@ -177,6 +179,7 @@ export declare class GbTable {
     exportButtonClicked(detail: any): void;
     onRefreshButtonClicked(): void;
     switchTableLayout(layout: any): void;
+    emitTableContolClickedEvent(detail: any): void;
     private toggleColumn;
     private onModalPointerDown;
     private onModalPointerMove;

package/dist/types/components/gb-table-header/gb-table-header.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { CloseButtonPositions, StateEnum, StateType } from '../../models/reusableModels';
 export declare class GbTableHeader {
+    type: 'default' | 'table_control';
     showFilter: boolean;
     showColumnOptions: boolean;
     tableHeading: boolean;
@@ -47,6 +48,7 @@ export declare class GbTableHeader {
     refreshButtonClicked: EventEmitter<void>;
     layoutButtonClicked: EventEmitter<string>;
     columnOptionsButtonClicked: EventEmitter<string>;
+    tableControlClicked: EventEmitter<string>;
     dateChange: EventEmitter<string | string[]>;
     el: HTMLElement;
     exportDropdown: HTMLElement;
@@ -57,6 +59,7 @@ export declare class GbTableHeader {
     toggleDropdown(): void;
     handleResize(): void;
     private updateParameters;
+    emitTableControlClicked(control: 'previous' | 'next'): void;
     emitValue(inputValue: any): void;
     onFilterButtonClicked(): void;
     emitSelection(selection: any): void;

package/dist/types/components.d.ts

@@ -452,6 +452,10 @@ export namespace Components {
           * @default false
          */
         "event": boolean;
+        /**
+          * @default true
+         */
+        "fullWidth": boolean;
         "getNativeButton": () => Promise<HTMLButtonElement | null>;
         /**
           * @default 'primary'
@@ -2347,7 +2351,7 @@ export namespace Components {
          */
         "state": 'expanded' | 'collapsed';
         /**
-          * @default [     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },   ]
+          * @default [     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/book-open-01.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },   ]
          */
         "subMenuData": SubMenuItem[];
         /**
@@ -2668,7 +2672,7 @@ export namespace Components {
     }
     interface GbTable {
         /**
-          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   searchable: true,     //   hasAvatar: true,     //   cellAvatar: {     //     // image: '',     //     slots: {     //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),     //       image: row => row.image,     //     },     //   },     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role', searchable: true },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
+          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   searchable: true,     //   hasAvatar: true,     //   cellAvatar: {     //     // image: '',     //     slots: {     //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),     //       image: row => row.image,     //     },     //   },     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role', searchable: true },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     // cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     // cellSlots: {     //   default: {     //     tag: 'p',     //     content: row => row.status,     //   },     // },     // },   ]
          */
         "columns": TableColumn[];
         /**
@@ -2703,11 +2707,10 @@ export namespace Components {
     fileType?: FileIconTypes;
     featuredIconSwap?: string;
   };
-        "filterConfig": FilterConfig;
         /**
-          * @default 'internal'
+          * @default {     mode: 'internal',     title: '',     fields: [       // {       //   tag: 'gb-date-picker',       //   label: 'Date',       //   columnKey: 'date',       //   key: { start: 'startDate', end: 'endDate' },       //   event: 'dateChange',       // },       // {       //   tag: 'gb-input-dropdown',       //   key: 'status',       //   event: 'dropdownItemSelected',       //   props: {       //     type: 'tags',       //     showLabel: true,       //     label: 'Status',       //     placeholder: 'Select a status',       //     items: ['Completed', 'Pending', 'Cancelled'],       //   },       // },       // {       //   tag: 'gb-slider',       //   key: 'amount',       //   event: 'thumbValueChanged',       //   props: {       //     showHeading: true,       //     heading: 'Amount range',       //     max: 600,       //   },       // },     ],     initialValues: {       pageNumber: 0,       pageSize: 10,     },   }
          */
-        "filterMode": 'internal' | 'external';
+        "filterConfig": FilterConfig;
         "gridCardConfig"?: {
     name?: { key: string };
     badges?: { key: string; label?: string }[];
@@ -2732,10 +2735,6 @@ export namespace Components {
           * @default 'id'
          */
         "rowKey": string | ((row: any) => string);
-        /**
-          * @default 'internal'
-         */
-        "searchMode": 'internal' | 'external';
         /**
           * @default true
          */
@@ -2757,6 +2756,7 @@ export namespace Components {
          */
         "tableHeadColor": 'gray' | 'blue';
         "tableHeaderConfig": {
+    type: 'default' | 'table_control';
     tableHeading?: boolean;
     tableHeadingLabel?: string;
     showDateFilter?: boolean;
@@ -2775,7 +2775,12 @@ export namespace Components {
     datePickerMode?: 'single' | 'range';
     inputPlaceholder?: string;
     datePickerPlaceholder?: string;
+    searchMode?: 'internal' | 'external';
   };
+        /**
+          * @default 'default'
+         */
+        "tableHeaderType": 'default' | 'table_control';
     }
     interface GbTableHeader {
         /**
@@ -2883,6 +2888,10 @@ export namespace Components {
           * @default false
          */
         "twentyfourHr": boolean;
+        /**
+          * @default 'default'
+         */
+        "type": 'default' | 'table_control';
     }
     interface GbTag {
         "action": 'X_close' | 'text_only' | 'count';
@@ -4538,6 +4547,7 @@ declare global {
         "mobileRowClicked": { row: any };
         "filterApplied": any;
         "filterCleared": void;
+        "tableControlClicked": string;
     }
     interface HTMLGbTableElement extends Components.GbTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLGbTableElementEventMap>(type: K, listener: (this: HTMLGbTableElement, ev: GbTableCustomEvent<HTMLGbTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4560,6 +4570,7 @@ declare global {
         "refreshButtonClicked": void;
         "layoutButtonClicked": string;
         "columnOptionsButtonClicked": string;
+        "tableControlClicked": string;
         "dateChange": string | string[];
     }
     interface HTMLGbTableHeaderElement extends Components.GbTableHeader, HTMLStencilElement {
@@ -5403,6 +5414,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "event"?: boolean;
+        /**
+          * @default true
+         */
+        "fullWidth"?: boolean;
         /**
           * @default 'primary'
          */
@@ -7349,7 +7364,7 @@ declare namespace LocalJSX {
          */
         "state"?: 'expanded' | 'collapsed';
         /**
-          * @default [     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },   ]
+          * @default [     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/book-open-01.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // {     //   label: 'Content',     //   icon: 'assets/dashboard-square-03.svg',     //   children: [     //     { label: 'Posts', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'News', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },     // { label: 'Overview', icon: 'assets/dashboard-square-03.svg' },   ]
          */
         "subMenuData"?: SubMenuItem[];
         /**
@@ -7676,7 +7691,7 @@ declare namespace LocalJSX {
     }
     interface GbTable {
         /**
-          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   searchable: true,     //   hasAvatar: true,     //   cellAvatar: {     //     // image: '',     //     slots: {     //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),     //       image: row => row.image,     //     },     //   },     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role', searchable: true },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     //   cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     //   cellSlots: {     //     default: {     //       tag: 'p',     //       content: row => row.status,     //     },     //   },     // },   ]
+          * @default [     // { key: 'id', label: '#', width: '70px', sortable: true, sortType: 'string', mobile: { position: 'top_left' } },     // { key: 'date', label: 'Date', value: row => row.date.toLocaleString(), mobile: { position: 'bottom_left' } },     // {     //   key: 'name',     //   label: 'Name',     //   sortable: true,     //   sortType: 'string',     //   helpIcon: true,     //   searchable: true,     //   hasAvatar: true,     //   cellAvatar: {     //     // image: '',     //     slots: {     //       // initials: row => row.name.split(' ').map((nm: string) => nm.charAt(0)),     //       image: row => row.image,     //     },     //   },     //   mobile: { position: 'top_right' },     // },     // { key: 'role', label: 'Role', searchable: true },     // { key: 'amount', label: 'Amount', align: 'right', sortable: true, sortType: 'number', cellStyle: row => ({ color: row.amount > 200 ? 'green' : '' }) },     // {     //   key: 'status',     //   label: 'Status',     //   cellComponent: 'gb-badge',     // cellProps: row => ({ color: row.status === 'Completed' ? 'success' : 'error', type: 'badge_modern', size: 'sm', icon: 'dot' }),     // cellSlots: {     //   default: {     //     tag: 'p',     //     content: row => row.status,     //   },     // },     // },   ]
          */
         "columns"?: TableColumn[];
         /**
@@ -7711,11 +7726,10 @@ declare namespace LocalJSX {
     fileType?: FileIconTypes;
     featuredIconSwap?: string;
   };
-        "filterConfig"?: FilterConfig;
         /**
-          * @default 'internal'
+          * @default {     mode: 'internal',     title: '',     fields: [       // {       //   tag: 'gb-date-picker',       //   label: 'Date',       //   columnKey: 'date',       //   key: { start: 'startDate', end: 'endDate' },       //   event: 'dateChange',       // },       // {       //   tag: 'gb-input-dropdown',       //   key: 'status',       //   event: 'dropdownItemSelected',       //   props: {       //     type: 'tags',       //     showLabel: true,       //     label: 'Status',       //     placeholder: 'Select a status',       //     items: ['Completed', 'Pending', 'Cancelled'],       //   },       // },       // {       //   tag: 'gb-slider',       //   key: 'amount',       //   event: 'thumbValueChanged',       //   props: {       //     showHeading: true,       //     heading: 'Amount range',       //     max: 600,       //   },       // },     ],     initialValues: {       pageNumber: 0,       pageSize: 10,     },   }
          */
-        "filterMode"?: 'internal' | 'external';
+        "filterConfig"?: FilterConfig;
         "gridCardConfig"?: {
     name?: { key: string };
     badges?: { key: string; label?: string }[];
@@ -7736,6 +7750,7 @@ declare namespace LocalJSX {
         "onRefreshButtonClicked"?: (event: GbTableCustomEvent<void>) => void;
         "onRowActionClicked"?: (event: GbTableCustomEvent<{ action: string; row: any }>) => void;
         "onSelectionChanged"?: (event: GbTableCustomEvent<any[]>) => void;
+        "onTableControlClicked"?: (event: GbTableCustomEvent<string>) => void;
         "paginationConfig"?: {
     paginationMode: 'internal' | 'external';
     entriesDropdownMenuPosition: 'top' | 'bottom';
@@ -7751,10 +7766,6 @@ declare namespace LocalJSX {
           * @default 'id'
          */
         "rowKey"?: string | ((row: any) => string);
-        /**
-          * @default 'internal'
-         */
-        "searchMode"?: 'internal' | 'external';
         /**
           * @default true
          */
@@ -7776,6 +7787,7 @@ declare namespace LocalJSX {
          */
         "tableHeadColor"?: 'gray' | 'blue';
         "tableHeaderConfig"?: {
+    type: 'default' | 'table_control';
     tableHeading?: boolean;
     tableHeadingLabel?: string;
     showDateFilter?: boolean;
@@ -7794,7 +7806,12 @@ declare namespace LocalJSX {
     datePickerMode?: 'single' | 'range';
     inputPlaceholder?: string;
     datePickerPlaceholder?: string;
+    searchMode?: 'internal' | 'external';
   };
+        /**
+          * @default 'default'
+         */
+        "tableHeaderType"?: 'default' | 'table_control';
     }
     interface GbTableHeader {
         /**
@@ -7857,6 +7874,7 @@ declare namespace LocalJSX {
         "onInputValueChanged"?: (event: GbTableHeaderCustomEvent<void>) => void;
         "onLayoutButtonClicked"?: (event: GbTableHeaderCustomEvent<string>) => void;
         "onRefreshButtonClicked"?: (event: GbTableHeaderCustomEvent<void>) => void;
+        "onTableControlClicked"?: (event: GbTableHeaderCustomEvent<string>) => void;
         /**
           * @default StateEnum.Default
          */
@@ -7909,6 +7927,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "twentyfourHr"?: boolean;
+        /**
+          * @default 'default'
+         */
+        "type"?: 'default' | 'table_control';
     }
     interface GbTag {
         "action"?: 'X_close' | 'text_only' | 'count';

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

@@ -167,6 +167,7 @@ export interface FilterField {
     default?: any;
 }
 export interface FilterConfig {
+    mode?: 'internal' | 'external';
     title?: string;
     showClearButton?: boolean;
     fields?: FilterField[];

package/package.json

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

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

@@ -1 +0,0 @@
-{"file":"p-BTYRuLgI.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,006EAA006E;;MCOz16E,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AACjB,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAC3B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AA2BtC;IAzBC,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;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,GAAG;;IAG3B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAA,EACpC,IAAI,CAAC,WAAW,KACf,CAAwB,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,EAAE,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAA,EACjE,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAA,EAChK,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAA,CAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,CACvF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-icon-button-base/gb-icon-button-base.css?tag=gb-icon-button-base&encapsulation=shadow","src/components/gb-icon-button-base/gb-icon-button-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.icon_button_base_container {\r\n  position: relative;\r\n}\r\n\r\n.icon_button_base_div {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 2rem;\r\n  padding: var(--spacing-none);\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  border-radius: var(--rounded-xs);\r\n  cursor: pointer;\r\n}\r\n\r\n.icon_button_base_div:hover {\r\n  background-color: var(--color-background-gray-subtle, #e3e8ef);\r\n}\r\n\r\n.icon_button_base_div:active {\r\n  background-color: transparent;\r\n}\r\n\r\n.icon_button_base_div.current {\r\n  background-color: var(--color-background-card, #ffffff);\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.icon_button_base_div.current:hover {\r\n  background-color: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.icon_button_base_div.current:active {\r\n  background-color: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.icon svg path[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon svg path[fill] {\r\n  fill: none; \r\n}\r\n\r\n.icon.current svg path[stroke] {\r\n  stroke: var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.icon.current svg path[fill] {\r\n  fill: var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  right: 100%;\r\n  top: -130%;\r\n}\r\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-icon-button-base',\r\n  styleUrl: 'gb-icon-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbIconButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() icon: string = '';\r\n  @Prop() label: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n  @State() showTooltip: boolean = false;\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.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"icon_button_base_container\">\r\n        {this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"bottom_center\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n        <div class={`icon_button_base_div ${this.current ? 'current' : ''}`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n          <div class={`icon ${this.current ? 'current' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-BbygHijY.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,g4sFAAg4sF;;MCSv4sF,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AANrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAiB,IAAI;AACzB,QAAA,IAAS,CAAA,SAAA,GAAuB,SAAS;AACzC,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AACpC,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAK,CAAA,KAAA,GAAc,SAAS;AAC5B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAgB,CAAA,gBAAA,GAAW,EAAE;AAC7B,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AACxB,QAAA,IAAK,CAAA,KAAA,GAAmB,eAAe;AACvC,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAgB,CAAA,gBAAA,GAAW,EAAE;AAC7B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC5B,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;AAC9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,EAAE;AAM5B,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAC3B,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAC5B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;AAChC,QAAA,IAAwB,CAAA,wBAAA,GAAW,EAAE;AACrC,QAAA,IAAyB,CAAA,yBAAA,GAAW,EAAE;AACtC,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAyGvC;AAtGC,IAAA,MAAM,eAAe,GAAA;;AACnB,QAAA,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,IAAI;;IAG3D,iBAAiB,GAAA;;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE;YAC5C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;;QAEhD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;;AAGlD,QAAA,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,GAAG,CAAC;AAE9C,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC5B,YAAA,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;QAGnC,IAAI,UAAU,EAAE;AACd,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAC3D,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;;;AAItC,IAAA,MAAM,QAAQ,CAAC,QAAgB,EAAE,IAA4B,EAAA;QAC3D,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;AACjC,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG;;aACpB;AACL,YAAA,IAAI,CAAC,eAAe,GAAG,GAAG;;;;IAK9B,gBAAgB,GAAA;QACd,OAAO;AACL,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;SAC9C;;IAGH,oBAAoB,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;AAC5B,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,mBAAmB;;;IAIhC,iBAAiB,GAAA;QACf,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ;;IAG1F,kBAAkB,GAAA;AAChB,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAA,CAAQ;;IAG7E,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EACnC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,YAAY,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAC9C,YAAY,EAAE,OAAO,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,EAAA,EAE9C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,SAAS,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,EAAE,CAAE,CAAA,EAAQ,CAAA,EAC7I,IAAI,CAAC,KAAK,KAAK,SAAS,KACvB,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EACvE,IAAI,CAAC,IAAI,KAAK,SAAS,KACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,QAAA,CAAU,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACP,EACA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAC9C,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAChD,CACJ,CACM,EACR,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAC5D,CAAwB,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAA,QAAA,EAAW,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAC5E,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CAC3B,CACd,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-button/gb-button.css?tag=gb-button&encapsulation=shadow","src/components/gb-button/gb-button.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n  display: flex;\r\n  align-items: center;\r\n  /* width: 100%; */\r\n}\r\n\r\n.button_wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n  transition:\r\n    background-color 0.15s,\r\n    color 0.15s;\r\n}\r\n\r\nbutton.only {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton.only.rounded{\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xxl {\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl {\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg {\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md {\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm {\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only {\r\n  padding: 0;\r\n}\r\n\r\nbutton.only.xxl {\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl {\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg {\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  /* padding: 0; */\r\n}\r\n\r\nbutton.only.sm {\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xxl .icon svg {\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg {\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #e21b2e);\r\n  --icon-color: var(--color-icon-inverse, #ffffff);\r\n  color: var(--color-text-inverse, #ffffff);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9aa4b2);\r\n  --icon-color: var(--color-icon, #4b5565);\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #e21b2e);\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n  --icon-color: var(--color-icon-brandRed, #e21b2e);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4b5565);\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #e21b2e);\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4b5565);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n  justify-content: flex-start;\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075db2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n  justify-content: flex-start;\r\n  color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive {\r\n  background-color: var(--color-background-danger, #b51726);\r\n  color: var(--color-text-inverse, #ffffff);\r\n  --icon-color: var(--color-icon-danger-inverse, #ffffff);\r\n}\r\n\r\nbutton.secondary_gray.destructive,\r\nbutton.secondary_color.destructive {\r\n  border: 1px solid var(--color-border-danger, #b51726);\r\n  --icon-color: var(--color-icon-danger, #b51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive {\r\n  --icon-color: var(--color-icon-danger, #b51726);\r\n}\r\n\r\nbutton.link_gray.destructive,\r\nbutton.link_color.destructive {\r\n  --icon-color: var(--color-icon-danger, #b51726);\r\n}\r\n\r\nbutton.secondary_gray.destructive,\r\nbutton.secondary_color.destructive,\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive,\r\nbutton.link_gray.destructive,\r\nbutton.link_color.destructive {\r\n  color: var(--color-text-danger, #b51726) !important;\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover {\r\n  background-color: var(--color-background-brandRed-hover, #cc1a2a);\r\n}\r\n\r\nbutton.primary:active {\r\n  background-color: var(--color-background-brandRed-pressed, #b51726);\r\n}\r\n\r\nbutton.secondary_gray:hover {\r\n  background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\nbutton.secondary_gray:active {\r\n  background-color: var(--color-background-gray-subtle, #e3e8ef);\r\n}\r\n\r\nbutton.secondary_color:hover {\r\n  background-color: var(--color-background-danger-subtlest, #fef1f2);\r\n}\r\n\r\nbutton.secondary_color:active {\r\n  background-color: var(--color-background-danger-subtler, #fde3e5);\r\n}\r\n\r\nbutton.tertiary_gray:hover {\r\n  background-color: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\nbutton.tertiary_gray:active {\r\n  background-color: var(--color-background-gray-subtle, #e3e8ef);\r\n}\r\n\r\nbutton.tertiary_color:hover {\r\n  background-color: var(--color-background-danger-subtlest, #fef1f2);\r\n}\r\n\r\nbutton.tertiary_color:active {\r\n  background-color: var(--color-background-danger-subtler, #fde3e5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active {\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_color:active {\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064e94);\r\n}\r\n\r\nbutton.primary.destructive:hover {\r\n  background-color: var(--color-background-danger-bold, #8c121d);\r\n}\r\n\r\nbutton.primary.destructive:active {\r\n  background-color: var(--color-background-brandRed-hover, #cc1a2a); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover,\r\nbutton.secondary_color.destructive:hover {\r\n  background-color: var(--color-background-danger-subtlest, #fef1f2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active,\r\nbutton.secondary_color.destructive:active {\r\n  background-color: var(--color-background-danger-subtler, #fde3e5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover,\r\nbutton.tertiary_color.destructive:hover {\r\n  background-color: var(--color-background-danger-subtlest, #fef1f2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active,\r\nbutton.tertiary_color.destructive:active {\r\n  background-color: var(--color-background-danger-subtler, #fde3e5);\r\n}\r\n\r\nbutton.link_gray.destructive:active {\r\n  color: var(--color-text-danger-bold, #8c121d);\r\n}\r\n\r\nbutton.link_color.destructive:active {\r\n  color: var(--color-text-warning-bold, #93370d);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled {\r\n  cursor: not-allowed;\r\n  /* pointer-events: none; */\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-btn-disabled, #eef2f6) !important;\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled {\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n  border-color: var(--color-border-disabled, #e3e8ef) !important;\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled {\r\n  --icon-color: var(--color-icon-disabled, #9aa4b2);\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n.btn_text {\r\n  white-space: nowrap;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.btn_text::first-letter {\r\n  text-transform: uppercase;\r\n}\r\n\r\n.loader {\r\n  --loader-thickness: 4px;\r\n  aspect-ratio: 1;\r\n  border-radius: 50%;\r\n  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);\r\n  animation: l13 1s infinite linear;\r\n  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--loader-thickness)), #000 0);\r\n}\r\n\r\n.loader.default.sm,\r\n.loader.default.md,\r\n.loader.default.lg,\r\n.loader.default.xl {\r\n  width: 1.8rem;\r\n}\r\n\r\n.loader.default.xxl {\r\n  width: 2rem;\r\n}\r\n\r\n.loader.only.sm,\r\n.loader.only.md,\r\n.loader.only.lg,\r\n.loader.only.xl {\r\n  width: 1.5rem;\r\n}\r\n\r\n.loader.only.xxl {\r\n  width: 1.7rem;\r\n}\r\n\r\n.loader.primary,\r\n.loader.primary.destructive {\r\n  background:\r\n    radial-gradient(farthest-side, var(--color-text-inverse, #ffffff) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,\r\n    conic-gradient(#0000 30%, var(--color-text-inverse, #ffffff));\r\n}\r\n\r\n.loader.secondary_gray,\r\n.loader.tertiary_gray {\r\n  background:\r\n    radial-gradient(farthest-side, var(--color-text, #4b5565) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,\r\n    conic-gradient(#0000 30%, var(--color-text, #4b5565));\r\n}\r\n\r\n.loader.secondary_color,\r\n.loader.tertiary_color {\r\n  background:\r\n    radial-gradient(farthest-side, var(--color-text-brandRed, #e21b2e) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,\r\n    conic-gradient(#0000 30%, var(--color-text-brandRed, #e21b2e));\r\n}\r\n\r\n.loader.destructive {\r\n  background:\r\n    radial-gradient(farthest-side, var(--color-text-danger-bold, #8c121d) 94%, #0000) top/var(--loader-thickness) var(--loader-thickness) no-repeat,\r\n    conic-gradient(#0000 30%, var(--color-text-danger-bold, #8c121d));\r\n}\r\n\r\n@keyframes l13 {\r\n  100% {\r\n    transform: rotate(1turn);\r\n  }\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  left: 0;\r\n}\r\n\r\n.tooltip.sm {\r\n  top: -120%;\r\n}\r\n\r\n.tooltip.md {\r\n  top: -110%;\r\n}\r\n\r\n.tooltip.lg {\r\n  top: -100%;\r\n}\r\n\r\n.tooltip.xl {\r\n  top: -90%;\r\n}\r\n\r\n.tooltip.xxl {\r\n  top: -75%;\r\n}\r\n","import { Component, Element, getAssetPath, h, Prop, State, Fragment, Method } from '@stencil/core';\r\nimport { ArrowPositions, GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes = 'xl';\r\n  @Prop() hierarchy: GeneralHierarchies = 'primary';\r\n  @Prop() icon: 'default' | 'only' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType = 'default';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string = '';\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string = '';\r\n  @Prop() tooltipText: string = '';\r\n  @Prop() arrow: ArrowPositions = 'bottom_center';\r\n  @Prop() event: boolean = false;\r\n  @Prop() rounded: boolean = false;\r\n  @Prop() iconLeadingStyle: string = '';\r\n  @Prop() iconLeadingType: string = '';\r\n  @Prop() iconTrailingStyle: string = '';\r\n  @Prop() iconTrailingType: string = '';\r\n  @Prop() iconConfig?: {\r\n    iconLeadingStyle: string,\r\n    iconLeadingType: string\r\n  }\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: string = '';\r\n  @State() tooltipShown: boolean = false;\r\n\r\n  @Method()\r\n  async getNativeButton(): Promise<HTMLButtonElement | null> {\r\n    return this.el.shadowRoot.querySelector('button') ?? null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el?.querySelector('p');\r\n\r\n    if (this.state === 'loading') {\r\n      buttonSlot.style.display = 'none';\r\n    }\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses() || '');\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      only: this.icon === 'only',\r\n      rounded: this.rounded && this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xxl':\r\n        return 'text-md-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_wrapper\">\r\n        <button\r\n          disabled={this.state === 'disabled'}\r\n          class={this.getButtonClasses()}\r\n          onMouseEnter={() => (this.tooltipShown = true)}\r\n          onMouseLeave={() => (this.tooltipShown = false)}\r\n        >\r\n          {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}`}></div>}\r\n          {this.state !== 'loading' && (\r\n            <>\r\n              {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n              {this.icon === 'default' && (\r\n                <div class={`btn_text`}>\r\n                  <slot></slot>\r\n                </div>\r\n              )}\r\n              {this.iconTrailing && this.renderTrailingIcon()}\r\n              {this.icon === 'only' && this.renderLeadingIcon()}\r\n            </>\r\n          )}\r\n        </button>\r\n        {this.tooltipText && this.icon === 'only' && this.tooltipShown && (\r\n          <gb-tooltip show-arrow={true} arrow={this.arrow} class={`tooltip ${this.size}`}>\r\n            <p slot=\"label\">{this.tooltipText}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CTdWQWa8.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,kx9EAAkx9E;;MCQny9E,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAc,SAAS;AAE5B,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACxB,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AA4CrC;IA1CC,MAAM,QAAQ,CAAC,QAAgB,EAAA;;QAE7B,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;QAEF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC;AAE9D,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,IAAG;AACvB,YAAA,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AAChC,SAAC,CAAC;;AAGF,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS;;AAExC,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAGnC,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAA,EAC/E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAQ,CAAA,EAC3G,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAwB,qBAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAE,CAAA,EAAG,EAAA,IAAI,CAAC,KAAK,CAAK,CAC/F,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-sidebar-child-item/gb-sidebar-child-item.css?tag=gb-sidebar-child-item&encapsulation=shadow","src/components/gb-sidebar-child-item/gb-sidebar-child-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.sidebar_child_item {\r\n  width: 100%;\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-3);\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  box-sizing: border-box;\r\n}\r\n\r\n.sidebar_child_item:hover {\r\n  background-color: var(--color-background-gray-subtler, #eef2f6);\r\n  cursor: pointer;\r\n}\r\n\r\n.sidebar_child_item:active {\r\n  background-color: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n/* Selected Styles */\r\n.sidebar_child_item.default.selected {\r\n  background-color: var(--color-background-information-subtle, #9ac7f4);\r\n}\r\n\r\n.sidebar_child_item.default.selected:hover {\r\n  background-color: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.sidebar_child_item.default.selected:active {\r\n  background-color: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.icon_and_label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.75rem;\r\n  flex: 1 0 0;\r\n}\r\n\r\n.icon.default path {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.default path[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.default path.has_opacity,\r\n.icon.default g.has_opacity,\r\n.icon.default circle.has_opacity {\r\n  opacity: 0;\r\n}\r\n\r\n.sidebar_child_item:hover .icon path {\r\n  stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\n.sidebar_child_item:active .icon path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item:active .icon path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.label.default {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.sidebar_child_item:hover .label {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.sidebar_child_item:active .label {\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .label {\r\n  color: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .icon path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .icon path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .icon path#Icon[stroke],\r\n.sidebar_child_item.selected .icon path#Accent[stroke],\r\n.sidebar_child_item.selected .icon circle[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .icon path#Icon[fill],\r\n.sidebar_child_item.selected .icon path#Accent[fill],\r\n.sidebar_child_item.selected .icon circle[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.sidebar_child_item.selected .icon path.has_opacity,\r\n.sidebar_child_item.selected .icon g.has_opacity,\r\n.sidebar_child_item.selected .icon circle.has_opacity {\r\n  opacity: 0.5;\r\n}\r\n","import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-sidebar-child-item',\r\n  styleUrl: 'gb-sidebar-child-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbSidebarChildItem {\r\n  @Prop() state: StateType = 'default';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() selected: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    // const iconPath = getAssetPath(getIconPath(iconName, 'duotone', 'rounded'));\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    const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n    gWithOpacity.forEach(g => {\r\n      g.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  componentDidLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`sidebar_child_item ${this.state} ${this.selected ? 'selected' : ''}`}>\r\n        <div class=\"icon_and_label\">\r\n          <div class={`icon ${this.state} ${this.selected ? 'selected' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n          <p class={`label text-md-medium ${this.selected ? 'selected' : ''} ${this.state}`}>{this.label}</p>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-DNoYOHYU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-table-header/gb-table-header.css?tag=gb-table-header&encapsulation=shadow","src/components/gb-table-header/gb-table-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.table_header_div {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  padding: var(--spacing-5) var(--spacing-6);\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: var(--spacing-5);\r\n  align-self: stretch;\r\n  background: var(--color-background-card, #ffffff);\r\n  border-bottom: 1px solid var(--color-border-subtle, #cdd5df);\r\n  overflow: visible;\r\n}\r\n\r\n.table_heading {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.date_filters {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  min-width: 0;\r\n}\r\n\r\n.date_dropdown,\r\n.date_input {\r\n  width: 100%;\r\n  max-width: 13rem;\r\n  min-width: 0;\r\n}\r\n\r\n.actions {\r\n  display: flex;\r\n  max-width: 50.25rem;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.actions.full_width {\r\n  max-width: none;\r\n}\r\n\r\n.input_field {\r\n  flex-grow: 1;\r\n  width: 100%;\r\n  max-width: 20rem;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  padding: 0rem 0rem 0rem var(--spacing-none);\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n}\r\n\r\n.export {\r\n  position: relative;\r\n  overflow: visible;\r\n}\r\n\r\n.dropdown {\r\n  position: absolute;\r\n  z-index: 10;\r\n  top: calc(100% + 0.5rem);\r\n}\r\n\r\n.dropdown.left {\r\n  left: 0;\r\n}\r\n\r\n.dropdown.right {\r\n  right: 0;\r\n}\r\n\r\n.refresh_button {\r\n  width: 2.5rem;\r\n}\r\n\r\n/* Breakpoints (Responsiveness) */\r\n/* Mobile */\r\n@media (max-width: 550px) {\r\n  .table_header_content {\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n  }\r\n\r\n  .actions {\r\n    flex-direction: column;\r\n    width: 100%;\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .table_header_div {\r\n    flex-direction: column;\r\n  }\r\n\r\n  .date_filters {\r\n    width: 100%;\r\n  }\r\n\r\n  .date_dropdown,\r\n  .date_input {\r\n    width: 100%;\r\n    max-width: none;\r\n  }\r\n\r\n  .input_field {\r\n    max-width: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 390px) {\r\n  .date_filters {\r\n    display: flex;\r\n    width: 100%;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core';\r\nimport { CloseButtonPositions, StateEnum, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-table-header',\r\n  styleUrl: 'gb-table-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbTableHeader {\r\n  @Prop() showFilter: boolean = false;\r\n  @Prop() showColumnOptions: boolean = false;\r\n  @Prop() tableHeading: boolean = false;\r\n  @Prop() tableHeadingLabel: string = '';\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() showExport: boolean = false;\r\n  @Prop() showRefreshButton: boolean = false;\r\n  @Prop() showLayoutToggle: boolean = false;\r\n  @Prop() filterState: StateType;\r\n  @Prop() filterCount: number = 0;\r\n  @Prop() showEntireData: boolean = false;\r\n  @Prop() exportButtonState: StateType = 'default';\r\n  @Prop() pdfState: StateEnum = StateEnum.Default;\r\n  @Prop() csvState: StateEnum = StateEnum.Default;\r\n  @Prop() showDateFilter: boolean = false;\r\n  @State() items = [\r\n    { label: 'grid', current: false, icon: 'assets/grid-view.svg' },\r\n    { label: 'list', current: true, icon: 'assets/left-to-right-list-dash.svg' },\r\n  ];\r\n  @Prop() mode: 'single' | 'range' = 'single';\r\n  @Prop() format: string = 'M j, Y';\r\n  @Prop() datePickerDisabled: boolean = false;\r\n  @Prop() datePickerPlaceholder: string = 'Start date - end date';\r\n  @Prop() datePickerIconPosition: CloseButtonPositions = 'left';\r\n  @Prop() datePickerDropdownPosition: CloseButtonPositions = 'left';\r\n  @Prop() exportDropdownPosition: CloseButtonPositions = 'right';\r\n  @Prop() enableTime: boolean = false;\r\n  @Prop() noCalendar: boolean = false;\r\n  @Prop() twentyfourHr: boolean = false;\r\n  @Prop() showMonths: number = 2;\r\n  @Prop() inputPlaceholder: string = 'Search';\r\n  @State() width: number = window.innerWidth;\r\n  @State() buttonIcon: 'default' | 'only';\r\n  @State() showExportDropdown: boolean = false;\r\n  @State() isDatePickerShown: boolean = false;\r\n  @State() isDatePickerFullWidth: boolean = false;\r\n  @Event() inputValueChanged: EventEmitter<void>;\r\n  @Event() filterButtonClicked: EventEmitter<void>;\r\n  @Event() exportClicked: EventEmitter<{ dataType: string; exportType: string }>;\r\n  @Event() refreshButtonClicked: EventEmitter<void>;\r\n  @Event() layoutButtonClicked: EventEmitter<string>;\r\n  @Event() columnOptionsButtonClicked: EventEmitter<string>;\r\n  @Event({ bubbles: true, composed: true }) dateChange: EventEmitter<string | string[]>;\r\n  @Element() el: HTMLElement;\r\n\r\n  exportDropdown!: HTMLElement;\r\n\r\n  isMobile = this.width < 768;\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleClickOutside.bind(this));\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.updateParameters();\r\n    window.addEventListener('resize', this.handleResize.bind(this));\r\n  }\r\n\r\n  // extractDropdownItemSelected(item) {\r\n  //   if (item.detail === 'Custom') {\r\n  //     this.isDatePickerShown = true;\r\n  //   } else {\r\n  //     this.isDatePickerShown = false;\r\n  //   }\r\n  // }\r\n\r\n  emitDateSelected(date) {\r\n    this.dateChange.emit(date.detail);\r\n  }\r\n\r\n  toggleDropdown() {\r\n    this.showExportDropdown = !this.showExportDropdown;\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleResize() {\r\n    this.width = window.innerWidth;\r\n    this.updateParameters();\r\n  }\r\n\r\n  private updateParameters() {\r\n    this.buttonIcon = this.width < 1007 ? 'only' : 'default';\r\n    this.isDatePickerFullWidth = this.width <= 700 ? true : false;\r\n  }\r\n\r\n  emitValue(inputValue) {\r\n    this.inputValueChanged.emit(inputValue);\r\n  }\r\n\r\n  onFilterButtonClicked() {\r\n    this.filterButtonClicked.emit();\r\n  }\r\n\r\n  emitSelection(selection) {\r\n    this.exportClicked.emit(selection);\r\n  }\r\n\r\n  onRefreshButtonClicked() {\r\n    this.refreshButtonClicked.emit();\r\n  }\r\n\r\n  onColumnOptionsButtonClicked() {\r\n    this.columnOptionsButtonClicked.emit();\r\n  }\r\n\r\n  onLayoutButtonClicked(layout) {\r\n    this.layoutButtonClicked.emit(layout.detail);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.showExportDropdown && !this.el.contains(event.target as Node)) {\r\n      this.showExportDropdown = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n    window.removeEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"table_header_div\">\r\n        {this.tableHeading && <p class=\"table_heading text-lg-semi-bold\">{this.tableHeadingLabel}</p>}\r\n        {this.showDateFilter && (\r\n          <div class=\"date_filters\">\r\n            <div class=\"date_input\">\r\n              <gb-date-picker\r\n                mode={this.mode}\r\n                disabled={this.datePickerDisabled}\r\n                format={this.format}\r\n                icon-position={this.datePickerIconPosition}\r\n                placeholder={this.datePickerPlaceholder}\r\n                dropdown-alignment={this.datePickerDropdownPosition}\r\n                enable-time={this.enableTime}\r\n                no-calendar={this.noCalendar}\r\n                twentyfour-hr={this.twentyfourHr}\r\n                show-months={this.showMonths}\r\n                full-width={this.isDatePickerFullWidth}\r\n                onDateChange={this.emitDateSelected.bind(this)}\r\n              ></gb-date-picker>\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class={`actions ${!this.showDateFilter && !this.tableHeading ? 'full_width' : ''}`}>\r\n          {this.showSearch && (\r\n            <div class=\"input_field\">\r\n              <gb-input-field\r\n                size=\"sm\"\r\n                type=\"icon_leading\"\r\n                icon-swap=\"assets/search-01.svg\"\r\n                placeholder={this.inputPlaceholder}\r\n                enable-cancel-button-function={true}\r\n                onInputValueChanged={this.emitValue.bind(this)}\r\n              ></gb-input-field>\r\n            </div>\r\n          )}\r\n          <div class=\"action\">\r\n            {this.showLayoutToggle && <gb-button-group items={this.items} icon=\"only\" onOptionChange={this.onLayoutButtonClicked.bind(this)}></gb-button-group>}\r\n            {this.showColumnOptions && this.width > 768 && (\r\n              <gb-button\r\n                size=\"md\"\r\n                hierarchy=\"secondary_gray\"\r\n                icon={this.width <= 1007 ? 'only' : 'default'}\r\n                icon-leading={true}\r\n                icon-leading-swap=\"assets/column-insert.svg\"\r\n                onClick={() => this.onColumnOptionsButtonClicked()}\r\n              >\r\n                <p>Columns</p>\r\n              </gb-button>\r\n            )}\r\n            {this.showFilter && (\r\n              <gb-filter-button state={this.filterState} icon-only={this.width <= 1007 ? true : false} onClick={() => this.onFilterButtonClicked()}>\r\n                <p slot=\"filter_count\">{this.filterCount}</p>\r\n              </gb-filter-button>\r\n            )}\r\n            {this.showExport && (\r\n              <div class=\"export\">\r\n                <gb-button\r\n                  size=\"md\"\r\n                  state={this.exportButtonState}\r\n                  hierarchy=\"secondary_gray\"\r\n                  icon={this.width <= 1007 ? 'only' : 'default'}\r\n                  icon-leading={true}\r\n                  icon-leading-swap=\"assets/file-export.svg\"\r\n                  icon-trailing={this.width <= 1007 ? false : true}\r\n                  icon-trailing-swap=\"assets/arrow-down-01.svg\"\r\n                  onClick={e => {\r\n                    e.stopPropagation();\r\n                    this.toggleDropdown();\r\n                  }}\r\n                >\r\n                  <p>Export</p>\r\n                </gb-button>\r\n                {this.showExportDropdown && (\r\n                  <gb-export-dropdown\r\n                    ref={el => (this.exportDropdown = el)}\r\n                    show-entire-data={this.showEntireData}\r\n                    pdf-state={this.pdfState}\r\n                    csv-state={this.csvState}\r\n                    onExportClicked={event => this.emitSelection(event.detail)}\r\n                    class={`dropdown ${this.exportDropdownPosition}`}\r\n                  ></gb-export-dropdown>\r\n                )}\r\n              </div>\r\n            )}\r\n            {this.showRefreshButton && (\r\n              <div class=\"refresh_button\">\r\n                <gb-button\r\n                  size=\"md\"\r\n                  hierarchy=\"secondary_gray\"\r\n                  icon={this.width <= 1007 ? 'only' : 'default'}\r\n                  icon-leading={true}\r\n                  icon-leading-swap=\"assets/refresh.svg\"\r\n                  onClick={() => this.onRefreshButtonClicked()}\r\n                ></gb-button>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}