globuswebcomponents 2.19.2 → 2.19.3

package/dist/globuscomponents/reusableModels-cHn6O-Kf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reusableModels-cHn6O-Kf.js","sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\n\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\n\nexport enum StateEnum {\n  Default = 'default',\n  Disabled = 'disabled',\n}\n\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\n\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\n\nexport enum BorderWeights {\n  VeryLight = 'very_light',\n  Light = 'light',\n  Regular = 'regular',\n  Heavy = 'heavy',\n}\n\nexport enum OnlineIndicatorStates {\n  Online = 'online',\n  Offline = 'offline',\n}\n\nexport type BreakPoints = 'desktop' | 'mobile';\n\nexport type FileUploadIconType = 'solid' | 'outline';\n\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\n\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\n\nexport type PaginationNumberShapes = 'square' | 'circle';\n\nexport type PaginationTypes =\n  | 'page_default'\n  | 'page_minimal_center_aligned'\n  | 'card_default'\n  | 'card_minimal_right_aligned'\n  | 'card_minimal_left_aligned'\n  | 'card_minimal_center_aligned'\n  | 'card_button_group_right_aligned'\n  | 'card_button_group_left_aligned'\n  | 'card_button_group_center_aligned';\n\nexport type TabTypes =\n  | 'button_primary'\n  | 'button_gray'\n  | 'button_white'\n  | 'rounded_button_white'\n  | 'underline'\n  | 'underline_filled'\n  | 'line'\n  | 'button_white_border'\n  | 'rounded_button_white_border'\n  | 'button_gray_border';\n\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\n\nexport type InputFieldTypes =\n  | 'default'\n  | 'icon_leading'\n  | 'leading_dropdown'\n  | 'trailing_dropdown'\n  | 'leading_text'\n  | 'payment_input'\n  | 'tags'\n  | 'trailing_button'\n  | 'password'\n  | 'password_icon_leading'\n  | 'count';\n\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\n\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\n\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\n\nexport type PaginationDotTypes = 'dot' | 'line';\n\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\n\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\n\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\n\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\n\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\n\nexport type ProgressStepStates = 'default' | 'destructive';\n\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\n\nexport type GeneralStyles = 'standard' | 'compact';\n\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading' | 'open';\n\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\n\nexport type ThemeTypes = 'system' | 'light' | 'dark';\n\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\n\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\n\nexport type StepperType = {\n  state: ProgressStepStates;\n  status: ProgressStepStatus;\n  label?: string;\n  supportingText?: string;\n};\n\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button' | 'tags';\n\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\n\nexport interface DropdownListGroup {\n  icon: string;\n  label: string;\n  shortcut: string;\n}\n\nexport type CloseButtonPositions = 'left' | 'right';\n\nexport interface Notification {\n  label: string;\n  time: string;\n  desc: string;\n  icon: string;\n}\n\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\n\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\n\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\n\nexport interface TableColumn {\n  key: string;\n  label: string;\n  value?: (row: any) => any;\n  supportingText?: string | ((row: any) => string);\n  width?: string;\n  align?: 'left' | 'center' | 'right';\n  helpIcon?: boolean;\n  sortable?: boolean;\n  sortType?: 'string' | 'number' | 'date';\n  visible?: boolean;\n  cellComponent?: string;\n  searchable?: boolean;\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\n  cellEvent?: string | string[];\n  hasAvatar?: boolean;\n  cellAvatar?: {\n    props?: {};\n    slots?: {\n      initials?: string | ((row: any) => string | any);\n      image?: string | ((row: any) => string | any);\n    };\n  };\n  cellSlots?: {\n    default?: {\n      tag?: string; // e.g., 'p', 'span' to wrap content\n      content: (row: any) => string | any; // Function to get slot content\n    };\n    named?: {\n      [slotName: string]: {\n        tag: string; // e.g., 'p', 'h1', 'span'\n        content: (row: any) => string | any; // Function to get slot content\n      };\n    };\n  };\n  cellClass?: string | ((row: any) => string);\n  cellStyle?: { [key: string]: string } | ((row: any) => { [key: string]: string });\n  truncate?: boolean;\n  splitCell?: {\n    left: (row: any) => string | number;\n    right: (row: any) => string | number;\n    separator?: string;\n    leftStyle?: (row: any) => { [key: string]: string };\n    rightStyle?: (row: any) => { [key: string]: string };\n  };\n  mobile?: {\n    position?: MobilePosition;\n  };\n  gridCard?: {\n    buttonIcon?: string;\n    buttonText?: string;\n  };\n}\n\nexport interface RowAction {\n  label?: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: boolean;\n  destructive?: boolean;\n  type?: 'button' | 'dropdown' | 'custom';\n}\n\nexport interface DropdownOption {\n  label: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: ((row: any) => boolean) | boolean;\n}\n\nexport type PortalPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end';\n\nexport interface FilterField {\n  tag: string;\n  columnKey?: string; // ← the actual row property to filter on\n  key: string | { start: string; end: string }; // date ranges need two keys\n  event: string | { start: string; end: string }; // date ranges need two events\n  label?: string;\n  props?: any;\n  default?: any;\n}\n\nexport interface FilterConfig {\n  mode?: 'internal' | 'external';\n  title?: string;\n  showClearButton?: boolean;\n  fields?: FilterField[];\n  initialValues?: {\n    pageNumber: number;\n    pageSize: number;\n  };\n  appliedValues?: Record<string, any>;\n}\n\nexport type IconStyles = 'stroke' | 'two-tone' | 'duotone' | 'solid' | 'bulk';\n\nexport type IconTypes = 'rounded' | 'sharp';\n\nexport type SubMenuChild = {\n  label: string;\n  icon: string;\n};\n\nexport type SubMenuItem = {\n  label: string;\n  icon: string;\n  children?: SubMenuChild[];\n};\n"],"names":[],"mappings":"AAIY,IAAA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;AAMW,IAAA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,aAAa,KAAb,aAAa,GAKxB,EAAA,CAAA,CAAA;AAEW,IAAA;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;"}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { GeneralHierarchies, GeneralSizes, InputFieldTypes } from '../../models/reusableModels';
+import { GeneralColors, GeneralHierarchies, GeneralSizes, InputFieldTypes } from '../../models/reusableModels';
 export declare class GbInputField {
     internals: ElementInternals;
     size: GeneralSizes;
@@ -13,6 +13,7 @@ export declare class GbInputField {
     label: string;
     showHintText: boolean;
     hintText: string;
+    hintTextColor: GeneralColors;
     errorText: string;
     showPlaceholder: boolean;
     placeholder: string;

package/dist/types/components.d.ts

@@ -1378,7 +1378,7 @@ export namespace Components {
         "fullWidth": boolean;
         "size": GeneralSizes;
         /**
-          * @default [     // {     //   name: 'All accounts',     //   index: 0,     // },     // {     //   name: 'LCY Accounts',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'FCY',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     {       name: 'All accounts',       index: 0,     },     {       name: 'LCY Accounts',       index: 1,       badgeCount: '10',     },     {       name: 'FCY',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },   ]
          */
         "tabs": { name: string; index: number; badgeCount?: string }[];
         /**
@@ -1632,6 +1632,10 @@ export namespace Components {
           * @default ''
          */
         "hintText": string;
+        /**
+          * @default 'gray'
+         */
+        "hintTextColor": GeneralColors;
         "icon": 'country' | 'avatar' | 'dot' | 'false';
         "iconSwap": string;
         "idOfInput": string;
@@ -6514,7 +6518,7 @@ declare namespace LocalJSX {
         "onTabItemClicked"?: (event: GbHorizontalTabsCustomEvent<number>) => void;
         "size"?: GeneralSizes;
         /**
-          * @default [     // {     //   name: 'All accounts',     //   index: 0,     // },     // {     //   name: 'LCY Accounts',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'FCY',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },     // {     //   name: 'Second',     //   index: 1,     //   badgeCount: '10',     // },   ]
+          * @default [     {       name: 'All accounts',       index: 0,     },     {       name: 'LCY Accounts',       index: 1,       badgeCount: '10',     },     {       name: 'FCY',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },     {       name: 'Second',       index: 1,       badgeCount: '10',     },   ]
          */
         "tabs"?: { name: string; index: number; badgeCount?: string }[];
         /**
@@ -6768,6 +6772,10 @@ declare namespace LocalJSX {
           * @default ''
          */
         "hintText"?: string;
+        /**
+          * @default 'gray'
+         */
+        "hintTextColor"?: GeneralColors;
         "icon"?: 'country' | 'avatar' | 'dot' | 'false';
         "iconSwap"?: string;
         "idOfInput"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "2.19.2",
+  "version": "2.19.3",
   "description": "Globus One",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -49,7 +49,9 @@
     "generate": "stencil generate",
     "icons:organize": "node organize-icons.js",
     "icons:generate": "node generate-icon-names.js",
-    "icons:check": "node generate-icon-names.js --check"
+    "icons:check": "node generate-icon-names.js --check",
+    "changelog": "node generate-changelog.js",
+    "prepublishOnly": "node generate-changelog.js"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0"

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

@@ -1 +0,0 @@
-{"file":"p-CkA31HT1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-tab-button-base/gb-tab-button-base.css?tag=gb-tab-button-base&encapsulation=shadow","src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host{\n    display: flex;\n    /* Centers .tab_button_div within the host box when full_width has grown\n     * the host wider than its content (see below) - a no-op otherwise, since\n     * the host is already content-sized when it hasn't grown. */\n    justify-content: center;\n}\n\n.tab_button_div{\n    display: flex;\n    /* align-self: stretch; */\n    cursor: pointer;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.tab_button_div.truncate{\n    min-width: 0;\n}\n\n.tab_button_div.full_width:not(.truncate){\n    /* full_width makes the *host* grow to share the row equally (see\n     * .tab_button_base.full_width in gb-horizontal-tabs.css); this div's own\n     * background (e.g. the rounded \"current\" pill) should still hug just its\n     * own text/badge, centered in that space, rather than stretching to fill\n     * the whole grown host. Skipped when truncate is also set - that needs a\n     * bounded width to know when to ellipsize. */\n    width: auto;\n}\n\n.tab_button_div.horizontal{\n    justify-content: center;\n    align-items: center;\n}\n\n.tab_button_div.vertical{\n    justify-content: flex-start;\n    align-items: center;\n}\n\n.tab_name_wrapper{\n    min-width: 0;\n}\n\n.tab_button_div.truncate .tab_name_wrapper{\n    flex: 1;\n}\n\n.tab_name{\n    white-space: nowrap;\n}\n\n.tab_name.truncate{\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tab_text{\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_primary,\n.tab_button_div.button_gray,\n.tab_button_div.button_white{\n    display: inline-flex;\n    border-radius: var(--rounded-xs);\n}\n\n.rounded_button_white{\n    display: inline-flex;\n    align-items: center;\n    border-radius: var(--rounded-full);\n}\n\n.underline,\n.underline_filled,\n.line{\n    display: inline-flex;\n    border-radius: var(--rounded-none);\n}\n\n/* Spacing Styles */\n.button_primary,\n.button_gray,\n.button_white,\n.rounded_button_white,\n.underline_filled,\n.line{\n    gap: var(--spacing-2);\n}\n\n.underline{\n    gap: 0.5rem;\n}\n\n/* Tab Type Styles */\n.tab_button_div.button_primary,\n.tab_button_div.button_gray,\n.tab_button_div.button_white,\n.tab_button_div.rounded_button_white,\n.tab_button_div.underline_filled,\n.tab_button_div.line{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_white.current{\n    box-shadow: var(--shadow-md);\n}\n\n/* Tab State Styles */\n/* :hover is gated to devices that actually support real hovering. On touch\n * devices (mobile, and DevTools touch emulation), tapping a tab applies :hover\n * and it stays \"stuck\" until a later tap elsewhere clears it - since a\n * `.current:hover` rule below paints a different (hover-tinted) look than\n * plain `.current`, a freshly-tapped tab would look like it hadn't become\n * current until that stray hover state cleared. Excluding touch devices from\n * :hover entirely removes that lag. */\n@media (hover: hover) and (pointer: fine) {\n    .tab_button_div.button_primary:hover{\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.button_gray:hover,\n    .tab_button_div.button_white:hover,\n    .tab_button_div.rounded_button_white:hover{\n        background: var(--color-background-gray-subtle, #E3E8EF);\n        color: var(--color-text, #4B5565);\n    }\n\n    .tab_button_div.underline:hover,\n    .tab_button_div.underline_filled:hover{\n        border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.line:hover{\n        border-radius: var(--rounded-xs);\n        background: var(--color-background-gray-subtler, #EEF2F6);\n    }\n\n    .tab_button_div.button_primary.current:hover{\n        background: var(--color-background-information-subtler, #C8E0F9);\n        color: var(--color-text-information, #064E94);\n    }\n\n    .tab_button_div.button_gray.current:hover,\n    .tab_button_div.button_white.current:hover,\n    .tab_button_div.rounded_button_white.current:hover{\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.underline.current:hover{\n        background: var(--color-background-information-subtlest, #E4F0FC);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n\n    .tab_button_div.underline_filled.current:hover{\n        background: var(--color-background-information-subtler, #C8E0F9);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n\n    .tab_button_div.line.current:hover{\n        border-radius: var(--rounded-xs);\n        background: var(--color-background-information-subtlest, #E4F0FC);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n}\n\n.tab_button_div.button_primary:active{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_gray:active,\n.tab_button_div.button_white:active,\n.tab_button_div.rounded_button_white:active{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.underline:active,\n.tab_button_div.underline_filled:active{\n    background: transparent;\n    border: none;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.line:active{\n    border-radius: var(--rounded-none);\n    background: transparent;\n}\n\n.tab_button_div.button_primary.current:active{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n}\n\n.tab_button_div.button_gray.current:active{\n    background: var(--color-background-gray-subtlest, #F6F8FA);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.button_white.current:active,\n.tab_button_div.rounded_button_white.current:active{\n    background: var(--color-background-card, #FFFFFF);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.underline.current:active{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-color: var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.underline_filled.current:active{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n    border-color: var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.line.current:active{\n    border-radius: var(--rounded-none);\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-left: 2px solid var(--color-border-selected, #075DB2);\n}\n\n/* Tab Current Styles */\n.tab_button_div.button_primary.current{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n}\n\n.tab_button_div.button_gray.current{\n    background: var(--color-background-gray-subtlest, #F6F8FA);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.button_white.current,\n.tab_button_div.rounded_button_white.current{\n    background: var(--color-background-card, #FFFFFF);\n    color: var(--color-text-bold, #202939);\n    box-shadow: var(--shadow-md);\n}\n\n.tab_button_div.underline.current{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.underline_filled.current{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.line.current{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-left: 2px solid var(--color-border-selected, #075DB2);\n}\n\n/* Tab Size Styles */\n.button_primary.sm,\n.button_gray.sm,\n.button_white.sm,\n.rounded_button_white.sm,\n.underline.sm{\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-4);\n}\n\n.underline_filled.sm,\n.line.sm{\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.md,\n.button_gray.md,\n.button_white.md,\n.rounded_button_white.md,\n.underline.md,\n.underline_filled.md,\n.line.md{\n    height: 2.75rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.full_width.sm,\n.button_gray.full_width.sm,\n.button_white.full_width.sm,\n.rounded_button_white.full_width.sm{\n    width: 100%;\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.underline.full_width.sm,\n.underline_filled.full_width.sm{\n    width: 100%;\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.full_width.md,\n.button_gray.full_width.md,\n.button_white.full_width.md,\n.rounded_button_white.full_width.md{\n    width: 100%;\n    height: 2.25rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.underline.full_width.md,\n.underline_filled.full_width.md{\n    width: 100%;\n    height: 2.25rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n","import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-tab-button-base',\n  styleUrl: 'gb-tab-button-base.css',\n  shadow: true,\n})\nexport class GbTabButtonBase {\n  @Prop() current: boolean = false;\n  @Prop() size: GeneralSizes;\n  @Prop() fullWidth: boolean = false;\n  @Prop() badge: boolean = false;\n  @Prop() type: TabTypes;\n  @Prop() tabName: string = '';\n  @Prop() alignment: 'horizontal' | 'vertical';\n  @Prop() truncate: boolean = false;\n  @Element() el: HTMLElement;\n  @Event() tabClicked: EventEmitter<void>;\n\n  getTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-sm-medium';\n      case 'md':\n        return 'text-md-medium';\n    }\n  }\n\n  getCurrentTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-sm-semi-bold';\n      case 'md':\n        return 'text-md-semi-bold';\n    }\n  }\n\n  getCountTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-xs-medium';\n      case 'md':\n        return 'text-sm-medium';\n    }\n  }\n\n  componentDidLoad() {\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\n\n    if (tabCount) {\n      tabCount.classList.add(this.getCountTextClasses());\n    }\n  }\n\n  handleClick() {\n    this.tabClicked.emit();\n  }\n\n  getFormattedLabel() {\n    const words = this.tabName.split(' ');\n    if (words.length === 0) return this.tabName;\n    return words[0] + ' ' + words.slice(1).join(' ').toLowerCase();\n  }\n\n  render() {\n    return (\n      <div\n        class={`tab_button_div ${this.type}\n      ${this.current ? 'current' : ''}\n      ${this.fullWidth ? 'full_width' : ''}\n      ${this.truncate ? 'truncate' : ''}\n      ${this.size}\n      ${this.alignment}`}\n        onClick={() => this.handleClick()}\n      >\n        <div class=\"tab_name_wrapper\">\n          <p class={`tab_name ${this.truncate ? 'truncate' : ''} ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.getFormattedLabel()}</p>\n        </div>\n        {this.badge && (\n          <gb-badge size=\"sm\" type=\"pill_color\" color={this.current ? 'information' : 'gray'}>\n            <slot name=\"count\"></slot>\n          </gb-badge>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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