npm - q2-tecton-elements - Versions diffs - 1.37.1 → 1.38.1 - Mend

q2-tecton-elements 1.37.1 → 1.38.1

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 (501) hide show

package/dist/components/index6.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index6.js","mappings":"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","names":[],"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\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}\n\n.description-text {\n grid-area: description;\n font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n}\n\nlabel {\n color: var-list(--tct-checkbox-label-color);\n cursor: pointer;\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 --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);\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 color: var(--comp-checkbox-outer-stroke-color);\n stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n fill: var(--comp-checkbox-outer-fill-color);\n flex-shrink: 0;\n\n :host([checked]) & {\n fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n }\n :host(:focus-within) & {\n box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\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 :host([type='favorite']:focus-within) &,\n :host([type='favorite']:hover) & {\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-fill-color);\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(--comp-checkbox-favorite-fill-color);\n fill: var(--comp-checkbox-favorite-fill-color);\n transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);\n }\n :host([checked][type='favorite']:focus-within) &,\n :host([checked][type='favorite']:hover) & {\n --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n --tct-icon-fill-primary: var(--comp-checkbox-favorite-fill-color);\n --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n }\n\n :host([has-error]) & {\n stroke: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n }\n}\n\n.checkbox-fill {\n stroke: var(--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}\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 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 stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\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":"index6.js","mappings":"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","names":[],"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}

package/dist/components/index7.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './index5.js';
 import { d as defineCustomElement$2 } from './index8.js';
 import { d as defineCustomElement$1 } from './index10.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 #33b4ff #06C)}: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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
+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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
 const Q2DropdownItem = /*@__PURE__*/ proxyCustomElement(class Q2DropdownItem extends HTMLElement {
   constructor() {

package/dist/components/index7.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index7.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG~~,+5EAA+~~5E~~;;MCSp6E~~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","names":[],"sources":["./src/components/q2-dropdown-item/styles.scss?tag=q2-dropdown-item&encapsulation=shadow","./src/components/q2-dropdown-item/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid\n var-list(\n var-prefixer(dropdown-item-separator-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n}\n\n.dropdown-item-wrapper {\n display: flex;\n}\n\n.dropdown-item {\n min-height: 44px;\n flex: 1 1 100%;\n padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n text-align: left;\n background: var-list(\n --tct-dropdown-item-background,\n var-prefixer(dropdown-item-bg),\n --tct-white,\n --t-base,\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n transition: background-color\n var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n background: var-list(\n --tct-dropdown-item-hover-background,\n var-prefixer(dropdown-item-selected-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n --t-base,\n #f2f2f2\n );\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n flex: 0 0 44px;\n margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({\n tag: 'q2-dropdown-item',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2DropdownItem implements ComponentInterface {\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) removable: boolean;\n @Prop({ reflect: true }) separator: boolean;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) value: string;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n /////// LIFECYCLE HOOKS //////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n //////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.label \|\| '']);\n }\n\n get dropdownItemBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n }\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent;\n }\n\n get removeBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n }\n\n ///////// Host Element Events //////\n @Listen('focus')\n onHostElementFocus() {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n ///////// Actions /////////\n focusItem() {\n this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'select',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (['ArrowRight', 'Right'].includes(event.key)) {\n this.focusRemoveBtn();\n }\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'remove',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (['ArrowLeft', 'Left'].includes(event.key)) {\n this.focusItem();\n }\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n render() {\n if (!!this.separator) {\n return this.separatorDOM();\n }\n\n return this.itemDOM();\n }\n\n separatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-separator\"\n role=\"separator\"\n test-id=\"dropdownItemSeparator\"\n />\n );\n }\n\n itemDOM(): JSX.IntrinsicElements {\n return (\n <div class=\"dropdown-item-wrapper\">\n <q2-btn\n class=\"dropdown-item\"\n label={this.innerLabel}\n hide-label\n disabled={!!this.disabled}\n role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n <div class=\"dropdown-item-content\">\n <slot />\n </div>\n </q2-btn>\n {!!this.removable ? (\n <q2-btn\n class=\"remove-dropdown-item\"\n label={this.removeLabel}\n hide-label\n disabled={!!this.disabled}\n role=\"menuitem\"\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n ) : (\n ''\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"index7.js","mappings":"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","names":[],"sources":["./src/components/q2-dropdown-item/styles.scss?tag=q2-dropdown-item&encapsulation=shadow","./src/components/q2-dropdown-item/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid\n var-list(\n var-prefixer(dropdown-item-separator-color),\n var-prefixer(gray-11),\n --tct-gray-l1,\n --app-gray-l1,\n #cccccc\n );\n}\n\n.dropdown-item-wrapper {\n display: flex;\n}\n\n.dropdown-item {\n min-height: 44px;\n flex: 1 1 100%;\n padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n text-align: left;\n background: var-list(\n --tct-dropdown-item-background,\n var-prefixer(dropdown-item-bg),\n --tct-white,\n --t-base,\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n transition: background-color\n var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n background: var-list(\n --tct-dropdown-item-hover-background,\n var-prefixer(dropdown-item-selected-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n --t-base,\n #f2f2f2\n );\n color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n flex: 0 0 44px;\n margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({\n tag: 'q2-dropdown-item',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2DropdownItem implements ComponentInterface {\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) removable: boolean;\n @Prop({ reflect: true }) separator: boolean;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) value: string;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n /////// LIFECYCLE HOOKS //////\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n //////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n get removeLabel(): string {\n return loc('tecton.element.dropdownItem.remove', [this.label \|\| '']);\n }\n\n get dropdownItemBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n }\n\n get innerLabel(): string {\n return this.label \|\| this.hostElement.textContent;\n }\n\n get removeBtn(): HTMLQ2BtnElement {\n return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n }\n\n ///////// Host Element Events //////\n @Listen('focus')\n onHostElementFocus() {\n if (event.target === this.hostElement) {\n this.focusItem();\n }\n }\n\n ///////// Actions /////////\n focusItem() {\n this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n focusRemoveBtn() {\n this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n }\n\n onItemClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'select',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onItemKeydown = (event: KeyboardEvent) => {\n if (['ArrowRight', 'Right'].includes(event.key)) {\n this.focusRemoveBtn();\n }\n };\n\n onItemFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n onRemoveBtnClick = (event: MouseEvent) => {\n event.stopImmediatePropagation();\n\n this.hostElement.dispatchEvent(\n new CustomEvent('click', {\n detail: {\n type: 'remove',\n value: this.value \|\| '',\n },\n bubbles: true,\n })\n );\n };\n\n onRemoveBtnKeydown = (event: KeyboardEvent) => {\n if (['ArrowLeft', 'Left'].includes(event.key)) {\n this.focusItem();\n }\n };\n\n onRemoveBtnFocus = (event: FocusEvent) => {\n event.stopPropagation();\n };\n\n render() {\n if (!!this.separator) {\n return this.separatorDOM();\n }\n\n return this.itemDOM();\n }\n\n separatorDOM(): JSX.IntrinsicElements {\n return (\n <div\n class=\"dropdown-separator\"\n role=\"separator\"\n test-id=\"dropdownItemSeparator\"\n />\n );\n }\n\n itemDOM(): JSX.IntrinsicElements {\n return (\n <div class=\"dropdown-item-wrapper\">\n <q2-btn\n class=\"dropdown-item\"\n label={this.innerLabel}\n hide-label\n disabled={!!this.disabled}\n role=\"menuitem\"\n onClick={this.onItemClick}\n onKeyDown={this.onItemKeydown}\n onFocus={this.onItemFocus}\n test-id=\"dropdownItem\"\n >\n <div class=\"dropdown-item-content\">\n <slot />\n </div>\n </q2-btn>\n {!!this.removable ? (\n <q2-btn\n class=\"remove-dropdown-item\"\n label={this.removeLabel}\n hide-label\n disabled={!!this.disabled}\n role=\"menuitem\"\n onClick={this.onRemoveBtnClick}\n onKeyDown={this.onRemoveBtnKeydown}\n onFocus={this.onRemoveBtnFocus}\n test-id=\"removeDropdownItem\"\n >\n <q2-icon type=\"close\" />\n </q2-btn>\n ) : (\n ''\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/index8.js CHANGED Viewed

@@ -2884,7 +2884,7 @@ const icons = {
   },
 };
-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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-alert, var(--const-stoplight-alert, #c30000))}";
+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:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-icon-fill:var(--tct-stoplight-alert, var(--const-stoplight-alert, #c30000))}";
 const Q2Icon = /*@__PURE__*/ proxyCustomElement(class Q2Icon extends HTMLElement {
   constructor() {