globuswebcomponents 2.13.3 → 2.13.5

package/dist/types/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.d.ts

@@ -1,4 +1,4 @@
-import { GeneralBackgroundCategories } from "../../models/reusableModels";
+import { GeneralBackgroundCategories } from '../../models/reusableModels';
 export declare class GbComplexSecondarySideBarItem {
     state: 'default' | 'active';
     type: 'full_with_label' | 'icon_only';

package/dist/types/components/gb-filter-modal/gb-filter-modal.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FilterConfig } from '../../models/reusableModels';
 export declare class GbFilterModal {
-    filterConfig: FilterConfig;
+    filterConfig?: FilterConfig;
     formValues: Record<string, any>;
     renderKey: number;
     applyFilters: EventEmitter<Record<string, any>>;

package/dist/types/components/gb-input-field/gb-input-field.d.ts

@@ -23,7 +23,6 @@ export declare class GbInputField {
     enableCancelButtonFunction: boolean;
     options: any[];
     idOfInput: string;
-    labelText: string;
     isReadOnly: boolean;
     results: any[];
     menuPosition: 'top' | 'bottom';

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

@@ -30,7 +30,7 @@ export declare class GbSidebar {
     complexSidebarData: any;
     activeIndex: number;
     activePrimaryItem: string;
-    activeSecondaryItem: string;
+    activeSecondaryIndex: number;
     hasInfo: boolean;
     email: string;
     phoneNumber: string;
@@ -39,11 +39,11 @@ export declare class GbSidebar {
     el: HTMLElement;
     leadingIconSvg: string;
     simpleSidebarItemClicked: EventEmitter<number>;
-    secondaryItemClicked: EventEmitter<{
+    primaryItemClicked: EventEmitter<{
         index: number;
         label: string;
     }>;
-    primaryItemClicked: EventEmitter<{
+    secondaryItemClicked: EventEmitter<{
         index: number;
         label: string;
     }>;

package/dist/types/components.d.ts

@@ -672,20 +672,29 @@ export namespace Components {
         "state": 'default' | 'active';
     }
     interface GbComplexSecondarySideBarItem {
+        /**
+          * @default 'colored_background'
+         */
         "category": GeneralBackgroundCategories;
         /**
           * @default ''
          */
         "icon": string;
         /**
-          * @default 'Appraisal'
+          * @default ''
          */
         "label": string;
         /**
           * @default false
          */
         "showTooltip": boolean;
+        /**
+          * @default 'default'
+         */
         "state": 'default' | 'active';
+        /**
+          * @default 'full_with_label'
+         */
         "type": 'full_with_label' | 'icon_only';
     }
     interface GbContactHelpDropdown {
@@ -1055,7 +1064,7 @@ export namespace Components {
         "state": StateType;
     }
     interface GbFilterModal {
-        "filterConfig": FilterConfig;
+        "filterConfig"?: FilterConfig;
     }
     interface GbHeader {
         /**
@@ -1408,16 +1417,18 @@ export namespace Components {
           * @default ''
          */
         "label": string;
-        "labelText": string;
         /**
           * @default false
          */
         "loading": boolean;
         "maxLength": number;
+        /**
+          * @default 'bottom'
+         */
         "menuPosition": 'top' | 'bottom';
         "minLength": number;
         /**
-          * @default [     // { objectName: '+296', objectValue: 'john.doe@example.com' },     // { objectName: '+297', objectValue: 'john.doe@example.com' },     // { objectName: '+298', objectValue: 'john.doe@example.com' },     // { objectName: '+299', objectValue: 'john.doe@example.com' },     '+234',     '+224',     '+1 246',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
+          * @default [     // { objectName: '+296', objectValue: 'john.doe@example.com' },     // { objectName: '+297', objectValue: 'john.doe@example.com' },     // { objectName: '+298', objectValue: 'john.doe@example.com' },     // { objectName: '+299', objectValue: 'john.doe@example.com' },     // '+234',     // '+224',     // '+1 246',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
          */
         "options": any[];
         /**
@@ -1429,7 +1440,7 @@ export namespace Components {
          */
         "results": any[];
         /**
-          * @default true
+          * @default false
          */
         "showCountryIcon": boolean;
         /**
@@ -1455,9 +1466,6 @@ export namespace Components {
         "size": GeneralSizes;
         "state": 'default' | 'active' | 'disabled';
         "type": InputFieldTypes;
-        /**
-          * @default [     // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },     // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },     // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },     // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },     // 10,   ]
-         */
         "value": any;
     }
     interface GbLogo {
@@ -1899,19 +1907,19 @@ export namespace Components {
     interface GbSidebar {
         "activeIndex": number;
         /**
-          * @default 'Staff'
+          * @default ''
          */
         "activePrimaryItem": string;
         /**
-          * @default 'Attendance Tracking'
+          * @default 0
          */
-        "activeSecondaryItem": string;
+        "activeSecondaryIndex": number;
         /**
           * @default 'colored_background'
          */
         "category": GeneralBackgroundCategories;
         /**
-          * @default {     // Recruitment: {     //   icon: 'assets/user-search-01.svg',     //   items: [     //     { label: 'Overview', icon: 'assets/star.svg' },     //     { label: 'My Profile', icon: 'assets/star.svg' },     //     { label: 'Appraisal', icon: 'assets/star.svg' },     //     { label: 'Staff Management', icon: 'assets/star.svg' },     //     { label: 'Leave Management', icon: 'assets/star.svg' },     //     { label: 'Resignation Portal', icon: 'assets/star.svg' },     //   ],     // },     // Staff: {     //   icon: 'assets/user-account.svg',     //   items: [     //     { label: 'Staff Overview', icon: 'assets/star.svg' },     //     { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'New', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },   }
+          * @default {     // Recruitment: {     //   icon: 'assets/user-search-01.svg',     //   items: [     //     { label: 'Overview', icon: 'assets/sent.svg' },     //     { label: 'My Profile', icon: 'assets/star.svg' },     //     { label: 'Appraisal', icon: 'assets/star.svg' },     //     { label: 'Staff Management', icon: 'assets/star.svg' },     //     { label: 'Leave Management', icon: 'assets/star.svg' },     //     { label: 'Resignation Portal', icon: 'assets/star.svg' },     //   ],     // },     // Staff: {     //   icon: 'assets/user-account.svg',     //   items: [     //     { label: 'Staff Overview', icon: 'assets/star.svg' },     //     { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'New', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },   }
          */
         "complexSidebarData": any;
         /**
@@ -2252,7 +2260,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,     //   cellComponent: 'gb-avatar-label-group',     //   cellProps: (row) => ({     //     size: 'sm',     //     text: true     //   }),     //   cellSlots: {     //     named:{      //       name: {     //         tag: 'p',     //         content: row => row.name     //       },     //       initials: {     //         tag: 'h1',     //         content: row => row.name.split(' ').map((nm) => nm.charAt(0))     //       },     //       supporting_text: {     //         tag: 'p',     //         content: row => row.role     //       }     //     }     //   },     //   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[];
         /**
@@ -2557,6 +2565,9 @@ export namespace Components {
           * @default false
          */
         "actions": boolean;
+        /**
+          * @default 'desktop'
+         */
         "breakpoint": BreakPoints;
         "color": GeneralColors;
         /**
@@ -3871,8 +3882,8 @@ declare global {
     };
     interface HTMLGbSidebarElementEventMap {
         "simpleSidebarItemClicked": number;
-        "secondaryItemClicked": { index: number; label: string };
         "primaryItemClicked": { index: number; label: string };
+        "secondaryItemClicked": { index: number; label: string };
         "sidebarState": string;
     }
     interface HTMLGbSidebarElement extends Components.GbSidebar, HTMLStencilElement {
@@ -5096,20 +5107,29 @@ declare namespace LocalJSX {
         "state"?: 'default' | 'active';
     }
     interface GbComplexSecondarySideBarItem {
+        /**
+          * @default 'colored_background'
+         */
         "category"?: GeneralBackgroundCategories;
         /**
           * @default ''
          */
         "icon"?: string;
         /**
-          * @default 'Appraisal'
+          * @default ''
          */
         "label"?: string;
         /**
           * @default false
          */
         "showTooltip"?: boolean;
+        /**
+          * @default 'default'
+         */
         "state"?: 'default' | 'active';
+        /**
+          * @default 'full_with_label'
+         */
         "type"?: 'full_with_label' | 'icon_only';
     }
     interface GbContactHelpDropdown {
@@ -5852,12 +5872,14 @@ declare namespace LocalJSX {
           * @default ''
          */
         "label"?: string;
-        "labelText"?: string;
         /**
           * @default false
          */
         "loading"?: boolean;
         "maxLength"?: number;
+        /**
+          * @default 'bottom'
+         */
         "menuPosition"?: 'top' | 'bottom';
         "minLength"?: number;
         "onButtonClicked"?: (event: GbInputFieldCustomEvent<void>) => void;
@@ -5866,7 +5888,7 @@ declare namespace LocalJSX {
         "onOptionChanged"?: (event: GbInputFieldCustomEvent<any>) => void;
         "onPlusButtonClicked"?: (event: GbInputFieldCustomEvent<void>) => void;
         /**
-          * @default [     // { objectName: '+296', objectValue: 'john.doe@example.com' },     // { objectName: '+297', objectValue: 'john.doe@example.com' },     // { objectName: '+298', objectValue: 'john.doe@example.com' },     // { objectName: '+299', objectValue: 'john.doe@example.com' },     '+234',     '+224',     '+1 246',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
+          * @default [     // { objectName: '+296', objectValue: 'john.doe@example.com' },     // { objectName: '+297', objectValue: 'john.doe@example.com' },     // { objectName: '+298', objectValue: 'john.doe@example.com' },     // { objectName: '+299', objectValue: 'john.doe@example.com' },     // '+234',     // '+224',     // '+1 246',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
          */
         "options"?: any[];
         /**
@@ -5878,7 +5900,7 @@ declare namespace LocalJSX {
          */
         "results"?: any[];
         /**
-          * @default true
+          * @default false
          */
         "showCountryIcon"?: boolean;
         /**
@@ -5904,9 +5926,6 @@ declare namespace LocalJSX {
         "size"?: GeneralSizes;
         "state"?: 'default' | 'active' | 'disabled';
         "type"?: InputFieldTypes;
-        /**
-          * @default [     // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },     // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },     // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },     // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },     // 10,   ]
-         */
         "value"?: any;
     }
     interface GbLogo {
@@ -6362,19 +6381,19 @@ declare namespace LocalJSX {
     interface GbSidebar {
         "activeIndex"?: number;
         /**
-          * @default 'Staff'
+          * @default ''
          */
         "activePrimaryItem"?: string;
         /**
-          * @default 'Attendance Tracking'
+          * @default 0
          */
-        "activeSecondaryItem"?: string;
+        "activeSecondaryIndex"?: number;
         /**
           * @default 'colored_background'
          */
         "category"?: GeneralBackgroundCategories;
         /**
-          * @default {     // Recruitment: {     //   icon: 'assets/user-search-01.svg',     //   items: [     //     { label: 'Overview', icon: 'assets/star.svg' },     //     { label: 'My Profile', icon: 'assets/star.svg' },     //     { label: 'Appraisal', icon: 'assets/star.svg' },     //     { label: 'Staff Management', icon: 'assets/star.svg' },     //     { label: 'Leave Management', icon: 'assets/star.svg' },     //     { label: 'Resignation Portal', icon: 'assets/star.svg' },     //   ],     // },     // Staff: {     //   icon: 'assets/user-account.svg',     //   items: [     //     { label: 'Staff Overview', icon: 'assets/star.svg' },     //     { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'New', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },   }
+          * @default {     // Recruitment: {     //   icon: 'assets/user-search-01.svg',     //   items: [     //     { label: 'Overview', icon: 'assets/sent.svg' },     //     { label: 'My Profile', icon: 'assets/star.svg' },     //     { label: 'Appraisal', icon: 'assets/star.svg' },     //     { label: 'Staff Management', icon: 'assets/star.svg' },     //     { label: 'Leave Management', icon: 'assets/star.svg' },     //     { label: 'Resignation Portal', icon: 'assets/star.svg' },     //   ],     // },     // Staff: {     //   icon: 'assets/user-account.svg',     //   items: [     //     { label: 'Staff Overview', icon: 'assets/star.svg' },     //     { label: 'Payroll Management', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'Attendance', icon: 'assets/dashboard-square-03.svg' },     //     { label: 'New', icon: 'assets/dashboard-square-03.svg' },     //   ],     // },   }
          */
         "complexSidebarData"?: any;
         /**
@@ -6722,7 +6741,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,     //   cellComponent: 'gb-avatar-label-group',     //   cellProps: (row) => ({     //     size: 'sm',     //     text: true     //   }),     //   cellSlots: {     //     named:{      //       name: {     //         tag: 'p',     //         content: row => row.name     //       },     //       initials: {     //         tag: 'h1',     //         content: row => row.name.split(' ').map((nm) => nm.charAt(0))     //       },     //       supporting_text: {     //         tag: 'p',     //         content: row => row.role     //       }     //     }     //   },     //   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[];
         /**
@@ -7047,6 +7066,9 @@ declare namespace LocalJSX {
           * @default false
          */
         "actions"?: boolean;
+        /**
+          * @default 'desktop'
+         */
         "breakpoint"?: BreakPoints;
         "color"?: GeneralColors;
         /**

package/package.json

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

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

@@ -1 +0,0 @@
-{"file":"p-BAz_Vt1i.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,ynxEAAynxE;;MCSrpxE,6BAA6B,iBAAAA,kBAAA,CAAA,MAAA,6BAAA,SAAAC,CAAA,CAAA;AAN1C,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUY,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAC3B,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACA,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5C,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AAwCvC;IAtCG,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,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;QACF,QACE,4DAAK,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,4BAAA,EAA+B,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,EAChF,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAA,EAE9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAA,CAAQ,CACrF,CACF,EACL,IAAI,CAAC,IAAI,KAAK,iBAAiB,KAC9B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,gBAAgB,GAAG,mBAAmB,CAAE,CAAA,EAAA,EAAG,IAAI,CAAC,KAAK,CAAK,CACvI,CACP,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,WAAW,KAC5C,CAAwB,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EACxD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,CACG,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css?tag=gb-complex-secondary-side-bar-item&encapsulation=shadow","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  position: relative;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.icon{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.container.full_with_label {\r\n  width: 14.875rem;\r\n}\r\n\r\n.container.icon_only {\r\n  width: fit-content;\r\n}\r\n\r\n.secondary_side_bar_item_div {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-3);\r\n  border-radius: var(--rounded-sm);\r\n  padding: var(--spacing-2) var(--spacing-4);\r\n  cursor: pointer;\r\n}\r\n\r\n.secondary_side_bar_item_div.icon_only {\r\n  width: fit-content;\r\n}\r\n\r\n/* Category Styles */\r\n.secondary_side_bar_item_div.colored_background.default,\r\n.secondary_side_bar_item_div.plain_background.default {\r\n  background: transparent;\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.default:hover {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.active {\r\n  background: var(--color-background-information-subtle, #9ac7f4);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.default:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.active {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active path#Icon[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n  fill: transparent;\r\n}\r\n\r\n/* Text Styles */\r\n.label_text {\r\n  max-width: 100%;\r\n  overflow-x: hidden;\r\n  overflow-y: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.label_text.colored_background,\r\n.label_text.plain_background {\r\n  color: var(--color-text, #4b5565); /**/\r\n}\r\n\r\n.label_text.colored_background.active,\r\n.label_text.plain_background.active {\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  top: 0rem;\r\n  left: 4.8rem;\r\n}\r\n","import { Component, Element, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-complex-secondary-side-bar-item',\r\n    styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbComplexSecondarySideBarItem {\r\n    @Prop() state: 'default' | 'active';\r\n    @Prop() type: 'full_with_label' | 'icon_only';\r\n    @Prop() category: GeneralBackgroundCategories;\r\n    @Prop() label: string = 'Appraisal';\r\n    @Prop() icon: string = '';\r\n    @Prop({ mutable: true }) showTooltip: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @State() leadingIconSvg: string = '';\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    componentDidLoad() {\r\n      this.loadIcon(this.icon);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`container ${this.type}`}>\r\n            <div\r\n              class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n              onMouseEnter={() => (this.showTooltip = true)}\r\n              onMouseLeave={() => (this.showTooltip = false)}\r\n            >\r\n              <div class=\"icon\">\r\n                <div class=\"icon_container\">\r\n                  <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n                </div>\r\n              </div>\r\n              {this.type === 'full_with_label' && (\r\n                <div class=\"text\">\r\n                  <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n                </div>\r\n              )}\r\n              {this.type === 'icon_only' && this.showTooltip && (\r\n                <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n                  <p slot=\"label\">{this.label}</p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n    }\r\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-BT3qlXvE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-toast/gb-toast.css?tag=gb-toast&encapsulation=shadow","src/components/gb-toast/gb-toast.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.toast_div{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-4);\r\n    position: relative;\r\n}\r\n\r\n/* Toast Size Styles */\r\n.toast_div.floating{\r\n    border-radius: var(--rounded-md);\r\n    box-shadow: var(--shadow-xs);\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n}\r\n\r\n.container.desktop{\r\n    display: flex;\r\n    padding: 0.75rem 2rem;\r\n    width: 100%;\r\n}\r\n\r\n.container.mobile{\r\n    width: 100%;\r\n    display: flex;\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.full_width_content.desktop{\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.full_width_content.mobile{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.75rem;\r\n}\r\n\r\n.inner_content.desktop{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-4);\r\n    flex-grow: 1;\r\n}\r\n\r\n.inner_content.mobile{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--spacing-4);\r\n    flex-grow: 1;\r\n}\r\n\r\n.icon_container{\r\n    width: fit-content;\r\n    display: flex;\r\n    align-self: stretch;\r\n}\r\n\r\n.icon_container.no_supporting_text{\r\n    align-self: center;\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    flex-grow: 1;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.content.floating{\r\n    flex-direction: column;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.content.full_width{\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.content.actions.desktop{\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.content.actions.mobile{\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n}\r\n\r\n.text.floating{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.text.full_width{\r\n    display: flex;\r\n    gap: 0.38rem;\r\n    align-items: center;\r\n}\r\n\r\n.text.mobile{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n}\r\n\r\n.text.no_supporting_text{\r\n    flex-direction: row;\r\n}\r\n\r\n.actions{\r\n    display: flex;\r\n    gap: var(--spacing-5);\r\n}\r\n\r\n.actions.floating{\r\n    display: flex;\r\n}\r\n\r\n.actions.full_width{\r\n    width: fit-content;\r\n}\r\n\r\n.actions.only_actions{\r\n    width: fit-content;\r\n}\r\n\r\n.actions.full_width.mobile{\r\n    margin-left: 2.8rem;\r\n}\r\n\r\n/* Toast Color Styles */\r\n.toast_div.floating.default{\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.toast_div.floating.gray{\r\n    border: 1px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.toast_div.floating.information{\r\n    border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.toast_div.floating.error{\r\n    border: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n    background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.toast_div.floating.warning{\r\n    border: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n    background: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n.toast_div.floating.success{\r\n    border: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n    background: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.toast_div.full_width.default{\r\n    border-top: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.toast_div.full_width.gray{\r\n    border-top: 1px solid var(--color-border-subtle, #CDD5DF);\r\n    border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.toast_div.full_width.information{\r\n    border-top: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n    border-bottom: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.toast_div.full_width.error{\r\n    border-top: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n    border-bottom: 1px solid var(--color-border-danger-subtle, #F9B4BA);\r\n    background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\n.toast_div.full_width.warning{\r\n    border-top: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n    border-bottom: 1px solid var(--color-border-warning-subtle, #FEDF89);\r\n    background: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n.toast_div.full_width.success{\r\n    border-top: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n    border-bottom: 1px solid var(--color-border-success-subtle, #A9EFC5);\r\n    background: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.svg_icon.default path,\r\n.svg_icon.gray path{\r\n    fill: var(--color-icon, #4B5565);\r\n}\r\n\r\n.svg_icon.information path{\r\n    fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.svg_icon.error path{\r\n    fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.svg_icon.warning path{\r\n    fill: var(--color-icon-warning, #DC6803);\r\n}\r\n\r\n.svg_icon.success path{\r\n    fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.main_text_default,\r\n.main_text_gray{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.main_text_information{\r\n    color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.main_text_error{\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.main_text_warning{\r\n    color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.main_text_success{\r\n    color: var(--color-text-success, #079455);\r\n}\r\n\r\n.supporting_text_default,\r\n.supporting_text_gray{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.supporting_text_information{\r\n    color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.supporting_text_error{\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.supporting_text_warning{\r\n    color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.supporting_text_success{\r\n    color: var(--color-text-success, #079455);\r\n}\r\n\r\n.toast_div.full_width.desktop{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n@media (max-width: 468px) {\r\n    .actions.floating{\r\n        width: 100%;\r\n    }\r\n}","import { Component, Prop, h, Fragment, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { BreakPoints, GeneralColors, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-toast',\r\n  styleUrl: 'gb-toast.css',\r\n  shadow: true,\r\n})\r\nexport class GbToast {\r\n  @Prop({ mutable: true }) color: GeneralColors;\r\n  @Prop() mainText: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @Prop() size: 'floating' | 'full_width';\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() icon: string = '';\r\n  @Prop() xCloseButton: boolean = true;\r\n  @Prop() actions: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() firstActionText: string = 'View changes';\r\n  @Prop() secondActionText: string = 'Dismiss';\r\n  @State() internalColor: GeneralColors;\r\n  @State() internalMainText: string = '';\r\n  @State() internalSupportingText: string = '';\r\n  @State() width: number = window.innerWidth;\r\n  @Element() el: HTMLElement;\r\n  @Event() close: EventEmitter<void>;\r\n  @Event() firstActionClicked: EventEmitter<void>;\r\n  @Event() secondActionClicked: EventEmitter<void>;\r\n\r\n  @Watch('mainText')\r\n  onMainTextChange(newValue: string, _oldValue: string) {\r\n    this.internalMainText = newValue;\r\n  }\r\n\r\n  @Watch('supportingText')\r\n  onSupportingTextChange(newValue: string, _oldValue: string) {\r\n    this.internalSupportingText = newValue;\r\n  }\r\n\r\n  @Watch('color')\r\n  onColorChange(newValue: GeneralColors, _oldValue: GeneralColors) {\r\n    this.internalColor = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalColor = this.color;\r\n    this.internalMainText = this.mainText;\r\n    this.internalSupportingText = this.supportingText;\r\n\r\n    window.addEventListener('resize', this.handleResize);\r\n    this.updateToastBreakpoint();\r\n  }\r\n\r\n  private handleResize = () => {\r\n    this.width = window.innerWidth;\r\n    this.updateToastBreakpoint();\r\n  };\r\n\r\n  updateToastBreakpoint() {\r\n    this.breakpoint = this.width < 730 ? 'mobile' : 'desktop';\r\n  }\r\n\r\n  closeToast() {\r\n    this.close.emit();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`toast_div ${this.internalColor} ${this.size} ${this.breakpoint}`}>\r\n        {this.size === 'floating' && (\r\n          <>\r\n            <div class={`icon_container ${this.showSupportingText ? '' : 'no_supporting_text'}`}>\r\n              {this.internalColor === 'success' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"29\" viewBox=\"0 0 28 29\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n                  <path\r\n                    opacity=\"0.4\"\r\n                    d=\"M14.0666 2.24988H14.0665H13.9331H13.9331C11.3773 2.24986 9.36985 2.24985 7.80253 2.46057C6.19643 2.67651 4.92213 3.12805 3.9209 4.12928C2.91967 5.13051 2.46813 6.40481 2.2522 8.01091C2.04148 9.57822 2.04149 11.5857 2.0415 14.1415V14.1415V14.2749V14.2749C2.04149 16.8307 2.04148 18.8382 2.2522 20.4055C2.46813 22.0116 2.91967 23.2859 3.9209 24.2871C4.92213 25.2884 6.19643 25.7399 7.80253 25.9559C9.36985 26.1666 11.3773 26.1666 13.9331 26.1665H14.0665C16.6223 26.1666 18.6298 26.1666 20.1971 25.9559C21.8032 25.7399 23.0775 25.2884 24.0788 24.2871C25.08 23.2859 25.5315 22.0116 25.7475 20.4055C25.9582 18.8382 25.9582 16.8308 25.9582 14.2749V14.1415C25.9582 11.5857 25.9582 9.57822 25.7475 8.01091C25.5315 6.40481 25.08 5.13051 24.0788 4.12928C23.0775 3.12805 21.8032 2.67651 20.1971 2.46057C18.6298 2.24985 16.6224 2.24986 14.0666 2.24988Z\"\r\n                    fill=\"var(--color-icon-success, #079455)\"\r\n                  />\r\n                  <path\r\n                    d=\"M19.2265 11.1487C19.7918 10.8396 19.9995 10.1307 19.6903 9.56536C19.3811 9.00004 18.6722 8.79238 18.1069 9.10154C15.9735 10.2683 14.2094 12.5199 13.0232 14.3362C12.5849 15.0074 12.2104 15.6429 11.9108 16.1812C11.6313 15.9101 11.3545 15.6747 11.1069 15.479C10.783 15.2228 10.4915 15.0208 10.2789 14.8816L9.91136 14.6534C9.35166 14.3342 8.63915 14.5291 8.31994 15.0888C8.0008 15.6484 8.19559 16.3607 8.75499 16.68L9.00033 16.8335C9.16695 16.9426 9.40042 17.1043 9.6598 17.3093C10.1936 17.7314 10.7696 18.2846 11.1321 18.8907C11.3546 19.2626 11.7649 19.4806 12.1977 19.4567C12.6303 19.4328 13.0142 19.1708 13.1944 18.7769L13.309 18.5372C13.388 18.3756 13.5063 18.1396 13.6603 17.8487C13.9689 17.2657 14.4176 16.4684 14.9769 15.612C16.1241 13.8554 17.6266 12.0237 19.2265 11.1487Z\"\r\n                    fill=\"var(--color-icon-success, #079455)\"\r\n                  />\r\n                </svg>\r\n              ) : this.color === 'error' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"29\" viewBox=\"0 0 28 29\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n                  <path\r\n                    opacity=\"0.4\"\r\n                    d=\"M14.0665 2.49945C16.6224 2.49944 18.6298 2.49942 20.1971 2.71014C21.8032 2.92608 23.0775 3.37762 24.0788 4.37885C25.08 5.38008 25.5315 6.65438 25.7475 8.26048C25.9582 9.82779 25.9582 11.8352 25.9582 14.391V14.3911V14.5245V14.5245C25.9582 17.0803 25.9582 19.0878 25.7475 20.6551C25.5315 22.2612 25.08 23.5355 24.0788 24.5367C23.0775 25.538 21.8032 25.9895 20.1971 26.2054C18.6298 26.4161 16.6224 26.4161 14.0666 26.4161H14.0665H13.9331H13.9331C11.3773 26.4161 9.36984 26.4161 7.80253 26.2054C6.19643 25.9895 4.92213 25.538 3.9209 24.5367C2.91967 23.5355 2.46813 22.2612 2.2522 20.6551C2.04148 19.0878 2.04149 17.0803 2.0415 14.5245V14.3911C2.04149 11.8353 2.04148 9.8278 2.2522 8.26048C2.46813 6.65438 2.91967 5.38008 3.9209 4.37885C4.92213 3.37762 6.19643 2.92608 7.80253 2.71014C9.36985 2.49942 11.3773 2.49944 13.9331 2.49945H14.0665Z\"\r\n                    fill=\"var(--color-icon-danger, #B51726)\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    d=\"M12.8335 19.7075C12.8335 19.0632 13.3535 18.5409 13.9949 18.5409H14.0054C14.6468 18.5409 15.1668 19.0632 15.1668 19.7075C15.1668 20.3519 14.6468 20.8742 14.0054 20.8742H13.9949C13.3535 20.8742 12.8335 20.3519 12.8335 19.7075Z\"\r\n                    fill=\"var(--color-icon-danger, #B51726)\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    d=\"M14.0003 16.2075C13.356 16.2075 12.8336 15.6852 12.8336 15.0409L12.8336 10.3742C12.8336 9.72985 13.356 9.20752 14.0003 9.20752C14.6446 9.20752 15.167 9.72985 15.167 10.3742L15.167 15.0409C15.167 15.6852 14.6446 16.2075 14.0003 16.2075Z\"\r\n                    fill=\"var(--color-icon-danger, #B51726)\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n                  <path\r\n                    opacity=\"0.4\"\r\n                    d=\"M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z\"\r\n                    fill=\"var(--color-icon, #4B5565)\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    d=\"M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z\"\r\n                    fill=\"var(--color-icon, #4B5565)\"\r\n                  />\r\n                  <path\r\n                    fill-rule=\"evenodd\"\r\n                    clip-rule=\"evenodd\"\r\n                    d=\"M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z\"\r\n                    fill=\"var(--color-icon, #4B5565)\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </div>\r\n            <div class={`content ${this.size} ${this.actions ? ' actions' : ''} ${this.breakpoint}`}>\r\n              <div class={`text ${!this.internalSupportingText ? 'no_supporting_text' : ''} ${this.size}`}>\r\n                <p class={`text-md-semi-bold main_text_${this.internalColor}`}>{this.internalMainText}</p>\r\n                {this.showSupportingText && <p class={`text-sm-regular supporting_text_${this.internalColor}`}>{this.internalSupportingText}</p>}\r\n              </div>\r\n              {this.actions && (\r\n                <div class={`actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}`}>\r\n                  {this.color === 'default' ? (\r\n                    <>\r\n                      {this.secondActionText && (\r\n                        <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_gray\" onClick={() => this.secondActionClicked.emit()}>\r\n                          <p>{this.secondActionText}</p>\r\n                        </gb-button>\r\n                      )}\r\n                      {this.firstActionText && (\r\n                        <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_color\" onClick={() => this.firstActionClicked.emit()}>\r\n                          <p>{this.firstActionText}</p>\r\n                        </gb-button>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      {this.secondActionText && (\r\n                        <gb-toast-button state={StateEnum.Default} color={this.internalColor} onClick={() => this.secondActionClicked.emit()}>\r\n                          <p>{this.secondActionText}</p>\r\n                        </gb-toast-button>\r\n                      )}\r\n                      {this.firstActionText && (\r\n                        <gb-toast-button state={StateEnum.Default} color={this.internalColor} onClick={() => this.firstActionClicked.emit()}>\r\n                          <p>{this.firstActionText}</p>\r\n                        </gb-toast-button>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n            {this.xCloseButton && (\r\n              <gb-button-close\r\n                size=\"sm\"\r\n                color={this.internalColor === 'default' ? 'gray' : this.internalColor === 'gray' ? 'gray' : this.internalColor}\r\n                class={`close_button ${this.size}`}\r\n                onClick={() => this.closeToast()}\r\n              ></gb-button-close>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.size === 'full_width' && (\r\n          <div class={`container ${this.breakpoint}`}>\r\n            <div class={`full_width_content ${this.breakpoint}`}>\r\n              <div class={`inner_content ${this.breakpoint}`}>\r\n                <div class={`icon_container`}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" class={`svg_icon ${this.internalColor}`}>\r\n                    <path\r\n                      opacity=\"0.4\"\r\n                      d=\"M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z\"\r\n                      fill=\"#4B5565\"\r\n                    />\r\n                    <path\r\n                      fill-rule=\"evenodd\"\r\n                      clip-rule=\"evenodd\"\r\n                      d=\"M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z\"\r\n                      fill=\"#4B5565\"\r\n                    />\r\n                    <path\r\n                      fill-rule=\"evenodd\"\r\n                      clip-rule=\"evenodd\"\r\n                      d=\"M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z\"\r\n                      fill=\"#4B5565\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n                <div class={`text ${this.size} ${this.breakpoint}`}>\r\n                  <p class={`text-sm-semi-bold main_text_${this.internalColor}`}>{this.internalMainText}</p>\r\n                  {this.showSupportingText && <p class={`text-xs-regular supporting_text_${this.internalColor}`}>{this.internalSupportingText}</p>}\r\n                </div>\r\n              </div>\r\n              {this.actions && (\r\n                <div class={`actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}`}>\r\n                  {this.color === 'default' ? (\r\n                    <>\r\n                      {this.secondActionText && (\r\n                        <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_gray\" onClick={() => this.secondActionClicked.emit()}>\r\n                          <p>{this.secondActionText}</p>\r\n                        </gb-button>\r\n                      )}\r\n                      {this.firstActionText && (\r\n                        <gb-button size=\"sm\" icon=\"default\" state=\"default\" hierarchy=\"link_color\" onClick={() => this.firstActionClicked.emit()}>\r\n                          <p>{this.firstActionText}</p>\r\n                        </gb-button>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    <>\r\n                      {this.secondActionText && (\r\n                        <gb-toast-button state={StateEnum.Default} color={this.internalColor} onClick={() => this.secondActionClicked.emit()}>\r\n                          <p>{this.secondActionText}</p>\r\n                        </gb-toast-button>\r\n                      )}\r\n                      {this.firstActionText && (\r\n                        <gb-toast-button state={StateEnum.Default} color={this.internalColor} onClick={() => this.firstActionClicked.emit()}>\r\n                          <p>{this.firstActionText}</p>\r\n                        </gb-toast-button>\r\n                      )}\r\n                    </>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n            {this.xCloseButton && (\r\n              <gb-button-close\r\n                size=\"sm\"\r\n                color={this.internalColor === 'default' ? 'gray' : this.internalColor === 'gray' ? 'gray' : this.internalColor}\r\n                class={`close_button ${this.breakpoint}`}\r\n                onClick={() => this.closeToast()}\r\n              ></gb-button-close>\r\n            )}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}