npm - q2-tecton-elements - Versions diffs - 1.38.2 → 1.39.0 - Mend

q2-tecton-elements 1.38.2 → 1.39.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 (399) hide show

package/dist/cjs/q2-checkbox-group.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-09c712ea.js');
+const index$1 = require('./index-9113a9da.js');
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";

package/dist/cjs/q2-checkbox-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-checkbox-group.entry.cjs.js","mappings":"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","names":["createGuid","h","loc"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\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 this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\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 @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\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 ///// HOST ELEMENT EVENTS ///////\n\n @Event() change: EventEmitter;\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 render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label \|\| this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"version":3}
1	+ {"file":"q2-checkbox-group.entry.cjs.js","mappings":"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","names":["createGuid","h","loc"],"sources":["./src/components/q2-checkbox-group/styles.scss?tag=q2-checkbox-group&encapsulation=shadow","./src/components/q2-checkbox-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n padding: var(--tct-input-error-padding, 0);\n margin: 0;\n border: 0;\n}\n\nfieldset.has-error {\n border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));\n border-width: 1px;\n border-style: solid;\n border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n top: 8px;\n right: 8px;\n position: absolute;\n width: 40%;\n text-align: right;\n background: linear-gradient(\n to right,\n var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n top: 28px;\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n color: var(\n --tct-input-label-optional-font-color,\n var(\n --tct-a11y-color,\n var(\n --t-a11y-gray-color,\n var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n )\n )\n );\n font-size: var(--tct-input-label-optional-font-size, 12px);\n font-weight: var(--tct-input-label-optional-font-weight, 400);\n}\n\n.flexed {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n}\n.flexed.left {\n justify-content: left;\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox-group',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2CheckboxGroup implements ComponentInterface {\n @Prop({ reflect: true }) label: string;\n @Prop({ mutable: true }) value: object;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readonly: boolean = false;\n @Prop({ reflect: true }) optional: boolean = false;\n @Prop({ reflect: true }) hasError: boolean = false;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n get checkboxElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n }\n\n get protectedValue(): object {\n return this.value \|\| {};\n }\n\n onMutationObserved = () => {\n this.valueUpdated();\n this.updateDisabled();\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 this.change.emit(groupValue);\n }, 0);\n };\n\n ///// LIFECYCLE HOOK ///////\n\n componentWillLoad() {\n this.updateReadonly(this.readonly);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n }\n\n @Watch('value')\n valueUpdated() {\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 @Watch('disabled')\n updateDisabled() {\n const groupDisabled = this.disabled;\n this.checkboxElements.forEach(checkbox => {\n checkbox.groupDisabled = groupDisabled;\n });\n }\n\n @Watch('readonly')\n updateReadonly(newReadonly: boolean) {\n this.checkboxElements.forEach(checkbox => {\n checkbox.readonly = newReadonly;\n });\n }\n\n /// Methods ///\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 ///// HOST ELEMENT EVENTS ///////\n\n /\n Emitted when a checkbox is toggled.\n \n The event detail is an object with the value of each checkbox as the key and the checked state as the value.\n \n @legacyEvent\n */\n @Event() change: EventEmitter<Record<string, boolean>>;\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 render() {\n return (\n <div>\n {this.label \|\| this.optional ? (\n <div class=\"group-legend\">\n {this.label && loc(this.label)}\n {this.optional ? <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span> : ''}\n </div>\n ) : (\n ''\n )}\n <fieldset\n class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n onChange={this.onInnerCheckboxChange}\n aria-invalid={`${this.hasError}`}\n >\n {this.label \|\| this.optional ? (\n <legend class=\"sr-only\">\n {this.label && loc(this.label)}\n {this.optional ? (\n <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>\n ) : (\n ''\n )}\n </legend>\n ) : (\n ''\n )}\n {this.hasError ? (\n <div class={`error-icon-container ${this.label \|\| this.optional ? '' : 'no-label'}`}>\n <q2-icon\n class=\"h(4) w(4) mrg-b(2)\"\n type=\"error\"\n ></q2-icon>\n </div>\n ) : (\n ''\n )}\n {this.inputDom()}\n </fieldset>\n </div>\n );\n }\n\n inputDom() {\n return <slot />;\n }\n}\n"],"version":3}

package/dist/cjs/q2-checkbox.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-09c712ea.js');
+const index$1 = require('./index-9113a9da.js');
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding)}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--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-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:\"svg\";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}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([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]: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)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}: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)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle,:host(:hover) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle,:host(:not([checked]):hover) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)));stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";

package/dist/cjs/q2-checkbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-checkbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,msaAAmsa;;MCQxsa,UAAU;;;;IAwBnB,QAAG,GAAW,YAAYA,kBAAU,EAAE,EAAE,CAAC;;IAsCzC,iBAAY,GAAG,CAAC,KAAY;MACxB,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MAEvB,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;MACxD,IAAI,gBAAgB;QAAE,OAAO;MAC7B,IAAI,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC;QAAE,OAAO;MACxD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;MAExC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACb,KAAK;QACL,OAAO;OACV,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;KAC7B,CAAC;mBA3EyD,KAAK;;oBAEnB,KAAK;;;;;;;;;;;;;;EA0BlD,iBAAiB;IACbC,uBAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAED,gBAAgB;IACZC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;GAC5D;;EAID,oBAAoB,CAAC,KAAkB;;IAEnC,UAAU,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;GACtD;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9D;;EAKD,iBAAiB;IACbF,uBAAe,CAAC,IAAI,CAAC,CAAC;GACzB;EAsBD,iBAAiB,CAAC,KAAuD;IACrE,IACI,IAAI,CAAC,QAAQ;MACb,IAAI,CAAC,QAAQ;MACb,IAAI,CAAC,WAAW,CAAC,QAAQ;MACzB,KAAK,CAAC,gBAAgB;MACtB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW;MACjC,CAAC,KAAK,CAAC,MAAM,EACf;MACE,OAAO;KACV;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;GACvC;;EAGD,MAAM;IACF,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,SAAS;MAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,QACIG,iBAAK,KAAK,EAAC,WAAW,IAClBA,mBACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,sBACjB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,kBAChD,GAAG,IAAI,CAAC,QAAQ,EAAE,EAChC,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EACpD,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EACjD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,aAClB,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,EACFA,mBACI,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,aACb,gBAAgB,IAEvB,IAAI,CAAC,mBAAmB,EAAE,CACvB,EACRA,iBAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,IAClCA,8BACY,eAAe,EACvB,OAAO,EAAE,IAAI,CAAC,GAAG,IAEhBC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAChBD,qBAAQ,CACJ,CACN,EACL,IAAI,CAAC,WAAW,KACbA,iBACI,KAAK,EAAC,kBAAkB,aAChB,qBAAqB,EAC7B,EAAE,EAAC,aAAa,IAEfC,WAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CACpB,CACT,CACC,EACR;GACL;EAED,mBAAmB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MAC1B,QACID,qBACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,GACvB,EACJ;KACL;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MACxB,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACnC;IAED,QACIA,gCACgB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,OAAO,IAEjBA,kBACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,GACR,EACD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,uBAAuB,EAAE,CACrE,EACR;GACL;EAED,uBAAuB;IACnB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,QACIA,kBACI,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,GACT,EACJ;KACL;IACD,QACIA,sBACI,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,GAC7B,EACJ;GACL;EAED,iBAAiB;IACb,QACIA,iBAAK,KAAK,EAAC,YAAY,IACnBA,gCACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,aACZ,aAAa,IAErBA,kBACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,GACP,CACA,EACNA,gCACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,aAChB,iBAAiB,IAEzBA,oBACI,KAAK,EAAC,eAAe,EACrB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACR,EACFA,kBACI,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,GACT,EACFA,kBACI,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,GACT,EACFA,sBACI,KAAK,EAAC,iBAAiB,EACvB,MAAM,EAAC,yBAAyB,GAClC,CACA,CACJ,EACR;GACL;;;;;;;;;;","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"sources":["./src/components/q2-checkbox/styles.scss?tag=q2-checkbox&encapsulation=shadow","./src/components/q2-checkbox/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n )};\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 46px)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: center;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n :host([description]) & {\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]) & {\n font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n }\n :host(:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host(:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host([description]:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:hover) & {\n font-weight: var-list(\n --tct-checkbox-checked-hover-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n :host([description]:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:focus-within) & {\n font-weight: var-list(\n --tct-checkbox-checked-focused-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n label {\n cursor: not-allowed;\n }\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n\n :host([checked]:not([type='favorite'])) & {\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n\n :host([has-error]:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-error-box-shadow);\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-hover-box-shadow);\n }\n :host(:hover[has-error]:not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow\n );\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--comp-checkbox-focused-box-shadow);\n }\n :host(:focus-within[has-error]:not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n\n :host([checked][type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked][type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error][type='favorite'][checked]) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([type='toggle']) & {\n stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n transition: opacity var(--comp-checkbox-tween);\n }\n :host([type='toggle'][checked]) & {\n stroke: var-list(\n var-prefixer(checkbox-toggle-checked-icon-stroke),\n --t-checkbox-text,\n --tct-white,\n --app-white,\n #ffffff\n );\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.toggle-track {\n fill: var-list(\n var-prefixer(checkbox-toggle-track-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n height: 14px;\n width: 46px;\n\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n opacity: 0.5;\n }\n :host([has-error]) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n opacity: 0.5;\n }\n}\n\n.toggle-indicator {\n transition: left var(--comp-checkbox-tween);\n height: 30px;\n width: 30px;\n left: 0;\n border-radius: 50%;\n\n :host([checked]) & {\n left: 21px;\n }\n}\n\n.toggle-circle {\n fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n }\n\n :host(:focus-within) &,\n :host(:hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n stroke-width: 10px;\n stroke-opacity: 0.5;\n }\n\n :host(:not([checked]):focus-within) &,\n :host(:not([checked]):hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n }\n :host([has-error]) &,\n :host([has-error]:focus-within) &,\n :host([has-error]:hover) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n }\n}\n\n:host([checked]) .off,\n:host(:not([checked])) .on {\n opacity: 0;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Checkbox implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) hasError: boolean = false;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) indeterminate: boolean;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true }) type: 'favorite' \| 'toggle';\n @Prop({ reflect: true }) value: string;\n\n /*\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true }) groupDisabled: boolean;\n @Prop({ reflect: true }) alignment: string;\n @Prop({ reflect: true }) description: string;\n\n /* @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\n };\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 /////// View Methods ///////\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}`}\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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-checkbox.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"sources":["./src/components/q2-checkbox/styles.scss?tag=q2-checkbox&encapsulation=shadow","./src/components/q2-checkbox/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n )};\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 46px)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-color: #{var-list(\n var-prefixer(checkbox-check-stroke-color),\n --t-checkbox-fill,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-control-width: var(--comp-checkbox-size);\n --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n\n :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: center;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n :host([description]) & {\n font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]) & {\n font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n }\n :host(:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host(:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n }\n :host([description]:hover) & {\n font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:hover) & {\n font-weight: var-list(\n --tct-checkbox-checked-hover-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n :host([description]:focus-within) & {\n font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n }\n :host([checked]:focus-within) & {\n font-weight: var-list(\n --tct-checkbox-checked-focused-label-font-weight,\n var-prefixer(checkbox-checked-label-font-weight),\n 600\n );\n }\n}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n :host(:hover) & {\n font-weight: var-list(\n --tct-checkbox-hover-description-font-weight,\n var-prefixer(checkbox-description-font-weight),\n 400\n );\n }\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\n hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n word-break: var-list(--tct-checkbox-label-word-break, break-word);\n word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n label {\n cursor: not-allowed;\n }\n}\n\n.checkbox-icon {\n width: var(--comp-checkbox-size);\n height: var(--comp-checkbox-size);\n border-radius: var-list(\n var-prefixer(checkbox-outer-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n stroke: var(--comp-checkbox-outer-stroke-color);\n fill: var(--comp-checkbox-outer-fill-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n flex-shrink: 0;\n\n :host([checked]:not([type='favorite'])) & {\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n }\n\n :host([has-error]:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-error-box-shadow);\n }\n\n :host(:hover:not([type='favorite'])) & {\n stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--tct-checkbox-hover-box-shadow);\n }\n :host(:hover[has-error]:not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-hover-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-hover-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-hover-box-shadow,\n --tct-checkbox-error-box-shadow,\n --tct-checkbox-hover-box-shadow\n );\n }\n\n :host(:focus-within:not([type='favorite'])) & {\n --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n box-shadow: var(--comp-checkbox-focused-box-shadow);\n }\n :host(:focus-within[has-error]:not([type='favorite'])) & {\n stroke: var-list(\n --tct-checkbox-error-focused-outer-stroke-color,\n --tct-checkbox-error-outer-stroke-color,\n --comp-checkbox-error-color\n );\n fill: var-list(\n --tct-checkbox-error-focused-outer-fill-color,\n --tct-checkbox-error-outer-fill-color,\n --comp-checkbox-outer-fill-color\n );\n box-shadow: var-list(\n --tct-checkbox-error-focused-box-shadow,\n --tct-checkbox-error-box-shadow,\n --comp-checkbox-focused-box-shadow\n );\n }\n\n // Favorite\n :host([type='favorite']) & {\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n\n :host(:hover[type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n // Checked favorite\n :host([checked][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-stroke-color,\n --tct-checkbox-favorite-stroke-color,\n --comp-checkbox-favorite-fill-color\n )};\n fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n\n :host([checked][type='favorite']:hover) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-hover-stroke-color,\n --tct-checkbox-favorite-hover-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-fill-primary: #{var-list(\n --tct-checkbox-favorite-checked-fill-color,\n --comp-checkbox-favorite-fill-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([checked][type='favorite']:focus-within) & {\n --tct-icon-stroke-primary: #{var-list(\n --tct-checkbox-favorite-checked-focused-stroke-color,\n --tct-checkbox-favorite-focused-stroke-color,\n --comp-checkbox-favorite-stroke-color\n )};\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error][type='favorite']) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n :host([has-error][type='favorite'][checked]) & {\n --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n }\n}\n\n.checkbox-fill {\n stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n}\n\n.checked-fill {\n stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n stroke-linecap: round;\n stroke-linejoin: round;\n\n :host([type='toggle']) & {\n stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n transition: opacity var(--comp-checkbox-tween);\n }\n :host([type='toggle'][checked]) & {\n stroke: var-list(\n var-prefixer(checkbox-toggle-checked-icon-stroke),\n --t-checkbox-text,\n --tct-white,\n --app-white,\n #ffffff\n );\n }\n}\n\n.indeterminate-fill {\n stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n height: 30px;\n width: var(--comp-checkbox-toggle-width);\n position: relative;\n text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.toggle-track {\n fill: var-list(\n var-prefixer(checkbox-toggle-track-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n height: 14px;\n width: 46px;\n\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n opacity: 0.5;\n }\n :host([has-error]) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n opacity: 0.5;\n }\n}\n\n.toggle-indicator {\n transition: left var(--comp-checkbox-tween);\n height: 30px;\n width: 30px;\n left: 0;\n border-radius: 50%;\n\n :host([checked]) & {\n left: 21px;\n }\n}\n\n.toggle-circle {\n fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n }\n\n :host(:focus-within) &,\n :host(:hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n stroke-width: 10px;\n stroke-opacity: 0.5;\n }\n\n :host(:not([checked]):focus-within) &,\n :host(:not([checked]):hover) & {\n stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n }\n :host([has-error]) &,\n :host([has-error]:focus-within) &,\n :host([has-error]:hover) & {\n fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #c30000);\n }\n}\n\n:host([checked]) .off,\n:host(:not([checked])) .on {\n opacity: 0;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n tag: 'q2-checkbox',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Checkbox implements ComponentInterface {\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) hasError: boolean = false;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop({ reflect: true }) indeterminate: boolean;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true }) type: 'favorite' \| 'toggle';\n @Prop({ reflect: true }) value: string;\n\n /*\n Used by q2-checkbox-group to disable all checkboxes in the group\n * @private\n /\n @Prop({ reflect: true }) groupDisabled: boolean;\n @Prop({ reflect: true }) alignment: string;\n @Prop({ reflect: true }) description: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n _id: string = `checkbox-${createGuid()}`;\n inputElement: HTMLInputElement;\n\n ////////// LIFECYCLE HOOKS ////////\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 //////// Host Element Events ////////\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 ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n ///// Event ////////\n /\n Emitted when the checkbox is toggled.\n * @legacyEvent\n */\n @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n ///// Actions ////////\n onInputClick = (event: Event) => {\n event.stopPropagation();\n event.preventDefault();\n\n const isNotInteractive = this.disabled \|\| this.readonly;\n if (isNotInteractive) return;\n if (!(event.target instanceof HTMLInputElement)) return;\n const { value, checked } = event.target;\n\n this.change.emit({\n value,\n checked,\n });\n this.inputElement.focus();\n };\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 /////// View Methods ///////\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}`}\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 >\n {this.generateCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n >\n {loc(this.label)}\n <slot />\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 generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n </svg>\n );\n }\n\n generateCheckBoxSVGFill() {\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 generateToggleSVG() {\n return (\n <div class=\"toggle-svg\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 46 14\"\n class=\"toggle-track\"\n test-id=\"toggleTrack\"\n >\n <rect\n width=\"36\"\n height=\"14\"\n rx=\"7\"\n x=\"5\"\n />\n </svg>\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 30 30\"\n class=\"toggle-indicator\"\n test-id=\"toggleIndicator\"\n >\n <circle\n class=\"toggle-circle\"\n width=\"20\"\n height=\"20\"\n cx=\"15\"\n cy=\"15\"\n r=\"10\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"18\"\n x2=\"18\"\n y2=\"12\"\n />\n <line\n class=\"off checked-fill\"\n x1=\"12\"\n y1=\"12\"\n x2=\"18\"\n y2=\"18\"\n />\n <polyline\n class=\"on checked-fill\"\n points=\"11,16 14,19 18,12 14,19\"\n />\n </svg>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/q2-data-table.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-09c712ea.js');
+const index$1 = require('./index-9113a9da.js');
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow: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, 3px)));--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}td,th{padding:var(--comp-cell-padding);text-align:start}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 400));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host([bordered]:not([bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 var(--app-scale-1x, 5px)));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
@@ -14,6 +14,7 @@ const Q2DataTable = class {
     this.click = index.createEvent(this, "click", 7);
     this.toggle = index.createEvent(this, "toggle", 7);
     this.sort = index.createEvent(this, "sort", 7);
+    this.selectAllRows = index.createEvent(this, "selectAllRows", 7);
     this.checkSlots = () => {
       var _a, _b, _c, _d;
       this.hasExpandableRows = !!((_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[slot$="-expandable-content"]`)) !== null && _b !== void 0 ? _b : false);
@@ -35,21 +36,6 @@ const Q2DataTable = class {
       });
       this.serializedRows = this.sortRows(this.serializedRows, Object.assign(Object.assign({}, header), { sorted: direction }));
     };
-    this.onSelectAllRows = (event) => {
-      event.stopPropagation();
-      const { checked } = event.detail;
-      const selectedRows = checked
-        ? this.serializedRows.map(row => (Object.assign(Object.assign({}, row), { selected: checked })))
-        : [];
-      const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
-      if (selectEvent.defaultPrevented)
-        return;
-      this.serializedRows = this.serializedRows.map(row => {
-        row.selected = checked;
-        return row;
-      });
-      this.allRowsSelected = checked;
-    };
     this.onSelectRow = (event, row) => {
       event.stopPropagation();
       const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;
@@ -198,8 +184,11 @@ const Q2DataTable = class {
       cells: {},
       selected: false,
       expanded: false,
+      disabled: false,
     };
-    const serializedRows = rows.map(({ id, cells, selected, expanded }) => {
+    // tracks if the select-all checkbox should be visually updated as the `rows` are built
+    let isAllSelected = true;
+    const serializedRows = rows.map(({ id, cells, selected, expanded, disabled }) => {
       const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
         const header = mappedHeaders[cellKey] || {};
         const { align, type = 'text', lineClamp } = header;
@@ -218,17 +207,49 @@ const Q2DataTable = class {
         accum[cellKey] = result;
         return accum;
       }, {});
-      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, cells: serializedCells });
+      if (isAllSelected && !selected)
+        isAllSelected = false;
+      return Object.assign(Object.assign({}, defaultRow), { id, selected: !!selected, expanded: !!expanded, disabled: !!disabled, cells: serializedCells });
     });
     const sortedHeader = serializedHeaders.find(({ sorted }) => sorted);
+    this.allRowsSelected = isAllSelected;
     this.serializedRows = !!sortedHeader ? this.sortRows(serializedRows, sortedHeader) : serializedRows;
     this.checkSlots();
   }
+  selectableHandler() {
+    if (this.selectable === false) {
+      this.selectAllRows.emit({ checked: false });
+    }
+  }
   /// Listeners ///
   onClickListener(event) {
     if (event instanceof PointerEvent)
       event.stopImmediatePropagation();
   }
+  onSelectAllRows(event) {
+    event.stopPropagation();
+    const { checked } = event.detail;
+    const selectedRows = checked
+      ? this.serializedRows.map(row => {
+        if (row.disabled) {
+          return row;
+        }
+        else {
+          return Object.assign(Object.assign({}, row), { selected: checked });
+        }
+      })
+      : [];
+    const selectEvent = this.select.emit({ row: undefined, rows: selectedRows, allSelected: checked });
+    if (selectEvent.defaultPrevented)
+      return;
+    this.serializedRows = this.serializedRows.map(row => {
+      if (row.disabled)
+        return row;
+      row.selected = checked;
+      return row;
+    });
+    this.allRowsSelected = checked;
+  }
   /// DOM ///
   render() {
     const { caption } = this;
@@ -244,7 +265,7 @@ const Q2DataTable = class {
     const { serializedHeaders: headers, selectable, clickable, hideClickable, selectMode, hasExpandableRows, hasDropdowns, } = this;
     if (!headers.length)
       return null;
-    return (index.h("thead", null, index.h("tr", null, selectable && (index.h("th", null, selectMode === 'multiple' && (index.h("q2-checkbox", { label: index$1.loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: this.onSelectAllRows, checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
+    return (index.h("thead", null, index.h("tr", null, selectable && (index.h("th", null, selectMode === 'multiple' && (index.h("q2-checkbox", { label: index$1.loc('tecton.element.dataTable.selectAllRows'), "hide-label": true, onChange: () => this.selectAllRows.emit({ checked: !this.allRowsSelected }), checked: this.allRowsSelected, disabled: this.loading, "test-id": "select-all-rows-control" })))), headers.map(header => {
       const { align, sorted } = header;
       const headerClasses = [];
       if (align)
@@ -291,7 +312,7 @@ const Q2DataTable = class {
       if (row.selected)
         rowClasses.push('selected');
       const rowIsClickable = clickable || rowHasExpandableSlot;
-      return (index.h(index.Fragment, null, index.h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (index.h("td", { class: "select-column", onClick: this.onControlContainerClick }, index.h("q2-checkbox", { label: index$1.loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: isSelectDisabled && row !== selectedRow, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
+      return (index.h(index.Fragment, null, index.h("tr", { id: `row-${row.id}`, class: rowClasses.join(' '), onClick: rowIsClickable && (e => this.onClickTableRow(e, row)), tabIndex: rowIsClickable ? -1 : undefined }, selectable && (index.h("td", { class: "select-column", onClick: this.onControlContainerClick }, index.h("q2-checkbox", { label: index$1.loc('tecton.element.dataTable.selectRow'), "hide-label": true, checked: row.selected, disabled: (isSelectDisabled && row !== selectedRow) || row.disabled, onChange: e => this.onSelectRow(e, row), "test-id": "select-row-control" }))), headers.map(({ key }) => {
         const cell = row.cells[key];
         const lineClamp = cell === null || cell === void 0 ? void 0 : cell.lineClamp;
         const cellAlign = cell === null || cell === void 0 ? void 0 : cell.align;
@@ -342,7 +363,8 @@ const Q2DataTable = class {
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "headers": ["headersHandler"],
-    "rows": ["rowsHandler"]
+    "rows": ["rowsHandler"],
+    "selectable": ["selectableHandler"]
   }; }
 };
 Q2DataTable.style = stylesCss;