@patternfly/elements
Version:
PatternFly Elements
1 lines • 7.02 kB
Source Map (JSON)
{"version":3,"file":"pf-option.js","sourceRoot":"","sources":["pf-option.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\n\nimport styles from './pf-option.css';\n\n/**\n * Option within a listbox\n * @slot -\n * option text\n * @slot icon\n * optional icon\n * @slot description\n * optional description\n */\n@customElement('pf-option')\nexport class PfOption extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /** whether option is disabled */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** form value for this option */\n @property({ reflect: true })\n get value() {\n return (this.#value ?? this.textContent ?? '').trim();\n }\n\n set value(v: string) {\n this.#value = v;\n }\n\n /** whether option is selected */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /** whether option is active descendant */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /** Optional option description; overridden by description slot. */\n @property() description = '';\n\n @queryAssignedNodes({ slot: '', flatten: true })\n private _slottedText!: Node[];\n\n /**\n * this option's position relative to the other options\n */\n set posInSet(posInSet: number | null) {\n this.#internals.ariaPosInSet = `${Math.max(0, posInSet ?? 0)}`;\n }\n\n get posInSet() {\n const parsed = parseInt(this.#internals.ariaPosInSet ?? '0');\n return Number.isNaN(parsed) ? null : parsed;\n }\n\n /**\n * total number of options\n */\n set setSize(setSize: number | null) {\n this.#internals.ariaSetSize = `${Math.max(0, setSize ?? 0)}`;\n }\n\n get setSize() {\n try {\n const int = parseInt(this.#internals.ariaSetSize ?? '0');\n if (Number.isNaN(int)) {\n return 0;\n } else {\n return int;\n }\n } catch {\n return 0;\n }\n }\n\n #value?: string;\n\n #internals = InternalsController.of(this, { role: 'option' });\n\n render(): TemplateResult<1> {\n const { disabled, active, selected } = this;\n return html`\n <div id=\"outer\" class=\"${classMap({ active, disabled, selected })}\">\n <input type=\"checkbox\"\n inert\n role=\"presentation\"\n tabindex=\"-1\"\n ?checked=\"${this.selected}\"\n ?disabled=\"${this.disabled}\">\n <slot name=\"icon\"></slot>\n <span>\n <slot name=\"create\"></slot>\n <slot>${this.value}</slot>\n </span>\n <svg ?hidden=\"${!this.selected}\"\n viewBox=\"0 0 512 512\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\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\"></path>\n </svg>\n <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n </div>\n `;\n }\n\n @observes('selected')\n private selectedChanged() {\n this.#internals.ariaSelected = String(!!this.selected);\n }\n\n @observes('disabled')\n private disabledChanged() {\n this.#internals.ariaDisabled = String(!!this.disabled);\n }\n\n /**\n * text content within option (used for filtering)\n */\n get optionText(): string {\n return this._slottedText.map(node => node.textContent).join('').trim();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-option': PfOption;\n }\n}\n"]}