npm - q2-tecton-elements - Versions diffs - 1.60.2 → 1.61.0 - Mend

q2-tecton-elements 1.60.2 → 1.61.0

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.

Files changed (315) hide show

package/dist/esm/q2-item.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
-import { o as overrideFocus, h as hasSlotContent } from './index-xCuy-dFb.js';
+import { o as overrideFocus, h as hasSlotContent } from './index-LNnzUeDP.js';
 const q2ItemCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:var(\n      --tct-btn-primary-hover-box-shadow,\n      0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)\n  )}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:var(--tct-item-action-align-items, center);display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";

package/dist/esm/q2-legend.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-CGkHOjh1.js';
-const q2LegendCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, 24px);opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
+const q2LegendCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:flex-start;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;min-height:var(--tct-legend-item-min-height, 15px);opacity:1;padding:var(--tct-legend-item-padding, 0 0 9px 0);transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, 1);text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;margin-left:auto;flex-grow:0;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, 1);text-align:right}";
 const Q2Legend = class {
     constructor(hostRef) {

package/dist/esm/q2-legend.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-legend.entry.js","sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: center;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n height: var-list(--tct-legend-item-height, 24px);\n opacity: 1;\n padding-block: 0;\n padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded > * {\n opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n display: inline-block;\n flex-grow: 1;\n font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n text-align: left;\n}\n\n.item-value {\n color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n display: inline-block;\n flex-grow: 1;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State Properties\n\n @State()\n hoveredItemIndex: number = -1;\n\n @State()\n selectedItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /** An array of objects that contain the data to be displayed. /\n @Prop()\n data: IDonutChartData[] = [];\n\n /* The format of the value displayed in the legend. /\n @Prop({ reflect: true })\n format: 'default' \| 'currency' = 'default';\n\n /* The id of the item to set as hovered. /\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n /* The id of the item to set as selected. */\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n // #endregion\n // #region Events\n\n @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Local Methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n }\n\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) \|\| index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-legend.entry.js","sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n position: relative;\n width: 100%;\n display: block;\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.item-button {\n align-items: flex-start;\n background-color: transparent;\n border: none;\n column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n display: flex;\n min-height: var-list(--tct-legend-item-min-height, 15px);\n opacity: 1;\n padding: var(--tct-legend-item-padding, unquote('0 0 9px 0'));\n transition: opacity var(--app-tween-1, 0.2s ease);\n width: 100%;\n\n &:hover {\n cursor: pointer;\n }\n\n &-faded > * {\n opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n }\n}\n\n.item-color-indicator {\n border-radius: 50%;\n display: inline-block;\n flex-shrink: 0;\n height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n display: inline-block;\n flex-grow: 1;\n font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-name-font-weight, 600);\n line-height: var(--tct-legend-item-name-line-height, 1);\n text-align: left;\n}\n\n.item-value {\n color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n display: inline-block;\n margin-left: auto;\n flex-grow: 0;\n font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n font-weight: var(--tct-legend-item-value-font-weight, 400);\n line-height: var(--tct-legend-item-value-line-height, 1);\n text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n tag: 'q2-legend',\n shadow: true,\n styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n // #region State Properties\n\n @State()\n hoveredItemIndex: number = -1;\n\n @State()\n selectedItemIndex: number = -1;\n\n // #endregion\n // #region Public Property API\n\n /** An array of objects that contain the data to be displayed. /\n @Prop()\n data: IDonutChartData[] = [];\n\n /* The format of the value displayed in the legend. /\n @Prop({ reflect: true })\n format: 'default' \| 'currency' = 'default';\n\n /* The id of the item to set as hovered. /\n @Prop({ reflect: true })\n hoveredItemId: string = null;\n\n /* The id of the item to set as selected. */\n @Prop({ reflect: true })\n selectedItemId: string = null;\n\n // #endregion\n // #region Events\n\n @Event()\n click: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseenter: EventEmitter<IDonutChartData>;\n\n @Event()\n mouseleave: EventEmitter<IDonutChartData>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.watchHoveredItemId(this.hoveredItemId);\n this.watchSelectedItemId(this.selectedItemId);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('hoveredItemId')\n watchHoveredItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.hoveredItemIndex = newItemIndex;\n }\n\n @Watch('selectedItemId')\n watchSelectedItemId(newItemId: string) {\n const newItemIndex = this.getDataIndexForId(newItemId);\n this.selectedItemIndex = newItemIndex;\n }\n\n // #endregion\n // #region Local Methods\n\n get dataWithClasses() {\n return this.data.map((item, index) => ({\n ...item,\n classes: {\n 'item-button': true,\n 'item-button-faded': this.isItemButtonFaded(index),\n 'item-button-selected': this.isItemButtonSelected(index),\n },\n }));\n }\n\n formatValue(value: string \| number) {\n const valueAsFloat = parseFloat(value.toString());\n if (this.format === 'currency') {\n return Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(valueAsFloat);\n }\n\n return Intl.NumberFormat('en-US').format(valueAsFloat);\n }\n\n getDataIndexForId(id: string) {\n const index = this.data.findIndex(item => item.id === id);\n return index >= 0 ? index : -1;\n }\n\n isItemButtonFaded(index: number) {\n if (this.isItemButtonSelected(index) \|\| index == this.hoveredItemIndex) return false;\n\n if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n }\n\n isItemButtonSelected(index: number) {\n return index === this.selectedItemIndex;\n }\n\n onClick(event: MouseEvent, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n if (this.selectedItemIndex === itemIndex) {\n this.selectedItemIndex = -1;\n if (event.detail === 0) {\n // Keyboard click\n this.hoveredItemIndex = -1;\n } else {\n // Mouse click\n this.hoveredItemIndex = itemIndex;\n }\n this.click.emit(null);\n return;\n }\n\n this.selectedItemIndex = itemIndex;\n this.click.emit(this.data[itemIndex]);\n }\n\n onClickElsewhere(obj) {\n obj.selectedItemIndex = -1;\n }\n\n onMouseEnter(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = itemIndex;\n this.mouseenter.emit(this.data[itemIndex]);\n }\n\n onMouseLeave(event: Event, itemData: IDonutChartData) {\n event.stopPropagation();\n const itemIndex = this.getDataIndexForId(itemData.id);\n this.hoveredItemIndex = -1;\n this.mouseleave.emit(this.data[itemIndex]);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n <ul>\n {this.dataWithClasses.map(item => (\n <li class=\"item\">\n <button\n test-id=\"item\"\n aria-label={`${item.name} ${this.formatValue(item.value)}`}\n class={item.classes}\n onClick={event => this.onClick(event, item)}\n onMouseEnter={event => this.onMouseEnter(event, item)}\n onMouseLeave={event => this.onMouseLeave(event, item)}\n >\n <span\n test-id=\"itemColor\"\n class=\"item-color-indicator\"\n style={{ backgroundColor: item.color }}\n aria-hidden=\"true\"\n />\n <span\n test-id=\"itemName\"\n class=\"item-name\"\n >\n {item.name}\n </span>\n <span\n id={`item-${item.id}`}\n test-id=\"itemValue\"\n class=\"item-value\"\n >\n {this.formatValue(item.value)}\n </span>\n </button>\n </li>\n ))}\n </ul>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-link.q2-list.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-link.q2-list.entry.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n opacity: 0.5;\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n /\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/* @slot filter - An optional slot to display custom content for filtering the list items. /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-link.q2-list.entry.js","sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n /\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/* @slot filter - An optional slot to display custom content for filtering the list items. /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-link_2.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { h as hasSlotContent } from './index-xCuy-dFb.js';
+import { h as hasSlotContent } from './index-LNnzUeDP.js';
-const q2LinkCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{border-radius:var(--tct-link-border-radius, 0);color:var(--tct-link-color-standalone, var(--t-primary));min-height:var(--tct-link-min-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+const q2LinkCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{border-radius:var(--tct-link-border-radius, 0);color:var(--tct-link-color-standalone, var(--t-primary));min-height:var(--tct-link-min-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled-color, var(--t-primary));opacity:var(--tct-link-color-standalone-disabled-opacity, var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4)));text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4))}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
 const Q2Link = class {
     constructor(hostRef) {

package/dist/esm/q2-link_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-link.q2-list.entry.js","mappings":"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","names":[],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled, --t-primary);\n opacity: 0.5;\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n /\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/* @slot filter - An optional slot to display custom content for filtering the list items. /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-link.q2-list.entry.js","mappings":"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","names":[],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n}\n\n:host {\n &:active {\n box-shadow: none;\n }\n}\n\n.link-container {\n --comp-link-font-bold-stroke-width: 0.5px;\n background: transparent;\n border: none;\n font-size: var-list(--tct-link-font-size, inherit);\n font-weight: var-list(--tct-link-font-weight, inherit);\n\n &.standalone {\n --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n .link {\n border-radius: var(--tct-link-border-radius, 0);\n color: var-list(--tct-link-color-standalone, --t-primary);\n min-height: var(--tct-link-min-height, 24px);\n display: flex;\n align-items: center;\n --tct-icon-size: 16px;\n text-decoration: none;\n q2-icon {\n margin-left: var(--tct-link-label-icon-gap, 6px);\n }\n }\n &:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n }\n &:active:hover {\n text-decoration: underline;\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n .link {\n color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n box-shadow: none;\n }\n }\n &.disabled {\n .link {\n cursor: not-allowed;\n color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n opacity: var-list(\n --tct-link-color-standalone-disabled-opacity,\n --tct-link-disabled-opacity,\n --app-disabled-opacity,\n 0.4\n );\n text-decoration: none;\n }\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n &.inline {\n margin: 0 var(--tct-link-side-margin, 6px);\n text-decoration: underline;\n color: var-list(--tct-link-color-inline, --t-primary);\n &:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n }\n &:active:hover {\n -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n box-shadow: none;\n }\n &.disabled {\n cursor: not-allowed;\n opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n &:focus-visible & {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines whether the component and `tctClick` event are disabled. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* The link when clicked. /\n @Prop({ reflect: true })\n href: string = '#';\n\n /* The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". /\n @Prop({ reflect: true })\n iconType: string = 'chevron-right';\n\n /* The displayed label to represent your link. /\n @Prop({ reflect: true })\n label: string;\n\n /* How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). /\n @Prop({ reflect: true })\n referrerpolicy: ReferrerPolicy;\n\n /* Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). /\n @Prop({ reflect: true })\n target: string; // _self \| _blank\n\n /* Applies a `title` attribute to the anchor tag in the shadowRoot of the component. /\n @Prop({ reflect: true })\n tctTitle: string;\n\n /* Determines the visual display style of the link. /\n @Prop({ reflect: true })\n variant: string = 'inline';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the link is clicked.\n * @legacyEvent\n /\n @Event()\n tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n // #endregion\n // #region Public Methods API\n\n /\n A method for click.\n \n @testOnly\n /\n @Method()\n async clickLink() {\n const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n (anchor as HTMLAnchorElement)?.click();\n }\n\n // #endregion\n // #region Local Methods\n\n get classes(): string {\n const list = ['link-container'];\n if (this.variant) list.push(this.variant);\n if (!!this.disabled) list.push('disabled');\n return list.join(' ');\n }\n\n handleClick(event: MouseEvent) {\n event.stopPropagation();\n if (this.disabled) return;\n this.tctClick.emit({\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n href: this.href,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return this.variant === 'standalone' ? (\n <div\n class={this.classes}\n aria-label={this.label}\n >\n <a\n class=\"link\"\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n <span class=\"label\">{this.label}</span>\n <q2-icon type={this.iconType}></q2-icon>\n </a>\n </div>\n ) : (\n <a\n class={this.classes}\n onClick={e => this.handleClick(e)}\n href={!!this.disabled ? undefined : this.href}\n target={this.target \|\| '_self'}\n referrerPolicy={this.referrerpolicy \|\| undefined}\n title={this.tctTitle \|\| undefined}\n test-id=\"linkAnchor\"\n >\n {this.label}\n </a>\n );\n }\n\n // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n ::slotted(q2-item:not(:last-child)),\n .header {\n border-style: var-list(--tct-list-item-border-style, solid);\n border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n }\n}\n\n::slotted(q2-item) {\n --comp-item-padding: #{var-list(\n --tct-list-item-padding,\n unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n )};\n --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n display: flex;\n gap: var(--app-scale-3x, 12px);\n padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n min-height: var-list(var-prefixer(list-header-min-height), 44px);\n &-spacebetween {\n justify-content: space-between;\n }\n &-start {\n justify-content: flex-start;\n }\n &-end {\n justify-content: flex-end;\n }\n .label {\n width: 100%;\n height: var(--tct-list-label-height, 44px);\n line-height: var(--tct-list-label-line-height, 44px);\n font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-list-label-font-weight, 600);\n color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n }\n}\n\nslot:not([name]) {\n display: flex;\n flex-direction: column;\n gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/* @slot filter - An optional slot to display custom content for filtering the list items. /\n@Component({\n tag: 'q2-list',\n styleUrl: 'q2-list.scss',\n shadow: true,\n})\nexport class Q2List {\n // #region Own Properties\n\n listElement: HTMLDivElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n renderTrigger: number = 0;\n\n // #endregion\n // #region Public Property API\n\n /* Adds a border between each items /\n @Prop({ mutable: true, reflect: true })\n bordered: boolean;\n\n /* label text on header area */\n @Prop({ reflect: true })\n label: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentDidLoad() {\n if (typeof MutationObserver === 'undefined') return;\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get hasFilterSlot() {\n return !!this.hostElement.querySelector('q2-pill') \|\| hasSlotContent(this.hostElement, 'pill');\n }\n\n get hasLabelContent() {\n return !!this.label;\n }\n\n get headerClasses() {\n const classes = ['header'];\n if (this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-spacebetween');\n } else if (this.hasLabelContent && !this.hasFilterSlot) {\n classes.push('header-start');\n } else if (!this.hasLabelContent && this.hasFilterSlot) {\n classes.push('header-end');\n }\n return classes.join(' ');\n }\n\n get listClasses() {\n const classes = ['list'];\n return classes.join(' ');\n }\n\n onMutationObserved = () => {\n this.renderTrigger += 1;\n this.scheduledAfterRender.push(() => {\n Array.from(this.hostElement.children).forEach(child => {\n if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n });\n });\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div\n class={this.listClasses}\n ref={el => (this.listElement = el)}\n >\n {(this.hasFilterSlot \|\| this.hasLabelContent) && (\n <div class={this.headerClasses}>\n <div class=\"label\">{this.label}</div>\n {this.hasFilterSlot && <slot name=\"filter\" />}\n </div>\n )}\n <div role=\"list\">\n <slot />\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/esm/q2-loc.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc } from './index-xCuy-dFb.js';
+import { l as loc } from './index-LNnzUeDP.js';
 const Q2Loc = class {
     constructor(hostRef) {

package/dist/esm/q2-message.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
-import { o as overrideFocus, a as isEventFromElement, n as nextPaint, p as isFirefox, l as loc } from './index-xCuy-dFb.js';
+import { o as overrideFocus, a as isEventFromElement, n as nextPaint, p as isFirefox, l as loc } from './index-LNnzUeDP.js';
 const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";

package/dist/esm/q2-meter.entry.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
+import { l as loc } from './index-LNnzUeDP.js';
+const q2MeterCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:100%}.meter-container{--comp-meter-bar-height:var(--tct-meter-bar-height, 10px);--comp-meter-bar-border-radius:var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));--comp-meter-dot-height:var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));--comp-meter-dot-border-style:var(--tct-meter-dot-border-style, solid);--comp-meter-dot-border-width:var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));--comp-meter-dot-border-color:var(--tct-meter-dot-border-color, #FFFFFF);--comp-meter-dot-border-radius:var(--tct-meter-dot-border-radius, 50%);--comp-meter-dot-background-color:var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));--comp-meter-tick-height:var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));--comp-meter-bar-shadow:var(--tct-meter-bar-shadow);--comp-meter-bar-border:var(--tct-meter-bar-border)}:host([animated]:not([animated=false])) .meter-container{--comp-meter-bar-transition:var(--tct-meter-bar-transition, width 0.2s ease-in-out);--comp-meter-dot-transition:var(--tct-meter-dot-transition, left 0.2s ease-in-out)}:host([dotted]:not([dotted=false])) .meter-container{--comp-meter-dot-visibility:visible}:host([segments]:not([segments=\"\"]):not([segments=\"0\"]):not([segments=\"1\"])) .meter-container{--comp-meter-tick-visibility:visible}.meter-container .label{font-size:var(--tct-meter-label-font-size, 14px);font-weight:var(--tct-meter-label-font-weight, 600);color:var(--tct-meter-label-color, var(--t-text, #4D4D4D));margin:var(--tct-meter-label-margin, 5px 0)}.meter-container .description{font-size:var(--tct-meter-description-font-size, 14px);font-weight:var(--tct-meter-description-font-weight, 400);color:var(--tct-meter-description-color, #000000);line-height:var(--tct-meter-description-line-height, 21px);margin:var(--tct-meter-description-margin, 5px 0)}.meter-container .bar-container{position:relative}.meter-container .bar-container .bars{position:relative;top:0;left:0;width:100%;height:var(--comp-meter-bar-height);background-color:var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));margin:var(--tct-meter-bar-margin, 5px 0);border:var(--comp-meter-bar-border);border-radius:var(--comp-meter-bar-border-radius);box-shadow:var(--comp-meter-bar-shadow)}.meter-container .bar-container .bars .completed-bar,.meter-container .bar-container .bars .suggested-bar,.meter-container .bar-container .bars .tick-bar{height:100%;position:absolute;top:0;left:0;border-radius:var(--comp-meter-bar-border-radius);transition:var(--comp-meter-bar-transition, none)}.meter-container .bar-container .bars .completed-bar{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:2}.meter-container .bar-container .bars .suggested-bar{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:1}.meter-container .bar-container .bars .tick-bar{visibility:var(--comp-meter-tick-visibility, hidden);width:100%;z-index:3;display:flex;justify-content:space-evenly;align-items:center}.meter-container .bar-container .bars .tick-bar .tick{width:100%;border-right-width:var(--tct-meter-tick-width, 1px);border-right-color:var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));border-right-style:solid;height:var(--comp-meter-tick-height)}.meter-container .bar-container .bars .tick-bar .tick.tick-right{border-right-color:var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494))}.meter-container .bar-container .bars .tick-bar .tick:last-child{border-color:transparent}.meter-container .bar-container .dot-container{position:absolute;line-height:0;left:0;top:calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));transform:translateX(-50%);transition:var(--comp-meter-dot-transition, none);z-index:4}.meter-container .bar-container .dot-container .dot{visibility:var(--comp-meter-dot-visibility, hidden);width:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));height:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));background-color:var(--comp-meter-dot-background-color);border-style:var(--comp-meter-dot-border-style);border-width:var(--comp-meter-dot-border-width);border-color:var(--comp-meter-dot-border-color);border-radius:var(--comp-meter-dot-border-radius);box-shadow:var(--tct-meter-dot-box-shadow, var(--app-shadow-1))}.meter-container .bar-container .dot-container.suggested q2-tooltip .dot{visibility:hidden}.meter-container .legends{display:flex;flex-direction:row;justify-content:space-between;color:var(--tct-meter-legend-label-color, var(--t-textA, #767676));font-weight:var(--tct-meter-legend-font-weight, 400);margin:var(--tct-meter-legend-margin, 5px 0)}.meter-container .legends .left{display:flex;flex-direction:row}.meter-container .legends .left .completed,.meter-container .legends .left .suggested{display:flex;flex-direction:row;align-items:center}.meter-container .legends .left .completed .dot,.meter-container .legends .left .suggested .dot{margin-right:var(--tct-meter-dot-gap, 5px);border-radius:var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));width:var(--tct-meter-legend-bar-width, 7px);height:var(--tct-meter-legend-bar-height, 7px)}.meter-container .legends .left .completed .legend-label,.meter-container .legends .left .suggested .legend-label{font-size:inherit}.meter-container .legends .left .completed{margin-right:var(--tct-meter-legend-gap, 20px)}.meter-container .legends .left .completed .dot{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E))}.meter-container .legends .left .suggested .dot{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3))}.meter-container .legends .right .max{font-size:inherit;text-align:right}";
+const Q2Meter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // #region Own Properties
+        this.scheduledAfterRender = [];
+        // #endregion
+        // #region Public Property API
+        /**
+         * Shows loading animation for bars, default is true.
+         */
+        this.animated = true;
+        /**
+         * Shows a circle shaped dot indicator on completed bar, default is true.
+         */
+        this.dotted = true;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        if (this.animated) {
+            const _completedValue = this.completedValue;
+            const _suggestedValue = this.suggestedValue;
+            this.completedValue = '0';
+            this.suggestedValue = '0';
+            this.scheduledAfterRender.push(() => {
+                this.completedValue = _completedValue;
+                this.suggestedValue = _suggestedValue;
+            });
+        }
+    }
+    componentDidRender() {
+        var _a;
+        (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+        this.scheduledAfterRender = [];
+    }
+    // #endregion
+    // #region Local Methods
+    get ariaLabel() {
+        const label = [];
+        label.push(`${loc(this.label || '')} meter showing,`);
+        label.push(`${this.completedValue || 'zero'} ${loc(this.completedLabel || '')},`);
+        label.push(`${this.suggestedValue || ''} ${loc(this.suggestedLabel || '')},`);
+        label.push(`out of ${this.maxValue || ''} ${loc(this.maxLabel || '')}`);
+        return label.join(' ');
+    }
+    convertToPercentage(completedValue, suggestedValue, maxValue) {
+        let max = Number((maxValue || '100').trim().replace(/[$,]/g, ''));
+        let completed = Math.round((100 * Number((completedValue || '0').trim().replace(/[$,]/g, ''))) / max);
+        let suggested = Math.round((100 * Number((suggestedValue || '0').trim().replace(/[$,]/g, ''))) / max);
+        max = isNaN(max) ? 100 : max;
+        completed = isNaN(completed) ? 0 : completed;
+        suggested = isNaN(suggested) ? 0 : suggested;
+        return [Math.min(100, completed), Math.min(100, suggested)];
+    }
+    // #endregion
+    // #region Render Methods
+    renderBar(completed, suggested) {
+        suggested = Math.max(completed, suggested);
+        const completedDotStyles = {};
+        const suggestedDotStyles = {};
+        if (completed === 0) {
+            completedDotStyles.transform = `translateX(0%)`;
+            completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';
+        }
+        else if (completed === 100) {
+            completedDotStyles.transform = `translateX(-100%)`;
+            completedDotStyles.left = '100%';
+        }
+        else if (0 < completed && completed < 100) {
+            completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;
+        }
+        if (suggested === 0) {
+            suggestedDotStyles.transform = `translateX(0%)`;
+            suggestedDotStyles.left = '0%';
+        }
+        else if (suggested === 100) {
+            suggestedDotStyles.transform = `translateX(-100%)`;
+            suggestedDotStyles.left = '100%';
+        }
+        else if (0 < suggested && suggested < 100) {
+            suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;
+        }
+        return (h("div", { class: "bar-container" }, h("div", { class: "bars" }, h("div", { class: "completed-bar", style: { width: `${completed}%` } }), this.suggestedValue && this.suggestedLabel && (h("div", { class: "suggested-bar", style: { width: `${suggested}%` } })), this.segments && !isNaN(this.segments) && this.segments > 1 ? (h("div", { class: "tick-bar" }, Array.from(new Array(this.segments)).map((_, i) => {
+            const classes = ['tick'];
+            // color changes on ticks for greater than completed value
+            if (Math.round((100 * (i + 1)) / this.segments) > completed)
+                classes.push('tick-right');
+            return h("div", { class: classes.join(' ') });
+        }))) : ('')), h("div", { class: "dot-container completed", style: completedDotStyles }, h("q2-tooltip", { label: this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue, position: "n", immediate: true }, h("div", { class: "dot" }))), suggested > completed ? (h("div", { class: "dot-container suggested", style: suggestedDotStyles }, h("q2-tooltip", { label: this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue, position: "n", immediate: true }, h("div", { class: "dot" })))) : ('')));
+    }
+    render() {
+        const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
+        return (h("div", { key: 'b8981bc8729facaaef2e964661ab23cf387b9f44', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '9afeac3d6dc96eab3fad6b18769a876cf3c54441', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: '33144dd03846ae006cf6f6259ba920929834d1ec', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'c19752e3c533c9a73044040876759b17ce3cccf9', class: "legends" }, h("div", { key: 'df11def26d05cb38f649440a2cd0f71a531738aa', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'c61bcf49cc7611e6a62265d15fe9eeb02c7ca17f', class: "right" }, h("div", { key: '871a5ba7cef98a7671b6c16d56d6e382d500d009', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Q2Meter.style = q2MeterCss;
+export { Q2Meter as q2_meter };
+//# sourceMappingURL=q2-meter.entry.js.map
+//# sourceMappingURL=q2-meter.entry.js.map

package/dist/esm/q2-meter.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-meter.entry.js","sources":["src/components/q2-meter/q2-meter.scss?tag=q2-meter&encapsulation=shadow","src/components/q2-meter/q2-meter.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n width: 100%;\n}\n\n.meter-container {\n --comp-meter-bar-height: #{var-list(--tct-meter-bar-height, 10px)};\n --comp-meter-bar-border-radius: #{var-list(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2))};\n --comp-meter-dot-height: #{var-list(--tct-meter-dot-size, --tct-meter-bar-height, 10px)};\n --comp-meter-dot-border-style: #{var-list(--tct-meter-dot-border-style, solid)};\n --comp-meter-dot-border-width: #{var-list(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)))};\n --comp-meter-dot-border-color: #{var-list(--tct-meter-dot-border-color, #FFFFFF)};\n --comp-meter-dot-border-radius: #{var-list(--tct-meter-dot-border-radius, 50%)};\n --comp-meter-dot-background-color: #{var-list(--tct-meter-dot-background-color, --t-primary, #6A4A9E)};\n --comp-meter-tick-height: #{var-list(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)))};\n --comp-meter-bar-shadow: #{var-list(--tct-meter-bar-shadow)};\n --comp-meter-bar-border: #{var-list(--tct-meter-bar-border)};\n\n :host([animated]:not([animated='false'])) & {\n --comp-meter-bar-transition: #{var-list(--tct-meter-bar-transition, #{width 0.2s ease-in-out})};\n --comp-meter-dot-transition: #{var-list(--tct-meter-dot-transition, #{left 0.2s ease-in-out})};\n }\n\n :host([dotted]:not([dotted='false'])) & {\n --comp-meter-dot-visibility: visible;\n }\n\n :host([segments]:not([segments='']):not([segments='0']):not([segments='1'])) & {\n --comp-meter-tick-visibility: visible;\n }\n\n .label {\n font-size: var-list(--tct-meter-label-font-size, 14px);\n font-weight: var-list(--tct-meter-label-font-weight, 600);\n color: var-list(--tct-meter-label-color, --t-text, #4D4D4D);\n margin: var-list(--tct-meter-label-margin, #{5px 0});\n }\n .description {\n font-size: var-list(--tct-meter-description-font-size, 14px);\n font-weight: var-list(--tct-meter-description-font-weight, 400);\n color: var-list(--tct-meter-description-color, #000000);\n line-height: var-list(--tct-meter-description-line-height, 21px);\n margin: var-list(--tct-meter-description-margin, #{5px 0});\n }\n .bar-container {\n position: relative;\n .bars {\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--comp-meter-bar-height);\n background-color: var-list(--tct-meter-bar-background-color, --t-primary-completed2, #E0DEEF);\n margin: var-list(--tct-meter-bar-margin, #{5px 0});\n border: var-list(--comp-meter-bar-border);\n border-radius: var(--comp-meter-bar-border-radius);\n box-shadow: var-list(--comp-meter-bar-shadow);\n .completed-bar,\n .suggested-bar,\n .tick-bar {\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--comp-meter-bar-border-radius);\n transition: var-list(--comp-meter-bar-transition, none);\n }\n .completed-bar {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 2;\n }\n .suggested-bar {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n min-width: calc(var(--comp-meter-bar-height));\n width: 0%;\n z-index: 1;\n }\n .tick-bar {\n visibility: var-list(--comp-meter-tick-visibility, hidden);\n width: 100%;\n z-index: 3;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n .tick {\n width: 100%;\n border-right-width: var-list(--tct-meter-tick-width, 1px);\n border-right-color: var-list(--tct-meter-tick-color, --t-primary-l5, #B4A0D3);\n border-right-style: solid;\n height: var(--comp-meter-tick-height);\n &.tick-right {\n border-right-color: var-list(--tct-meter-tick-right-color, --t-a11y-gray-color-AA, #949494);\n }\n &:last-child {\n border-color: transparent;\n }\n\n }\n }\n }\n .dot-container {\n position: absolute;\n line-height: 0;\n left: 0;\n top: calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));\n transform: translateX(-50%);\n transition: var(--comp-meter-dot-transition, none);\n z-index: 4;\n .dot {\n visibility: var-list(--comp-meter-dot-visibility, hidden);\n width: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n height: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n background-color: var(--comp-meter-dot-background-color);\n border-style: var(--comp-meter-dot-border-style);\n border-width: var(--comp-meter-dot-border-width);\n border-color: var(--comp-meter-dot-border-color);\n border-radius: var(--comp-meter-dot-border-radius);\n box-shadow: var-list(--tct-meter-dot-box-shadow, --app-shadow-1);\n }\n &.suggested {\n q2-tooltip {\n .dot {\n visibility: hidden;\n }\n }\n }\n }\n }\n .legends {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: var-list(--tct-meter-legend-label-color, --t-textA, #767676);\n font-weight: var-list(--tct-meter-legend-font-weight, 400);\n margin: var-list(--tct-meter-legend-margin, #{5px 0});\n .left {\n display: flex;\n flex-direction: row;\n .completed,\n .suggested {\n display: flex;\n flex-direction: row;\n align-items: center;\n .dot {\n margin-right: var-list(--tct-meter-dot-gap, 5px);\n border-radius: var-list(--tct-meter-legend-dot-radius, --app-border-radius-3, 5px);\n width: var-list(--tct-meter-legend-bar-width, 7px);\n height: var-list(--tct-meter-legend-bar-height, 7px);\n }\n .legend-label {\n font-size: inherit;\n }\n }\n .completed {\n margin-right: var-list(--tct-meter-legend-gap, 20px);\n .dot {\n background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n }\n }\n .suggested {\n .dot {\n background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n }\n }\n }\n .right {\n .max {\n font-size: inherit;\n text-align: right;\n }\n }\n }\n}\n\n","import { loc } from '@/utils';\nimport { Component, Prop, h, ComponentInterface, Element } from '@stencil/core';\n@Component({ tag: 'q2-meter', shadow: true, styleUrl: 'q2-meter.scss' })\nexport class Q2Meter implements ComponentInterface {\n // #region Own Properties\n\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /**\n * Shows loading animation for bars, default is true.\n */\n @Prop({ reflect: true })\n animated: boolean = true;\n\n /**\n * Defines the label for the completed bar, which appears at the bottom in the legend section.\n * @localizable\n */\n @Prop({ reflect: true })\n completedLabel: string;\n\n /**\n * Defines the value for the completed bar.\n */\n @Prop({ reflect: true })\n completedValue: string;\n\n /**\n * Defines the description for the meter, which appears at the top just below the label.\n * @localizable\n */\n @Prop({ reflect: true })\n description: string;\n\n /**\n * Shows a circle shaped dot indicator on completed bar, default is true.\n */\n @Prop({ reflect: true })\n dotted: boolean = true;\n\n /**\n * Defines the label for the meter, which appears at the top.\n * @localizable\n */\n @Prop({ reflect: true })\n label: string;\n\n /**\n * Defines the label for the base bar, which appears at the bottom in the legend.\n * @localizable\n */\n @Prop({ reflect: true })\n maxLabel: string;\n\n /**\n * Defines the value for the base bar.\n */\n @Prop({ reflect: true })\n maxValue: string;\n\n /**\n * Shows thin tick bars based on the number of segments provided.\n */\n @Prop({ reflect: true })\n segments: number;\n\n /**\n * Defines the label for the suggested bar, which appears at the bottom in the legend.\n * @localizable\n */\n @Prop({ reflect: true })\n suggestedLabel: string;\n\n /**\n * Defines the value for the suggested bar.\n */\n @Prop({ reflect: true })\n suggestedValue: string;\n\n /**\n * Defines custom text for the completed bar tooltip.\n * @localizable\n */\n @Prop({ reflect: true })\n tooltipCompleted: string;\n\n /**\n * Defines custom text for the suggested bar tooltip.\n * @localizable\n */\n @Prop({ reflect: true })\n tooltipSuggested: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void {\n if (this.animated) {\n const _completedValue = this.completedValue;\n const _suggestedValue = this.suggestedValue;\n this.completedValue = '0';\n this.suggestedValue = '0';\n this.scheduledAfterRender.push(() => {\n this.completedValue = _completedValue;\n this.suggestedValue = _suggestedValue;\n });\n }\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabel() {\n const label = [];\n label.push(`${loc(this.label || '')} meter showing,`);\n label.push(`${this.completedValue || 'zero'} ${loc(this.completedLabel || '')},`);\n label.push(`${this.suggestedValue || ''} ${loc(this.suggestedLabel || '')},`);\n label.push(`out of ${this.maxValue || ''} ${loc(this.maxLabel || '')}`);\n return label.join(' ');\n }\n\n convertToPercentage(completedValue: string, suggestedValue: string, maxValue: string) {\n let max = Number((maxValue || '100').trim().replace(/[$,]/g, ''));\n let completed = Math.round((100 * Number((completedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n let suggested = Math.round((100 * Number((suggestedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n max = isNaN(max) ? 100 : max;\n completed = isNaN(completed) ? 0 : completed;\n suggested = isNaN(suggested) ? 0 : suggested;\n return [Math.min(100, completed), Math.min(100, suggested)];\n }\n\n // #endregion\n // #region Render Methods\n\n renderBar(completed: number, suggested: number) {\n suggested = Math.max(completed, suggested);\n const completedDotStyles: { left?: string; transform?: string } = {};\n const suggestedDotStyles: { left?: string; transform?: string } = {};\n\n if (completed === 0) {\n completedDotStyles.transform = `translateX(0%)`;\n completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';\n } else if (completed === 100) {\n completedDotStyles.transform = `translateX(-100%)`;\n completedDotStyles.left = '100%';\n } else if (0 < completed && completed < 100) {\n completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;\n }\n\n if (suggested === 0) {\n suggestedDotStyles.transform = `translateX(0%)`;\n suggestedDotStyles.left = '0%';\n } else if (suggested === 100) {\n suggestedDotStyles.transform = `translateX(-100%)`;\n suggestedDotStyles.left = '100%';\n } else if (0 < suggested && suggested < 100) {\n suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;\n }\n\n return (\n <div class=\"bar-container\">\n <div class=\"bars\">\n <div\n class=\"completed-bar\"\n style={{ width: `${completed}%` }}\n ></div>\n {this.suggestedValue && this.suggestedLabel && (\n <div\n class=\"suggested-bar\"\n style={{ width: `${suggested}%` }}\n ></div>\n )}\n {this.segments && !isNaN(this.segments) && this.segments > 1 ? (\n <div class=\"tick-bar\">\n {Array.from(new Array(this.segments)).map((_, i) => {\n const classes = ['tick'];\n // color changes on ticks for greater than completed value\n if (Math.round((100 * (i + 1)) / this.segments) > completed) classes.push('tick-right');\n return <div class={classes.join(' ')}></div>;\n })}\n </div>\n ) : (\n ''\n )}\n </div>\n <div\n class=\"dot-container completed\"\n style={completedDotStyles}\n >\n <q2-tooltip\n label={this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue}\n position=\"n\"\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n </div>\n {suggested > completed ? (\n <div\n class=\"dot-container suggested\"\n style={suggestedDotStyles}\n >\n <q2-tooltip\n label={this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue}\n position=\"n\"\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n </div>\n ) : (\n ''\n )}\n </div>\n );\n }\n\n render() {\n const [completed, suggested] = this.convertToPercentage(\n this.completedValue,\n this.suggestedValue,\n this.maxValue\n );\n return (\n <div\n class=\"meter-container\"\n aria-label={this.ariaLabel}\n role=\"group\"\n >\n {this.label && (\n <div\n class=\"label\"\n aria-label={loc(this.label)}\n >\n {loc(this.label)}\n </div>\n )}\n {this.description && (\n <div\n class=\"description\"\n aria-label={loc(this.description)}\n >\n {loc(this.description)}\n </div>\n )}\n {this.renderBar(completed, suggested)}\n <div class=\"legends\">\n <div class=\"left\">\n {this.completedValue || this.completedLabel ? (\n <div class=\"completed\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.completedValue} {loc(this.completedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n {this.suggestedValue || this.suggestedLabel ? (\n <div class=\"suggested\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.suggestedValue} {loc(this.suggestedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n </div>\n <div class=\"right\">\n <div class=\"max\">\n {this.maxValue} {loc(this.maxLabel)}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/q2-modal.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { f as debounce, w as waitForNextPaint, h as hasSlotContent } from './index-xCuy-dFb.js';
-import { s as sanitizeHTMLString } from './sanitize-html-string-DL0kgllh.js';
+import { f as debounce, w as waitForNextPaint, h as hasSlotContent } from './index-LNnzUeDP.js';
+import { s as sanitizeHTMLString } from './sanitize-html-string-DOVERJq5.js';
 const q2ModalCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:\"\";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}";
@@ -154,7 +154,7 @@ const Q2Modal = class {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '2b12b5a9c4a09f0e80b9517d81e17c561ceca200', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'efbce287e1c7e7a07fc0779f21d10c4f440aaa49', class: interiorClasses }, this.title && (h("header", { key: '71e372aed7673b8d8911bd862db4ede5757a2184' }, this.title && h("h2", { key: '2688b54e110b49a9b8f64e146fea9bd9a1c7c706', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '9d78801c76f4cad72b8f0ab962aeea127d130492', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'de8d48d2676e71c1280a41f3c34d49027c09773c', type: "close" }))))), h("div", { key: 'a5c23f6b561652bf9a519bd91af2e1eb65713b31', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '3d924a05cfcba562105d1eed69af5383ff48e799', class: "icon" }, h("q2-icon", { key: '972f69406d187769cd67097d18f85adcaf7769c1', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '43104feec69bb2f11b47b2d7c77fe1e60af467fb', class: "image" }, h("img", { key: 'e583fd2be24c3d3ab42caaf46ca4dc7bc0df6030', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'f011e7d6c4bc4135dbe192e526c2cb4628aadbff', name: "content" }), this.description && h("p", { key: 'b8794d9b1d8eb0d811a7aa4f7ed3dcafbd245cef', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'e5834ef811c4cc951ef7eba1d37758301f2bdb6b', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '9172365d3d00c61ab01378a07a1efe843487f6d8' }, h("q2-action-group", { key: '9f3ad85ccefa9f8dd3d5637043f17a941b370612', "full-width": true }, h("slot", { key: '8a4618e71eb175a19ff34c8d870a72271b6e1caf', name: "action" }))))));
+        return (h("dialog", { key: '09e909ca6de730e2d34ec1796fcdb2bdaf077166', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '1410c1e9c86101eb164a6eaca3332fe2fc915bd2', class: interiorClasses }, this.title && (h("header", { key: 'be170cc01cfaa65937479d0f062fab907eefd585' }, this.title && h("h2", { key: 'c3a4ebdf0568fac516703ef48d3e09a3aba48a52', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '0e08fcfe0404d581e023ee51052bd0bc95c65a46', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '6506b58253688e24bd53cd7d9f96022652ace643', type: "close" }))))), h("div", { key: 'e6509c517e7587bf4d5ce17900d6c3d1bf236544', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '1bd63c250c3198063ce71c7ccc39b527bae734d6', class: "icon" }, h("q2-icon", { key: '1c51ba9f9e7ec43080345e27e5a14d2ce0e259d9', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'f2f424901875185ae40a1775a63179357f31882c', class: "image" }, h("img", { key: '9231e2ea874adc43095662f6c6664905737f3c9d', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '4b3163332aca9aa4c9804405174e16c3854ddd61', name: "content" }), this.description && h("p", { key: '997cf420e09ffd589dde31e5c47c499cbc3b110c', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'bf9fac18c98e3a4f2ad27e7d04feb4b54e2fa958', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '48a2885c34727d6eda0636e27ee746ba90d1087d' }, h("q2-action-group", { key: 'a48b5075f4372219f1179fae43272df8ed0aa96a', "full-width": true }, h("slot", { key: 'ccfa5cbef0a4078dd3c0beb13bf78e8b1fcd74e3', name: "action" }))))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-month-picker.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-CGkHOjh1.js';
-import { l as loc, o as overrideFocus } from './index-xCuy-dFb.js';
+import { l as loc, o as overrideFocus } from './index-LNnzUeDP.js';
 const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";

package/dist/esm/q2-optgroup.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-CGkHOjh1.js';
-import { c as createGuid, l as loc } from './index-xCuy-dFb.js';
+import { c as createGuid, l as loc } from './index-LNnzUeDP.js';
 const q2OptgroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
@@ -52,7 +52,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f054127b0e534647d3cac4efb62c03477db3975f', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '251f2586708e5d867a623ea6dcf29c0c57169402', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '0127f0445cc0c894875b44529a7d87b31561c859', class: "q2-optgroup-options" }, h("slot", { key: '3f3f9af79017d95cce0f60136ed651654b6bf7b3' }))));
+        return (h("div", { key: 'fa5f79f649208bcc9402ea9c1f38b8d1f560bb8c', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'b8bd998f0ef642933dfa306f1b5d7fa4720aa3e9', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '576288198e4ab810fbb155771250d549e897113d', class: "q2-optgroup-options" }, h("slot", { key: 'aff51cc1110ea0349a6640233751a8bbe75c6c2f' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {