@patternfly/elements
Version:
PatternFly Elements
1 lines • 9.81 kB
Source Map (JSON)
{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-switch.css';\n\n/**\n * A **switch** toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n * @fires {Event} change - Fires when the switch selection changes.\n * @cssprop [--pf-c-switch--FontSize=1rem]\n * @cssprop {<length>} [--pf-c-switch--ColumnGap=1rem]\n * @cssprop [--pf-c-switch__toggle-icon--FontSize=calc(1rem * .625)]\n * @cssprop {<color>} [--pf-c-switch__toggle-icon--Color=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Left=1rem]\n * @cssprop {<length>} [--pf-c-switch__toggle-icon--Offset=0.125rem]\n * @cssprop {<number>} [--pf-c-switch--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-switch--Height=auto]\n * @cssprop {<color>} [--pf-c-switch__input--checked__toggle--BackgroundColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__input--checked__toggle--before--TranslateX=calc(100 + 0.125rem)]\n * @cssprop {<color>} [--pf-c-switch__input--checked__label--Color=#151515]\n * @cssprop {<color>} [--pf-c-switch__input--not-checked__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__label--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--BackgroundColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-switch__input--disabled__toggle--before--BackgroundColor=#f5f5f5]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineWidth=2px]\n * @cssprop {<length>} [--pf-c-switch__input--focus__toggle--OutlineOffset=0.5rem]\n * @cssprop {<color>} [--pf-c-switch__input--focus__toggle--OutlineColor=#06c]\n * @cssprop {<length>} [--pf-c-switch__toggle--Height=calc(1rem * 1.5)]\n * @cssprop {<color>} [--pf-c-switch__toggle--BackgroundColor=#8a8d90]\n * @cssprop {<length>} [--pf-c-switch__toggle--BorderRadius=calc(1rem * 1.5)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Width=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Height=calc(1rem - 0.125rem)]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Top=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--Left=calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)]\n * @cssprop {<color>} [--pf-c-switch__toggle--before--BackgroundColor=#fff]\n * @cssprop {<length>} [--pf-c-switch__toggle--before--BorderRadius=30em]\n * @cssprop [--pf-c-switch__toggle--before--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]\n * @cssprop [--pf-c-switch__toggle--before--Transition=transform .25s ease 0s]\n * @cssprop {<length>} [--pf-c-switch__toggle--Width=calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))]\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n static readonly formAssociated = true;\n\n declare shadowRoot: ShadowRoot;\n\n #internals = InternalsController.of(this, { role: 'switch' });\n\n /** Accessible label text for the switch */\n @property({ reflect: true }) label?: string;\n\n /** Flag to show if the switch has a check icon. */\n @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;\n\n /** Flag to show if the switch is checked. */\n @property({ reflect: true, type: Boolean }) checked = false;\n\n /** Flag to show if the switch is disabled. */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n get labels(): NodeListOf<HTMLLabelElement> {\n return this.#internals.labels as NodeListOf<HTMLLabelElement>;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.tabIndex = 0;\n this.addEventListener('click', this.#onClick);\n this.addEventListener('keyup', this.#onKeyup);\n this.addEventListener('keydown', this.#onKeydown);\n this.#updateLabels();\n }\n\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n this.requestUpdate();\n }\n\n override willUpdate(): void {\n this.#internals.ariaChecked = String(!!this.checked);\n this.#internals.ariaDisabled = String(!!this.disabled);\n }\n\n override render(): TemplateResult<1> {\n return html`\n <div id=\"container\">\n <svg id=\"toggle\"\n role=\"presentation\"\n fill=\"currentColor\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 512 512\"\n ?hidden=${!this.showCheckIcon}>\n <path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\" />\n </svg>\n </div>\n `;\n }\n\n #onClick(event: Event) {\n // @ts-expect-error: firefox workarounds for double-firing in the case of switch nested in label\n const { originalTarget, explicitOriginalTarget } = event;\n if (explicitOriginalTarget) {\n let labels: HTMLLabelElement[];\n if (originalTarget === event.target\n && !(labels = Array.from(this.labels)).includes(explicitOriginalTarget)\n && labels.includes(this.closest('label') as HTMLLabelElement)) {\n return;\n }\n }\n this.#toggle();\n }\n\n #onKeyup(event: KeyboardEvent) {\n switch (event.key) {\n case ' ':\n case 'Enter':\n event.preventDefault();\n this.#toggle();\n }\n }\n\n #onKeydown(event: KeyboardEvent) {\n if (event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n #toggle() {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.#updateLabels();\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n }\n\n #updateLabels() {\n const labelState = this.checked ? 'on' : 'off';\n this.labels.forEach(label => {\n const states = label.querySelectorAll<HTMLElement>('[data-state]');\n states.forEach(state => {\n if (state) {\n state.hidden = state.dataset.state !== labelState;\n }\n });\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-switch': PfSwitch;\n }\n}\n"]}