globuswebcomponents 2.13.10 → 2.13.11
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-action-panel_64.cjs.entry.js +7 -6
- package/dist/collection/components/gb-button/readme.md +20 -22
- package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js +4 -3
- package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js.map +1 -1
- package/dist/components/gb-complex-secondary-side-bar-item.js +1 -1
- package/dist/components/gb-sidebar.js +1 -1
- package/dist/components/{p-CK3LB4DD.js → p-CGdfwBy_.js} +5 -5
- package/dist/components/p-CGdfwBy_.js.map +1 -0
- package/dist/docs.json +2 -1
- package/dist/esm/gb-action-panel_64.entry.js +7 -6
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-4911260e.entry.js → p-03c6c41c.entry.js} +2 -2
- package/dist/globuscomponents/p-03c6c41c.entry.js.map +1 -0
- package/dist/globuscomponents/readme.md +20 -22
- package/package.json +1 -1
- package/dist/components/p-CK3LB4DD.js.map +0 -1
- package/dist/globuscomponents/p-4911260e.entry.js.map +0 -1
|
@@ -5,28 +5,26 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property | Attribute
|
|
9
|
-
| ------------------- |
|
|
10
|
-
| `arrow` | `arrow`
|
|
11
|
-
| `destructive` | `destructive`
|
|
12
|
-
| `event` | `event`
|
|
13
|
-
| `hierarchy` | `hierarchy`
|
|
14
|
-
| `icon`
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
|
28
|
-
| --------------- | ----------- | ------------------- |
|
|
29
|
-
| `buttonClicked` | | `CustomEvent<void>` |
|
|
8
|
+
| Property | Attribute | Description | Type | Default |
|
|
9
|
+
| ------------------- | --------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------- |
|
|
10
|
+
| `arrow` | `arrow` | | `"bottom_center" \| "bottom_left" \| "bottom_right" \| "center" \| "left" \| "none" \| "right" \| "top_center"` | `'bottom_center'` |
|
|
11
|
+
| `destructive` | `destructive` | | `boolean` | `false` |
|
|
12
|
+
| `event` | `event` | | `boolean` | `false` |
|
|
13
|
+
| `hierarchy` | `hierarchy` | | `"link_color" \| "link_gray" \| "primary" \| "secondary_color" \| "secondary_gray" \| "tertiary_color" \| "tertiary_gray"` | `'primary'` |
|
|
14
|
+
| `icon` | `icon` | | `"default" \| "only"` | `'default'` |
|
|
15
|
+
| `iconConfig` | -- | | `{ iconLeadingStyle: string; iconLeadingType: string; }` | `undefined` |
|
|
16
|
+
| `iconLeading` | `icon-leading` | | `boolean` | `false` |
|
|
17
|
+
| `iconLeadingStyle` | `icon-leading-style` | | `string` | `''` |
|
|
18
|
+
| `iconLeadingSwap` | `icon-leading-swap` | | `string` | `''` |
|
|
19
|
+
| `iconLeadingType` | `icon-leading-type` | | `string` | `''` |
|
|
20
|
+
| `iconTrailing` | `icon-trailing` | | `boolean` | `false` |
|
|
21
|
+
| `iconTrailingStyle` | `icon-trailing-style` | | `string` | `''` |
|
|
22
|
+
| `iconTrailingSwap` | `icon-trailing-swap` | | `string` | `''` |
|
|
23
|
+
| `iconTrailingType` | `icon-trailing-type` | | `string` | `''` |
|
|
24
|
+
| `rounded` | `rounded` | | `boolean` | `false` |
|
|
25
|
+
| `size` | `size` | | `"lg" \| "md" \| "profile_lg" \| "profile_md" \| "profile_sm" \| "sm" \| "xl" \| "xs" \| "xxl" \| "xxs" \| "xxxl" \| "xxxxl"` | `'xl'` |
|
|
26
|
+
| `state` | `state` | | `"applied" \| "default" \| "disabled" \| "loading"` | `'default'` |
|
|
27
|
+
| `tooltipText` | `tooltip-text` | | `string` | `''` |
|
|
30
28
|
|
|
31
29
|
|
|
32
30
|
## Methods
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-CK3LB4DD.js","mappings":";;;;AAAA,MAAM,gCAAgC,GAAG,i/0EAAi/0E;;MCS7g1E,6BAA6B,iBAAAA,kBAAA,CAAA,MAAA,6BAAA,SAAAC,CAAA,CAAA;AAL1C,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAyB,SAAS;AACvC,QAAA,IAAI,CAAA,IAAA,GAAoC,iBAAiB;AACzD,QAAA,IAAQ,CAAA,QAAA,GAAgC,oBAAoB;AAC5D,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAClB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACA,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAE5C,QAAA,IAAc,CAAA,cAAA,GAAW,EAAE;AA6DrC;IA3DC,MAAM,QAAQ,CAAC,QAAgB,EAAA;AAC7B,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAE1E,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAEjC,QAAA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,eAAe,CAAC;AAC3D,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe;;QAGzC,MAAM,mBAAmB,GAAG,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC;AACpE,QAAA,mBAAmB,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/B,YAAA,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AACjC,SAAC,CAAC;QAEF,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC;AAE9D,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,IAAG;AACvB,YAAA,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC;AAChC,SAAC,CAAC;;AAGF,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS;;AAExC,QAAA,IAAI,CAAC,cAAc,GAAG,WAAW;;IAGnC,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG1B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,4BAAA,EAA+B,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,EAChF,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAA,EAE9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAA,CAAQ,CACrF,CACF,EACL,IAAI,CAAC,IAAI,KAAK,iBAAiB,KAC9B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,CAAc,WAAA,EAAA,IAAI,CAAC,KAAK,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,gBAAgB,GAAG,mBAAmB,CAAE,CAAA,EAAA,EAAG,IAAI,CAAC,KAAK,CAAK,CACvI,CACP,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,WAAW,KAC5C,CAAwB,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,EACxD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,CACG,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css?tag=gb-complex-secondary-side-bar-item&encapsulation=shadow","src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n position: relative;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n padding: var(--spacing-none) var(--spacing-4);\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.container.full_with_label {\r\n width: 14.875rem;\r\n}\r\n\r\n.container.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n.secondary_side_bar_item_div {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-2) var(--spacing-4);\r\n cursor: pointer;\r\n}\r\n\r\n.secondary_side_bar_item_div.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n/* Category Styles */\r\n.secondary_side_bar_item_div.colored_background.default,\r\n.secondary_side_bar_item_div.plain_background.default {\r\n background: transparent;\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.default:hover {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.secondary_side_bar_item_div.colored_background.active {\r\n background: var(--color-background-information-subtle, #9ac7f4);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.default:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.secondary_side_bar_item_div.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background.default path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.default path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background.default path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path#Icon[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background circle[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.colored_background.active circle[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n/* .icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.default path.has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.plain_background.default circle.has_opacity,\r\n.icon.colored_background.default path.has_opacity,\r\n.icon.colored_background.default g.has_opacity,\r\n.icon.colored_background.default circle.has_opacity {\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity {\r\n opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background.default path[fill].has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path[fill].has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n fill: transparent;\r\n} */\r\n\r\n/* Text Styles */\r\n.text{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_text {\r\n max-width: 100%;\r\n overflow-x: hidden;\r\n overflow-y: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.label_text.colored_background,\r\n.label_text.plain_background {\r\n color: var(--color-text, #4b5565); /**/\r\n}\r\n\r\n.label_text.colored_background.active,\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n top: 0rem;\r\n left: 4.8rem;\r\n}\r\n","import { Component, Element, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\nimport { getIconPath } from '../../utils/icons';\r\n\r\n@Component({\r\n tag: 'gb-complex-secondary-side-bar-item',\r\n styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbComplexSecondarySideBarItem {\r\n @Prop() state: 'default' | 'active' = 'default';\r\n @Prop() type: 'full_with_label' | 'icon_only' = 'full_with_label';\r\n @Prop() category: GeneralBackgroundCategories = 'colored_background';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(getIconPath(iconName, 'duotone', 'rounded'));\r\n\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n gWithOpacity.forEach(g => {\r\n g.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentDidLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`container ${this.type}`}>\r\n <div\r\n class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n onMouseEnter={() => (this.showTooltip = true)}\r\n onMouseLeave={() => (this.showTooltip = false)}\r\n >\r\n <div class=\"icon\">\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <div class=\"text\">\r\n <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|