globuswebcomponents 1.1.3 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-avatar_21.cjs.entry.js +20 -20
- package/dist/cjs/gb-avatar_21.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +21 -21
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-pagination.js +1 -1
- package/dist/components/{p-eaf2d0b0.js → p-fa71c1b6.js} +21 -21
- package/dist/components/p-fa71c1b6.js.map +1 -0
- package/dist/docs.json +2 -2
- package/dist/esm/gb-avatar_21.entry.js +20 -20
- package/dist/esm/gb-avatar_21.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-35a2d638.entry.js → p-ef8745af.entry.js} +2 -2
- package/dist/globuscomponents/p-ef8745af.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-eaf2d0b0.js.map +0 -1
- package/dist/globuscomponents/p-35a2d638.entry.js.map +0 -1
|
@@ -537,23 +537,23 @@ const GbInputDropdown = class {
|
|
|
537
537
|
this.leadingIcon = '';
|
|
538
538
|
this.icon = undefined;
|
|
539
539
|
this.items = [
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
540
|
+
// { name: 'Mock Item A', username: 'A', selected: false },
|
|
541
|
+
// { name: 'Mock Item B', username: 'B', selected: false },
|
|
542
|
+
// { name: 'Mock Item C', username: 'C', selected: false },
|
|
543
|
+
// { name: 'Mock Item D', username: 'D', selected: false },
|
|
544
|
+
// { name: 'Mock Item E', username: 'E', selected: false },
|
|
545
|
+
// 45,
|
|
546
|
+
// 50,
|
|
547
|
+
// 20,
|
|
548
|
+
// 25,
|
|
549
|
+
// 90,
|
|
550
|
+
// 92,
|
|
551
|
+
// 53,
|
|
552
|
+
// 'Activated',
|
|
553
|
+
// 'Deactivated',
|
|
554
|
+
// 'John Doe',
|
|
555
|
+
// 'John smith',
|
|
556
|
+
// 'Jane leo'
|
|
557
557
|
];
|
|
558
558
|
this.value = [
|
|
559
559
|
// { name: 'Mock Item A', username: 'A', selected: false },
|
|
@@ -819,16 +819,16 @@ const GbInputDropdown = class {
|
|
|
819
819
|
const emptyStateBackground = index.getAssetPath('assets/empty-state-background.svg');
|
|
820
820
|
const illustration = index.getAssetPath('assets/empty-state-no-data.svg');
|
|
821
821
|
return [
|
|
822
|
-
index.h("div", { key: '
|
|
822
|
+
index.h("div", { key: 'e80303fd6294e905eacb28f131b8ce8e72e35899', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, index.h("div", { key: '9e30b0b51b41728dfbe48c4ce457b518b13c7a89', class: `input_with_label` }, this.showLabel && (index.h("p", { key: '7316cf6ca11d65c38eceb8d0bfa4721b1f7713d0', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), index.h("div", { key: 'b3e76bacc303dd6ed9dc4742b8b4e4e1a9a04df8', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (index.h("svg", { key: '9600ee66f307ac3ed96eb452cc40882d73466662', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '9ec16e94a304b2623c0acd34ac16764b3cacc75b', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), index.h("path", { key: '0f290308c6e52026c61e9a24d8048aeb91c35b65', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (index.h(index.Fragment, null, this.state === 'default' && (index.h("svg", { key: '826cc1aeb1f38582567c953e9e52d6d23fe1ca88', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'cf8ac0840c45a83c77c9739aed89b50f007e05bb', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), index.h("path", { key: '6b7bbf84be8eaa2231e9ffd201b381650d381c25', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (index.h("gb-avatar", { key: '0b1488f4d7fdc5f62d94702195a7a63a67d926f1', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (index.h(index.Fragment, null, typeof item === 'object' ? (index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (index.h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && index.h(index.Fragment, null, this.type === 'search' || this.type === 'tags' ? index.h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (index.h("svg", { key: '4769f0107fc23adeeba6bd6861a7237aadfdf212', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, index.h("circle", { key: 'c47871d75c8151317e69b702a49e79cf81d8fae7', cx: "5", cy: "5", r: "4", fill: "#079455" }))), index.h(index.Fragment, null, this.state === 'default' && (index.h(index.Fragment, null, this.placeholder && (index.h("div", { key: 'd2ed5d8c644bc391ada6d08ff05a193a4e8ec7da', class: "placeholder" }, index.h("p", { key: '99e4596fb19cd3823d044b54c7c1ee23eb0c1ba7', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'filled' && (index.h(index.Fragment, null, index.h("div", { key: 'bc8044f180b45fc03fe14440191517fa9954bcf9', class: `content` }, index.h("div", { key: 'f1133f2df2643e236558af35f0ee2d0772fb3190', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.length === 0 ? (index.h(index.Fragment, null, this.selectedItems.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
823
823
|
.split(' ')
|
|
824
824
|
.map(part => part.charAt(0).toUpperCase())
|
|
825
825
|
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
826
826
|
.split(' ')
|
|
827
827
|
.map(part => part.charAt(0).toUpperCase())
|
|
828
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h("p", { class: "selected_text" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '
|
|
828
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h("p", { class: "selected_text" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: 'd0810cde3bd6d1ba00592dcfc83dde2648791871', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? index.h(index.Fragment, null, this.selectedItem.username) : index.h(index.Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (index.h(index.Fragment, null, index.h("div", { key: 'c71323a6e3549e4fe446117c9175e4e1c7d0e381', class: `content` }, index.h("div", { key: '3348c00aead8540274c96b6c0cf20a0245fe29c5', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
829
829
|
.split(' ')
|
|
830
830
|
.map(part => part.charAt(0).toUpperCase())
|
|
831
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '
|
|
831
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '1543d5556ff29598ff76c99e388dd934113c51cb', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? index.h(index.Fragment, null, this.selectedItem.username) : index.h(index.Fragment, null, this.value.map(item => typeof item === 'object' && index.h(index.Fragment, null, item.username))))))))))), this.showHelpIcon && (index.h("div", { key: '060632dc5a47cfd45a4a844262d03a775c7c235e', class: `help_icon` }, index.h("gb-help-tooltip", { key: '3fc4444b3760a52df121b128d1ec00fdf6ae7b84', "show-supporting-text": true }, index.h("slot", { key: 'cade88a040bc3e2cdafe4cf29685c40870fd1472', name: "tooltip_label", slot: "label" }), index.h("slot", { key: 'bc34a808259defb67d94139d696c8a325ad16917', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '12ea7bf0586209e374fcf136d62d045f18785225', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: '0a3ed0616892edea09978503316045fc3b4fdbec', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, index.h("path", { key: '407aa32c25c742d83f0e36879197073253d2bb94', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h(index.Fragment, null, this.dropdownOpen && (index.h("div", { key: '51e6e73fd5bb921b76aeebf18af407e8f8fb2f20', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (index.h("div", { key: 'cc4ae180d1fc9d07467ded38bc71f3350aaf8934', class: "dropdown_search_field" }, index.h("gb-input-field", { key: '76032dc6e812ffcb364d28d6e0c3460d9c532e9d', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: "Search banks", type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItems.bind(this) }))), this.searchItem ? (index.h(index.Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (index.h(index.Fragment, null, this.searchResults.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username))) : (index.h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
|
|
832
832
|
//Empty state for when there are no search results
|
|
833
833
|
index.h("div", { class: "empty_state" }, index.h("img", { src: emptyStateBackground, class: "background", alt: "" }), index.h("div", { class: "message_background" }, index.h("img", { src: illustration, alt: "", class: "illustration" }), index.h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (index.h(index.Fragment, null, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username), index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item), index.h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))))))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username))) : (index.h("p", { slot: "name" }, item))))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", { slot: "supporting_text" }, item.username))) : (typeof item !== 'object' && (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item), index.h("h1", { slot: "initials" }, item)))))))))))))))), this.showHintText && index.h(index.Fragment, null, !this.destructive ? index.h("p", { class: "hint_text text-sm-regular" }, this.hintText) : index.h("p", { class: "error_text text-sm-regular" }, this.errorText))),
|
|
834
834
|
];
|