globuswebcomponents 0.5.8 → 0.6.1

package/dist/types/components/gb-horizontal-tabs/gb-horizontal-tabs.d.ts

@@ -5,14 +5,6 @@ export declare class GbHorizontalTabs {
     size: GeneralSizes;
     fullWidth: boolean;
     breakpoint: BreakPoints;
-    thirdTab: boolean;
-    fourthTab: boolean;
-    fifthTab: boolean;
-    sixthTab: boolean;
-    seventhTab: boolean;
-    eighthTab: boolean;
-    ninthTab: boolean;
-    tenthTab: boolean;
     firstTabName: string;
     secondTabName: string;
     thirdTabName: string;

package/dist/types/components.d.ts

@@ -200,25 +200,17 @@ export namespace Components {
     interface GbHorizontalTabs {
         "activeIndex": number;
         "breakpoint": BreakPoints;
-        "eighthTab": boolean;
         "eighthTabName": string;
-        "fifthTab": boolean;
         "fifthTabName": string;
         "firstTabName": string;
-        "fourthTab": boolean;
         "fourthTabName": string;
         "fullWidth": boolean;
-        "ninthTab": boolean;
         "ninthTabName": string;
         "secondTabName": string;
-        "seventhTab": boolean;
         "seventhTabName": string;
-        "sixthTab": boolean;
         "sixthTabName": string;
         "size": GeneralSizes;
-        "tenthTab": boolean;
         "tenthTabName": string;
-        "thirdTab": boolean;
         "thirdTabName": string;
         "type": TabTypes;
     }
@@ -1237,26 +1229,18 @@ declare namespace LocalJSX {
     interface GbHorizontalTabs {
         "activeIndex"?: number;
         "breakpoint"?: BreakPoints;
-        "eighthTab"?: boolean;
         "eighthTabName"?: string;
-        "fifthTab"?: boolean;
         "fifthTabName"?: string;
         "firstTabName"?: string;
-        "fourthTab"?: boolean;
         "fourthTabName"?: string;
         "fullWidth"?: boolean;
-        "ninthTab"?: boolean;
         "ninthTabName"?: string;
         "onTabItemClicked"?: (event: GbHorizontalTabsCustomEvent<number>) => void;
         "secondTabName"?: string;
-        "seventhTab"?: boolean;
         "seventhTabName"?: string;
-        "sixthTab"?: boolean;
         "sixthTabName"?: string;
         "size"?: GeneralSizes;
-        "tenthTab"?: boolean;
         "tenthTabName"?: string;
-        "thirdTab"?: boolean;
         "thirdTabName"?: string;
         "type"?: TabTypes;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "0.5.8",
+  "version": "0.6.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -14,8 +14,6 @@
       "require": "./dist/globuscomponents/globuscomponents.cjs.js"
     },
     "./global/global.css": "dist/collection/global/global.css",
-    "./global/spacing.css": "dist/collection/global/spacing.css",
-    "./global/typography.css": "dist/collection/global/typography.css",
     "./my-component": {
       "import": "./dist/components/my-component.js",
       "types": "./dist/components/my-component.d.ts"

package/dist/components/p-4a82c33c.js.map

@@ -1 +0,0 @@
-{"file":"p-4a82c33c.js","mappings":";;;AAAA,MAAM,8BAA8B,GAAG,sirEAAsirE,CAAC;AAC9krE,0CAAe,8BAA8B;;MCQhC,2BAA2B;;;;;;;0BAGN,KAAK;;IAEnC,SAAS;QACL,IAAG,IAAI,CAAC,UAAU,EAAC;YACjB,QAAQ,IAAI,CAAC,IAAI;gBACjB,KAAK,KAAK;oBACR,OAAO,aAAa,CAAC,OAAO,CAAC;gBAC/B,KAAK,IAAI;oBACP,OAAO,aAAa,CAAC,OAAO,CAAC;gBAC/B,KAAK,IAAI;oBACP,OAAO,aAAa,CAAC,OAAO,CAAC;gBAC/B,KAAK,IAAI;oBACP,OAAO,aAAa,CAAC,OAAO,CAAC;gBAC/B,KAAK,IAAI;oBACP,OAAO,aAAa,CAAC,KAAK,CAAC;gBAC7B,KAAK,IAAI;oBACP,OAAO,aAAa,CAAC,KAAK,CAAC;gBAC7B,KAAK,KAAK;oBACR,OAAO,aAAa,CAAC,SAAS,CAAC;gBACjC,KAAK,YAAY;oBACf,OAAO,aAAa,CAAC,KAAK,CAAC;gBAC7B,KAAK,YAAY;oBACf,OAAO,aAAa,CAAC,KAAK,CAAC;gBAC7B,KAAK,YAAY;oBACf,OAAO,aAAa,CAAC,OAAO,CAAC;aAC9B;SACF;KACJ;IAED,MAAM;QACF,QACE,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,EAAE,EAAE,IAC3F,8DAAa,CACT,EACN;KACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.css?tag=gb-avatar-contrast-inner-border&encapsulation=shadow","src/components/gb-avatar-contrast-inner-border/gb-avatar-contrast-inner-border.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.inner_border{\r\n    border-radius: var(--rounded-full);\r\n    width: fit-content;\r\n    height: fit-content;\r\n}\r\n\r\n.inner_border.no_border{\r\n    border: 1px solid transparent;\r\n}\r\n\r\n/* Weights */\r\n.inner_border.border{\r\n    border: 0.3px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.light{\r\n    border: 0.5px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.regular{\r\n    border: 0.75px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}\r\n\r\n.inner_border.heavy{\r\n    border: 1px solid var(--color-blanket-subtler, rgba(33, 44, 101, 0.2));\r\n}","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-contrast-inner-border',\r\n    styleUrl: 'gb-avatar-contrast-inner-border.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarContrastInnerBorder {\r\n    @Prop() weight: BorderWeights;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() showBorder: boolean = false;\r\n\r\n    setWeight() {\r\n        if(this.showBorder){\r\n          switch (this.size) {\r\n          case 'xl2':\r\n            return BorderWeights.Regular;\r\n          case 'xl':\r\n            return BorderWeights.Regular;\r\n          case 'lg':\r\n            return BorderWeights.Regular;\r\n          case 'md':\r\n            return BorderWeights.Regular;\r\n          case 'sm':\r\n            return BorderWeights.Light;\r\n          case 'xs':\r\n            return BorderWeights.Light;\r\n          case 'xxs':\r\n            return BorderWeights.VeryLight;\r\n          case 'profile_lg':\r\n            return BorderWeights.Heavy;\r\n          case 'profile_md':\r\n            return BorderWeights.Heavy;\r\n          case 'profile_sm':\r\n            return BorderWeights.Regular;\r\n          }\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`inner_border ${this.size} ${this.weight} ${!this.showBorder ? 'no_border' : ''}`}>\r\n            <slot></slot>\r\n          </div>\r\n        );\r\n    }\r\n}"],"version":3}

package/dist/components/p-4bc83f8c.js.map

@@ -1 +0,0 @@
-{"file":"p-4bc83f8c.js","mappings":"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","names":[],"sources":["src/components/gb-avatar/gb-avatar.css?tag=gb-avatar&encapsulation=shadow","src/components/gb-avatar/gb-avatar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n}\r\n\r\n.avatar{\r\n    position: relative;\r\n    width: fit-content;\r\n    border-radius: var(--rounded-full);\r\n    cursor: pointer;\r\n}\r\n\r\n.inner_content.xxs{\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n}\r\n\r\n.inner_content.xs{\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n}\r\n\r\n.inner_content.sm{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.inner_content.md{\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n}\r\n\r\n.inner_content.lg{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n\r\n.inner_content.xl{\r\n    width: 3.5rem;\r\n    height: 3.5rem;\r\n}\r\n\r\n.inner_content.xl2{\r\n    width: 4rem;\r\n    height: 4rem;\r\n}\r\n\r\n.inner_content.profile_sm{\r\n    width: 4.5rem;\r\n    height: 4.5rem;\r\n}\r\n\r\n.inner_content.profile_md{\r\n    width: 6rem;\r\n    height: 6rem;\r\n}\r\n\r\n.inner_content.profile_lg{\r\n    width: 10rem;\r\n    height: 10rem;\r\n}\r\n\r\n::slotted(img){\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n.placeholder,\r\n.initials{\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n.indicator{\r\n    position: absolute;\r\n    bottom: -0.1rem;\r\n    right: -0.03rem;\r\n}\r\n\r\n/* Size Styles */\r\n.user_avatar.xxs{\r\n    width: 0.75rem;\r\n    height: 0.75rem;\r\n}\r\n\r\n.user_avatar.xs{\r\n    width: var(--spacing-4);\r\n    height: var(--spacing-4);\r\n}\r\n\r\n.user_avatar.sm{\r\n    width: var(--spacing-5);\r\n    height: var(--spacing-5);\r\n}\r\n\r\n.user_avatar.md{\r\n    width: var(--spacing-6);\r\n    height: var(--spacing-6);\r\n}\r\n\r\n.user_avatar.lg{\r\n    width: 1.75rem;\r\n    height: 1.75rem;\r\n}\r\n\r\n.user_avatar.xl{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.user_avatar.xl2{\r\n    width: 2rem;\r\n    height: 2rem;\r\n}\r\n\r\n.user_avatar.profile_sm{\r\n    width: 2.25rem;\r\n    height: 2.25rem;\r\n}\r\n\r\n.user_avatar.profile_md{\r\n    width: 3rem;\r\n    height: 3rem;\r\n}\r\n\r\n.user_avatar.profile_lg{\r\n    width: 5rem;\r\n    height: 5rem;\r\n}\r\n\r\n/* Avatar Color Styles */\r\n.initials.gray,\r\n.placeholder.gray{\r\n    background-color: #EEF2F6;\r\n}\r\n\r\n.initials.gray:hover,\r\n.placeholder.gray:hover{\r\n    background-color: #E3E8EF;\r\n}\r\n\r\n.initials.gray:active,\r\n.placeholder.gray:active{\r\n    background-color: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.initials.blue,\r\n.placeholder.blue{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.initials.blue:hover,\r\n.placeholder.blue:hover{\r\n    background-color: var(--color-background-information-subtle, #9AC7F4);\r\n}\r\n\r\n.initials.blue:active,\r\n.placeholder.blue:active{\r\n    background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.initials.cyan,\r\n.placeholder.cyan{\r\n    background-color: var(--color-background-discovery-subtler, #E0F2FE);\r\n}\r\n\r\n.initials.cyan:hover,\r\n.placeholder.cyan:hover{\r\n    background-color: var(--color-background-discovery-subtle, #B9E6FE);\r\n}\r\n\r\n.initials.cyan:active,\r\n.placeholder.cyan:active{\r\n    background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\n.initials.pink,\r\n.placeholder.pink{\r\n    background-color: var(--color-background-pink-subtler, #FCE7F6);\r\n}\r\n\r\n.initials.pink:hover,\r\n.placeholder.pink:hover{\r\n    background-color: var(--color-background-pink-subtle, #FCCEEE);\r\n}\r\n\r\n.initials.pink:active,\r\n.placeholder.pink:active{\r\n    background-color: var(--color-background-pink-subtlest, #FDF2FA);\r\n}\r\n\r\n.initials.purple,\r\n.placeholder.purple{\r\n    background-color: var(--color-background-purple-subtler, #EBE9FE);\r\n}\r\n\r\n.initials.purple:hover,\r\n.placeholder.purple:hover{\r\n    background-color: var(--color-background-purple-subtle, #D9D6FE);\r\n}\r\n\r\n.initials.purple:active,\r\n.placeholder.purple:active{\r\n    background-color: var(--color-background-purple-subtlest, #F4F3FF);\r\n}\r\n\r\n.initials.green,\r\n.placeholder.green{\r\n    background-color: var(--color-background-success-subtler, #DCFAE6);\r\n}\r\n\r\n.initials.green:hover,\r\n.placeholder.green:hover{\r\n    background-color: var(--color-background-success-subtle, #A9EFC5);\r\n}\r\n\r\n.initials.green:active,\r\n.placeholder.green:active{\r\n    background-color: var(--color-background-success-subtlest, #ECFDF3);\r\n}\r\n\r\n.initials.yellow,\r\n.placeholder.yellow{\r\n    background-color: var(--color-background-warning-subtler, #FEF0C7);\r\n}\r\n\r\n.initials.yellow:hover,\r\n.placeholder.yellow:hover{\r\n    background-color: var(--color-background-warning-subtle, #FEDF89);\r\n}\r\n\r\n.initials.yellow:active,\r\n.placeholder.yellow:active{\r\n    background-color: var(--color-background-warning-subtlest, #FFFAEB);\r\n}\r\n\r\n::slotted([slot=\"initials\"].gray){\r\n    color: #4B5565;\r\n}\r\n\r\n::slotted([slot=\"initials\"].blue){\r\n    color: var(--color-text-information, #064E94);\r\n}\r\n\r\n::slotted([slot=\"initials\"].cyan){\r\n    color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n::slotted([slot=\"initials\"].pink){\r\n    color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n::slotted([slot=\"initials\"].purple){\r\n    color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n::slotted([slot=\"initials\"].green){\r\n    color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot=\"initials\"].yellow){\r\n    color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.user_avatar.gray path{\r\n    fill: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.user_avatar.blue path{\r\n    fill: var(--color-icon-information, #064E94);\r\n}\r\n\r\n.user_avatar.cyan path{\r\n    fill: var(--color-icon-discovery, #0086C9);\r\n}\r\n\r\n.user_avatar.pink path{\r\n    fill: var(--color-icon-pink, #DD2590);\r\n}\r\n\r\n.user_avatar.purple path{\r\n    fill: var(--color-icon-purple, #6938EF);\r\n}\r\n\r\n.user_avatar.green path{\r\n    fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.user_avatar.yellow path{\r\n    fill: var(--color-icon-warning, #DC6803);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, BorderWeights, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar',\r\n    styleUrl: 'gb-avatar.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatar {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() statusIcon: string = '';\r\n    @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n    @Prop() icon: 'user' = 'user';\r\n    @Prop() color: AvatarColorTypes;\r\n    @Prop() showBorder: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() weight: BorderWeights = BorderWeights.Light;\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'xl2': return 'display-xs-semi-bold';\r\n            case 'xl': return 'text-xl-semi-bold';\r\n            case 'lg': return 'text-lg-semi-bold';\r\n            case 'md': return 'text-md-semi-bold';\r\n            case 'sm': return 'text-sm-semi-bold';\r\n            case 'xs': return 'text-xs-semi-bold';\r\n            case 'xxs': return 'text-xxs-semi-bold';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        if(this.showBorder){\r\n            switch (this.size) {\r\n              case 'xl2':\r\n                return BorderWeights.Regular;\r\n              case 'xl':\r\n                return BorderWeights.Regular;\r\n              case 'lg':\r\n                return BorderWeights.Regular;\r\n              case 'md':\r\n                return BorderWeights.Regular;\r\n              case 'sm':\r\n                return BorderWeights.Light;\r\n              case 'xs':\r\n                return BorderWeights.Light;\r\n              case 'xxs':\r\n                return BorderWeights.VeryLight;\r\n            }\r\n        }\r\n    }\r\n\r\n    applyColorToInitials() {\r\n        switch(this.color) {\r\n            case 'gray': return 'gray';\r\n            case 'blue': return 'blue';\r\n            case 'cyan': return 'cyan';\r\n            case 'pink': return 'pink';\r\n            case 'purple': return 'purple';\r\n            case 'green': return 'green';\r\n            case 'yellow': return 'yellow';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n            slottedInitials.classList.add(this.applyColorToInitials());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return [\r\n          <div class=\"avatar\">\r\n            <gb-avatar-contrast-inner-border show-border={this.showBorder} border-size={this.size} weight={this.weight}>\r\n              <div class={`inner_content ${this.size}`}>\r\n                {!this.text ? (\r\n                  <slot name=\"image\"></slot>\r\n                ) : (\r\n                  <div class={`initials ${this.color}`}>\r\n                    <slot name=\"initials\"></slot>\r\n                  </div>\r\n                )}\r\n                {this.placeholder && (\r\n                  <div class={`placeholder ${this.color}`}>\r\n                    {this.icon === 'user' && (\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size} ${this.color}`}>\r\n                        <path\r\n                          d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\"\r\n                          fill=\"#697586\"\r\n                        />\r\n                        <path\r\n                          d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\"\r\n                          fill=\"#697586\"\r\n                        />\r\n                      </svg>\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            </gb-avatar-contrast-inner-border>\r\n            <gb-status-indicator class={`indicator ${this.size}`} status-icon={this.statusIcon} size={this.size} state={this.state}></gb-status-indicator>\r\n          </div>,\r\n        ];\r\n    }\r\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-ac032422.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,0l5EAA0l5E,CAAC;AAC5m5E,oBAAe,QAAQ;;MCMV,QAAQ;;;;;;;2BAIY,KAAK;;2BAEL,KAAK;;4BAEJ,KAAK;;8BAGH,EAAE;+BACD,EAAE;;IAErC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE;YAC5C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;SAChD;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC9C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAClD;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAE9C,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACtD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SACpC;KACF;IAED,MAAM,QAAQ,CAAC,QAAgB,EAAE,IAA4B;QAC3D,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;SAC5B;KACF;;IAGD,gBAAgB;QACd,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YACjB,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YACnC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;YAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;SAE3B,CAAC;KACH;IAED,oBAAoB;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,KAAK;gBACR,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,iBAAiB;QACf,OAAO,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAAC;KAC1F;IAED,kBAAkB;QAChB,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,GAAQ,CAAC;KAC7E;IAED,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACnC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE,EACvE,IAAI,CAAC,IAAI,KAAK,SAAS,KACtB,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,GAAG,QAAQ,EAAE,IAC/F,8DAAa,CACT,CACP,EACA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAC9C,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAC1C,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-btn/gb-btn.css?tag=gb-btn","src/components/gb-btn/gb-btn.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* *{box-sizing: border-box; margin: 0; padding: 0;} */\r\n:host {\r\n  --button-color: var(--primary-color);\r\n  --icon-color: var(--primary-color);\r\n}\r\n\r\nbutton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-sm);\r\n  width: 100%;\r\n}\r\n\r\nbutton.only{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\nbutton .icon {\r\n  display: inline-flex;\r\n  width: auto;\r\n  height: auto;\r\n}\r\n\r\nbutton .icon svg path[fill] {\r\n  fill: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg path[stroke] {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\nbutton .icon svg circle {\r\n  stroke: var(--icon-color);\r\n}\r\n\r\n/* Button Sizes Styles */\r\nbutton.xl2{\r\n  padding: var(--spacing-none) var(--spacing-6);\r\n  height: 3.5rem;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\nbutton.xl{\r\n  padding: var(--spacing-none) var(--spacing-5);\r\n  height: 3rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.lg{\r\n  padding: 0.625rem 1.125rem;\r\n  height: 2.75rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.md{\r\n  padding: var(--spacing-none) var(--spacing-4);\r\n  height: 2.5rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.sm{\r\n  padding: var(--spacing-none) var(--spacing-3);\r\n  height: 2.25rem;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\nbutton.only.xl2{\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n}\r\n\r\nbutton.only.xl{\r\n  width: 3rem;\r\n  height: 3rem;\r\n}\r\n\r\nbutton.only.lg{\r\n  width: 2.75rem;\r\n  height: 2.75rem;\r\n}\r\n\r\nbutton.only.md{\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\nbutton.only.sm{\r\n  width: 2.25rem;\r\n  height: 2.25rem;\r\n}\r\n\r\nbutton.xl2 .icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\nbutton.xl .icon svg,\r\nbutton.lg .icon svg,\r\nbutton.md .icon svg,\r\nbutton.sm .icon svg{\r\n  width: var(--spacing-5);\r\n  height: var(--spacing-5);\r\n}\r\n\r\n/* Hierarchy Styles */\r\nbutton.primary {\r\n  background-color: var(--color-background-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-inverse, #FFFFFF);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border, #9AA4B2);\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.secondary_color {\r\n  background-color: transparent;\r\n  border: 1px solid var(--color-border-brandRed, #E21B2E);\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.tertiary_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\nbutton.tertiary_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon-brandRed, #E21B2E);\r\n  color: var(--color-text-brandRed, #E21B2E);\r\n}\r\n\r\nbutton.link_gray {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-icon, #4B5565);\r\n  color: var(--color-text, #4B5565);\r\n  height: fit-content;\r\n}\r\n\r\nbutton.link_color {\r\n  background-color: transparent;\r\n  --icon-color: var(--color-link, #075DB2);\r\n  color: var(--color-link, #075DB2);\r\n  padding: var(--spacing-none);\r\n  height: fit-content;\r\n}\r\n\r\n/* Button Destructive Styles */\r\nbutton.primary.destructive{\r\n  background-color: var(--color-background-danger, #B51726);\r\n  color: var(--color-text-inverse, #FFFFFF);\r\n  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);\r\n}\r\n\r\nbutton.secondary_gray.destructive, button.secondary_color.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.tertiary_gray.destructive,\r\nbutton.tertiary_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\nbutton.link_gray.destructive, \r\nbutton.link_color.destructive{\r\n  color: var(--color-text-danger, #B51726);\r\n  --icon-color: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n/* Button States Styles */\r\nbutton.primary:hover{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A);\r\n}\r\n\r\nbutton.primary:active{\r\n  background-color: var(--color-background-brandRed-pressed, #B51726);\r\n}\r\n\r\nbutton.secondary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.secondary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.secondary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray:hover{\r\n  background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\nbutton.tertiary_gray:active{\r\n  background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_color:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_color:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray:hover,\r\nbutton.link_color:hover{\r\n  text-decoration: underline;\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n\r\nbutton.link_gray:active{\r\n  text-decoration: none;\r\n  color: var(--color-link-pressed, #064E94);\r\n}\r\n\r\nbutton.primary.destructive:hover{\r\n  background-color: var(--color-background-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.primary.destructive:active{\r\n  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */\r\n}\r\n\r\nbutton.secondary_gray.destructive:hover, \r\nbutton.secondary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.secondary_gray.destructive:active, \r\nbutton.secondary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:hover, \r\nbutton.tertiary_color.destructive:hover{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n}\r\n\r\nbutton.tertiary_gray.destructive:active, \r\nbutton.tertiary_color.destructive:active{\r\n  background-color: var(--color-background-danger-subtler, #FDE3E5);\r\n}\r\n\r\nbutton.link_gray.destructive:active{\r\n  color: var(--color-text-danger-bold, #8C121D);\r\n}\r\n\r\nbutton.link_color.destructive:active{\r\n  color: var(--color-text-warning-bold, #93370D);\r\n}\r\n\r\n/* Button Disabled Styles */\r\nbutton.disabled{\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\nbutton.primary.disabled {\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\nbutton.secondary_gray.disabled,\r\nbutton.secondary_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\nbutton.tertiary_gray.disabled,\r\nbutton.tertiary_color.disabled,\r\nbutton.link_gray.disabled,\r\nbutton.link_color.disabled{\r\n  --icon-color: var(--color-icon-disabled, #CDD5DF);\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.btn_text{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.nowrap{\r\n  white-space: nowrap;\r\n}\r\n\r\n.oneicon{\r\n  justify-content: center;\r\n  gap: var(--spacing-2);\r\n}","import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      // leftandrighticon: this.iconLeading && this.iconTrailing\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && (\r\n          <div class={`btn_text ${this.iconTrailing ? 'oneicon' : this.iconLeading ? 'oneicon' : 'noicon'}`}>\r\n            <slot></slot>\r\n          </div>\r\n        )}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}"],"version":3}