globuswebcomponents 2.18.18 → 2.19.1

package/dist/components/{p-CqPQ0agw.js.map → p-z-nLxZVO.js.map}

@@ -1 +1 @@
-{"file":"p-CqPQ0agw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n.simple-dropdown {\n  display: flex;\n  width: 17rem;\n  padding: 0px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0px;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-lg);\n}\n\n.profile {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--spacing-none);\n  border-radius: var(--rounded-none);\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef); \n  padding: 0.5rem;\n  flex: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.complex-dropdown {\n  width: 17rem;\n  display: flex;\n  padding: 0px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0px;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-lg);\n}\n\n.menu-items {\n  display: flex;\n  width: 100%;\n  padding: var(--spacing-none);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-none);\n}\n\n.list {\n  padding: var(--spacing-1) var(--spacing-none);\n  align-self: stretch;\n  border-radius: var(--rounded-none);\n}\n\n.list-group-one,\n.list-group-two,\n.list-group-three {\n  width: 100%;\n  padding: var(--spacing-1) var(--spacing-none);\n}\n\n.list-group-one,\n.list-group-two {\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.item {\n  width: 100%;\n}\n\n.label_group {\n  display: flex;\n  padding: 0px;\n  align-items: center;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: var(--rounded-none);\n}\n\n.theme_tab {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--spacing-3);\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.roles {\n  width: 100%;\n  display: flex;\n  padding: var(--spacing-3);\n  gap: var(--spacing-2);\n  flex-direction: column;\n  align-items: flex-start;\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n  color: var(--color-text, #4b5565);\n  box-sizing: border-box;\n}\n\n.badges {\n  width: 90%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  gap: 0.5rem var(--spacing-2);\n  align-self: stretch;\n  flex-wrap: wrap;\n}","import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { ColorTypes, DropdownListGroup, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\n@Component({\n  tag: 'gb-avatar-dropdown',\n  styleUrl: 'gb-avatar-dropdown.css',\n  shadow: true,\n})\nexport class GbAvatarDropdown {\n  @Prop() type: 'simple' | 'complex' = 'simple';\n  @Prop() text: boolean = false;\n  @Prop() showProfile: boolean;\n\n  @Prop() showThemeTab: boolean;\n  @Prop() showRoles: boolean = false;\n  @Prop() roles: DropdownRoles[] = [\n    // {\n    //   badgeLabel: 'Initiator',\n    //   badgeColor: 'information',\n    //   badgeType: 'badge_color',\n    // },\n    // {\n    //   badgeLabel: 'Authorizer',\n    //   badgeColor: 'success',\n    //   badgeType: 'badge_color',\n    // },\n    // {\n    //   badgeLabel: 'Viewer',\n    //   badgeColor: 'gray',\n    //   badgeType: 'badge_color',\n    // },\n  ];\n  @Prop() showLogOut: boolean;\n  @Prop() listGroupOne: DropdownListGroup[] = [\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\n  ];\n  @Prop() listGroupTwo: DropdownListGroup[] = [\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\n  ];\n  @Prop() color: ColorTypes;\n  @Prop() showBorder: boolean = false;\n  @Prop() currentTheme: ThemeTypes;\n  @Element() el: HTMLElement;\n  @Event() itemClicked: EventEmitter<string>;\n  @Event() themeTabClicked: EventEmitter<string>;\n\n  applyColorToInitials() {\n    switch (this.color) {\n      case 'gray':\n        return 'gray';\n      case 'blue':\n        return 'blue';\n      case 'cyan':\n        return 'cyan';\n      case 'pink':\n        return 'pink';\n      case 'purple':\n        return 'purple';\n      case 'green':\n        return 'green';\n      case 'yellow':\n        return 'yellow';\n    }\n  }\n\n  onItemClicked(item: string) {\n    this.itemClicked.emit(item);\n  }\n\n  emitTheme(theme) {\n    this.themeTabClicked.emit(theme);\n  }\n\n  componentDidLoad() {\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\n\n    if (slottedInitials) {\n      slottedInitials.classList.add('text-md-semi-bold');\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\n    }\n\n    if (nameInitials) {\n      nameInitials.classList.add('text-sm-semi-bold');\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add('text-sm-regular');\n    }\n  }\n\n  render() {\n    if (this.type === 'simple') {\n      return (\n        <div class=\"simple-dropdown\">\n          <div class=\"profile\">\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\n              <slot name=\"name\" slot=\"name\"></slot>\n              <slot name=\"initials\" slot=\"initials\"></slot>\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\n            </gb-avatar-label-group>\n          </div>\n          <div class=\"menu-items\">\n            <div class=\"list\">\n              {this.showThemeTab && (\n                <div class=\"theme_tab\">\n                  <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\n                </div>\n              )}\n              {this.showProfile && (\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/user_profile.svg\"\n                  label=\"View Profile\"\n                  shortcut\n                  shortcutIcon=\"K + P\"\n                  onClick={() => this.onItemClicked('view_profile')}\n                ></gb-dropdown-items-with-shortcut>\n              )}\n              {this.showLogOut && (\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/logout_button.svg\"\n                  label=\"Log out\"\n                  shortcut\n                  shortcutIcon=\"L\"\n                  onClick={() => this.onItemClicked('log_out')}\n                ></gb-dropdown-items-with-shortcut>\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    if (this.type === 'complex') {\n      return (\n        <div class=\"complex-dropdown\">\n          <div class=\"profile\">\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\n              <slot name=\"name\" slot=\"name\"></slot>\n              <slot name=\"initials\" slot=\"initials\"></slot>\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\n            </gb-avatar-label-group>\n          </div>\n          {this.showThemeTab && (\n            <div class=\"theme_tab\">\n              <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\n            </div>\n          )}\n          {this.showRoles && (\n            <div class=\"roles\">\n              <p class=\"text-sm-medium\">Available roles</p>\n              <div class=\"badges\">\n                {this.roles.map(role => (\n                  <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\n                    <p>{role.badgeLabel}</p>\n                  </gb-badge>\n                ))}\n              </div>\n            </div>\n          )}\n          {this.listGroupOne.length > 0 && (\n            <div class=\"list-group-one\">\n              {this.listGroupOne.map(item => (\n                <div class=\"item\">\n                  <gb-dropdown-items-with-shortcut\n                    icon\n                    iconSrc={item.icon}\n                    label={item.label}\n                    shortcut\n                    shortcutIcon={item.shortcut}\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\n                  ></gb-dropdown-items-with-shortcut>\n                </div>\n              ))}\n            </div>\n          )}\n          {this.listGroupTwo.length > 0 && (\n            <div class=\"list-group-two\">\n              {this.listGroupTwo.map(item => (\n                <div class=\"item\">\n                  <gb-dropdown-items-with-shortcut\n                    icon\n                    iconSrc={item.icon}\n                    label={item.label}\n                    shortcut\n                    shortcutIcon={item.shortcut}\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\n                  ></gb-dropdown-items-with-shortcut>\n                </div>\n              ))}\n            </div>\n          )}\n          {this.showLogOut && (\n            <div class=\"list-group-three\">\n              <div class=\"item\">\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/logout_button.svg\"\n                  label=\"Log out\"\n                  shortcut\n                  shortcutIcon=\"Ctrl + L\"\n                  onClick={() => this.onItemClicked('log_out')}\n                ></gb-dropdown-items-with-shortcut>\n              </div>\n            </div>\n          )}\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"p-z-nLxZVO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-avatar-dropdown/gb-avatar-dropdown.css?tag=gb-avatar-dropdown&encapsulation=shadow","src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n.simple-dropdown {\n  display: flex;\n  width: 17rem;\n  padding: 0px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0px;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-lg);\n}\n\n.profile {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--spacing-none);\n  border-radius: var(--rounded-none);\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef); \n  padding: 0.5rem;\n  flex: 1;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.complex-dropdown {\n  width: 17rem;\n  display: flex;\n  padding: 0px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0px;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-lg);\n}\n\n.menu-items {\n  display: flex;\n  width: 100%;\n  padding: var(--spacing-none);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-none);\n}\n\n.list {\n  padding: var(--spacing-1) var(--spacing-none);\n  align-self: stretch;\n  border-radius: var(--rounded-none);\n}\n\n.list-group-one,\n.list-group-two,\n.list-group-three {\n  width: 100%;\n  padding: var(--spacing-1) var(--spacing-none);\n}\n\n.list-group-one,\n.list-group-two {\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.item {\n  width: 100%;\n}\n\n.label_group {\n  display: flex;\n  padding: 0px;\n  align-items: center;\n  gap: 12px;\n  align-self: stretch;\n  border-radius: var(--rounded-none);\n}\n\n.theme_tab {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--spacing-3);\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n}\n\n.roles {\n  width: 100%;\n  display: flex;\n  padding: var(--spacing-3);\n  gap: var(--spacing-2);\n  flex-direction: column;\n  align-items: flex-start;\n  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\n  color: var(--color-text, #4b5565);\n  box-sizing: border-box;\n}\n\n.badges {\n  width: 90%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  gap: 0.5rem var(--spacing-2);\n  align-self: stretch;\n  flex-wrap: wrap;\n}","import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { ColorTypes, DropdownListGroup, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\n@Component({\n  tag: 'gb-avatar-dropdown',\n  styleUrl: 'gb-avatar-dropdown.css',\n  shadow: true,\n})\nexport class GbAvatarDropdown {\n  @Prop() type: 'simple' | 'complex' = 'simple';\n  @Prop() text: boolean = false;\n  @Prop() showProfile: boolean;\n\n  @Prop() showThemeTab: boolean;\n  @Prop() showRoles: boolean = false;\n  @Prop() roles: DropdownRoles[] = [\n    // {\n    //   badgeLabel: 'Initiator',\n    //   badgeColor: 'information',\n    //   badgeType: 'badge_color',\n    // },\n    // {\n    //   badgeLabel: 'Authorizer',\n    //   badgeColor: 'success',\n    //   badgeType: 'badge_color',\n    // },\n    // {\n    //   badgeLabel: 'Viewer',\n    //   badgeColor: 'gray',\n    //   badgeType: 'badge_color',\n    // },\n  ];\n  @Prop() showLogOut: boolean;\n  @Prop() listGroupOne: DropdownListGroup[] = [\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\n  ];\n  @Prop() listGroupTwo: DropdownListGroup[] = [\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\n  ];\n  @Prop() color: ColorTypes;\n  @Prop() showBorder: boolean = false;\n  @Prop() currentTheme: ThemeTypes;\n  @Element() el: HTMLElement;\n  @Event() itemClicked: EventEmitter<string>;\n  @Event() themeTabClicked: EventEmitter<string>;\n\n  applyColorToInitials() {\n    switch (this.color) {\n      case 'gray':\n        return 'gray';\n      case 'blue':\n        return 'blue';\n      case 'cyan':\n        return 'cyan';\n      case 'pink':\n        return 'pink';\n      case 'purple':\n        return 'purple';\n      case 'green':\n        return 'green';\n      case 'yellow':\n        return 'yellow';\n    }\n  }\n\n  onItemClicked(item: string) {\n    this.itemClicked.emit(item);\n  }\n\n  emitTheme(theme) {\n    this.themeTabClicked.emit(theme);\n  }\n\n  componentDidLoad() {\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\n\n    if (slottedInitials) {\n      slottedInitials.classList.add('text-md-semi-bold');\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\n    }\n\n    if (nameInitials) {\n      nameInitials.classList.add('text-sm-semi-bold');\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add('text-sm-regular');\n    }\n  }\n\n  render() {\n    if (this.type === 'simple') {\n      return (\n        <div class=\"simple-dropdown\">\n          <div class=\"profile\">\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\n              <slot name=\"name\" slot=\"name\"></slot>\n              <slot name=\"initials\" slot=\"initials\"></slot>\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\n            </gb-avatar-label-group>\n          </div>\n          <div class=\"menu-items\">\n            <div class=\"list\">\n              {this.showThemeTab && (\n                <div class=\"theme_tab\">\n                  <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\n                </div>\n              )}\n              {this.showProfile && (\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/user_profile.svg\"\n                  label=\"View Profile\"\n                  shortcut\n                  shortcutIcon=\"K + P\"\n                  onClick={() => this.onItemClicked('view_profile')}\n                ></gb-dropdown-items-with-shortcut>\n              )}\n              {this.showLogOut && (\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/logout_button.svg\"\n                  label=\"Log out\"\n                  shortcut\n                  shortcutIcon=\"L\"\n                  onClick={() => this.onItemClicked('log_out')}\n                ></gb-dropdown-items-with-shortcut>\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    if (this.type === 'complex') {\n      return (\n        <div class=\"complex-dropdown\">\n          <div class=\"profile\">\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\n              <slot name=\"name\" slot=\"name\"></slot>\n              <slot name=\"initials\" slot=\"initials\"></slot>\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\n            </gb-avatar-label-group>\n          </div>\n          {this.showThemeTab && (\n            <div class=\"theme_tab\">\n              <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\n            </div>\n          )}\n          {this.showRoles && (\n            <div class=\"roles\">\n              <p class=\"text-sm-medium\">Available roles</p>\n              <div class=\"badges\">\n                {this.roles.map(role => (\n                  <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\n                    <p>{role.badgeLabel}</p>\n                  </gb-badge>\n                ))}\n              </div>\n            </div>\n          )}\n          {this.listGroupOne.length > 0 && (\n            <div class=\"list-group-one\">\n              {this.listGroupOne.map(item => (\n                <div class=\"item\">\n                  <gb-dropdown-items-with-shortcut\n                    icon\n                    iconSrc={item.icon}\n                    label={item.label}\n                    shortcut\n                    shortcutIcon={item.shortcut}\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\n                  ></gb-dropdown-items-with-shortcut>\n                </div>\n              ))}\n            </div>\n          )}\n          {this.listGroupTwo.length > 0 && (\n            <div class=\"list-group-two\">\n              {this.listGroupTwo.map(item => (\n                <div class=\"item\">\n                  <gb-dropdown-items-with-shortcut\n                    icon\n                    iconSrc={item.icon}\n                    label={item.label}\n                    shortcut\n                    shortcutIcon={item.shortcut}\n                    onClick={() => this.onItemClicked(item.label.replace(/\\s+/g, '_').toLowerCase())}\n                  ></gb-dropdown-items-with-shortcut>\n                </div>\n              ))}\n            </div>\n          )}\n          {this.showLogOut && (\n            <div class=\"list-group-three\">\n              <div class=\"item\">\n                <gb-dropdown-items-with-shortcut\n                  icon\n                  iconSrc=\"assets/logout_button.svg\"\n                  label=\"Log out\"\n                  shortcut\n                  shortcutIcon=\"Ctrl + L\"\n                  onClick={() => this.onItemClicked('log_out')}\n                ></gb-dropdown-items-with-shortcut>\n              </div>\n            </div>\n          )}\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/components/test-input-tag.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-CD7FeUx5.js';
 import { S as StateEnum } from './p-cHn6O-Kf.js';
-import { d as defineCustomElement$b } from './p-CiIf2jTd.js';
+import { d as defineCustomElement$b } from './p-CgLuRbaL.js';
 import { d as defineCustomElement$a } from './p-DhmmSqYS.js';
 import { d as defineCustomElement$9 } from './p-OVoS3dKe.js';
 import { d as defineCustomElement$8 } from './p-BE9pk1IO.js';
-import { d as defineCustomElement$7 } from './p-D5wRXGjr.js';
-import { d as defineCustomElement$6 } from './p-Cd6l_J_d.js';
-import { d as defineCustomElement$5 } from './p-BLNHxN4m.js';
-import { d as defineCustomElement$4 } from './p-DSWKsMVQ.js';
-import { d as defineCustomElement$3 } from './p-DkuZ63iF.js';
-import { d as defineCustomElement$2 } from './p-JZVVGFgd.js';
+import { d as defineCustomElement$7 } from './p-yhPI0UDy.js';
+import { d as defineCustomElement$6 } from './p-Bd_W1zWv.js';
+import { d as defineCustomElement$5 } from './p-CnQIvd5K.js';
+import { d as defineCustomElement$4 } from './p-BYTuxIjn.js';
+import { d as defineCustomElement$3 } from './p-7t9DGALC.js';
+import { d as defineCustomElement$2 } from './p-CPNfYdRm.js';
 
 const testInputTagCss = ".input_group{--height:auto;--inputheight:4.5rem;--weight:100%;display:flex;position:relative}.input_like_parent{width:100%;border:1px solid var(--color-border-input, #CDD5DF);border-radius:var(--rounded-sm);padding:0.625rem 0.875rem 0.625rem var(--spacing-3)}.input_like{width:100%;overflow-y:scroll;transition:height 50ms ease-in-out}.results_display{display:flex;flex-wrap:wrap;gap:0.5rem;background-color:var(--color-surface, #FFFFFF);display:none;margin-top:0.5rem}.results_display.show_results{display:block}.tags{padding-top:1rem}.dropdown_list.show{display:block}.dropdown_menu{display:flex;width:100%;max-height:15rem;padding:var(--spacing-none);flex-direction:column;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-surface, #FFFFFF);box-shadow:var(--shadow-sm);position:absolute;top:100%;z-index:10;gap:var(--spacing-none);transition:1s ease-in-out}";
 
@@ -89,7 +89,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (h("div", { key: 'e9a62d1f71cfe6726c19780b7e54e4b8fce5da7d', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: 'e9ea8c2f7b9e580ea0cefe0572d91f6959455f98', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '3a29ecac78632b6cb45cc3bcbc2d8d89c8e17eb4', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: 'ad79c1fc70e7eb48e0c3e54ffa4466a7c2201a1f', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '36b5d2eb33af4cd31516293add5bc2b32843131d', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
+        return (h("div", { key: '34b18e19163cbef429844af59cd80e3fb4988b58', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: '49204ef9d9407f76451aad133ae590fae4f7e896', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '3affbc703efcc909770bc96ca3e2d0c4d237fb8f', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '036928e5d641746b2699ea7245dec01b29f79a7a', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: 'df0482c42fb6932eccc04ea99369c8dd223588e7', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -98,7 +98,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'ea276f5e8bdb9131f252e3787a383c2b1af3a740', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: '6a678e38c617d914bcb4db6065d34351b0809ac4', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-18T07:37:30",
+  "timestamp": "2026-09-21T20:02:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -20243,6 +20243,267 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "trailingButtonHierarchy",
+          "type": "\"link_color\" | \"link_gray\" | \"primary\" | \"secondary_color\" | \"secondary_gray\" | \"tertiary_color\" | \"tertiary_gray\"",
+          "complexType": {
+            "original": "GeneralHierarchies",
+            "resolved": "\"link_color\" | \"link_gray\" | \"primary\" | \"secondary_color\" | \"secondary_gray\" | \"tertiary_color\" | \"tertiary_gray\"",
+            "references": {
+              "GeneralHierarchies": {
+                "location": "import",
+                "path": "../../models/reusableModels",
+                "id": "src/models/reusableModels.ts::GeneralHierarchies"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "trailing-button-hierarchy",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'tertiary_gray'"
+            }
+          ],
+          "default": "'tertiary_gray'",
+          "values": [
+            {
+              "value": "link_color",
+              "type": "string"
+            },
+            {
+              "value": "link_gray",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "secondary_color",
+              "type": "string"
+            },
+            {
+              "value": "secondary_gray",
+              "type": "string"
+            },
+            {
+              "value": "tertiary_color",
+              "type": "string"
+            },
+            {
+              "value": "tertiary_gray",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "trailingButtonIcon",
+          "type": "\"default\" | \"only\"",
+          "complexType": {
+            "original": "'default' | 'only'",
+            "resolved": "\"default\" | \"only\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "trailing-button-icon",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "only",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "trailingButtonIconLeading",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "trailing-button-icon-leading",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Verify'"
+            }
+          ],
+          "default": "'Verify'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "trailingButtonIconTrailing",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "trailing-button-icon-trailing",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Verify'"
+            }
+          ],
+          "default": "'Verify'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "trailingButtonSize",
+          "type": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxxl\"",
+          "complexType": {
+            "original": "GeneralSizes",
+            "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\" | \"xxxl\" | \"xxxxl\"",
+            "references": {
+              "GeneralSizes": {
+                "location": "import",
+                "path": "../../models/reusableModels",
+                "id": "src/models/reusableModels.ts::GeneralSizes"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "trailing-button-size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'lg'"
+            }
+          ],
+          "default": "'lg'",
+          "values": [
+            {
+              "value": "lg",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "profile_lg",
+              "type": "string"
+            },
+            {
+              "value": "profile_md",
+              "type": "string"
+            },
+            {
+              "value": "profile_sm",
+              "type": "string"
+            },
+            {
+              "value": "sm",
+              "type": "string"
+            },
+            {
+              "value": "xl",
+              "type": "string"
+            },
+            {
+              "value": "xs",
+              "type": "string"
+            },
+            {
+              "value": "xxl",
+              "type": "string"
+            },
+            {
+              "value": "xxs",
+              "type": "string"
+            },
+            {
+              "value": "xxxl",
+              "type": "string"
+            },
+            {
+              "value": "xxxxl",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "trailingButtonText",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "trailing-button-text",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Verify'"
+            }
+          ],
+          "default": "'Verify'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "type",
           "type": "\"count\" | \"default\" | \"icon_leading\" | \"leading_dropdown\" | \"leading_text\" | \"password\" | \"password_icon_leading\" | \"payment_input\" | \"tags\" | \"trailing_button\" | \"trailing_dropdown\"",