npm - q2-tecton-elements - Versions diffs - 1.65.0 → 1.66.0 - Mend

q2-tecton-elements 1.65.0 → 1.66.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 (680) hide show

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\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 Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasValidParent } from '@/utils/component';\nimport { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Carousel Pane\n * @category Display\n * @summary Use as a single slide within a Carousel.\n /\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n // #region Own Properties\n\n disabledElements?: HTMLElement[] = [];\n mutationObserver?: MutationObserver;\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 Used by `q2-carousel` to determine the pane's index.\n * @private\n /\n @Prop({ reflect: false })\n index: number;\n\n /\n Used by `q2-carousel` to indicate which pane is currently active.\n * @private\n /\n @Prop({ reflect: true })\n isActivePane: boolean;\n\n /\n Text used only as an `aria-label` for accessibility purposes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Used by `q2-carousel` to indicate how many panes are in the carousel.\n * @private\n /\n @Prop({ reflect: false })\n siblingCount: number;\n\n /\n Used by `q2-carousel` to indicate the pane should be frameless.\n * @private\n /\n @Prop({ reflect: true })\n slotFrameless: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pane is clicked.\n * @deprecated Use 'tctClickCarouselPane' instead\n /\n @Event()\n clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n /\n Emitted when the pane is clicked.\n */\n @Event()\n tctClickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n this.removePointerMoveListeners();\n }\n\n componentWillLoad() {\n hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');\n }\n\n componentDidLoad(): void {\n this.determineDisabledContent();\n this.addPointerMoveListeners();\n\n if (typeof MutationObserver !== 'undefined') {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActivePane')\n determineDisabledContent() {\n const { isActivePane } = this;\n const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n 'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n );\n\n focusableElements.forEach(element => {\n const hasValidTabIndex =\n element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n if (hasValidTabIndex) {\n element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n }\n\n if (isActivePane) {\n if (element.hasAttribute('data-q2-tabindex')) {\n element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n element.removeAttribute('data-q2-tabindex');\n } else {\n element.removeAttribute('tabindex');\n }\n } else {\n element.tabIndex = -1;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get currentPaneIndex() {\n return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n }\n\n addPointerMoveListeners() {\n const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n this.disabledElements.forEach(element => {\n element.addEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n generatePaneClass = (currentIndex: number) => {\n return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n };\n\n onMutationObserved = () => {\n this.removePointerMoveListeners();\n this.addPointerMoveListeners();\n };\n\n paneClicked = event => {\n if (this.isActivePane) return;\n event.preventDefault();\n mirrorEmit(this, ['clickCarouselPane', 'tctClickCarouselPane'], {\n paneIndex: this.index,\n pane: this.hostElement,\n });\n };\n\n pointerMoveHandler = (event: PointerEvent) => {\n event.stopPropagation();\n };\n\n removePointerMoveListeners() {\n this.disabledElements.forEach(element => {\n element.removeEventListener('pointermove', this.pointerMoveHandler);\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label } = this;\n\n return (\n <Host\n class={this.generatePaneClass(this.currentPaneIndex)}\n tabIndex={this.isActivePane ? 0 : -1}\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-hidden={this.isActivePane ? undefined : 'true'}\n aria-label={\n label\n ? loc(label)\n : loc('tecton.element.carousel.itemDescription', [\n (this.currentPaneIndex + 1).toString(),\n (this.siblingCount \|\| 0).toString(),\n ])\n }\n onClick={this.paneClicked}\n >\n <article class=\"q2-carousel-pane-main-content\">\n <slot></slot>\n </article>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-chart-area/q2-chart-area.js CHANGED Viewed

@@ -250,7 +250,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '5691d1f1c6c90bdfa10162a9f62101902bc2e65e', class: "container" }, h("div", { key: '7d71781c2009afda3b98f9a3cef2ac514c6256bd', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: 'cd60bed2147fd67a0781b37271205c3dec484328', class: "container" }, h("div", { key: 'd0832b1fccf4e94e395d456ff6f314ebb5560cd1', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-chart-bar/q2-chart-bar.js CHANGED Viewed

@@ -187,7 +187,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e92407663de1220e1975abfbac4a75846bf269b0', class: "container" }, h("div", { key: '95aad0ffac110f310b25f2b2f2699b3d6c636cf0', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '5e51e9cda9a970424f0d21219784b85194b8e844', class: "container" }, h("div", { key: '65340b646221f4d5408387799aab8af54a992a1e', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js CHANGED Viewed

@@ -516,7 +516,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '23ced82c24f33187009d1e2c8cf72676c98d79d7', onChange: this.onClickElsewhere }, h("figure", { key: '270cb33e34d1f3da9c3b14b52ad54f67ba4a8879' }, h("div", { key: 'e6191127f00b7de3b25caf39e4a2459640a578e2', class: "container" }, h("div", { key: '8e7c8f9ebbfde47298ae9b9abc3e3f79581cdba9', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '281bee3c990c8ce6dcb84761b24dbf89b5ec6b77' }, h("q2-legend", { key: 'b408731413791360047dbbee9533fb5a0c9db326', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: '3b86b1e2448ab6bf6659f80e0ee13d599ec6d9fd', onChange: this.onClickElsewhere }, h("figure", { key: '60b2a3aaf3b7330f9df2d3203f00c5c5a8e5a72b' }, h("div", { key: '480f4dcc8334e0d2be1a87eef0116c5e1c0a6e8e', class: "container" }, h("div", { key: '03d5e3362a964c848da2a8559f4a5ecb4849cc98', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'd6c1827fdae89c0f89446072704f02c0e9b7ac0d' }, h("q2-legend", { key: 'aa35957a67548b7d16b36f424c7cbd6228d12daa', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox/q2-checkbox.css CHANGED Viewed

@@ -92,7 +92,8 @@ button {
   --comp-checkbox-gap: var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));
   --comp-checkbox-outer-stroke-color: var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
   --comp-checkbox-outer-fill-color: var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));
-  --comp-checkbox-checked-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));
+  --comp-checkbox-checked-fill-color: var(--tct-checkbox-checked-outer-fill-color, var(--t-primary, #040404));
+  --comp-checkbox-checked-color: var(--tct-checkbox-checkmark-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));
   --comp-control-width: var(--comp-checkbox-size);
   --comp-checkbox-error-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
   --comp-checkbox-bold-fallback-stroke-width: var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);
@@ -105,8 +106,6 @@ button {
   --comp-checkbox-description-stroke-width: var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
   --comp-checkbox-description-focused-stroke-width: var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
   --comp-checkbox-description-hover-stroke-width: var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
-  --comp-checkbox-toggle-circle-fill: var(--comp-checkbox-toggle-color);
-  --comp-checkbox-toggle-circle-fill-active: var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-circle-fill)));
   display: grid;
   grid-template-areas: "svg label" "svg description";
   align-items: center;
@@ -132,7 +131,6 @@ button {
 .label-control {
   align-items: center;
   display: flex;
-  cursor: pointer;
 }
 .label-text {
@@ -170,11 +168,44 @@ button {
   -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);
   text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);
 }
+:host(:active) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);
+}
+:host([checked]:not([checked=false]):active) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);
+}
+:host([has-error]:not([has-error=false]):hover) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);
+}
+:host([has-error]:not([has-error=false]):focus-within) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);
+}
+:host([has-error]:not([has-error=false]):active) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);
+}
+:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);
+}
+:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);
+}
+:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text {
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);
+}
 .label-text label {
   line-height: var(--tct-checkbox-label-line-height, 24px);
 }
 .label-text label .label-content {
   display: inline;
+  font-size: var(--tct-checkbox-label-font-size, inherit);
 }
 .description-text {
@@ -187,13 +218,11 @@ button {
 label {
   color: var(--tct-checkbox-label-color);
+  cursor: pointer;
   hyphens: var(--tct-checkbox-label-hyphens, auto);
   word-break: var(--tct-checkbox-label-word-break, break-word);
   word-wrap: var(--tct-checkbox-label-word-wrap, break-word);
 }
-:host(:not([type=toggle])) label {
-  cursor: pointer;
-}
 .checkbox-icon {
   width: var(--comp-checkbox-size);
@@ -209,10 +238,10 @@ label {
   transition: fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon {
-  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
+  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
 }
 :host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect {
-  fill: var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
+  fill: var(--comp-checkbox-checked-fill-color);
 }
 :host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon {
   stroke: var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));
@@ -221,6 +250,15 @@ label {
 :host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect {
   fill: var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));
 }
+:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect {
+  fill: var(--tct-checkbox-error-checked-outer-fill-color);
+}
+:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon {
+  stroke: var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))));
+}
+:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect {
+  fill: var(--comp-checkbox-checked-fill-color);
+}
 :host(:hover:not([type=favorite])) .checkbox-icon {
   stroke: var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
   box-shadow: var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow));
@@ -237,7 +275,7 @@ label {
 }
 :host(:focus-within:not([type=favorite])) .checkbox-icon {
   --comp-checkbox-focused-box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
-  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));
+  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
   fill: var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));
   box-shadow: var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)));
 }
@@ -287,7 +325,22 @@ label {
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill {
+  stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);
+  stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);
+}
+.checked-fill {
+  stroke-dasharray: 16;
+  stroke-dashoffset: 16;
+  animation: draw-checkmark 350ms ease-out forwards;
+}
+@keyframes draw-checkmark {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
 .indeterminate-fill {
   stroke-width: var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5));
 }
@@ -307,7 +360,6 @@ label {
 }
 .toggle-indicator {
-  fill: var(--comp-checkbox-toggle-circle-fill);
   transition: left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);
   height: 16px;
   width: 16px;
@@ -353,11 +405,26 @@ label {
 :host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-circle {
   fill: var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)));
 }
-:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
-  fill: var(--comp-checkbox-toggle-track-fill-active);
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
+  color: var(--tct-checkbox-label-hover-color, inherit);
+}
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
+  color: var(--tct-checkbox-description-hover-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
 }
 :host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
-  fill: var(--comp-checkbox-toggle-circle-fill-active);
+  fill: var(--comp-checkbox-toggle-track-fill-active);
+}
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
+  color: var(--tct-checkbox-label-active-color, inherit);
+}
+:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
+  color: var(--tct-checkbox-description-active-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
 }
 :host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])) .toggle-track {
   box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);
@@ -375,12 +442,30 @@ label {
 :host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-circle {
   fill: var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color));
 }
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
+  color: var(--tct-checkbox-label-hover-color, inherit);
+}
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
+  color: var(--tct-checkbox-description-hover-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
+}
 :host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
   fill: var(--comp-checkbox-toggle-track-fill-error-active);
 }
 :host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
   fill: var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color));
 }
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
+  color: var(--tct-checkbox-error-label-active-color, inherit);
+}
+:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
+  color: var(--tct-checkbox-error-description-active-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);
+}
 :host([checked]:not([checked=false])) .toggle-indicator {
   left: 18px;
@@ -402,6 +487,16 @@ label {
   height: 18px;
   width: 18px;
 }
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
+  color: var(--tct-checkbox-checked-label-hover-color, inherit);
+}
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
+  color: var(--tct-checkbox-checked-description-hover-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);
+}
 :host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
   fill: var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af));
 }
@@ -409,6 +504,14 @@ label {
   height: 18px;
   width: 18px;
 }
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
+  color: var(--tct-checkbox-checked-label-active-color, inherit);
+}
+:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
+  color: var(--tct-checkbox-checked-description-active-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);
+}
 :host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track {
   fill: var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color));
 }
@@ -416,9 +519,27 @@ label {
 :host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-track {
   fill: var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color));
 }
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
+  color: var(--tct-checkbox-checked-error-label-hover-color, inherit);
+}
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
+  color: var(--tct-checkbox-checked-error-description-hover-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);
+}
 :host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
   fill: var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color));
 }
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
+  color: var(--tct-checkbox-checked-error-label-active-color, inherit);
+}
+:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
+  color: var(--tct-checkbox-checked-error-description-active-color, inherit);
+  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);
+  text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);
+}
 :host(:is([disabled]:not([disabled=false]), [group-disabled]:not([group-disabled=false]))) {
   cursor: not-allowed;

package/dist/collection/components/q2-checkbox/q2-checkbox.js CHANGED Viewed

@@ -1,11 +1,6 @@
 import { h } from "@stencil/core";
 import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
-/**
- * @name Checkbox
- * @category Forms
- * @summary Use for binary yes/no choices or toggling settings on/off.
- */
 export class Q2Checkbox {
     constructor() {
         // #region Own Properties
@@ -83,7 +78,7 @@ export class Q2Checkbox {
         if (this.indeterminate) {
             return (h("line", { class: "checkbox-fill indeterminate-fill", x1: "4", y1: "10", x2: "16", y2: "10" }));
         }
-        return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" }));
+        return (h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6", key: `checkmark-${this.checked}` }));
     }
     renderToggleSVG() {
         return (h("div", { class: "toggle-svg-container" }, h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 38 24", class: "toggle-track", "test-id": "toggleTrack" }, h("rect", { width: "38", height: "24", rx: "12" })), h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 18 18", class: "toggle-indicator", "test-id": "toggleIndicator" }, h("defs", null, h("mask", { id: "xMask", maskUnits: "userSpaceOnUse" }, h("rect", { width: "18", height: "18", fill: "white" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "6.5", x2: "11.5", y2: "11.5", stroke: "black", "stroke-width": "2" }), h("line", { class: "toggle-icon", x1: "6.5", y1: "11.5", x2: "11.5", y2: "6.5", stroke: "black", "stroke-width": "2" })), h("mask", { id: "checkMask" }, h("rect", { width: "18", height: "18", fill: "white" }), h("polyline", { class: "toggle-icon", points: "6,8.5 8.5,11 12.5,6.5", fill: "none" }))), h("circle", { class: "toggle-circle", cx: "9", cy: "9", r: "9", mask: "url(#xMask)" }))));
@@ -92,8 +87,7 @@ export class Q2Checkbox {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;
-        return (h("div", { key: 'fb358c5f7bdac1ad677152ea8360b5db21f6cbf2', class: "container" }, h("input", { key: '4c46b9b869271614065d710cfa26e0be98346c57', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '499549f30bd0be2ba32e77e25fe8fef892806098', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": loc(this.label) }, this.renderCheckboxSVG()), h("div", { key: 'f81a8a7cdd78f6c6446c3416eaa921934ce58400', class: textLabelClasses.join(' ') }, h("label", { key: '538c30d0515f41e6b30f9fbd3d908130138b53b4', "test-id": "checkboxLabel", htmlFor: labelId, "aria-hidden": "true" }, h("div", { key: 'afc455d37e1aad644091461f89098c4bb3c82c9f', class: "label-content", id: labelId }, loc(this.label), h("slot", { key: 'b9c2a49b0111a4a7d235ea27fed4962a4bffac7f' })))), this.description && (h("div", { key: '65f3cddc6a3a03b56de355056a802069fc79f561', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: '04ba9035e03440f96bb35a8eda9bb57d46c07c62', class: "container" }, h("input", { key: 'a5c5db3372642e840e43f6b267cea089125773ae', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '4f6495d8d611d18b532b823b720b710a5982759e', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": loc(this.label) }, this.renderCheckboxSVG()), h("div", { key: '32b56050a1996f056e46f43af0b2cbfb4a0f4cde', class: textLabelClasses.join(' ') }, h("label", { key: 'c0cebbc6401cb0d1dd0942ce4be82e5123c0cb67', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, h("div", { key: '9eee221501a92d08d25d32fa17ecc42271600eba', class: "label-content" }, loc(this.label), h("slot", { key: '52702ce552aaf01f117014288935f9d4e07a627b' })))), this.description && (h("div", { key: 'fdd50b72e7e48566ef034f288773fe7bc5cc0790', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox/q2-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Checkbox\n * @category Forms\n * @summary Use for binary yes/no choices or toggling settings on/off.\n /\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n aria-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={labelId}\n aria-hidden=\"true\"\n >\n <div\n class=\"label-content\"\n id={labelId}\n >\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-checkbox.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox/q2-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determine which side of the label the checkbox will render on. /\n @Prop({ reflect: true })\n alignment: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* The state of the checkbox. This modifies the visual appearance of the element. /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n Populates a description that is displayed beneath the label.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the checkbox and prevents interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true })\n groupDisabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the field's `<label>` element from view.\n \n @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n \n When `true`, the \"indeterminate\" selection style is applied.\n * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n /\n @Prop({ reflect: true })\n indeterminate: boolean;\n\n /\n The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n * Yielded content will be adjacent to this text.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* A static string used to establish a symbolic relationship between checkboxes. /\n @Prop({ reflect: true })\n name: string;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* The field is not interactive, but remains focusable. /\n @Prop({ reflect: true })\n slotReadonly: boolean;\n\n /* The visual style of the checkbox. This does not need to be defined for a standard checkbox. /\n @Prop({ reflect: true })\n type: 'favorite' \| 'toggle';\n\n /* A static reference value for the checkbox. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox is toggled.\n * @deprecated Use 'tctChange' instead\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; checked: boolean }>;\n\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n if (\n this.readonly \|\|\n this.disabled \|\|\n this.hostElement.onchange \|\|\n event.defaultPrevented \|\|\n event.target !== this.hostElement \|\|\n !event.detail\n ) {\n return;\n }\n this.checked = event.detail.checked;\n }\n\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly \|\| this.slotReadonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n value,\n checked,\n });\n this.inputElement.focus();\n };\n\n // #endregion\n // #region Render Methods\n\n renderCheckboxSVG() {\n if (this.type === 'favorite') {\n return (\n <q2-icon\n type=\"star\"\n class=\"checkbox-icon\"\n />\n );\n }\n\n if (this.type === 'toggle') {\n return this.renderToggleSVG();\n }\n\n return (\n <svg\n aria-hidden=\"true\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n class=\"checkbox-icon\"\n focusable=\"false\"\n >\n <rect\n x=\"1\"\n y=\"1\"\n width=\"18\"\n height=\"18\"\n rx=\"3\"\n />\n {(this.checked \|\| this.indeterminate) && this.renderCheckBoxSVGFill()}\n </svg>\n );\n }\n\n renderCheckBoxSVGFill() {\n if (this.indeterminate) {\n return (\n <line\n class=\"checkbox-fill indeterminate-fill\"\n x1=\"4\"\n y1=\"10\"\n x2=\"16\"\n y2=\"10\"\n />\n );\n }\n return (\n <polyline\n class=\"checkbox-fill checked-fill\"\n points=\"5 11 8.5 14.5 15 6\"\n key={`checkmark-${this.checked}`}\n />\n );\n }\n\n renderToggleSVG() {\n return (\n <div class=\"toggle-svg-container\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 38 24\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"38\"\n height=\"24\"\n rx=\"12\"\n ></rect>\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 18 18\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <defs>\n {/ Mask for the X icon /}\n <mask\n id=\"xMask\"\n maskUnits=\"userSpaceOnUse\"\n >\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n ></rect>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"6.5\"\n x2=\"11.5\"\n y2=\"11.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n <line\n class=\"toggle-icon\"\n x1=\"6.5\"\n y1=\"11.5\"\n x2=\"11.5\"\n y2=\"6.5\"\n stroke=\"black\"\n stroke-width=\"2\"\n ></line>\n </mask>\n {/ Mask for the checkmark icon */}\n <mask id=\"checkMask\">\n <rect\n width=\"18\"\n height=\"18\"\n fill=\"white\"\n />\n <polyline\n class=\"toggle-icon\"\n points=\"6,8.5 8.5,11 12.5,6.5\"\n fill=\"none\"\n />\n </mask>\n </defs>\n <circle\n class=\"toggle-circle\"\n cx=\"9\"\n cy=\"9\"\n r=\"9\"\n mask=\"url(#xMask)\"\n ></circle>\n </svg>\n </div>\n );\n }\n\n render() {\n const textLabelClasses = ['label-text'];\n if (this.hideLabel) textLabelClasses.push('sr');\n return (\n <div class=\"container\">\n <input\n ref={el => (this.inputElement = el)}\n aria-describedby={this.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n aria-label={loc(this.label)}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n aria-hidden=\"true\"\n >\n <div class=\"label-content\">\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { h, Fragment, } from "@stencil/core";
 import { createGuid, renderLabel } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
+import { hasValidChildren } from "../../utils/component";
 /**
  * @name Checkbox Group
  * @category Forms
@@ -37,6 +38,9 @@ export class Q2CheckboxGroup {
     }
     componentWillLoad() {
         this.updateReadonly();
+        if (!hasValidChildren(this.hostElement, 'q2-checkbox')) {
+            console.warn('q2-checkbox-group allows other elements as children but only expects and interacts with q2-checkbox', this);
+        }
     }
     componentDidLoad() {
         const observer = new MutationObserver(this.onMutationObserved);
@@ -116,7 +120,7 @@ export class Q2CheckboxGroup {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (h(Fragment, { key: '44505fe44e36b7d67ba883df746642af301e93c9' }, showLabelRow && (h("div", { key: '80e0ee705676e8eb8d3822c84541ab68c99c9d46', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '3d06022f8d8a19f521ec319596ee7d91549e5f1b', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: '77aaad93ca90f7daa3c52696e044ff2ce68710ab', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '92c24dd81211a1f6934410c255420c137389d010', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: 'ade4a48455c9529b445c10123b9367bdda7487bf', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: 'eaff44b5a38dc022c372e375ec153d42b4a52c7f' }, showLabelRow && (h("div", { key: '8252c6b3958656e3891709de3c54eb6a74247bf0', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '7a9e381063cfc689f0828dfb926434a9c042121a', class: "group-legend" }, renderLabel(this)), this.hasError && (h("q2-icon", { key: 'c6e3ffeab88703d7a39216400e9c56021e918dc6', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '671bef4db48e6181a3d1ac542b3c50495b6d1d70', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && h("legend", { key: '043796604c9300ba8c04d6d53c7a554ba87dc159', class: "sr-only" }, renderLabel(this)), this.inputDom())));
     }
     static get is() { return "q2-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Checkbox Group\n * @category Forms\n * @summary Use for selecting multiple options from a set of checkboxes.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all checkboxes in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The label that displays above all the checkboxes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the component is marked as `optional`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all the checkboxes are marked as `readonly`. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /\n Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n \n Example:\n * @snippet\n * element.value = {\n * 'checkbox-value-1': true,\n * 'checkbox-value-2': false,\n * 'checkbox-value-3': true,\n * };\n \n // Also accepts partial values\n * element.value = {\n * 'checkbox-value-2': false,\n * }\n /\n @Prop({ mutable: true })\n value: object;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox selection changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the checkbox selection changes.\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n componentWillLoad() {\n this.updateReadonly();\n }\n\n componentDidLoad() {\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 // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledObserver() {\n this.updateDisabled();\n }\n\n @Watch('readonly')\n readonlyObserver() {\n this.updateReadonly();\n }\n\n @Watch('value')\n valueObserver() {\n this.updateValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get inputId() {\n return this._id;\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n inputDom() {\n return (\n <div class=\"slot-container\">\n <slot />\n </div>\n );\n }\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n mirrorEmit(this, ['change', 'tctChange'], groupValue);\n }, 0);\n };\n\n onMutationObserved = () => {\n this.updateValue();\n this.updateDisabled();\n this.updateReadonly();\n };\n\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n updateReadonly() {\n const slotReadonly = this.readonly;\n this.checkboxElements.forEach(checkbox => {\n checkbox.slotReadonly = slotReadonly;\n });\n }\n\n updateValue() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| this.hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {this.hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerCheckboxChange}\n aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-checkbox-group.js","sourceRoot":"","sources":["../../../../src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { hasValidChildren } from '@/utils/component';\n\n/*\n @name Checkbox Group\n * @category Forms\n * @summary Use for selecting multiple options from a set of checkboxes.\n * @slot label - An optional slot to display a custom label.\n /\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Determines if all checkboxes in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n The label that displays above all the checkboxes.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the component is marked as `optional`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all the checkboxes are marked as `readonly`. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /\n Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n \n Example:\n * @snippet\n * element.value = {\n * 'checkbox-value-1': true,\n * 'checkbox-value-2': false,\n * 'checkbox-value-3': true,\n * };\n \n // Also accepts partial values\n * element.value = {\n * 'checkbox-value-2': false,\n * }\n /\n @Prop({ mutable: true })\n value: object;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the checkbox selection changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the checkbox selection changes.\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n componentWillLoad() {\n this.updateReadonly();\n if (!hasValidChildren(this.hostElement, 'q2-checkbox')) {\n console.warn(\n 'q2-checkbox-group allows other elements as children but only expects and interacts with q2-checkbox',\n this\n );\n }\n }\n\n componentDidLoad() {\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 // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail;\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(values: string \| string[]) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n this.checkboxElements.forEach(check => {\n if (valuesSet.has(check.value)) check.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledObserver() {\n this.updateDisabled();\n }\n\n @Watch('readonly')\n readonlyObserver() {\n this.updateReadonly();\n }\n\n @Watch('value')\n valueObserver() {\n this.updateValue();\n }\n\n // #endregion\n // #region Local Methods\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get inputId() {\n return this._id;\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n inputDom() {\n return (\n <div class=\"slot-container\">\n <slot />\n </div>\n );\n }\n\n onInnerCheckboxChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n const groupValue = {};\n setTimeout(() => {\n this.checkboxElements.forEach(check => {\n groupValue[check.value] = !!check.checked;\n });\n mirrorEmit(this, ['change', 'tctChange'], groupValue);\n }, 0);\n };\n\n onMutationObserved = () => {\n this.updateValue();\n this.updateDisabled();\n this.updateReadonly();\n };\n\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n updateReadonly() {\n const slotReadonly = this.readonly;\n this.checkboxElements.forEach(checkbox => {\n checkbox.slotReadonly = slotReadonly;\n });\n }\n\n updateValue() {\n if (this.readonly) return;\n this.checkboxElements.forEach(check => {\n if (this.protectedValue.hasOwnProperty(check.value)) {\n check.checked = this.value[check.value];\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| this.hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {this.hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerCheckboxChange}\n aria-invalid={this.hasError ? `${this.hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-context/q2-context.js CHANGED Viewed

@@ -129,7 +129,7 @@ export class Q2Context {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '13e1e5090a84f557773864c65ae8a7deecde8d75', class: "context-wrapper" }, h("q2-item", { key: 'f2af132511fd69fa3c27fb1566eacae96714e800', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '6222b51dd13349e49f277eb28e84916bae682a6c', name: "decorator", slot: "bullet" })), h("div", { key: '10fb8c98c0f2923b0632ae93decbc7b80048013d', class: "context-body", slot: "body" }, h("slot", { key: '50cd5269e8324e09d0e6dffdec0614491e56cfbd', name: "header" }), h("slot", { key: '376ccc9160a12595c7410f1a89281d546bf8e74a', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: 'c41bcf91d897cc276669e9a6493ee2ebed269fb0', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '1219ad5f04c69bbd1224f158c2288774c2beffa8', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: '02de55a2372257c97de651d749a269c3d1df1bca', class: "action-group", orientation: "horizontal" }, h("slot", { key: 'c4032a1f744d4de6f444bfb9aee39ec460771214', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: '6c027eee2e199b548aa5776a0d619fbae76e3718', name: "footer" })));
+        return (h("div", { key: 'dcb214bdc4218eec7b88966744a27db99ce12ed4', class: "context-wrapper" }, h("q2-item", { key: 'e946e126d9d0e6680d8ace8d708738cbd6f96514', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '0b6b468dc64c7652800245881cfab110a126777f', name: "decorator", slot: "decorator" })), h("div", { key: '1ba33f0bca6ce07a6beb0eaaa2133b7dd37b89d4', class: "context-body", slot: "body" }, h("slot", { key: '611090b36432885c918f3a267a85e54e60526aea', name: "header" }), h("slot", { key: 'a98908f8ebce24c9faff28c5ac4bb8f2e00efb94', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '0fca02b51d6ccdd3129bd6800a77af4f137929be', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: 'b794e4969420268c9017775b608a3471c777bd02', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: '3bc5c17a1abfa854bb8320f36106ae13fcf5af52', class: "action-group", orientation: "horizontal" }, h("slot", { key: 'f81004eb46ffec16a24fb35880c53e0c88354c0a', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: '0f3440ef96c901203845b07e9774842c1341795e', name: "footer" })));
     }
     static get is() { return "q2-context"; }
     static get encapsulation() { return "shadow"; }