globuswebcomponents 0.6.8 → 0.6.9
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-label-group.cjs.entry.js +16 -8
- package/dist/cjs/gb-avatar-label-group.cjs.entry.js.map +1 -1
- package/dist/cjs/gb-avatar_34.cjs.entry.js +7 -12
- package/dist/cjs/gb-avatar_34.cjs.entry.js.map +1 -1
- package/dist/cjs/gb-progress-circle.cjs.entry.js +29 -2
- package/dist/cjs/gb-progress-circle.cjs.entry.js.map +1 -1
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-avatar-label-group/gb-avatar-label-group.js +34 -8
- package/dist/collection/components/gb-avatar-label-group/gb-avatar-label-group.js.map +1 -1
- package/dist/collection/components/gb-badges/gb-badges.js +3 -3
- package/dist/collection/components/gb-badges/gb-badges.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +4 -9
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map +1 -1
- package/dist/collection/components/gb-progress-circle/gb-progress-circle.css +1059 -28
- package/dist/collection/components/gb-progress-circle/gb-progress-circle.js +31 -1
- package/dist/collection/components/gb-progress-circle/gb-progress-circle.js.map +1 -1
- package/dist/components/gb-avatar-dropdown.js +1 -1
- package/dist/components/gb-avatar-label-group.js +1 -1
- package/dist/components/gb-badge.js +1 -1
- package/dist/components/gb-horizontal-tabs.js +2 -2
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-progress-circle.js +31 -2
- package/dist/components/gb-progress-circle.js.map +1 -1
- package/dist/components/gb-rich-text.js +2 -2
- package/dist/components/gb-side-bar-item.js +1 -1
- package/dist/components/gb-sidebar.js +2 -2
- package/dist/components/gb-tab-button-base.js +1 -1
- package/dist/components/gb-wysiwyg-toolbar.js +1 -1
- package/dist/components/{p-7aa86c0a.js → p-1a48b67c.js} +2 -2
- package/dist/components/{p-7aa86c0a.js.map → p-1a48b67c.js.map} +1 -1
- package/dist/components/{p-f2074ab5.js → p-2f0490eb.js} +2 -2
- package/dist/components/{p-f2074ab5.js.map → p-2f0490eb.js.map} +1 -1
- package/dist/components/{p-263891a0.js → p-52456b02.js} +5 -10
- package/dist/components/p-52456b02.js.map +1 -0
- package/dist/components/{p-eced7b26.js → p-72cec745.js} +4 -4
- package/dist/components/{p-eced7b26.js.map → p-72cec745.js.map} +1 -1
- package/dist/components/{p-7b737a93.js → p-7f3d3cde.js} +19 -10
- package/dist/components/p-7f3d3cde.js.map +1 -0
- package/dist/components/{p-9105c575.js → p-f6b42e81.js} +2 -2
- package/dist/components/{p-9105c575.js.map → p-f6b42e81.js.map} +1 -1
- package/dist/esm/gb-avatar-label-group.entry.js +16 -8
- package/dist/esm/gb-avatar-label-group.entry.js.map +1 -1
- package/dist/esm/gb-avatar_34.entry.js +7 -12
- package/dist/esm/gb-avatar_34.entry.js.map +1 -1
- package/dist/esm/gb-progress-circle.entry.js +30 -3
- package/dist/esm/gb-progress-circle.entry.js.map +1 -1
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js.map +1 -1
- package/dist/globuscomponents/{p-18860d05.entry.js → p-517691ca.entry.js} +2 -2
- package/dist/globuscomponents/p-517691ca.entry.js.map +1 -0
- package/dist/globuscomponents/p-87511b2a.entry.js +2 -0
- package/dist/globuscomponents/p-87511b2a.entry.js.map +1 -0
- package/dist/globuscomponents/p-a288d071.entry.js +2 -0
- package/dist/globuscomponents/p-a288d071.entry.js.map +1 -0
- package/dist/types/components/gb-avatar-label-group/gb-avatar-label-group.d.ts +1 -0
- package/dist/types/components/gb-progress-circle/gb-progress-circle.d.ts +6 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/dist/components/p-263891a0.js.map +0 -1
- package/dist/components/p-7b737a93.js.map +0 -1
- package/dist/globuscomponents/p-18860d05.entry.js.map +0 -1
- package/dist/globuscomponents/p-96341def.entry.js +0 -2
- package/dist/globuscomponents/p-96341def.entry.js.map +0 -1
- package/dist/globuscomponents/p-bd848c28.entry.js +0 -2
- package/dist/globuscomponents/p-bd848c28.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-eced7b26.js","mappings":"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","names":[],"sources":["src/components/gb-badges/gb-badges.css?tag=gb-badge&encapsulation=shadow","src/components/gb-badges/gb-badges.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm{\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n background: var(--color-background-gray-subtler, #EEF2F6 );\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC); \r\n color: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #FDE3E5);\r\n background: var(--color-background-danger-subtlest, #FEF1F2 );\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #FEF0C7);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #DCFAE6);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #E0F2FE);\r\n background: var(--color-background-discovery-subtlest,#F0F9FF);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #FCE7F6);\r\n background: var(--color-background-pink-subtlest, #FDF2FA);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #EBE9FE);\r\n background: var(--color-background-purple-subtlest, #F4F3FF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path {\r\n fill: var(--color-text, #4B5565);\r\n stroke: var(--color-text, #4B5565) /*var(--color-icon)*/;\r\n}\r\n\r\n.primary svg path {\r\n fill: var(--color-text-brandDarkBlue, #212C65);\r\n stroke: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.error svg path {\r\n fill: var(--color-text-danger, #B51726);\r\n stroke: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.warning svg path {\r\n fill: var(--color-text-warning, #DC6803);\r\n stroke: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.success svg path{\r\n fill: var(--color-text-success, #079455);\r\n stroke: var(--color-text-success, #079455);\r\n}\r\n\r\n.discovery svg path {\r\n fill: #0BA5EC;\r\n stroke: #0BA5EC/*Blue light/500*/;\r\n}\r\n\r\n.information svg path {\r\n fill: var(--color-text-information, #064E94);\r\n stroke: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pink svg path{\r\n fill: var(--color-text-pink, #DD2590);\r\n stroke: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.purple svg path {\r\n fill: var(--color-text-purple, #6938EF);\r\n stroke: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212C65);\r\n color:var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #B51726);\r\n color:var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #DC6803);\r\n color:var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color:var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086C9);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064E94);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #DD2590);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938EF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n fill: currentColor;\r\n}\r\n\r\n.icon svg path {\r\n fill: currentColor;\r\n stroke: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-full);\r\n}","import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-badge',\r\n styleUrl: 'gb-badges.css',\r\n shadow: true,\r\n assetsDirs: ['assets']\r\n})\r\nexport class GbBadges {\r\n @Prop() size: GeneralSizes;\r\n @Prop() icon: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n @Prop() iconLeadingSwap?: string; \r\n @Prop() iconTrailingSwap?: string;\r\n @Prop() flagSwap: string;\r\n @Prop() color: GeneralColors;\r\n @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n @Prop() closeButton?: boolean = false;\r\n\r\n @State() leadingIconContent: string;\r\n @State() trailingIconContent: string;\r\n @Element() el: HTMLElement;\r\n\r\n private getDotColor(color: GeneralColors): string {\r\n const colorMap = {\r\n 'gray': '#4B5565',\r\n 'primary': '#212C65',\r\n 'error': '#B51726',\r\n 'warning': '#DC6803',\r\n 'success': '#079455',\r\n 'discovery': '#0BA5EC',\r\n 'information': '#064E94',\r\n 'pink': '#DD2590',\r\n 'purple': '#6938EF',\r\n };\r\n \r\n if (this.type === 'badge_modern') {\r\n return colorMap[color] || color;\r\n }\r\n \r\n return 'currentColor';\r\n }\r\n \r\n\r\n async componentWillLoad() {\r\n if (this.iconLeadingSwap) {\r\n const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSwap}.svg`);\r\n this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);\r\n }\r\n \r\n if (this.iconTrailingSwap) {\r\n const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSwap}.svg`);\r\n this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);\r\n }\r\n }\r\n\r\n private async fetchSvgContent(src: string): Promise<string> {\r\n try {\r\n const response = await fetch(src);\r\n if (response.ok) {\r\n return await response.text();\r\n }\r\n return '';\r\n } catch (error) {\r\n console.error('Error fetching SVG:', error);\r\n return '';\r\n }\r\n }\r\n\r\n getTextClass() {\r\n switch (this.size) {\r\n case 'sm' : return 'text-xs-medium';\r\n case 'md' : return 'text-sm-medium';\r\n case 'lg' : return 'text-sm-medium';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('p');\r\n\r\n if(slottedContent) {\r\n slottedContent.classList.add(this.getTextClass());\r\n }\r\n }\r\n\r\n render() {\r\n const classes = {\r\n 'badge': true,\r\n [this.type]: true,\r\n [this.color]: true,\r\n [this.size]: true\r\n };\r\n\r\n const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n return (\r\n <div class={classes}>\r\n {this.icon === 'dot' && ( \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill={dotColor}>\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n </svg>\r\n )}\r\n {this.icon === 'icon_leading' && this.iconLeadingSwap && (\r\n <div class=\"icon left-icon\" innerHTML={this.leadingIconContent} style={{ color: this.color }}></div>\r\n )}\r\n {this.icon === 'country' && (\r\n <div class=\"icon left-icon\">\r\n <img src={flagSwap} alt=\"Country Icon\" />\r\n </div>\r\n )}\r\n {this.icon === 'avatar' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\">\r\n <slot name='image' slot='image'></slot>\r\n </gb-avatar>\r\n )}\r\n {this.icon !== 'only' && (\r\n <slot></slot>\r\n )}\r\n {this.icon === 'icon_trailing' && this.iconTrailingSwap && (\r\n <div class=\"icon right-icon\" innerHTML={this.trailingIconContent} style={{ color: this.color }}></div>\r\n )}\r\n {this.icon === 'only' &&(\r\n <div id=\"icon-only\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke={dotColor}>\r\n <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )}\r\n {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type='rounded'></gb-badge-close>}\r\n </div>\r\n ); \r\n } \r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"p-72cec745.js","mappings":"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","names":[],"sources":["src/components/gb-badges/gb-badges.css?tag=gb-badge&encapsulation=shadow","src/components/gb-badges/gb-badges.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv{\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm{\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n background: var(--color-background-gray-subtler, #EEF2F6 );\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC); \r\n color: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #FDE3E5);\r\n background: var(--color-background-danger-subtlest, #FEF1F2 );\r\n color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #FEF0C7);\r\n background: var(--color-background-warning-subtlest, #FFFAEB);\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #DCFAE6);\r\n background: var(--color-background-success-subtlest, #ECFDF3);\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #E0F2FE);\r\n background: var(--color-background-discovery-subtlest,#F0F9FF);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #FCE7F6);\r\n background: var(--color-background-pink-subtlest, #FDF2FA);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #EBE9FE);\r\n background: var(--color-background-purple-subtlest, #F4F3FF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path {\r\n fill: var(--color-text, #4B5565);\r\n stroke: var(--color-text, #4B5565) /*var(--color-icon)*/;\r\n}\r\n\r\n.primary svg path {\r\n fill: var(--color-text-brandDarkBlue, #212C65);\r\n stroke: var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.error svg path {\r\n fill: var(--color-text-danger, #B51726);\r\n stroke: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.warning svg path {\r\n fill: var(--color-text-warning, #DC6803);\r\n stroke: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.success svg path{\r\n fill: var(--color-text-success, #079455);\r\n stroke: var(--color-text-success, #079455);\r\n}\r\n\r\n.discovery svg path {\r\n fill: #0BA5EC;\r\n stroke: #0BA5EC/*Blue light/500*/;\r\n}\r\n\r\n.information svg path {\r\n fill: var(--color-text-information, #064E94);\r\n stroke: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pink svg path{\r\n fill: var(--color-text-pink, #DD2590);\r\n stroke: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.purple svg path {\r\n fill: var(--color-text-purple, #6938EF);\r\n stroke: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4B5565);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212C65);\r\n color:var(--color-text-brandDarkBlue, #212C65);\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #B51726);\r\n color:var(--color-text-danger, #B51726);\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #DC6803);\r\n color:var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color:var(--color-text-success, #079455);\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086C9);\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064E94);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #DD2590);\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938EF);\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-boarder-subtler, #E3E8EF);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n fill: currentColor;\r\n}\r\n\r\n.icon svg path {\r\n fill: currentColor;\r\n stroke: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-full);\r\n}","import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-badge',\r\n styleUrl: 'gb-badges.css',\r\n shadow: true,\r\n assetsDirs: ['assets']\r\n})\r\nexport class GbBadges {\r\n @Prop() size: GeneralSizes;\r\n @Prop() icon: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n @Prop() iconLeadingSwap?: string; \r\n @Prop() iconTrailingSwap?: string;\r\n @Prop() flagSwap: string;\r\n @Prop() color: GeneralColors;\r\n @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n @Prop() closeButton?: boolean = false;\r\n\r\n @State() leadingIconContent: string;\r\n @State() trailingIconContent: string;\r\n @Element() el: HTMLElement;\r\n\r\n private getDotColor(color: GeneralColors): string {\r\n const colorMap = {\r\n 'gray': '#4B5565',\r\n 'primary': '#212C65',\r\n 'error': '#B51726',\r\n 'warning': '#DC6803',\r\n 'success': '#079455',\r\n 'discovery': '#0BA5EC',\r\n 'information': '#064E94',\r\n 'pink': '#DD2590',\r\n 'purple': '#6938EF',\r\n };\r\n \r\n if (this.type === 'badge_modern') {\r\n return colorMap[color] || color;\r\n }\r\n \r\n return 'currentColor';\r\n }\r\n \r\n\r\n async componentWillLoad() {\r\n if (this.iconLeadingSwap) {\r\n const iconLeadingSrc = getAssetPath(`${this.iconLeadingSwap}`);\r\n this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);\r\n }\r\n \r\n if (this.iconTrailingSwap) {\r\n const iconTrailingSrc = getAssetPath(`${this.iconTrailingSwap}`);\r\n this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);\r\n }\r\n }\r\n\r\n private async fetchSvgContent(src: string): Promise<string> {\r\n try {\r\n const response = await fetch(src);\r\n if (response.ok) {\r\n return await response.text();\r\n }\r\n return '';\r\n } catch (error) {\r\n console.error('Error fetching SVG:', error);\r\n return '';\r\n }\r\n }\r\n\r\n getTextClass() {\r\n switch (this.size) {\r\n case 'sm' : return 'text-xs-medium';\r\n case 'md' : return 'text-sm-medium';\r\n case 'lg' : return 'text-sm-medium';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedContent = this.el.querySelector('p');\r\n\r\n if(slottedContent) {\r\n slottedContent.classList.add(this.getTextClass());\r\n }\r\n }\r\n\r\n render() {\r\n const classes = {\r\n 'badge': true,\r\n [this.type]: true,\r\n [this.color]: true,\r\n [this.size]: true\r\n };\r\n\r\n const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n return (\r\n <div class={classes}>\r\n {this.icon === 'dot' && ( \r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill={dotColor}>\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n </svg>\r\n )}\r\n {this.icon === 'icon_leading' && this.iconLeadingSwap && (\r\n <div class=\"icon left-icon\" innerHTML={this.leadingIconContent} style={{ color: this.color }}></div>\r\n )}\r\n {this.icon === 'country' && (\r\n <div class=\"icon left-icon\">\r\n <img src={flagSwap} alt=\"Country Icon\" />\r\n </div>\r\n )}\r\n {this.icon === 'avatar' && (\r\n <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\">\r\n <slot name='image' slot='image'></slot>\r\n </gb-avatar>\r\n )}\r\n {this.icon !== 'only' && (\r\n <slot></slot>\r\n )}\r\n {this.icon === 'icon_trailing' && this.iconTrailingSwap && (\r\n <div class=\"icon right-icon\" innerHTML={this.trailingIconContent} style={{ color: this.color }}></div>\r\n )}\r\n {this.icon === 'only' &&(\r\n <div id=\"icon-only\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke={dotColor}>\r\n <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )}\r\n {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type='rounded'></gb-badge-close>}\r\n </div>\r\n ); \r\n } \r\n}\r\n"],"version":3}
|
|
@@ -18,6 +18,7 @@ const GbAvatarLabelGroup = /*@__PURE__*/ proxyCustomElement(class GbAvatarLabelG
|
|
|
18
18
|
this.placeholder = false;
|
|
19
19
|
this.text = false;
|
|
20
20
|
this.color = undefined;
|
|
21
|
+
this.showBorder = false;
|
|
21
22
|
}
|
|
22
23
|
getInitialsSize() {
|
|
23
24
|
switch (this.size) {
|
|
@@ -61,13 +62,20 @@ const GbAvatarLabelGroup = /*@__PURE__*/ proxyCustomElement(class GbAvatarLabelG
|
|
|
61
62
|
}
|
|
62
63
|
applyColorToInitials() {
|
|
63
64
|
switch (this.color) {
|
|
64
|
-
case 'gray':
|
|
65
|
-
|
|
66
|
-
case '
|
|
67
|
-
|
|
68
|
-
case '
|
|
69
|
-
|
|
70
|
-
case '
|
|
65
|
+
case 'gray':
|
|
66
|
+
return 'gray';
|
|
67
|
+
case 'blue':
|
|
68
|
+
return 'blue';
|
|
69
|
+
case 'cyan':
|
|
70
|
+
return 'cyan';
|
|
71
|
+
case 'pink':
|
|
72
|
+
return 'pink';
|
|
73
|
+
case 'purple':
|
|
74
|
+
return 'purple';
|
|
75
|
+
case 'green':
|
|
76
|
+
return 'green';
|
|
77
|
+
case 'yellow':
|
|
78
|
+
return 'yellow';
|
|
71
79
|
}
|
|
72
80
|
}
|
|
73
81
|
componentDidLoad() {
|
|
@@ -86,7 +94,7 @@ const GbAvatarLabelGroup = /*@__PURE__*/ proxyCustomElement(class GbAvatarLabelG
|
|
|
86
94
|
}
|
|
87
95
|
}
|
|
88
96
|
render() {
|
|
89
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: '5f2c54ae558d8814641dc255ec5ffc0c25760514', class: `label ${this.size}` }, h("div", { key: '3383b3072f0e63411aec7d6be9a713f2cb25f5f2', class: "label_pic" }, h("gb-avatar", { key: 'e8f295e79f31ca07ccd8a335206b5b8310f5e16b', size: this.size, "status-icon": this.statusIcon, state: this.state, text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder }, !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }))), h("div", { key: 'bdb214547b65670913878c095c5676666b467134', class: "label_text" }, h("slot", { key: '1d95e060dac41a698b01afd9644901f3eefb4c00', name: "name" }), h("slot", { key: '6c4200a6f96884db8c756ac5f7e3b31c5f89691d', name: "supporting_text" }))));
|
|
90
98
|
}
|
|
91
99
|
get el() { return this; }
|
|
92
100
|
static get style() { return GbAvatarLabelGroupStyle0; }
|
|
@@ -96,7 +104,8 @@ const GbAvatarLabelGroup = /*@__PURE__*/ proxyCustomElement(class GbAvatarLabelG
|
|
|
96
104
|
"state": [1],
|
|
97
105
|
"placeholder": [4],
|
|
98
106
|
"text": [4],
|
|
99
|
-
"color": [1]
|
|
107
|
+
"color": [1],
|
|
108
|
+
"showBorder": [4, "show-border"]
|
|
100
109
|
}]);
|
|
101
110
|
function defineCustomElement() {
|
|
102
111
|
if (typeof customElements === "undefined") {
|
|
@@ -130,4 +139,4 @@ defineCustomElement();
|
|
|
130
139
|
|
|
131
140
|
export { GbAvatarLabelGroup as G, defineCustomElement as d };
|
|
132
141
|
|
|
133
|
-
//# sourceMappingURL=p-
|
|
142
|
+
//# sourceMappingURL=p-7f3d3cde.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-7f3d3cde.js","mappings":"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","names":[],"sources":["src/components/gb-avatar-label-group/gb-avatar-label-group.css?tag=gb-avatar-label-group&encapsulation=shadow","src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.label_pic{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.label{\r\n width: fit-content;\r\n display: flex;\r\n padding: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n/* Label Sizes */\r\n.label.sm{\r\n gap: 0.625rem;\r\n}\r\n\r\n.label.md{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.label.lg{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.label.xl{\r\n gap: var(--spacing-4);\r\n}\r\n\r\n.label_text{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n::slotted([slot=\"name\"]){\r\n color: #344054;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n color: #697586;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-avatar-label-group',\r\n styleUrl: 'gb-avatar-label-group.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n @Prop() size: GeneralSizes;\r\n @Prop() statusIcon: string = '';\r\n @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() text: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Element() el: HTMLElement;\r\n\r\n getInitialsSize() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'display-xs-semi-bold';\r\n case 'xl':\r\n return 'text-xl-semi-bold';\r\n case 'lg':\r\n return 'text-lg-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'xs':\r\n return 'text-xs-semi-bold';\r\n }\r\n }\r\n\r\n getNameSize() {\r\n switch (this.size) {\r\n case 'xl':\r\n return 'text-lg-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 getOtherTextSize() {\r\n switch (this.size) {\r\n case 'xl':\r\n return 'text-md-regular';\r\n case 'lg':\r\n return 'text-md-regular';\r\n case 'md':\r\n return 'text-sm-regular';\r\n case 'sm':\r\n return 'text-xs-regular';\r\n }\r\n }\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\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 if (nameSlot) {\r\n nameSlot.classList.add(this.getNameSize());\r\n }\r\n\r\n if (othersSlot) {\r\n othersSlot.classList.add(this.getOtherTextSize());\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`label ${this.size}`}>\r\n <div class=\"label_pic\">\r\n <gb-avatar\r\n size={this.size}\r\n status-icon={this.statusIcon}\r\n state={this.state}\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n >\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n </gb-avatar>\r\n </div>\r\n <div class=\"label_text\">\r\n <slot name=\"name\"></slot>\r\n <slot name=\"supporting_text\"></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-526d40a2.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-027afbf4.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-e7017c4e.js';
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-72cec745.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-484718b7.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './p-00ae5b69.js';
|
|
7
7
|
|
|
@@ -114,4 +114,4 @@ defineCustomElement();
|
|
|
114
114
|
|
|
115
115
|
export { GbTabButtonBase as G, defineCustomElement as d };
|
|
116
116
|
|
|
117
|
-
//# sourceMappingURL=p-
|
|
117
|
+
//# sourceMappingURL=p-f6b42e81.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-9105c575.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,o44EAAo44E,CAAC;AACh64E,8BAAe,kBAAkB;;MCOpB,eAAe;;;;;;uBACC,KAAK;;yBAEH,KAAK;qBACT,KAAK;;uBAEJ,EAAE;;IAI5B,cAAc;QACZ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,qBAAqB;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEzD,IAAG,QAAQ,EAAE;YACT,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;SACtD;KACF;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,4DACA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI;QAChC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QAC7B,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE;QAClC,IAAI,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAC9C,0DAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,IAAG,IAAI,CAAC,OAAO,CAAK,EACrG,IAAI,CAAC,KAAK,KACT,iEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,YAAY,EACjB,KAAK,EACH,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG,aAAa;gBAC9D,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,aAAa;oBACzD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,aAAa,GAAG,MAAM,IAG/D,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CACZ,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tab-button-base/gb-tab-button-base.css?tag=gb-tab-button-base&encapsulation=shadow","src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tab_button_div{\r\n cursor: pointer;\r\n}\r\n\r\n.button_primary,\r\n.button_gray,\r\n.button_white{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.rounded_button_white{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.underline,\r\n.underline_filled,\r\n.line{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.count_div{\r\n display: flex;\r\n height: 1.375rem;\r\n min-height: 1.375rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n align-items: center;\r\n border-radius: var(--rounded-full);\r\n border: 1px solid blue;\r\n}\r\n\r\n/* Spacing Styles */\r\n.button_primary,\r\n.button_gray,\r\n.button_white,\r\n.rounded_button_white,\r\n.underline_filled,\r\n.line{\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.underline{\r\n gap: 0.5rem;\r\n}\r\n\r\n/* Tab Type Styles */\r\n.tab_button_div.button_primary,\r\n.tab_button_div.button_gray,\r\n.tab_button_div.button_white,\r\n.tab_button_div.rounded_button_white,\r\n.tab_button_div.underline_filled,\r\n.tab_button_div.line{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n/* Tab State Styles */\r\n.tab_button_div.button_primary:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_primary:active{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:hover,\r\n.tab_button_div.button_white:hover,\r\n.tab_button_div.rounded_button_white:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:active,\r\n.tab_button_div.button_white:active,\r\n.tab_button_div.rounded_button_white:active{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.underline:hover,\r\n.tab_button_div.underline_filled:hover{\r\n border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline:active,\r\n.tab_button_div.underline_filled:active{\r\n background: transparent;\r\n border: none;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.line:hover{\r\n border-radius: var(--rounded-xs);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.tab_button_div.line:active{\r\n border-radius: var(--rounded-none);\r\n background: transparent;\r\n}\r\n\r\n.tab_button_div.button_primary.current:hover{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.tab_button_div.button_primary.current:active{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current:hover,\r\n.tab_button_div.button_white.current:hover,\r\n.tab_button_div.rounded_button_white.current:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_gray.current:active{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current:active,\r\n.tab_button_div.rounded_button_white.current:active{\r\n background: var(--color-background-card, #FFFFFF);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current:hover{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline.current:active{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:hover{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:active{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current:hover{\r\n border-radius: var(--rounded-xs);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.line.current:active{\r\n border-radius: var(--rounded-none);\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Current Styles */\r\n.tab_button_div.button_primary.current{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current,\r\n.tab_button_div.rounded_button_white.current{\r\n background: var(--color-background-card, #FFFFFF);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Size Styles */\r\n.button_primary.sm,\r\n.button_gray.sm,\r\n.button_white.sm,\r\n.rounded_button_white.sm,\r\n.underline.sm{\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-4);\r\n}\r\n\r\n.underline_filled.sm,\r\n.line.sm{\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.md,\r\n.button_gray.md,\r\n.button_white.md,\r\n.rounded_button_white.md,\r\n.underline.md,\r\n.underline_filled.md,\r\n.line.md{\r\n height: 2.75rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.sm,\r\n.button_gray.full_width.sm,\r\n.button_white.full_width.sm,\r\n.rounded_button_white.full_width.sm{\r\n width: 100%;\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.sm,\r\n.underline_filled.full_width.sm{\r\n width: 100%;\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.md,\r\n.button_gray.full_width.md,\r\n.button_white.full_width.md,\r\n.rounded_button_white.full_width.md{\r\n width: 100%;\r\n height: 2.25rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.md,\r\n.underline_filled.full_width.md{\r\n width: 100%;\r\n height: 2.25rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, TabTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-tab-button-base',\r\n styleUrl: 'gb-tab-button-base.css',\r\n shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n @Prop() current: boolean = false;\r\n @Prop() size: GeneralSizes;\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() badge: boolean = false;\r\n @Prop() type: TabTypes;\r\n @Prop() tabName: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() tabClicked: EventEmitter<void>;\r\n\r\n getTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-medium';\r\n case 'md':\r\n return 'text-md-medium';\r\n }\r\n }\r\n\r\n getCurrentTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n }\r\n }\r\n\r\n getCountTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-medium';\r\n case 'md':\r\n return 'text-sm-medium';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n if(tabCount) {\r\n tabCount.classList.add(this.getCountTextClasses());\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.tabClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <div \r\n class={`tab_button_div ${this.type}\r\n ${this.current ? 'current' : ''} \r\n ${this.fullWidth ? 'full_width' : ''} \r\n ${this.size}`} onClick={() => this.handleClick()}>\r\n <p class={`${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.tabName}</p>\r\n {this.badge && (\r\n <gb-badge\r\n size=\"sm\"\r\n type=\"pill_color\"\r\n color={\r\n this.current && this.type === 'button_primary' ? 'information' :\r\n this.current && this.type === 'underline' ? 'information' :\r\n this.current && this.type === 'line' ? 'information' : 'gray'\r\n }\r\n >\r\n <slot name=\"count\"></slot>\r\n </gb-badge>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
1
|
+
{"file":"p-f6b42e81.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,o44EAAo44E,CAAC;AACh64E,8BAAe,kBAAkB;;MCOpB,eAAe;;;;;;uBACC,KAAK;;yBAEH,KAAK;qBACT,KAAK;;uBAEJ,EAAE;;IAI5B,cAAc;QACZ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,qBAAqB;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEzD,IAAG,QAAQ,EAAE;YACT,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;SACtD;KACF;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,4DACA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI;QAChC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QAC7B,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE;QAClC,IAAI,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAC9C,0DAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,IAAG,IAAI,CAAC,OAAO,CAAK,EACrG,IAAI,CAAC,KAAK,KACT,iEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,YAAY,EACjB,KAAK,EACH,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG,aAAa;gBAC9D,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,aAAa;oBACzD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,aAAa,GAAG,MAAM,IAG/D,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CACZ,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tab-button-base/gb-tab-button-base.css?tag=gb-tab-button-base&encapsulation=shadow","src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tab_button_div{\r\n cursor: pointer;\r\n}\r\n\r\n.button_primary,\r\n.button_gray,\r\n.button_white{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.rounded_button_white{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.underline,\r\n.underline_filled,\r\n.line{\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n.count_div{\r\n display: flex;\r\n height: 1.375rem;\r\n min-height: 1.375rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n align-items: center;\r\n border-radius: var(--rounded-full);\r\n border: 1px solid blue;\r\n}\r\n\r\n/* Spacing Styles */\r\n.button_primary,\r\n.button_gray,\r\n.button_white,\r\n.rounded_button_white,\r\n.underline_filled,\r\n.line{\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.underline{\r\n gap: 0.5rem;\r\n}\r\n\r\n/* Tab Type Styles */\r\n.tab_button_div.button_primary,\r\n.tab_button_div.button_gray,\r\n.tab_button_div.button_white,\r\n.tab_button_div.rounded_button_white,\r\n.tab_button_div.underline_filled,\r\n.tab_button_div.line{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n/* Tab State Styles */\r\n.tab_button_div.button_primary:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_primary:active{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:hover,\r\n.tab_button_div.button_white:hover,\r\n.tab_button_div.rounded_button_white:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:active,\r\n.tab_button_div.button_white:active,\r\n.tab_button_div.rounded_button_white:active{\r\n background: transparent;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.underline:hover,\r\n.tab_button_div.underline_filled:hover{\r\n border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline:active,\r\n.tab_button_div.underline_filled:active{\r\n background: transparent;\r\n border: none;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.line:hover{\r\n border-radius: var(--rounded-xs);\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.tab_button_div.line:active{\r\n border-radius: var(--rounded-none);\r\n background: transparent;\r\n}\r\n\r\n.tab_button_div.button_primary.current:hover{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.tab_button_div.button_primary.current:active{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current:hover,\r\n.tab_button_div.button_white.current:hover,\r\n.tab_button_div.rounded_button_white.current:hover{\r\n background: var(--color-background-gray-subtler, #EEF2F6);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_gray.current:active{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current:active,\r\n.tab_button_div.rounded_button_white.current:active{\r\n background: var(--color-background-card, #FFFFFF);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current:hover{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline.current:active{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:hover{\r\n background: var(--color-background-information-subtler, #C8E0F9);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:active{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current:hover{\r\n border-radius: var(--rounded-xs);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-information, #064E94);\r\n border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.line.current:active{\r\n border-radius: var(--rounded-none);\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Current Styles */\r\n.tab_button_div.button_primary.current{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current{\r\n background: var(--color-background-gray-subtlest, #F6F8FA);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current,\r\n.tab_button_div.rounded_button_white.current{\r\n background: var(--color-background-card, #FFFFFF);\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current{\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n color: var(--color-text-selected, #075DB2);\r\n border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current{\r\n background: transparent;\r\n color: var(--color-text-selected, #075DB2);\r\n border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Size Styles */\r\n.button_primary.sm,\r\n.button_gray.sm,\r\n.button_white.sm,\r\n.rounded_button_white.sm,\r\n.underline.sm{\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-4);\r\n}\r\n\r\n.underline_filled.sm,\r\n.line.sm{\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.md,\r\n.button_gray.md,\r\n.button_white.md,\r\n.rounded_button_white.md,\r\n.underline.md,\r\n.underline_filled.md,\r\n.line.md{\r\n height: 2.75rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.sm,\r\n.button_gray.full_width.sm,\r\n.button_white.full_width.sm,\r\n.rounded_button_white.full_width.sm{\r\n width: 100%;\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.sm,\r\n.underline_filled.full_width.sm{\r\n width: 100%;\r\n height: 2.375rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.md,\r\n.button_gray.full_width.md,\r\n.button_white.full_width.md,\r\n.rounded_button_white.full_width.md{\r\n width: 100%;\r\n height: 2.25rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.md,\r\n.underline_filled.full_width.md{\r\n width: 100%;\r\n height: 2.25rem;\r\n padding: var(--spacing-none) var(--spacing-3);\r\n}","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, TabTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-tab-button-base',\r\n styleUrl: 'gb-tab-button-base.css',\r\n shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n @Prop() current: boolean = false;\r\n @Prop() size: GeneralSizes;\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() badge: boolean = false;\r\n @Prop() type: TabTypes;\r\n @Prop() tabName: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() tabClicked: EventEmitter<void>;\r\n\r\n getTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-medium';\r\n case 'md':\r\n return 'text-md-medium';\r\n }\r\n }\r\n\r\n getCurrentTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n }\r\n }\r\n\r\n getCountTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-medium';\r\n case 'md':\r\n return 'text-sm-medium';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n if(tabCount) {\r\n tabCount.classList.add(this.getCountTextClasses());\r\n }\r\n }\r\n\r\n handleClick() {\r\n this.tabClicked.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <div \r\n class={`tab_button_div ${this.type}\r\n ${this.current ? 'current' : ''} \r\n ${this.fullWidth ? 'full_width' : ''} \r\n ${this.size}`} onClick={() => this.handleClick()}>\r\n <p class={`${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.tabName}</p>\r\n {this.badge && (\r\n <gb-badge\r\n size=\"sm\"\r\n type=\"pill_color\"\r\n color={\r\n this.current && this.type === 'button_primary' ? 'information' :\r\n this.current && this.type === 'underline' ? 'information' :\r\n this.current && this.type === 'line' ? 'information' : 'gray'\r\n }\r\n >\r\n <slot name=\"count\"></slot>\r\n </gb-badge>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -13,6 +13,7 @@ const GbAvatarLabelGroup = class {
|
|
|
13
13
|
this.placeholder = false;
|
|
14
14
|
this.text = false;
|
|
15
15
|
this.color = undefined;
|
|
16
|
+
this.showBorder = false;
|
|
16
17
|
}
|
|
17
18
|
getInitialsSize() {
|
|
18
19
|
switch (this.size) {
|
|
@@ -56,13 +57,20 @@ const GbAvatarLabelGroup = class {
|
|
|
56
57
|
}
|
|
57
58
|
applyColorToInitials() {
|
|
58
59
|
switch (this.color) {
|
|
59
|
-
case 'gray':
|
|
60
|
-
|
|
61
|
-
case '
|
|
62
|
-
|
|
63
|
-
case '
|
|
64
|
-
|
|
65
|
-
case '
|
|
60
|
+
case 'gray':
|
|
61
|
+
return 'gray';
|
|
62
|
+
case 'blue':
|
|
63
|
+
return 'blue';
|
|
64
|
+
case 'cyan':
|
|
65
|
+
return 'cyan';
|
|
66
|
+
case 'pink':
|
|
67
|
+
return 'pink';
|
|
68
|
+
case 'purple':
|
|
69
|
+
return 'purple';
|
|
70
|
+
case 'green':
|
|
71
|
+
return 'green';
|
|
72
|
+
case 'yellow':
|
|
73
|
+
return 'yellow';
|
|
66
74
|
}
|
|
67
75
|
}
|
|
68
76
|
componentDidLoad() {
|
|
@@ -81,7 +89,7 @@ const GbAvatarLabelGroup = class {
|
|
|
81
89
|
}
|
|
82
90
|
}
|
|
83
91
|
render() {
|
|
84
|
-
return (h("div", { key: '
|
|
92
|
+
return (h("div", { key: '5f2c54ae558d8814641dc255ec5ffc0c25760514', class: `label ${this.size}` }, h("div", { key: '3383b3072f0e63411aec7d6be9a713f2cb25f5f2', class: "label_pic" }, h("gb-avatar", { key: 'e8f295e79f31ca07ccd8a335206b5b8310f5e16b', size: this.size, "status-icon": this.statusIcon, state: this.state, text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder }, !this.text ? h("slot", { name: "image", slot: "image" }) : h("slot", { name: "initials", slot: "initials" }))), h("div", { key: 'bdb214547b65670913878c095c5676666b467134', class: "label_text" }, h("slot", { key: '1d95e060dac41a698b01afd9644901f3eefb4c00', name: "name" }), h("slot", { key: '6c4200a6f96884db8c756ac5f7e3b31c5f89691d', name: "supporting_text" }))));
|
|
85
93
|
}
|
|
86
94
|
get el() { return getElement(this); }
|
|
87
95
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-avatar-label-group.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,i0qEAAi0qE,CAAC;AACh2qE,iCAAe,qBAAqB;;MCOvB,kBAAkB;;;;0BAEA,EAAE;qBACQ,qBAAqB,CAAC,MAAM;2BACpC,KAAK;oBACZ,KAAK
|
|
1
|
+
{"file":"gb-avatar-label-group.entry.js","mappings":"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","names":[],"sources":["src/components/gb-avatar-label-group/gb-avatar-label-group.css?tag=gb-avatar-label-group&encapsulation=shadow","src/components/gb-avatar-label-group/gb-avatar-label-group.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.label_pic{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.label{\r\n width: fit-content;\r\n display: flex;\r\n padding: var(--spacing-none);\r\n border-radius: var(--rounded-none);\r\n}\r\n\r\n/* Label Sizes */\r\n.label.sm{\r\n gap: 0.625rem;\r\n}\r\n\r\n.label.md{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.label.lg{\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.label.xl{\r\n gap: var(--spacing-4);\r\n}\r\n\r\n.label_text{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n::slotted([slot=\"name\"]){\r\n color: #344054;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]){\r\n color: #697586;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { AvatarColorTypes, GeneralSizes, OnlineIndicatorStates } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-avatar-label-group',\r\n styleUrl: 'gb-avatar-label-group.css',\r\n shadow: true,\r\n})\r\nexport class GbAvatarLabelGroup {\r\n @Prop() size: GeneralSizes;\r\n @Prop() statusIcon: string = '';\r\n @Prop() state: OnlineIndicatorStates = OnlineIndicatorStates.Online;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() text: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Element() el: HTMLElement;\r\n\r\n getInitialsSize() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'display-xs-semi-bold';\r\n case 'xl':\r\n return 'text-xl-semi-bold';\r\n case 'lg':\r\n return 'text-lg-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'xs':\r\n return 'text-xs-semi-bold';\r\n }\r\n }\r\n\r\n getNameSize() {\r\n switch (this.size) {\r\n case 'xl':\r\n return 'text-lg-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 getOtherTextSize() {\r\n switch (this.size) {\r\n case 'xl':\r\n return 'text-md-regular';\r\n case 'lg':\r\n return 'text-md-regular';\r\n case 'md':\r\n return 'text-sm-regular';\r\n case 'sm':\r\n return 'text-xs-regular';\r\n }\r\n }\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n const othersSlot = this.el.querySelector('[slot=\"supporting_text\"]');\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 if (nameSlot) {\r\n nameSlot.classList.add(this.getNameSize());\r\n }\r\n\r\n if (othersSlot) {\r\n othersSlot.classList.add(this.getOtherTextSize());\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`label ${this.size}`}>\r\n <div class=\"label_pic\">\r\n <gb-avatar\r\n size={this.size}\r\n status-icon={this.statusIcon}\r\n state={this.state}\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n >\r\n {!this.text ? <slot name=\"image\" slot=\"image\"></slot> : <slot name=\"initials\" slot=\"initials\"></slot>}\r\n </gb-avatar>\r\n </div>\r\n <div class=\"label_text\">\r\n <slot name=\"name\"></slot>\r\n <slot name=\"supporting_text\"></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -153,11 +153,11 @@ const GbBadges = class {
|
|
|
153
153
|
}
|
|
154
154
|
async componentWillLoad() {
|
|
155
155
|
if (this.iconLeadingSwap) {
|
|
156
|
-
const iconLeadingSrc = getAssetPath(
|
|
156
|
+
const iconLeadingSrc = getAssetPath(`${this.iconLeadingSwap}`);
|
|
157
157
|
this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);
|
|
158
158
|
}
|
|
159
159
|
if (this.iconTrailingSwap) {
|
|
160
|
-
const iconTrailingSrc = getAssetPath(
|
|
160
|
+
const iconTrailingSrc = getAssetPath(`${this.iconTrailingSwap}`);
|
|
161
161
|
this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);
|
|
162
162
|
}
|
|
163
163
|
}
|
|
@@ -196,7 +196,7 @@ const GbBadges = class {
|
|
|
196
196
|
};
|
|
197
197
|
const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
|
|
198
198
|
const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';
|
|
199
|
-
return (h("div", { key: '
|
|
199
|
+
return (h("div", { key: '45af5d2f8b7c78e5e237e4ec4771b4441e15b999', class: classes }, this.icon === 'dot' && (h("svg", { key: 'fba45c432a7bb3190749998720b7b8f1abb2954d', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, h("circle", { key: 'c3f9ce8cb0bcad1a39ac8e15e17791f13dbed873', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (h("div", { key: 'd70a64412590e83b9c16e7f840a1ae49c6f7457e', class: "icon left-icon", innerHTML: this.leadingIconContent, style: { color: this.color } })), this.icon === 'country' && (h("div", { key: '4bcb7f6b78253798479ac9cd6e7b9c88202d7cfa', class: "icon left-icon" }, h("img", { key: '0d40cca9830b5df802a9d420bc485b3c42cc952c', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '67c5be2a265e102ff3c513b0d63c3aa8db0100af', class: "avatar-icon", size: "xxs", "status-icon": "false" }, h("slot", { key: 'fa6da772e76c5e4bbc750973cc535f812ccd72a8', name: 'image', slot: 'image' }))), this.icon !== 'only' && (h("slot", { key: '44c7a0ef932029d7fe049618dd626c5003a4ee2f' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (h("div", { key: '8f06af2f78c728435b0afddfa32034ecc5e356bf', class: "icon right-icon", innerHTML: this.trailingIconContent, style: { color: this.color } })), this.icon === 'only' && (h("div", { key: '5d4c9551182accd07664e4b823a06759d43a901d', id: "icon-only" }, h("svg", { key: 'efef2c9c7616288bb61340df2c69eb74c4765777', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, h("path", { key: '9a1a90e2809cb7a6389e318c4b5d39d426955289', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && h("gb-badge-close", { key: 'b3255ce45fd36c910491fef7393bd92fd3e8940c', color: this.color, type: 'rounded' })));
|
|
200
200
|
}
|
|
201
201
|
static get assetsDirs() { return ["assets"]; }
|
|
202
202
|
get el() { return getElement(this); }
|
|
@@ -879,11 +879,6 @@ const GbInputDropdown = class {
|
|
|
879
879
|
}
|
|
880
880
|
componentWillLoad() {
|
|
881
881
|
this.loadIcon(this.leadingIcon);
|
|
882
|
-
const items = [
|
|
883
|
-
{ name: 'Emmanuel Kadiri', selected: false },
|
|
884
|
-
{ name: 'Gideon Ogunkola', selected: false },
|
|
885
|
-
];
|
|
886
|
-
this.items = items;
|
|
887
882
|
this.unselectedItems = this.items.filter(item => !item.selected);
|
|
888
883
|
}
|
|
889
884
|
componentDidLoad() {
|
|
@@ -921,12 +916,12 @@ const GbInputDropdown = class {
|
|
|
921
916
|
}
|
|
922
917
|
render() {
|
|
923
918
|
return [
|
|
924
|
-
h("div", { key: '
|
|
919
|
+
h("div", { key: '679b08398b4b536c1725fb601466be08c8b36e05', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}`, onClick: () => this.toggleDropdown() }, this.showLabel && (h("p", { key: 'feea424318e05f8d0ca7e8b03da88de38fae44bd', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label)), h("div", { key: '1d194f7246649276c49c7fbc554a2c97f0d4dc5b', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}` }, this.type === 'icon_leading' && (h("svg", { key: '50abce30b951a18480806bc219075390998d6cfc', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'e14374493a2907b9dda0353a3b931bf80c5e1e31', 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" }), h("path", { key: '4ab63cefa1102649555064b24047240542953f47', 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' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'fba48a44bd89c3e53d5e01baf7c51f255159e274', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'b69669fd422a66767067e453db935564b6838307', 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" }), h("path", { key: 'a17ad338139ed124e2179c2619966c7d1af03ebb', 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' && (h("gb-avatar", { key: '8f59a66ebac4f52e222e4b8a6d871dd3a16d21ea', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: '37288df14c5b8a096009aea43de856aefd684b2b', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '7057af2fc2a4c2b820834a7b35ed5a8ffcd69542', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: 'bd604721134819005ac06d82cc5018d870b39fbe', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '8833ed6a613b342fb8d62938e358043d264a027c', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '90fe3baaa705b1a8d32ee6ff0015060a70aacfc1', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'c3ebb4fbd985d87d21bf8fd758b7e26e92a7b20a', class: `content` }, h("div", { key: 'a0644db1242c2d586c80d69db79dc2ea5204c08f', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags'
|
|
925
920
|
? this.selectedItems.map((item, index) => (h("div", { class: "added_tag" }, h("gb-tag", { size: "sm", icon: "avatar", action: "X_close", key: index, onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))))))
|
|
926
|
-
: this.selectedItem.name), this.supportingText && (h("div", { key: '
|
|
921
|
+
: this.selectedItem.name), this.supportingText && (h("div", { key: '58492296fb9c05f7547a85b10883f454672a04e4', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type === 'tags'
|
|
927
922
|
? this.selectedItems.map(item => item.username).join(', ') // For multiple selections
|
|
928
|
-
: this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: '
|
|
929
|
-
h(Fragment, null, this.dropdownOpen && (h("div", { key: '
|
|
923
|
+
: this.selectedItem.username))))))), this.showHelpIcon && (h("div", { key: 'b6238e0c9731dcc90bd1e4738188364b2b637e81', class: `help_icon` }, h("gb-help-tooltip", { key: '09f2a75b7fa21444e000b98054a27de68a438325', "show-supporting-text": true }, h("slot", { key: '76251b8d67c511ee5ccb6eade713faf4f522d38e', name: "tooltip_label", slot: "label" }), h("slot", { key: 'a13d3fa92709fdac4a7bb1b04190ceb7d3f903f2', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '9d3ebdfb83c61d61d85dca2f423fd5d365eeb3e2', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'c40c86bb4bdfb90d8058d24a59af7a19c885e30f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '6c901311ee0e8b95b6023eaa5f62942301a0a8a3', 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" }))))), this.showHintText && (h("p", { key: 'ef925e7e67dff7bc7e9d6c0c4ce4a884e39bb9fa', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
|
|
924
|
+
h(Fragment, null, this.dropdownOpen && (h("div", { key: 'a19904ee14c16841c0e32adc102402f0e96d3632', class: "dropdown_menu", ref: el => (this.dropdownRef = el) }, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username)))))) : (h(Fragment, null, this.items.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", { slot: "supporting_text" }, "@", item.username))))))))),
|
|
930
925
|
];
|
|
931
926
|
}
|
|
932
927
|
get el() { return getElement(this); }
|