npm - @pine-ds/core - Versions diffs - 3.8.1 → 3.9.0 - Mend

@pine-ds/core 3.8.1 → 3.9.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 (346) hide show

package/dist/esm-es5/pds-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-input.entry.js","sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --pds-input-background: var(--pine-color-background-container);\n --pds-input-border-color: var(--pine-color-border);\n --pds-input-border-color-hover: var(--pine-color-border-hover);\n --pds-input-border-color-disabled: var(--pine-color-border-disabled);\n\n --pds-input-border-radius: var(--pine-dimension-125);\n --pds-input-border-width: var(--pine-border-width-thin);\n --pds-input-padding-x: var(--pine-dimension-150);\n --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));\n --pds-input-font: var(--pine-typography-body);\n --pds-input-text-color: var(--pine-color-text-active);\n --pds-input-placeholder-color: var(--pine-color-text-placeholder);\n --pds-input-icon-color: var(--pine-color-text-secondary);\n --pds-input-disabled-background: var(--pine-color-background-container-disabled);\n --pds-input-disabled-text-color: var(--pine-color-text-disabled);\n --pds-input-error-color: var(--pine-color-text-message-danger);\n --pds-input-error-background: var(--pine-input-color-background-danger);\n --pds-input-error-border: var(--pine-color-border-danger);\n --pds-input-error-border-hover: var(--pine-color-border-danger-hover);\n --pds-input-addon-background: var(--pine-color-background-subtle);\n --pds-input-addon-color: var(--pine-color-text-secondary);\n --pds-input-field-min-height: var(--pine-dimension-450);\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n display: inline;\n\n pds-select::part(select) {\n background-color: var(--pds-input-error-background);\n border-color: var(--pds-input-error-border);\n }\n\n &::part(prefix),\n &::part(suffix) {\n align-items: center;\n color: var(--pine-color-text-label-readonly);\n display: flex;\n height: 100%;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n white-space: nowrap;\n z-index: var(--pine-z-index-raised);\n }\n\n &::part(prefix) {\n border-end-start-radius: var(--pds-input-border-radius);\n border-inline-end: var(--pine-border-width-none);\n border-start-start-radius: var(--pds-input-border-radius);\n left: var(--pds-input-padding-x);\n }\n\n &::part(suffix) {\n border-end-end-radius: var(--pds-input-border-radius);\n border-inline-start: var(--pine-border-width-none);\n border-start-end-radius: var(--pds-input-border-radius);\n right: var(--pds-input-padding-x);\n }\n\n &::part(prepend),\n &::part(append) {\n align-items: center;\n background-color: var(--pds-input-addon-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n color: var(--pds-input-addon-color);\n display: flex;\n overflow: visible;\n }\n\n &::part(prepend) {\n border-end-start-radius: var(--pds-input-border-radius);\n border-inline-end: var(--pine-border-width-none);\n border-start-start-radius: var(--pds-input-border-radius);\n }\n\n &::part(append) {\n border-end-end-radius: var(--pds-input-border-radius);\n border-inline-start: var(--pine-border-width-none);\n border-start-end-radius: var(--pds-input-border-radius);\n }\n}\n\n/* stylelint-disable-next-line /\n:host([has-prepend]) ::slotted(pds-button[slot=\"prepend\"]) {\n --pds-button-background: var(--pds-input-addon-background);\n --pds-button-border: var(--pine-border-width-none);\n --pds-button-border-radius: var(--pine-dimension-none);\n --pds-button-border-radius-end-end: var(--pine-dimension-none);\n --pds-button-border-radius-start-end: var(--pine-dimension-none);\n --pds-button-border-radius-start-start: var(--pds-input-border-radius);\n --pds-button-border-radius-end-start: var(--pds-input-border-radius);\n --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line /\n:host([has-append]) ::slotted(pds-button[slot=\"append\"]) {\n --pds-button-background: var(--pds-input-addon-background);\n --pds-button-border: var(--pine-border-width-none);\n --pds-button-border-radius: var(--pine-dimension-none);\n --pds-button-border-radius-end-start: var(--pine-dimension-none);\n --pds-button-border-radius-start-start: var(--pine-dimension-none);\n --pds-button-border-radius-start-end: var(--pds-input-border-radius);\n --pds-button-border-radius-end-end: var(--pds-input-border-radius);\n --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line /\n:host([has-prepend]) ::slotted(pds-select[slot=\"prepend\"]) {\n --pds-select-background: var(--pds-input-addon-background);\n --pds-select-border: var(--pine-border-width-none);\n --pds-select-border-radius-end-end: var(--pine-dimension-none);\n --pds-select-border-radius-start-end: var(--pine-dimension-none);\n --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n}\n\n/* stylelint-disable-next-line /\n:host([has-append]) ::slotted(pds-select[slot=\"append\"]) {\n --pds-select-background: var(--pds-input-addon-background);\n --pds-select-border: var(--pine-border-width-none);\n --pds-select-border-radius-end-start: var(--pine-dimension-none);\n --pds-select-border-radius-start-start: var(--pine-dimension-none);\n --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n}\n\n:host([aria-readonly=\"true\"]) {\n input {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([disabled=\"true\"]) {\n &::part(prepend),\n &::part(append) {\n background-color: var(--pds-input-disabled-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);\n }\n}\n\n:host([full-width=\"true\"]) {\n width: 100%;\n}\n\n:host([invalid=\"true\"]) {\n &::part(prepend),\n &::part(append) {\n background-color: var(--pds-input-error-background);\n border: var(--pds-input-border-width) solid var(--pds-input-error-border);\n }\n}\n\n.pds-input {\n display: flex;\n flex-direction: column;\n}\n\n.pds-input__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-input__label {\n color: var(--pine-color-text-active);\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-input__label-wrapper .pds-input__label {\n margin-block-end: 0;\n}\n\n.pds-input__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-input__field-wrapper {\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n\n &.has-prefix .pds-input__field {\n padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));\n }\n\n &.has-suffix .pds-input__field {\n padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));\n }\n\n &.has-prepend .pds-input__field {\n border-end-start-radius: var(--pine-dimension-none);\n border-start-start-radius: var(--pine-dimension-none);\n }\n\n &.has-append .pds-input__field {\n border-end-end-radius: var(--pine-dimension-none);\n border-start-end-radius: var(--pine-dimension-none);\n }\n}\n\n.pds-input__field {\n background: var(--pds-input-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n border-radius: var(--pds-input-border-radius);\n box-sizing: border-box;\n color: var(--pds-input-text-color);\n flex: 1;\n font: var(--pds-input-font);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-input-field-min-height);\n min-width: var(--pine-dimension-none);\n padding: var(--pds-input-padding-y) var(--pds-input-padding-x);\n transition: border-color 0.2s ease;\n width: 100%;\n\n &:hover:not(:disabled) {\n border-color: var(--pds-input-border-color-hover);\n }\n\n &:disabled {\n background: var(--pds-input-disabled-background);\n border-color: var(--pine-color-border-disabled);\n color: var(--pds-input-disabled-text-color);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n }\n\n .has-error &:hover:not(:disabled) {\n border-color: var(--pds-input-error-border-hover);\n }\n\n &:focus-visible:not(.has-error) {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n position: relative;\n z-index: 1;\n\n :host([has-prepend]) &,\n :host([has-append]) &,\n :host([has-prefix]) &,\n :host([has-suffix]) & {\n outline-offset: var(--pine-dimension-none);\n }\n }\n\n &::placeholder {\n color: var(--pds-input-placeholder-color);\n }\n\n .has-error & {\n background-color: var(--pds-input-error-background);\n border-color: var(--pds-input-error-border);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n position: relative;\n z-index: 1;\n }\n }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm);\n margin-block-end: var(--pine-dimension-none);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n align-items: center;\n color: var(--pds-input-error-color);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsInput {\n\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n private prefixEl?: HTMLElement;\n private suffixEl?: HTMLElement;\n private focusedValue?: string \| number \| null;\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n private internals?: ElementInternals;\n\n @Element() el!: HTMLPdsInputElement;\n\n /\n If true, the input has prefix content (non-focusable)\n /\n @State() hasPrefix = false;\n\n /\n If true, the input has suffix content (non-focusable)\n /\n @State() hasSuffix = false;\n\n /\n If true, the input has prepend content (focusable)\n /\n @State() hasPrepend = false;\n\n /\n If true, the input has append content (focusable)\n /\n @State() hasAppend = false;\n\n /\n If true, the input has action content in the label area\n /\n @State() hasAction = false;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value has changed.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n /\n @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n /\n Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n * `input.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeInput) {\n this.nativeInput.focus();\n }\n }\n\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the number of milliseconds to wait before updating the value.\n /\n @Prop() debounce?: number;\n\n /\n Determines whether or not the input field is disabled.\n /\n @Prop() disabled?: boolean;\n\n /\n Specifies the error message and provides an error-themed treatment to the field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the input field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines whether or not the input field is invalid or throws an error.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the input label.\n /\n @Prop() label?: string;\n\n /\n Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Specifies the maximum value for the input field.\n /\n @Prop() max?: string;\n\n /\n Specifies the maximum number of characters allowed in the input field.\n /\n @Prop() maxlength?: string;\n\n /\n Specifies the minimum value for the input field.\n /\n @Prop() min?: string;\n\n /\n Specifies the minimum number of characters allowed in the input field.\n /\n @Prop() minlength?: string;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name?: string;\n\n /\n Specifies the regular expression that the input value is checked against.\n /\n @Prop() pattern?: string;\n\n /\n Specifies a short hint that describes the expected value of the input field.\n /\n @Prop() placeholder?: string;\n\n /\n Determines whether or not the input field is readonly.\n /\n @Prop() readonly?: boolean;\n\n /\n Determines whether or not the input field is required.\n /\n @Prop() required?: boolean;\n\n /\n Works with the `min` and `max` attributes to define increments for the input field.\n /\n @Prop() step?: string;\n\n /\n Determines the type of control that will be displayed\n * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n * @defaultValue \"text\"\n /\n @Prop() type = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Determines whether or not the input field takes full width of its container.\n /\n @Prop() fullWidth?: boolean;\n\n /\n Determines if the input has focus.\n /\n @State() hasFocus = false;\n\n private updateAddonWidths() {\n requestAnimationFrame(() => {\n if (this.prefixEl) {\n const prefixWidth = this.prefixEl.offsetWidth;\n this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n }\n\n if (this.suffixEl) {\n const suffixWidth = this.suffixEl.offsetWidth;\n this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n }\n });\n }\n\n private renderPrefix() {\n const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n if (hasPrefix) {\n return (\n <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderSuffix() {\n const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n if (hasSuffix) {\n return (\n <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderPrepend() {\n const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n if (hasPrepend) {\n return (\n <div class=\"pds-input__prepend\" part=\"prepend\">\n <slot name=\"prepend\"></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderAppend() {\n const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n if (hasAppend) {\n return (\n <div class=\"pds-input__append\" part=\"append\">\n <slot name=\"append\"></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-input__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n };\n this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n // Store the original pdsInput event emitter\n this.originalPdsInput = this.pdsInput;\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n this.updateAddonWidths();\n // Set initial form value\n this.updateFormValue();\n }\n\n componentDidUpdate() {\n this.updateAddonWidths();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n /\n If debounce is undefined, we have to manually revert the pdsInput emitter in case\n * debounce used to be set to a number. Otherwise, the event would stay debounced.\n /\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n\n if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n nativeInput.value = value;\n }\n\n // Update form value when value changes\n this.updateFormValue();\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n };\n\n private onChangeEvent = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlurEvent = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `pdsChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocusEvent = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onCompositionStart = () => {\n this.isComposing = true;\n }\n\n private onCompositionEnd = () => {\n this.isComposing = false;\n }\n\n /\n Emits a pdsChange event\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n const newValue = value == null ? value : value.toString();\n\n this.focusedValue = newValue;\n this.pdsChange.emit({ value: newValue, event });\n }\n\n /\n Emits a `pdsInput` event\n /\n private emitInputChange(event?: Event) {\n const { value } = this;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n\n this.pdsInput.emit({ value: newValue, event });\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value \|\| null);\n\n // Set validity based on native input validation\n if (this.nativeInput && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeInput.validity,\n this.nativeInput.validationMessage,\n this.nativeInput\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n /\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the input's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const {\n componentId,\n disabled,\n errorMessage,\n helperMessage,\n invalid = false,\n label,\n } = this;\n\n const value = this.getValue();\n\n const inputWrapperClasses = {\n 'pds-input__field-wrapper': true,\n 'has-focus': this.hasFocus,\n 'has-error': invalid \|\| !!errorMessage,\n 'is-disabled': disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n 'has-prepend': this.hasPrepend,\n 'has-append': this.hasAppend,\n };\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-prefix={this.hasPrefix ? 'true' : null}\n has-suffix={this.hasSuffix ? 'true' : null}\n has-prepend={this.hasPrepend ? 'true' : null}\n has-append={this.hasAppend ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n full-width={this.fullWidth ? 'true' : null}\n >\n <div class=\"pds-input\">\n {label && (\n <div class=\"pds-input__label-wrapper\">\n <label htmlFor={componentId} class=\"pds-input__label\">\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {label}\n {this.required && <span class=\"pds-input__required-indicator\"> </span>}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n )}\n\n <div class={inputWrapperClasses}>\n {this.renderPrepend()}\n {this.renderPrefix()}\n <input\n ref={(input) => (this.nativeInput = input)}\n class=\"pds-input__field\"\n aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n aria-invalid={invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={disabled}\n id={componentId}\n max={this.max}\n maxlength={this.maxlength}\n min={this.min}\n minlength={this.minlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n step={this.step}\n type={this.type}\n value={value}\n onInput={this.onInputEvent}\n onChange={this.onChangeEvent}\n onBlur={this.onBlurEvent}\n onFocus={this.onFocusEvent}\n onCompositionstart={this.onCompositionStart}\n onCompositionend={this.onCompositionEnd}\n {...this.inheritedAttributes}\n />\n {this.renderSuffix()}\n {this.renderAppend()}\n </div>\n\n {helperMessage && (\n <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n {helperMessage}\n </p>\n )}\n\n {errorMessage && (\n <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n <pds-icon icon={danger} size=\"small\" />\n {errorMessage}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-input.entry.js","sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --pds-input-background: var(--pine-color-background-container);\n --pds-input-border-color: var(--pine-color-border);\n --pds-input-border-color-hover: var(--pine-color-border-hover);\n --pds-input-border-color-disabled: var(--pine-color-border-disabled);\n\n --pds-input-border-radius: var(--pine-dimension-125);\n --pds-input-border-width: var(--pine-border-width-thin);\n --pds-input-padding-x: var(--pine-dimension-150);\n --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));\n --pds-input-font: var(--pine-typography-body);\n --pds-input-text-color: var(--pine-color-text-active);\n --pds-input-placeholder-color: var(--pine-color-text-placeholder);\n --pds-input-icon-color: var(--pine-color-text-secondary);\n --pds-input-disabled-background: var(--pine-color-background-container-disabled);\n --pds-input-disabled-text-color: var(--pine-color-text-disabled);\n --pds-input-error-color: var(--pine-color-text-message-danger);\n --pds-input-error-background: var(--pine-input-color-background-danger);\n --pds-input-error-border: var(--pine-color-border-danger);\n --pds-input-error-border-hover: var(--pine-color-border-danger-hover);\n --pds-input-addon-background: var(--pine-color-background-subtle);\n --pds-input-addon-color: var(--pine-color-text-secondary);\n --pds-input-field-min-height: var(--pine-dimension-450);\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n display: inline;\n\n pds-select::part(select) {\n background-color: var(--pds-input-error-background);\n border-color: var(--pds-input-error-border);\n }\n\n &::part(prefix),\n &::part(suffix) {\n align-items: center;\n color: var(--pine-color-text-label-readonly);\n display: flex;\n height: 100%;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n white-space: nowrap;\n z-index: var(--pine-z-index-raised);\n }\n\n &::part(prefix) {\n border-end-start-radius: var(--pds-input-border-radius);\n border-inline-end: var(--pine-border-width-none);\n border-start-start-radius: var(--pds-input-border-radius);\n left: var(--pds-input-padding-x);\n }\n\n &::part(suffix) {\n border-end-end-radius: var(--pds-input-border-radius);\n border-inline-start: var(--pine-border-width-none);\n border-start-end-radius: var(--pds-input-border-radius);\n right: var(--pds-input-padding-x);\n }\n\n &::part(prepend),\n &::part(append) {\n align-items: center;\n background-color: var(--pds-input-addon-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n color: var(--pds-input-addon-color);\n display: flex;\n overflow: visible;\n }\n\n &::part(prepend) {\n border-end-start-radius: var(--pds-input-border-radius);\n border-inline-end: var(--pine-border-width-none);\n border-start-start-radius: var(--pds-input-border-radius);\n }\n\n &::part(append) {\n border-end-end-radius: var(--pds-input-border-radius);\n border-inline-start: var(--pine-border-width-none);\n border-start-end-radius: var(--pds-input-border-radius);\n }\n}\n\n/* stylelint-disable-next-line /\n:host([has-prepend]) ::slotted(pds-button[slot=\"prepend\"]) {\n --pds-button-background: var(--pds-input-addon-background);\n --pds-button-border: var(--pine-border-width-none);\n --pds-button-border-radius: var(--pine-dimension-none);\n --pds-button-border-radius-end-end: var(--pine-dimension-none);\n --pds-button-border-radius-start-end: var(--pine-dimension-none);\n --pds-button-border-radius-start-start: var(--pds-input-border-radius);\n --pds-button-border-radius-end-start: var(--pds-input-border-radius);\n --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line /\n:host([has-append]) ::slotted(pds-button[slot=\"append\"]) {\n --pds-button-background: var(--pds-input-addon-background);\n --pds-button-border: var(--pine-border-width-none);\n --pds-button-border-radius: var(--pine-dimension-none);\n --pds-button-border-radius-end-start: var(--pine-dimension-none);\n --pds-button-border-radius-start-start: var(--pine-dimension-none);\n --pds-button-border-radius-start-end: var(--pds-input-border-radius);\n --pds-button-border-radius-end-end: var(--pds-input-border-radius);\n --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line /\n:host([has-prepend]) ::slotted(pds-select[slot=\"prepend\"]) {\n --pds-select-background: var(--pds-input-addon-background);\n --pds-select-border: var(--pine-border-width-none);\n --pds-select-border-radius-end-end: var(--pine-dimension-none);\n --pds-select-border-radius-start-end: var(--pine-dimension-none);\n --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n}\n\n/* stylelint-disable-next-line /\n:host([has-append]) ::slotted(pds-select[slot=\"append\"]) {\n --pds-select-background: var(--pds-input-addon-background);\n --pds-select-border: var(--pine-border-width-none);\n --pds-select-border-radius-end-start: var(--pine-dimension-none);\n --pds-select-border-radius-start-start: var(--pine-dimension-none);\n --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 var(--pine-border-width)));\n}\n\n:host([aria-readonly=\"true\"]) {\n input {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([disabled=\"true\"]) {\n &::part(prepend),\n &::part(append) {\n background-color: var(--pds-input-disabled-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);\n }\n}\n\n:host([full-width=\"true\"]) {\n width: 100%;\n}\n\n:host([invalid=\"true\"]) {\n &::part(prepend),\n &::part(append) {\n background-color: var(--pds-input-error-background);\n border: var(--pds-input-border-width) solid var(--pds-input-error-border);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([invalid]):not([aria-readonly=\"true\"])) {\n --pds-input-background: var(--pine-color-accent-disabled);\n --pds-input-border-color: var(--pine-color-accent);\n --pds-input-border-color-hover: var(--pine-color-accent-hover);\n --pds-input-text-color: var(--pine-color-text-accent);\n\n &::part(prefix),\n &::part(suffix) {\n color: var(--pine-color-text-accent);\n }\n\n .pds-input__field:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n}\n\n.pds-input {\n display: flex;\n flex-direction: column;\n}\n\n.pds-input__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-input__label {\n color: var(--pine-color-text-active);\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-input__label-wrapper .pds-input__label {\n margin-block-end: 0;\n}\n\n.pds-input__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-input__field-wrapper {\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n\n &.has-prefix .pds-input__field {\n padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));\n }\n\n &.has-suffix .pds-input__field {\n padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));\n }\n\n &.has-prepend .pds-input__field {\n border-end-start-radius: var(--pine-dimension-none);\n border-start-start-radius: var(--pine-dimension-none);\n }\n\n &.has-append .pds-input__field {\n border-end-end-radius: var(--pine-dimension-none);\n border-start-end-radius: var(--pine-dimension-none);\n }\n}\n\n.pds-input__field {\n background: var(--pds-input-background);\n border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n border-radius: var(--pds-input-border-radius);\n box-sizing: border-box;\n color: var(--pds-input-text-color);\n flex: 1;\n font: var(--pds-input-font);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-input-field-min-height);\n min-width: var(--pine-dimension-none);\n padding: var(--pds-input-padding-y) var(--pds-input-padding-x);\n transition: border-color 0.2s ease;\n width: 100%;\n\n &:hover:not(:disabled) {\n border-color: var(--pds-input-border-color-hover);\n }\n\n &:disabled {\n background: var(--pds-input-disabled-background);\n border-color: var(--pine-color-border-disabled);\n color: var(--pds-input-disabled-text-color);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n }\n\n .has-error &:hover:not(:disabled) {\n border-color: var(--pds-input-error-border-hover);\n }\n\n &:focus-visible:not(.has-error) {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n position: relative;\n z-index: 1;\n\n :host([has-prepend]) &,\n :host([has-append]) &,\n :host([has-prefix]) &,\n :host([has-suffix]) & {\n outline-offset: var(--pine-dimension-none);\n }\n }\n\n &::placeholder {\n color: var(--pds-input-placeholder-color);\n }\n\n .has-error & {\n background-color: var(--pds-input-error-background);\n border-color: var(--pds-input-error-border);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n position: relative;\n z-index: 1;\n }\n }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm);\n margin-block-end: var(--pine-dimension-none);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n align-items: center;\n color: var(--pds-input-error-color);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsInput {\n\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n private prefixEl?: HTMLElement;\n private suffixEl?: HTMLElement;\n private focusedValue?: string \| number \| null;\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n private internals?: ElementInternals;\n\n @Element() el!: HTMLPdsInputElement;\n\n /\n If true, the input has prefix content (non-focusable)\n /\n @State() hasPrefix = false;\n\n /\n If true, the input has suffix content (non-focusable)\n /\n @State() hasSuffix = false;\n\n /\n If true, the input has prepend content (focusable)\n /\n @State() hasPrepend = false;\n\n /\n If true, the input has append content (focusable)\n /\n @State() hasAppend = false;\n\n /\n If true, the input has action content in the label area\n /\n @State() hasAction = false;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the value has changed.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n /\n @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n /\n Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n * `input.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeInput) {\n this.nativeInput.focus();\n }\n }\n\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the number of milliseconds to wait before updating the value.\n /\n @Prop() debounce?: number;\n\n /\n Determines whether or not the input field is disabled.\n /\n @Prop() disabled?: boolean;\n\n /\n Specifies the error message and provides an error-themed treatment to the field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the input field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines whether or not the input field is invalid or throws an error.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the input label.\n /\n @Prop() label?: string;\n\n /\n Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Specifies the maximum value for the input field.\n /\n @Prop() max?: string;\n\n /\n Specifies the maximum number of characters allowed in the input field.\n /\n @Prop() maxlength?: string;\n\n /\n Specifies the minimum value for the input field.\n /\n @Prop() min?: string;\n\n /\n Specifies the minimum number of characters allowed in the input field.\n /\n @Prop() minlength?: string;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name?: string;\n\n /\n Specifies the regular expression that the input value is checked against.\n /\n @Prop() pattern?: string;\n\n /\n Specifies a short hint that describes the expected value of the input field.\n /\n @Prop() placeholder?: string;\n\n /\n Determines whether or not the input field is readonly.\n /\n @Prop() readonly?: boolean;\n\n /\n Determines whether or not the input field is required.\n /\n @Prop() required?: boolean;\n\n /\n Works with the `min` and `max` attributes to define increments for the input field.\n /\n @Prop() step?: string;\n\n /\n Determines the type of control that will be displayed\n * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n * @defaultValue \"text\"\n /\n @Prop() type = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Determines whether or not the input field takes full width of its container.\n /\n @Prop() fullWidth?: boolean;\n\n /\n Applies highlight styling to the input field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n Determines if the input has focus.\n /\n @State() hasFocus = false;\n\n private updateAddonWidths() {\n requestAnimationFrame(() => {\n if (this.prefixEl) {\n const prefixWidth = this.prefixEl.offsetWidth;\n this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n }\n\n if (this.suffixEl) {\n const suffixWidth = this.suffixEl.offsetWidth;\n this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n }\n });\n }\n\n private renderPrefix() {\n const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n if (hasPrefix) {\n return (\n <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderSuffix() {\n const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n if (hasSuffix) {\n return (\n <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderPrepend() {\n const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n if (hasPrepend) {\n return (\n <div class=\"pds-input__prepend\" part=\"prepend\">\n <slot name=\"prepend\"></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderAppend() {\n const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n if (hasAppend) {\n return (\n <div class=\"pds-input__append\" part=\"append\">\n <slot name=\"append\"></slot>\n </div>\n );\n }\n return null;\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-input__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n };\n this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n // Store the original pdsInput event emitter\n this.originalPdsInput = this.pdsInput;\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n this.updateAddonWidths();\n // Set initial form value\n this.updateFormValue();\n }\n\n componentDidUpdate() {\n this.updateAddonWidths();\n }\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n /\n If debounce is undefined, we have to manually revert the pdsInput emitter in case\n * debounce used to be set to a number. Otherwise, the event would stay debounced.\n /\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n\n if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n nativeInput.value = value;\n }\n\n // Update form value when value changes\n this.updateFormValue();\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n };\n\n private onChangeEvent = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlurEvent = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `pdsChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocusEvent = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onCompositionStart = () => {\n this.isComposing = true;\n }\n\n private onCompositionEnd = () => {\n this.isComposing = false;\n }\n\n /\n Emits a pdsChange event\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n const newValue = value == null ? value : value.toString();\n\n this.focusedValue = newValue;\n this.pdsChange.emit({ value: newValue, event });\n }\n\n /\n Emits a `pdsInput` event\n /\n private emitInputChange(event?: Event) {\n const { value } = this;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n\n this.pdsInput.emit({ value: newValue, event });\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value \|\| null);\n\n // Set validity based on native input validation\n if (this.nativeInput && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeInput.validity,\n this.nativeInput.validationMessage,\n this.nativeInput\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n /\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the input's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const {\n componentId,\n disabled,\n errorMessage,\n helperMessage,\n invalid = false,\n label,\n } = this;\n\n const value = this.getValue();\n\n const inputWrapperClasses = {\n 'pds-input__field-wrapper': true,\n 'has-focus': this.hasFocus,\n 'has-error': invalid \|\| !!errorMessage,\n 'is-disabled': disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n 'has-prepend': this.hasPrepend,\n 'has-append': this.hasAppend,\n };\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-prefix={this.hasPrefix ? 'true' : null}\n has-suffix={this.hasSuffix ? 'true' : null}\n has-prepend={this.hasPrepend ? 'true' : null}\n has-append={this.hasAppend ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n full-width={this.fullWidth ? 'true' : null}\n >\n <div class=\"pds-input\">\n {label && (\n <div class=\"pds-input__label-wrapper\">\n <label htmlFor={componentId} class=\"pds-input__label\">\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {label}\n {this.required && <span class=\"pds-input__required-indicator\"> </span>}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n )}\n\n <div class={inputWrapperClasses}>\n {this.renderPrepend()}\n {this.renderPrefix()}\n <input\n ref={(input) => (this.nativeInput = input)}\n class=\"pds-input__field\"\n aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n aria-invalid={invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={disabled}\n id={componentId}\n max={this.max}\n maxlength={this.maxlength}\n min={this.min}\n minlength={this.minlength}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n step={this.step}\n type={this.type}\n value={value}\n onInput={this.onInputEvent}\n onChange={this.onChangeEvent}\n onBlur={this.onBlurEvent}\n onFocus={this.onFocusEvent}\n onCompositionstart={this.onCompositionStart}\n onCompositionend={this.onCompositionEnd}\n {...this.inheritedAttributes}\n />\n {this.renderSuffix()}\n {this.renderAppend()}\n </div>\n\n {helperMessage && (\n <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n {helperMessage}\n </p>\n )}\n\n {errorMessage && (\n <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n <pds-icon icon={danger} size=\"small\" />\n {errorMessage}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm-es5/pds-progress.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-Bf1dou5H.js";var pdsProgressCss=":host{--color-progress-fill:var(--pine-color-brand);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background-color:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";var PdsProgress=function(){function r(r){registerInstance(this,r);this.animated=false;this.percent=0;this.showPercent=false}r.prototype.render=function(){return h(Host,{key:"4b85286ee1fcc7ae77f733b915a996bb82aecb5b",class:this.animated?{"is-animated":this.animated}:""},h("div",{key:"ea3dfbafae2d416aac9903ec50dfade77c315e05",class:"pds-progress"},h("label",{key:"3ece69ae8b90e968d7f86b986faee633d7802a0b",class:"pds-progress__label",htmlFor:this.componentId},this.label),h("progress",{key:"68beb43763d001495159e253562b0934521072d9",id:this.componentId,max:"100",style:this.fillColor?{"--color-progress-fill":this.fillColor}:{},value:this.percent})),this.showPercent&&h("div",{key:"8480b66191aec536b0c2c588e71e5c568f5d0eeb",class:"pds-progress__percentage"},this.percent,"%"))};return r}();PdsProgress.style=pdsProgressCss;export{PdsProgress as pds_progress};
+import{r as registerInstance,h,H as Host}from"./index-Bf1dou5H.js";var pdsProgressCss=":host{--color-progress-fill:var(--pine-color-brand);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-container-disabled);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-brand));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";var PdsProgress=function(){function s(s){registerInstance(this,s);this.animated=false;this.percent=0;this.showPercent=false}s.prototype.render=function(){return h(Host,{key:"4b85286ee1fcc7ae77f733b915a996bb82aecb5b",class:this.animated?{"is-animated":this.animated}:""},h("div",{key:"ea3dfbafae2d416aac9903ec50dfade77c315e05",class:"pds-progress"},h("label",{key:"3ece69ae8b90e968d7f86b986faee633d7802a0b",class:"pds-progress__label",htmlFor:this.componentId},this.label),h("progress",{key:"68beb43763d001495159e253562b0934521072d9",id:this.componentId,max:"100",style:this.fillColor?{"--color-progress-fill":this.fillColor}:{},value:this.percent})),this.showPercent&&h("div",{key:"8480b66191aec536b0c2c588e71e5c568f5d0eeb",class:"pds-progress__percentage"},this.percent,"%"))};return s}();PdsProgress.style=pdsProgressCss;export{PdsProgress as pds_progress};
 //# sourceMappingURL=pds-progress.entry.js.map

package/dist/esm-es5/pds-progress.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-progress.entry.js","sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n --color-progress-fill: var(--pine-color-brand);\n\n --sizing-progress-bar-width: 100%;\n\n align-items: center;\n display: flex;\n width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: var(--sizing-progress-bar-width);\n }\n}\n\n.pds-progress {\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-2xs);\n display: flex;\n flex-direction: row;\n height: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--pine-dimension-xs);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n background~~-color~~: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n background~~-color~~: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n font-weight: var(--pine-font-weight-medium);\n margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrls: ['pds-progress.scss'],\n shadow: true,\n})\nexport class PdsProgress {\n /*\n Determines whether or not progress is animated.\n * @defaultValue false\n /\n @Prop() animated = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pine-color-blue-300)'\n /\n @Prop() fillColor: string;\n\n /\n String used for label text. Label is visually hidden but required for better accessibility.\n /\n @Prop() label!: string;\n\n /\n Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n /\n @Prop() percent = 0;\n\n /\n Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,~~8iDAA8iD~~;;~~MCOxjD~~,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACR,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;"}
1	+ {"version":3,"file":"pds-progress.entry.js","sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n --color-progress-fill: var(--pine-color-brand);\n\n --sizing-progress-bar-width: 100%;\n\n align-items: center;\n display: flex;\n width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n 0% {\n width: 0\n }\n\n 100% {\n width: var(--sizing-progress-bar-width);\n }\n}\n\n.pds-progress {\n align-items: center;\n background-color: var(--pine-color-background-container-disabled);\n border-radius: var(--pine-dimension-2xs);\n display: flex;\n flex-direction: row;\n height: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n animation: progressBar 3s ease;\n animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n background-color: transparent;\n border: 0;\n height: var(--pine-dimension-xs);\n width: 100%;\n}\n\nprogress::-webkit-progress-value {\n background: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\nprogress::-moz-progress-bar {\n background: var(--color-progress-fill, var(--pine-color-brand));\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-progress__label {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pds-progress__percentage {\n font-weight: var(--pine-font-weight-medium);\n margin-inline-start: calc(var(--pine-dimension-md) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pds-progress',\n styleUrls: ['pds-progress.scss'],\n shadow: true,\n})\nexport class PdsProgress {\n /*\n Determines whether or not progress is animated.\n * @defaultValue false\n /\n @Prop() animated = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n * @defaultValue 'var(--pine-color-blue-300)'\n /\n @Prop() fillColor: string;\n\n /\n String used for label text. Label is visually hidden but required for better accessibility.\n /\n @Prop() label!: string;\n\n /\n Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n * @defaultValue 0\n /\n @Prop() percent = 0;\n\n /\n Determines whether or not the percent value should be displayed as text.\n * @defaultValue false\n */\n @Prop() showPercent = false;\n\n render() {\n return (\n <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n <div class=\"pds-progress\">\n <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n {this.label}\n </label>\n <progress\n id={this.componentId}\n max=\"100\"\n style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n value={this.percent}\n >\n </progress>\n </div>\n {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,kiDAAkiD;;MCO5iD,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGE;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkBxB;;;AAGE;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,CAAC;AAEnB;;;AAGE;AACM,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAqB5B;IAnBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACzD,IAAI,CAAC,KAAK,CACL,EACR,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAAE,IAAI,CAAC,OAAO,EAAQ,GAAA,CAAA,CAC3E;;;;;;;"}

package/dist/esm-es5/pds-radio.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-Bf1dou5H.js";import{e as exposeTypeProperty,m as messageId,a as assignDescription}from"./form-DwjNklzi.js";import{i as danger}from"./index-D4zJBIgl.js";var labelCss=".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsRadioCss='.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-body-sm);gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}';var PdsRadio=function(){function e(e){var i=this;registerInstance(this,e);this.pdsRadioChange=createEvent(this,"pdsRadioChange");this._type="radio";this.checked=false;this.disabled=false;this.invalid=false;this.required=false;this.handleRadioChange=function(e){if(i.disabled){return}var r=e.target;var a=r.checked;i.pdsRadioChange.emit(a)}}e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.connectedCallback=function(){var e=this;exposeTypeProperty(this.el,(function(){return e._type}))};e.prototype.render=function(){return h(Host,{key:"06e5b348a9fe664ac157f0383dab869885644f28",class:this.classNames()},h("label",{key:"12d203aa9a181de09a4323b0644905f308209e10",htmlFor:this.componentId},h("input",{key:"693af2832937dfa368859bc5d34e33813093bd19","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange}),h("span",{key:"12cbafe6f967b0336e12083e506d0347fd60bb1a",class:this.hideLabel?"visually-hidden":""},this.label)),this.helperMessage&&h("div",{key:"d4c416a2c24331bb23c6bd829aff51dfe142ac4a",class:"pds-radio__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{key:"8b973854356bdf1d36401bb7f818bacf573da010",class:"pds-radio__message pds-radio__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{key:"85abae586504b4d64a19bf078ddd5fab099e4e06",icon:danger,size:"small"}),this.errorMessage))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsRadio.style=labelCss+pdsRadioCss;export{PdsRadio as pds_radio};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-Bf1dou5H.js";import{e as exposeTypeProperty,a as assignDescription,m as messageId}from"./form-DwjNklzi.js";import{i as danger}from"./index-D4zJBIgl.js";var labelCss=".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsRadioCss='.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--pine-color-border-danger)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked:hover{background:var(--pine-color-border-danger-hover);border-color:var(--pine-color-border-danger-hover)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-background-container);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.6}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{cursor:not-allowed}.has-image.is-invalid.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger);box-shadow:0 0 0 2px var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-danger);-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger);box-shadow:0 0 0 2px var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio::after{background:var(--pine-color-border-danger)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked) .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-danger-hover);-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger-hover);box-shadow:0 0 0 2px var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h:has(input:checked):hover{-webkit-box-shadow:0 0 0 2px var(--pine-color-border-danger-hover);box-shadow:0 0 0 2px var(--pine-color-border-danger-hover)}.has-image.is-invalid.sc-pds-radio-h label.sc-pds-radio,.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}';var PdsRadio=function(){function e(e){var r=this;registerInstance(this,e);this.pdsRadioChange=createEvent(this,"pdsRadioChange");this._type="radio";this._hasImage=false;this.checked=false;this.disabled=false;this.hasBorder=false;this.invalid=false;this.required=false;this.handleRadioChange=function(e){if(r.disabled){return}var i=e.target;var a=i.checked;r.pdsRadioChange.emit(a)}}e.prototype.hasImageSlot=function(){var e=this.el.querySelector('[slot="image"]');return!!e};e.prototype.hasImage=function(){return this._hasImage};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}if(this.hasBorder){e.push("has-border")}if(this.hasImage()){e.push("has-image")}return e.join(" ")};e.prototype.componentWillLoad=function(){this._hasImage=this.hasImageSlot()};e.prototype.connectedCallback=function(){var e=this;exposeTypeProperty(this.el,(function(){return e._type}))};e.prototype.render=function(){var e=this;var r=function(){return[h("label",{htmlFor:e.componentId,key:"".concat(e.componentId,"-label")},h("input",{key:"714cf76fc30ab26b58523c6d802650a12de9c01a","aria-describedby":assignDescription(e.componentId,e.invalid,e.helperMessage),"aria-invalid":e.invalid?"true":undefined,type:"radio",id:e.componentId,name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,onChange:e.handleRadioChange,class:e.hasImage()?"visually-hidden":""}),h("span",{key:"fc5deb9d38f9d2cc19a793dc32c46d88c9831482",class:e.hideLabel?"visually-hidden":""},e.label)),e.helperMessage&&h("div",{key:"".concat(e.componentId,"-helper"),class:"pds-radio__message",id:messageId(e.componentId,"helper")},e.helperMessage),e.errorMessage&&h("div",{key:"".concat(e.componentId,"-error"),class:"pds-radio__message pds-radio__message--error",id:messageId(e.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{key:"771d1a284a0f24f204691c04addc7120d60c7a8c",icon:danger,size:"small"}),e.errorMessage)]};return h(Host,{key:"edf86e2d9070289457c0256e1dbf7a5febdbc386",class:this.classNames()},this.hasImage()&&h("div",{key:"fddaf8db228e2e4a2b00ded0fe9afba80c876503",class:"pds-radio__image-container",part:"image-container"},h("slot",{key:"2a5dbf40e955d039f6618fe9fa7e345ad5b6548d",name:"image",onSlotchange:function(){return e._hasImage=e.hasImageSlot()}})),this.hasImage()?h("div",{class:"pds-radio__content-wrapper"},r()):r())};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsRadio.style=labelCss+pdsRadioCss;export{PdsRadio as pds_radio};
 //# sourceMappingURL=pds-radio.entry.js.map

package/dist/esm-es5/pds-radio.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-radio.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n font-size: var(--pine-font-size-body-sm);\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n /*\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-radio.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type /\n &.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.6;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n cursor: not-allowed;\n }\n }\n\n // Invalid state\n &.is-invalid {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n / stylelint-disable-next-line /\n &::after {\n background: var(--pine-color-border-danger);\n }\n\n / stylelint-disable-next-line /\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n &:hover {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm-es5/pds-row.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-Bf1dou5H.js";var pdsRowCss=":host {\n  --row-gap-y: var(--pine-dimension-125);\n  --row-gap-x: var(--pine-dimension-125);\n  display: block;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -0.5);\n  margin-inline-end: calc(var(--row-gap-x) * -0.5);\n  -webkit-margin-start: calc(var(--row-gap-x) * -0.5);\n  margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -1);\n  -webkit-margin-start: calc(var(--row-gap-x) * -1);\n  margin-inline-start: calc(var(--row-gap-x) * -1);\n}\n@layer layout {\n  .pds-row > * {\n    -webkit-padding-after: calc(var(--row-gap-y));\n    padding-block-end: calc(var(--row-gap-y));\n    -webkit-padding-before: calc(var(--row-gap-y));\n    padding-block-start: calc(var(--row-gap-y));\n    -webkit-padding-end: calc(var(--row-gap-x));\n    padding-inline-end: calc(var(--row-gap-x));\n    -webkit-padding-start: calc(var(--row-gap-x));\n    padding-inline-start: calc(var(--row-gap-x));\n  }\n}\n\n.pds-row--no-wrap {\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.pds-row--border {\n  border: var(--pine-border);\n}\n\n.pds-justify-content-start {\n  -ms-flex-pack: start;\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  -ms-flex-pack: end;\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  -ms-flex-pack: distribute;\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  -ms-flex-pack: space-evenly;\n  justify-content: space-evenly;\n}\n\n.pds-align-items-start {\n  -ms-flex-align: start;\n  align-items: start;\n}\n\n.pds-align-items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.pds-align-items-end {\n  -ms-flex-align: end;\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  -ms-flex-align: baseline;\n  align-items: baseline;\n}";var PdsRow=function(){function n(n){registerInstance(this,n);this.border=false;this.noWrap=false;this.colGapMap={none:"0",xxs:".25rem",xs:".5rem",sm:"1rem",md:"1.5rem",lg:"2.25rem",xl:"3rem",xxl:"4rem"}}n.prototype.render=function(){var n="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.border?"pds-row--border":"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.noWrap?"pds-row--no-wrap":"","\n  ");var a=Object.assign(Object.assign(Object.assign(Object.assign({},this.colGap&&{"--row-gap-x":this.colGap!==undefined&&this.colGap.trim()!==""?this.colGapMap[this.colGap]:"","--row-gap-y":this.colGap!==undefined&&this.colGap.trim()!==""?this.colGapMap[this.colGap]:""}),this.colGapBlock&&{"--row-gap-y":this.colGapBlock!==undefined&&this.colGapBlock.trim()!==""?this.colGapMap[this.colGapBlock]:""}),this.colGapInline&&{"--row-gap-x":this.colGapInline!==undefined&&this.colGapInline.trim()!==""?this.colGapMap[this.colGapInline]:""}),this.minHeight&&{"min-height":this.minHeight});return h(Host,{key:"d9fd2087c959b16ca168ee2b011a3d4bd466c113",class:"pds-row ".concat(n),style:a})};return n}();PdsRow.style=pdsRowCss;export{PdsRow as pds_row};
+import{r as registerInstance,h,H as Host}from"./index-Bf1dou5H.js";var pdsRowCss=":host {\n  --row-gap-y: var(--pine-dimension-125);\n  --row-gap-x: var(--pine-dimension-125);\n  display: block;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -0.5);\n  margin-inline-end: calc(var(--row-gap-x) * -0.5);\n  -webkit-margin-start: calc(var(--row-gap-x) * -0.5);\n  margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -1);\n  -webkit-margin-start: calc(var(--row-gap-x) * -1);\n  margin-inline-start: calc(var(--row-gap-x) * -1);\n}\n@layer layout {\n  .pds-row > * {\n    -webkit-padding-after: calc(var(--row-gap-y));\n    padding-block-end: calc(var(--row-gap-y));\n    -webkit-padding-before: calc(var(--row-gap-y));\n    padding-block-start: calc(var(--row-gap-y));\n    -webkit-padding-end: calc(var(--row-gap-x));\n    padding-inline-end: calc(var(--row-gap-x));\n    -webkit-padding-start: calc(var(--row-gap-x));\n    padding-inline-start: calc(var(--row-gap-x));\n  }\n}\n\n.pds-row--no-wrap {\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.pds-row--border {\n  border: var(--pine-border);\n}\n\n.pds-justify-content-start {\n  -ms-flex-pack: start;\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  -ms-flex-pack: end;\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  -ms-flex-pack: distribute;\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  -ms-flex-pack: space-evenly;\n  justify-content: space-evenly;\n}\n\n.pds-align-items-start {\n  -ms-flex-align: start;\n  align-items: start;\n}\n\n.pds-align-items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.pds-align-items-end {\n  -ms-flex-align: end;\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  -ms-flex-align: baseline;\n  align-items: baseline;\n}";var PdsRow=function(){function n(n){registerInstance(this,n);this.border=false;this.noWrap=false;this.colGapMap={none:"0",xxs:".25rem",xs:".5rem",sm:"1rem",md:"1.5rem",lg:"2.25rem",xl:"3rem",xxl:"4rem","025":"var(--pine-dimension-025)","050":"var(--pine-dimension-050)",100:"var(--pine-dimension-100)",125:"var(--pine-dimension-125)",150:"var(--pine-dimension-150)",200:"var(--pine-dimension-200)",250:"var(--pine-dimension-250)",300:"var(--pine-dimension-300)",350:"var(--pine-dimension-350)",400:"var(--pine-dimension-400)",450:"var(--pine-dimension-450)",500:"var(--pine-dimension-500)",550:"var(--pine-dimension-550)",600:"var(--pine-dimension-600)",650:"var(--pine-dimension-650)",700:"var(--pine-dimension-700)",750:"var(--pine-dimension-750)",800:"var(--pine-dimension-800)"}}n.prototype.render=function(){var n="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.border?"pds-row--border":"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.noWrap?"pds-row--no-wrap":"","\n  ");var e=Object.assign(Object.assign(Object.assign(Object.assign({},this.colGap&&{"--row-gap-x":this.colGap!==undefined&&this.colGap.trim()!==""?this.colGapMap[this.colGap]:"","--row-gap-y":this.colGap!==undefined&&this.colGap.trim()!==""?this.colGapMap[this.colGap]:""}),this.colGapBlock&&{"--row-gap-y":this.colGapBlock!==undefined&&this.colGapBlock.trim()!==""?this.colGapMap[this.colGapBlock]:""}),this.colGapInline&&{"--row-gap-x":this.colGapInline!==undefined&&this.colGapInline.trim()!==""?this.colGapMap[this.colGapInline]:""}),this.minHeight&&{"min-height":this.minHeight});return h(Host,{key:"8e3f5095c33ca22b26dc2cd328ec84663e3bc46b",class:"pds-row ".concat(n),style:e})};return n}();PdsRow.style=pdsRowCss;export{PdsRow as pds_row};
 //# sourceMappingURL=pds-row.entry.js.map

package/dist/esm-es5/pds-row.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-row.entry.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { ~~BoxTShirtSizeType~~ } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in ~~BoxTShirtSizeType~~]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;AAiCvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,~~GAA2C~~;~~AAC1D~~,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;~~SACZ~~;AA4BF;IA1BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;QAEC,MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,WAAW,IAAI;AACtB,YAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE;AACxH,SAAA,EACE,GAAC,IAAI,CAAC,YAAY,IAAI;AACvB,YAAA,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;AAC3H,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAO,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;"}
1	+ {"version":3,"file":"pds-row.entry.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: BoxSpacingType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxSpacingType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n '025': 'var(--pine-dimension-025)',\n '050': 'var(--pine-dimension-050)',\n '100': 'var(--pine-dimension-100)',\n '125': 'var(--pine-dimension-125)',\n '150': 'var(--pine-dimension-150)',\n '200': 'var(--pine-dimension-200)',\n '250': 'var(--pine-dimension-250)',\n '300': 'var(--pine-dimension-300)',\n '350': 'var(--pine-dimension-350)',\n '400': 'var(--pine-dimension-400)',\n '450': 'var(--pine-dimension-450)',\n '500': 'var(--pine-dimension-500)',\n '550': 'var(--pine-dimension-550)',\n '600': 'var(--pine-dimension-600)',\n '650': 'var(--pine-dimension-650)',\n '700': 'var(--pine-dimension-700)',\n '750': 'var(--pine-dimension-750)',\n '800': 'var(--pine-dimension-800)'\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm-es5/pds-select.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-Bf1dou5H.js";import{e as exposeTypeProperty,m as messageId}from"./form-DwjNklzi.js";import{i as danger,e as enlarge}from"./index-D4zJBIgl.js";var pdsSelectTokensCss=":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";var labelCss=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsSelectCss=':host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}';var PdsSelect=function(){function e(e){var i=this;registerInstance(this,e);this.pdsSelectChange=createEvent(this,"pdsSelectChange");this._type="select-one";this.disabled=false;this.multiple=false;this.required=false;this.onSelectUpdate=function(e){var s=e.target;var r=Array.from(s.options).filter((function(e){return e.selected})).map((function(e){return e.value}));if(r.length===1&&!i.multiple){i.value=r[0]}else{i.value=r}i.pdsSelectChange.emit(e)};this.handleSlotChange=function(){var e=i.slotContainer.querySelector("slot");i.selectEl.innerHTML="";var s=e.assignedElements({flatten:true});s.forEach((function(e){if(["OPTION","OPTGROUP"].includes(e.tagName)){var s=e.cloneNode(true);if(s.tagName==="OPTION"&&s.value===i.value){s.selected=true}i.selectEl.appendChild(s)}}));i.updateSelectedOption()}}e.prototype.valueChanged=function(){this.updateSelectedOption();this.updateFormValue()};e.prototype.multipleChanged=function(){this.updateType()};e.prototype.updateType=function(){this._type=this.multiple?"select-multiple":"select-one"};e.prototype.connectedCallback=function(){var e=this;if(this.el.attachInternals){this.internals=this.el.attachInternals()}exposeTypeProperty(this.el,(function(){return e._type}))};e.prototype.componentWillLoad=function(){this.updateType();this.updateSelectedOption()};e.prototype.componentDidLoad=function(){this.updateFormValue()};e.prototype.updateSelectedOption=function(){var e=this;if(this.selectEl){var i=this.selectEl.options;Array.from(i).map((function(i){if(Array.isArray(e.value)){i.selected=e.value.includes(i.value)}else{i.selected=e.value===i.value}}))}};e.prototype.getHelperMessage=function(){return this.helperMessage&&h("p",{class:"pds-select__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage)};e.prototype.getErrorMessage=function(){return this.errorMessage&&h("p",{class:"pds-select__error-message",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{icon:danger,size:"small"}),this.errorMessage)};e.prototype.renderMessages=function(){if(!this.helperMessage&&!this.errorMessage)return null;return h("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage())};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.renderAction=function(){var e=this.el.querySelector('[slot="action"]')!==null;if(e){return h("div",{class:"pds-select__action",part:"action"},h("slot",{name:"action"}))}return null};e.prototype.updateFormValue=function(){var e=this;if(this.internals&&this.internals.setFormValue){var i=this.value;if(Array.isArray(i)){if(i.length>1){var s=new FormData;i.forEach((function(i){return s.append(e.name||"",i)}));this.internals.setFormValue(s)}else{this.internals.setFormValue(i[0]||null)}}else{this.internals.setFormValue(i||null)}if(this.selectEl&&this.internals&&this.internals.setValidity){this.internals.setValidity(this.selectEl.validity,this.selectEl.validationMessage,this.selectEl)}}};e.prototype.formResetCallback=function(){this.value="";this.updateFormValue()};e.prototype.formDisabledCallback=function(e){this.disabled=e};e.prototype.formStateRestoreCallback=function(e){if(typeof e==="string"){this.value=e}else if(e instanceof FormData&&this.name){var i=e.getAll(this.name);if(i.length>1){this.value=i.filter((function(e){return typeof e==="string"}))}else if(i.length===1&&typeof i[0]==="string"){this.value=i[0]}}};e.prototype.render=function(){var e=this;var i=this.el.querySelector('[slot="action"]')!==null;return h(Host,{key:"807a2ecdb0734b8c91936ec4c46e4d4f08572ccb","aria-disabled":this.disabled?"true":null,class:this.classNames(),"has-action":i&&!this.hideLabel?"true":null},h("div",{key:"febbc7cac34855dc9574ba5b1ab1edef4acef664",class:"pds-select"},!this.hideLabel&&h("div",{key:"92d97d395ac108616a67111a8dc25ee554a33c12",class:"pds-select__label-wrapper"},h("label",{key:"42885b3d3d01af615e248655308324ba843dab42",htmlFor:this.componentId},h("span",{key:"24ffeb13dafc9a042c4099442a81d020732f0336",class:this.hideLabel?"visually-hidden":""},this.label)),i&&this.renderAction()),h("select",{key:"7be3328511bb074844715ed649e22ef6d0d9866a","aria-label":this.hideLabel?this.label:undefined,autocomplete:this.autocomplete||undefined,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onChange:this.onSelectUpdate,part:"select",required:this.required,ref:function(i){return e.selectEl=i}}),h("div",{key:"0febab292f965293e53be574c492619294fcbe26","aria-hidden":"true",class:"hidden",ref:function(i){return e.slotContainer=i}},h("slot",{key:"e8022a71a6391c72388a681ee47c8720d751afb8",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&h("pds-icon",{key:"cb196851d9afacd32c81d64922492fda1b937d74",class:"pds-select__select-icon",icon:enlarge})))};Object.defineProperty(e,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"],multiple:["multipleChanged"]}},enumerable:false,configurable:true});return e}();PdsSelect.style=pdsSelectTokensCss+(labelCss+pdsSelectCss);export{PdsSelect as pds_select};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-Bf1dou5H.js";import{e as exposeTypeProperty,m as messageId}from"./form-DwjNklzi.js";import{i as danger,e as enlarge}from"./index-D4zJBIgl.js";var pdsSelectTokensCss=":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";var labelCss=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsSelectCss=':host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}';var PdsSelect=function(){function e(e){var i=this;registerInstance(this,e);this.pdsSelectChange=createEvent(this,"pdsSelectChange");this._type="select-one";this.disabled=false;this.multiple=false;this.required=false;this.onSelectUpdate=function(e){var s=e.target;var r=Array.from(s.options).filter((function(e){return e.selected})).map((function(e){return e.value}));if(r.length===1&&!i.multiple){i.value=r[0]}else{i.value=r}i.pdsSelectChange.emit(e)};this.handleSlotChange=function(){var e=i.slotContainer.querySelector("slot");i.selectEl.innerHTML="";var s=e.assignedElements({flatten:true});s.forEach((function(e){if(["OPTION","OPTGROUP"].includes(e.tagName)){var s=e.cloneNode(true);if(s.tagName==="OPTION"&&s.value===i.value){s.selected=true}i.selectEl.appendChild(s)}}));i.updateSelectedOption()}}e.prototype.valueChanged=function(){this.updateSelectedOption();this.updateFormValue()};e.prototype.multipleChanged=function(){this.updateType()};e.prototype.updateType=function(){this._type=this.multiple?"select-multiple":"select-one"};e.prototype.connectedCallback=function(){var e=this;if(this.el.attachInternals){this.internals=this.el.attachInternals()}exposeTypeProperty(this.el,(function(){return e._type}))};e.prototype.componentWillLoad=function(){this.updateType();this.updateSelectedOption()};e.prototype.componentDidLoad=function(){this.updateFormValue()};e.prototype.updateSelectedOption=function(){var e=this;if(this.selectEl){var i=this.selectEl.options;Array.from(i).map((function(i){if(Array.isArray(e.value)){i.selected=e.value.includes(i.value)}else{i.selected=e.value===i.value}}))}};e.prototype.getHelperMessage=function(){return this.helperMessage&&h("p",{class:"pds-select__helper-message",id:messageId(this.componentId,"helper")},this.helperMessage)};e.prototype.getErrorMessage=function(){return this.errorMessage&&h("p",{class:"pds-select__error-message",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{icon:danger,size:"small"}),this.errorMessage)};e.prototype.renderMessages=function(){if(!this.helperMessage&&!this.errorMessage)return null;return h("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage())};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.renderAction=function(){var e=this.el.querySelector('[slot="action"]')!==null;if(e){return h("div",{class:"pds-select__action",part:"action"},h("slot",{name:"action"}))}return null};e.prototype.updateFormValue=function(){var e=this;if(this.internals&&this.internals.setFormValue){var i=this.value;if(Array.isArray(i)){if(i.length>1){var s=new FormData;i.forEach((function(i){return s.append(e.name||"",i)}));this.internals.setFormValue(s)}else{this.internals.setFormValue(i[0]||null)}}else{this.internals.setFormValue(i||null)}if(this.selectEl&&this.internals&&this.internals.setValidity){this.internals.setValidity(this.selectEl.validity,this.selectEl.validationMessage,this.selectEl)}}};e.prototype.formResetCallback=function(){this.value="";this.updateFormValue()};e.prototype.formDisabledCallback=function(e){this.disabled=e};e.prototype.formStateRestoreCallback=function(e){if(typeof e==="string"){this.value=e}else if(e instanceof FormData&&this.name){var i=e.getAll(this.name);if(i.length>1){this.value=i.filter((function(e){return typeof e==="string"}))}else if(i.length===1&&typeof i[0]==="string"){this.value=i[0]}}};e.prototype.render=function(){var e=this;var i=this.el.querySelector('[slot="action"]')!==null;return h(Host,{key:"b3be9584f5fddb4f1a55517f54c1713f99881217","aria-disabled":this.disabled?"true":null,class:this.classNames(),"has-action":i&&!this.hideLabel?"true":null},h("div",{key:"89ea75fbce2c1a0e5b4b744f10bacfd84db73773",class:"pds-select"},!this.hideLabel&&h("div",{key:"bf1c8c06c96d941d7d93b960de9279df4520f10f",class:"pds-select__label-wrapper"},h("label",{key:"eb7beaa77f9f2be302e7b14642c6c5153db4cebe",htmlFor:this.componentId},h("span",{key:"47a737210afc1c86431c123aa2449827f0b9755d",class:this.hideLabel?"visually-hidden":""},this.label)),i&&this.renderAction()),h("select",{key:"f510d59fe20742e210c4fb949d468184bb2f12cc","aria-label":this.hideLabel?this.label:undefined,autocomplete:this.autocomplete||undefined,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onChange:this.onSelectUpdate,part:"select",required:this.required,ref:function(i){return e.selectEl=i}}),h("div",{key:"7653404278cc8446de96e3e1fdbfcf47ea6b8edc","aria-hidden":"true",class:"hidden",ref:function(i){return e.slotContainer=i}},h("slot",{key:"04626b23972a2d3fe73b09ea8fbe94021e89d98d",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&h("pds-icon",{key:"0d97224a202e0a6e7ad36e2b8a027975ff22079d",class:"pds-select__select-icon",icon:enlarge})))};Object.defineProperty(e,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"],multiple:["multipleChanged"]}},enumerable:false,configurable:true});return e}();PdsSelect.style=pdsSelectTokensCss+(labelCss+pdsSelectCss);export{PdsSelect as pds_select};
 //# sourceMappingURL=pds-select.entry.js.map

package/dist/esm-es5/pds-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-select.entry.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --pds-select-background: var(--pine-color-background-container);\n --pds-select-border: var(--pine-border);\n --pds-select-border-radius: var(--pine-dimension-125);\n --pds-select-border-radius-start-end: var(--pine-dimension-125);\n --pds-select-border-radius-start-start: var(--pine-dimension-125);\n --pds-select-border-radius-end-end: var(--pine-dimension-125);\n --pds-select-border-radius-end-start: var(--pine-dimension-125);\n --pds-select-min-height: 36px;\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n .hidden,\n :host([hidden]) {\n display: none;\n }\n}\n\n.pds-select {\n display: grid;\n flex-direction: column;\n grid-template-areas:\n 'label label'\n 'field field'\n 'message message';\n grid-template-columns: 1fr minmax(2rem, min-content);\n grid-template-rows: min-content min-content min-content;\n position: relative;\n width: 100%;\n}\n\n.pds-select__label-wrapper {\n align-items: center;\n display: flex;\n grid-area: label;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n margin-block-end: 0;\n}\n\nselect {\n appearance: none;\n background-color: var(--pds-select-background);\n border: var(--pds-select-border);\n border-radius: var(--pds-select-border-radius);\n border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n font: var(--pine-typography-body);\n grid-area: field;\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-select-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n padding-inline-end: var(--pine-dimension-450);\n position: relative;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:has(~ .pds-select__message .pds-select__error-message) {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host(.is-invalid) {\n select {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n grid-area: message;\n}\n\n.pds-select__select-icon {\n align-items: center;\n display: flex;\n grid-column: -1 / -2;\n grid-row: 2 / 3;\n height: var(--pds-select-min-height);\n pointer-events: none;\n position: relative;\n z-index: var(--pine-z-index-raised);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n private internals?: ElementInternals;\n private _type: 'select-one' \| 'select-multiple' = 'select-one';\n\n @Element() el: HTMLPdsSelectElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Visually hides the label text for instances where only the select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n\n /*\n Emitted when a keyboard input occurs.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n this.updateFormValue();\n }\n\n @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\n this.updateSelectedOption();\n }\n\n componentDidLoad() {\n // Set initial form value\n this.updateFormValue();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n /\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.value;\n\n // Handle multi-select arrays by converting to FormData or comma-separated string\n if (Array.isArray(value)) {\n if (value.length > 1) {\n // For multiple values, create FormData with multiple entries\n const formData = new FormData();\n value.forEach(val => formData.append(this.name \|\| '', val));\n this.internals.setFormValue(formData);\n } else {\n // Single value in array, use the string value\n this.internals.setFormValue(value[0] \|\| null);\n }\n } else {\n // Single string value\n this.internals.setFormValue(value \|\| null);\n }\n\n // Set validity based on native select validation\n if (this.selectEl && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.selectEl.validity,\n this.selectEl.validationMessage,\n this.selectEl\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value(s) from FormData using the select's name\n const values = state.getAll(this.name);\n if (values.length > 1) {\n // Multi-select: convert to string array\n this.value = values.filter(v => typeof v === 'string') as string[];\n } else if (values.length === 1 && typeof values[0] === 'string') {\n // Single select: use string value\n this.value = values[0];\n }\n }\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onChange={this.onSelectUpdate}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-select.entry.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --pds-select-background: var(--pine-color-background-container);\n --pds-select-border: var(--pine-border);\n --pds-select-border-radius: var(--pine-dimension-125);\n --pds-select-border-radius-start-end: var(--pine-dimension-125);\n --pds-select-border-radius-start-start: var(--pine-dimension-125);\n --pds-select-border-radius-end-end: var(--pine-dimension-125);\n --pds-select-border-radius-end-start: var(--pine-dimension-125);\n --pds-select-min-height: 36px;\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n .hidden,\n :host([hidden]) {\n display: none;\n }\n}\n\n.pds-select {\n display: grid;\n flex-direction: column;\n grid-template-areas:\n 'label label'\n 'field field'\n 'message message';\n grid-template-columns: 1fr minmax(2rem, min-content);\n grid-template-rows: min-content min-content min-content;\n position: relative;\n width: 100%;\n}\n\n.pds-select__label-wrapper {\n align-items: center;\n display: flex;\n grid-area: label;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n margin-block-end: 0;\n}\n\nselect {\n appearance: none;\n background-color: var(--pds-select-background);\n border: var(--pds-select-border);\n border-radius: var(--pds-select-border-radius);\n border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n font: var(--pine-typography-body);\n grid-area: field;\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-select-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n padding-inline-end: var(--pine-dimension-450);\n position: relative;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:has(~ .pds-select__message .pds-select__error-message) {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host(.is-invalid) {\n select {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host([highlight]:not(.is-disabled):not(.is-invalid)) {\n select {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover:not(:disabled) {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n }\n\n .pds-select__select-icon {\n color: var(--pine-color-text-accent);\n }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n grid-area: message;\n}\n\n.pds-select__select-icon {\n align-items: center;\n display: flex;\n grid-column: -1 / -2;\n grid-row: 2 / 3;\n height: var(--pds-select-min-height);\n pointer-events: none;\n position: relative;\n z-index: var(--pine-z-index-raised);\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n private internals?: ElementInternals;\n private _type: 'select-one' \| 'select-multiple' = 'select-one';\n\n @Element() el: HTMLPdsSelectElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Visually hides the label text for instances where only the select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n Applies highlight styling to the select field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n\n /*\n Emitted when a keyboard input occurs.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n this.updateFormValue();\n }\n\n @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\n this.updateSelectedOption();\n }\n\n componentDidLoad() {\n // Set initial form value\n this.updateFormValue();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n /\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.value;\n\n // Handle multi-select arrays by converting to FormData or comma-separated string\n if (Array.isArray(value)) {\n if (value.length > 1) {\n // For multiple values, create FormData with multiple entries\n const formData = new FormData();\n value.forEach(val => formData.append(this.name \|\| '', val));\n this.internals.setFormValue(formData);\n } else {\n // Single value in array, use the string value\n this.internals.setFormValue(value[0] \|\| null);\n }\n } else {\n // Single string value\n this.internals.setFormValue(value \|\| null);\n }\n\n // Set validity based on native select validation\n if (this.selectEl && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.selectEl.validity,\n this.selectEl.validationMessage,\n this.selectEl\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value(s) from FormData using the select's name\n const values = state.getAll(this.name);\n if (values.length > 1) {\n // Multi-select: convert to string array\n this.value = values.filter(v => typeof v === 'string') as string[];\n } else if (values.length === 1 && typeof values[0] === 'string') {\n // Single select: use string value\n this.value = values[0];\n }\n }\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onChange={this.onSelectUpdate}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}