globuswebcomponents 2.8.1 → 2.8.3

package/dist/types/components/gb-date-picker/gb-date-picker.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { CloseButtonPositions } from '../../models/reusableModels';
 export declare class GbDatePicker {
@@ -16,13 +17,25 @@ export declare class GbDatePicker {
     enableTime: boolean;
     noCalendar: boolean;
     twentyfourHr: boolean;
+    showMonths: number;
     isCalendarShown: boolean;
+    breakpoint: 'mobile' | 'desktop';
+    width: number;
     dateChange: EventEmitter<string | string[]>;
     private inputEl;
     private picker;
     componentDidLoad(): void;
+    componentWillLoad(): void;
+    private handleResize;
+    updateCalendarDropdown(): void;
     disconnectedCallback(): void;
     private initializePicker;
+    clearDateSelection(): void;
+    private maybeCreateSidebar;
+    injectSidebarLayout(fp: flatpickr.Instance): void;
+    createSidebar(): HTMLElement;
+    applyPreset(key: string): void;
+    clearPresetSelection(sidebar: HTMLElement): void;
     injectApplyButton(): void;
     preventTimePickerClosing(): void;
     private toggleCalendar;

package/dist/types/components/gb-date-picker-list-item/gb-date-picker-list-item.d.ts

@@ -0,0 +1,5 @@
+export declare class GbDatePickerListItem {
+    selected: boolean;
+    label: string;
+    render(): any;
+}

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

@@ -10,7 +10,6 @@ export declare class GbHeader {
     showNotification: boolean;
     showHelp: boolean;
     showLogo: boolean;
-    logo: string;
     showSearch: boolean;
     inputPlaceholder: string;
     inputIcon: string;
@@ -31,8 +30,6 @@ export declare class GbHeader {
     helpDropdownShown: boolean;
     initials: string;
     el: HTMLElement;
-    navBarItemClicked: EventEmitter<string>;
-    menuClicked: EventEmitter<void>;
     inputValueChanged: EventEmitter<string>;
     helpItemClicked: EventEmitter<string>;
     themeTabClicked: EventEmitter<string>;

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

@@ -62,6 +62,7 @@ export declare class GbInputDropdown {
     singleItemSelect(item: any): void;
     selectMultipleItems(item: any): void;
     handleTagRemove(item: any): void;
+    syncSelectedItems(): void;
     componentWillRender(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -8,7 +8,7 @@ export declare class GbInputField {
     minLength: number;
     maxLength: number;
     destructive: boolean;
-    state: 'default' | 'filled' | 'active' | 'disabled';
+    state: 'default' | 'active' | 'disabled';
     showLabel: boolean;
     label: string;
     showHintText: boolean;
@@ -19,7 +19,7 @@ export declare class GbInputField {
     showHelpIcon: boolean;
     showValidation: boolean;
     showCountryIcon: boolean;
-    iconSwap?: string;
+    iconSwap: string;
     enableCancelButtonFunction: boolean;
     options: any[];
     idOfInput: string;
@@ -29,10 +29,10 @@ export declare class GbInputField {
     menuPosition: 'top' | 'bottom';
     icon: 'country' | 'avatar' | 'dot' | 'false';
     value: any;
-    required: boolean;
     loading: boolean;
     formatLabel: boolean;
     formatNumber: boolean;
+    inputOnlyDisabled: boolean;
     showCloseButton?: boolean;
     inputValue: string;
     tags: string[];
@@ -61,6 +61,7 @@ export declare class GbInputField {
     inputElement: HTMLInputElement;
     resultsDisplayElement: HTMLDivElement;
     inputGroupElement: HTMLDivElement;
+    iconSwapChanged(): void;
     isDestructive(): Promise<void>;
     isNotDestructive(): Promise<void>;
     formResetCallback(): void;

package/dist/types/components.d.ts

@@ -696,7 +696,7 @@ export namespace Components {
          */
         "dropdownAlignment": CloseButtonPositions;
         /**
-          * @default false
+          * @default true
          */
         "enableTime": boolean;
         /**
@@ -727,12 +727,26 @@ export namespace Components {
           * @default 'Start date - end date'
          */
         "placeholder": string;
+        /**
+          * @default 1
+         */
+        "showMonths": number;
         /**
           * @default false
          */
         "twentyfourHr": boolean;
         "value": string | string[];
     }
+    interface GbDatePickerListItem {
+        /**
+          * @default ""
+         */
+        "label": string;
+        /**
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface GbDetailCell {
         "badgeColor": GeneralColors;
         "badgeIcon": BadgeIconTypes;
@@ -1039,10 +1053,6 @@ export namespace Components {
           * @default [     // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },     // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },     // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },   ]
          */
         "listGroupTwo": DropdownListGroup[];
-        /**
-          * @default ''
-         */
-        "logo": string;
         "notificationState": 'empty' | 'notification_dropdown';
         /**
           * @default [     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },   ]
@@ -1073,7 +1083,7 @@ export namespace Components {
          */
         "showLogError": boolean;
         /**
-          * @default false
+          * @default true
          */
         "showLogOut": boolean;
         /**
@@ -1208,7 +1218,7 @@ export namespace Components {
         "isDestructive": () => Promise<void>;
         "isNotDestructive": () => Promise<void>;
         /**
-          * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo'   ]
+          * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo',   ]
          */
         "items": any[];
         /**
@@ -1309,8 +1319,12 @@ export namespace Components {
          */
         "hintText": string;
         "icon": 'country' | 'avatar' | 'dot' | 'false';
-        "iconSwap"?: string;
+        "iconSwap": string;
         "idOfInput": string;
+        /**
+          * @default false
+         */
+        "inputOnlyDisabled": boolean;
         /**
           * @default 'text'
          */
@@ -1334,17 +1348,13 @@ export namespace Components {
         "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',     // '+124',     // 57,     // 43,   ]
+          * @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',     // '+124',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
          */
         "options": any[];
         /**
           * @default ''
          */
         "placeholder": string;
-        /**
-          * @default false
-         */
-        "required": boolean;
         /**
           * @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' },     // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },     // 10,     // 20,     // 30,     // 40,     // 50,   ]
          */
@@ -1374,10 +1384,10 @@ export namespace Components {
          */
         "showValidation": boolean;
         "size": GeneralSizes;
-        "state": 'default' | 'filled' | 'active' | 'disabled';
+        "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,   ]
+          * @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;
     }
@@ -2843,6 +2853,12 @@ declare global {
         prototype: HTMLGbDatePickerElement;
         new (): HTMLGbDatePickerElement;
     };
+    interface HTMLGbDatePickerListItemElement extends Components.GbDatePickerListItem, HTMLStencilElement {
+    }
+    var HTMLGbDatePickerListItemElement: {
+        prototype: HTMLGbDatePickerListItemElement;
+        new (): HTMLGbDatePickerListItemElement;
+    };
     interface HTMLGbDetailCellElementEventMap {
         "viewButtonClicked": void;
         "downloadButtonClicked": void;
@@ -2977,8 +2993,6 @@ declare global {
         new (): HTMLGbFilterButtonElement;
     };
     interface HTMLGbHeaderElementEventMap {
-        "navBarItemClicked": string;
-        "menuClicked": void;
         "inputValueChanged": string;
         "helpItemClicked": string;
         "themeTabClicked": string;
@@ -3726,6 +3740,7 @@ declare global {
         "gb-complex-primary-side-bar-item": HTMLGbComplexPrimarySideBarItemElement;
         "gb-complex-secondary-side-bar-item": HTMLGbComplexSecondarySideBarItemElement;
         "gb-date-picker": HTMLGbDatePickerElement;
+        "gb-date-picker-list-item": HTMLGbDatePickerListItemElement;
         "gb-detail-cell": HTMLGbDetailCellElement;
         "gb-dropdown-items-with-shortcut": HTMLGbDropdownItemsWithShortcutElement;
         "gb-empty-state": HTMLGbEmptyStateElement;
@@ -4509,7 +4524,7 @@ declare namespace LocalJSX {
          */
         "dropdownAlignment"?: CloseButtonPositions;
         /**
-          * @default false
+          * @default true
          */
         "enableTime"?: boolean;
         /**
@@ -4541,12 +4556,26 @@ declare namespace LocalJSX {
           * @default 'Start date - end date'
          */
         "placeholder"?: string;
+        /**
+          * @default 1
+         */
+        "showMonths"?: number;
         /**
           * @default false
          */
         "twentyfourHr"?: boolean;
         "value"?: string | string[];
     }
+    interface GbDatePickerListItem {
+        /**
+          * @default ""
+         */
+        "label"?: string;
+        /**
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface GbDetailCell {
         "badgeColor"?: GeneralColors;
         "badgeIcon"?: BadgeIconTypes;
@@ -4864,10 +4893,6 @@ declare namespace LocalJSX {
           * @default [     // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },     // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },     // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },   ]
          */
         "listGroupTwo"?: DropdownListGroup[];
-        /**
-          * @default ''
-         */
-        "logo"?: string;
         "notificationState"?: 'empty' | 'notification_dropdown';
         /**
           * @default [     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },     // {     //   label: 'Flagged transaction',     //   time: 'Just now',     //   desc: 'Aisha, here is your weekly report',     //   icon: 'assets/arrow-right-02.svg',     // },   ]
@@ -4876,8 +4901,6 @@ declare namespace LocalJSX {
         "onAvatarDropdownItemClicked"?: (event: GbHeaderCustomEvent<string>) => void;
         "onHelpItemClicked"?: (event: GbHeaderCustomEvent<string>) => void;
         "onInputValueChanged"?: (event: GbHeaderCustomEvent<string>) => void;
-        "onMenuClicked"?: (event: GbHeaderCustomEvent<void>) => void;
-        "onNavBarItemClicked"?: (event: GbHeaderCustomEvent<string>) => void;
         "onThemeTabClicked"?: (event: GbHeaderCustomEvent<string>) => void;
         /**
           * @default false
@@ -4904,7 +4927,7 @@ declare namespace LocalJSX {
          */
         "showLogError"?: boolean;
         /**
-          * @default false
+          * @default true
          */
         "showLogOut"?: boolean;
         /**
@@ -5038,7 +5061,7 @@ declare namespace LocalJSX {
         "iconSwap"?: string;
         "inputValue"?: string;
         /**
-          * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo'   ]
+          * @default [     // { name: 'Mock Item A iusbrviubw vwiuhvw vwiurhvwr vwoiuh', username: 1 },     // { name: 'Mock Item B', username: 3 },     // { name: 'Mock Item C', username: 3 },     // { name: 'Mock Item D', username: 3 },     // { name: 'Mock Item E', username: 3 },     // 45,     // 50,     // 20,     // 25,     // 90,     // 92,     // 53,     // 'Activated',     // 'Deactivated',     // 'John Doe',     // 'John smith',     // 'Jane leo',   ]
          */
         "items"?: any[];
         /**
@@ -5144,6 +5167,10 @@ declare namespace LocalJSX {
         "icon"?: 'country' | 'avatar' | 'dot' | 'false';
         "iconSwap"?: string;
         "idOfInput"?: string;
+        /**
+          * @default false
+         */
+        "inputOnlyDisabled"?: boolean;
         /**
           * @default 'text'
          */
@@ -5170,17 +5197,13 @@ 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',     // '+124',     // 57,     // 43,   ]
+          * @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',     // '+124',     // 57,     // 43,     // 'NGN',     // 'GBP',     // 'USD'   ]
          */
         "options"?: any[];
         /**
           * @default ''
          */
         "placeholder"?: string;
-        /**
-          * @default false
-         */
-        "required"?: boolean;
         /**
           * @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' },     // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },     // 10,     // 20,     // 30,     // 40,     // 50,   ]
          */
@@ -5210,10 +5233,10 @@ declare namespace LocalJSX {
          */
         "showValidation"?: boolean;
         "size"?: GeneralSizes;
-        "state"?: 'default' | 'filled' | 'active' | 'disabled';
+        "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,   ]
+          * @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;
     }
@@ -6284,6 +6307,7 @@ declare namespace LocalJSX {
         "gb-complex-primary-side-bar-item": GbComplexPrimarySideBarItem;
         "gb-complex-secondary-side-bar-item": GbComplexSecondarySideBarItem;
         "gb-date-picker": GbDatePicker;
+        "gb-date-picker-list-item": GbDatePickerListItem;
         "gb-detail-cell": GbDetailCell;
         "gb-dropdown-items-with-shortcut": GbDropdownItemsWithShortcut;
         "gb-empty-state": GbEmptyState;
@@ -6399,6 +6423,7 @@ declare module "@stencil/core" {
             "gb-complex-primary-side-bar-item": LocalJSX.GbComplexPrimarySideBarItem & JSXBase.HTMLAttributes<HTMLGbComplexPrimarySideBarItemElement>;
             "gb-complex-secondary-side-bar-item": LocalJSX.GbComplexSecondarySideBarItem & JSXBase.HTMLAttributes<HTMLGbComplexSecondarySideBarItemElement>;
             "gb-date-picker": LocalJSX.GbDatePicker & JSXBase.HTMLAttributes<HTMLGbDatePickerElement>;
+            "gb-date-picker-list-item": LocalJSX.GbDatePickerListItem & JSXBase.HTMLAttributes<HTMLGbDatePickerListItemElement>;
             "gb-detail-cell": LocalJSX.GbDetailCell & JSXBase.HTMLAttributes<HTMLGbDetailCellElement>;
             "gb-dropdown-items-with-shortcut": LocalJSX.GbDropdownItemsWithShortcut & JSXBase.HTMLAttributes<HTMLGbDropdownItemsWithShortcutElement>;
             "gb-empty-state": LocalJSX.GbEmptyState & JSXBase.HTMLAttributes<HTMLGbEmptyStateElement>;

package/package.json

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