npm - @pine-ds/core - Versions diffs - 3.1.0 → 3.3.0 - Mend

@pine-ds/core 3.1.0 → 3.3.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 (705) hide show

package/components/pds-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-input.js","mappings":"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","names":["PdsInput","__stencil_proxyCustomElement"],"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 display: inline;\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.pds-input {\n display: flex;\n flex-direction: column;\n}\n\n.pds-input__label {\n margin-block-end: var(--pine-dimension-2xs)\n}\n\n.pds-input__field {\n background: var(--pine-color-background-container);\n border: 1px solid var(--pine-color-border);\n border-radius: var(--pine-dimension-125);\n color: var(--pine-color-text-active);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\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 /* stylelint-disable /\n &::-webkit-input-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n\n &:-ms-input-placeholder {\n color: var(--pine-color-text-placeholder-disabled);\n }\n / stylelint-enable /\n }\n\n &:hover {\n border-color: var(--pine-color-border-hover);\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 / stylelint-disable /\n &::-webkit-input-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &::-moz-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &:-ms-input-placeholder {\n color: var(--pine-color-text-placeholder);\n }\n / stylelint-enable /\n\n &.is-invalid {\n background-color: var(--pine-input-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-input__error-message,\n.pds-input__helper-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-input__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","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\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})\nexport class PdsInput {\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n /\n The value of the input when the input is focused.\n /\n private focusedValue?: string \| number \| null;\n\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n @Element() el!: HTMLPdsInputElement;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\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 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 Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name?: 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 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 if the input has focus.\n /\n @State() hasFocus = false;\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\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 \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 componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n }\n\n private inputClassNames() {\n const classNames = ['pds-input__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n >\n <div class=\"pds-input\">\n {this.label &&\n <label class=\"pds-input__label\" htmlFor={this.componentId}>{this.label}</label>\n }\n <input\n class={this.inputClassNames()}\n ref={(input) => this.nativeInput = input}\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.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.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-input.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,uEAAuE;;ACAjG,MAAM,QAAQ,GAAG,oTAAoT;;ACArU,MAAM,WAAW,GAAG,u/RAAu/R;;MCmB9/RA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;;;;AAOU,QAAA,IAAmB,CAAA,mBAAA,GAAe,EAAE;AACpC,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAQ3B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;AAEG;AACM,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAE3B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA8H1B;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,MAAM;AAErB;;AAEG;AACoB,QAAA,IAAK,CAAA,KAAA,GAA4B,EAAE;AAE1D;;AAEG;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA+GjB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAAS,KAAI;AACnC,YAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC;YAClD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;;AAEhC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AAC1B,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,EAAS,KAAI;AACpC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AAC1B,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YAErB,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,EAAE;AACpC;;;AAGG;AACH,gBAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;;AAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAAc,KAAI;AACxC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;AAE9B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,SAAC;AAEO,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAChC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACzB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAC1B,SAAC;AAoHF;AA/XC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;;;IAgHpB,iBAAiB,GAAA;QACvB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW;AAC7C,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,CAAC;;AAGjE,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW;AAC7C,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,CAAC;;AAEnE,SAAC,CAAC;;IAGI,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACE,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,EAAA,EACzF,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAS,CAAA,CACrE;;AAGV,QAAA,OAAO,IAAI;;IAGL,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACE,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,EAAA,EACzF,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAS,CAAA,CACrE;;AAGV,QAAA,OAAO,IAAI;;IAGL,aAAa,GAAA;AACnB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI;QACrE,IAAI,UAAU,EAAE;YACd,QACE,WAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACxB;;AAGV,QAAA,OAAO,IAAI;;IAGL,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACE,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB;;AAGV,QAAA,OAAO,IAAI;;IAGb,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACnB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAClC;AACD,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAClE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAClE,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI;AACpE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;;AAGlE,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ;;IAGvC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,kBAAkB,GAAA;QAChB,IAAI,CAAC,iBAAiB,EAAE;;IAIhB,eAAe,GAAA;QACvB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI;AAErD;;;AAGG;AACH,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,SAAS,GAAG,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,cAAhB,gBAAgB,GAAI,QAAQ,GAAG,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC;;IAIjG,YAAY,GAAA;AACpB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW;AACpC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACnE,YAAA,WAAW,CAAC,KAAK,GAAG,KAAK;;;IAIrB,QAAQ,GAAA;AACd,QAAA,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE;;AA4C/F;;AAEG;AACK,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;AACtB,QAAA,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;AAEzD,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;;AAGjD;;AAEG;AACK,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;;AAGtB,QAAA,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;AAEzD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,OAAO,GAAG,KAAK,EACf,KAAK,GACN,GAAG,IAAI;AAER,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,MAAM,mBAAmB,GAAG;AAC1B,YAAA,0BAA0B,EAAE,IAAI;YAChC,WAAW,EAAE,IAAI,CAAC,QAAQ;AAC1B,YAAA,WAAW,EAAE,OAAO,IAAI,CAAC,CAAC,YAAY;AACtC,YAAA,aAAa,EAAE,QAAQ;YACvB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC7B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAChC,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAC9B,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAC7B,aAAA,EAAA,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EAE1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACnB,KAAK,KACJ,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAC,kBAAkB,EAAA,EAClD,KAAK,EACL,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,+BAA+B,EAAU,EAAA,IAAA,CAAA,CACjE,CACT,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC5B,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,YAAY,EAAE,EACpB,CAAA,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAC1C,KAAK,EAAC,kBAAkB,EACN,kBAAA,EAAA,iBAAiB,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC,EAAA,cAAA,EAC1D,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IACnC,IAAI,CAAC,mBAAmB,CAC5B,CAAA,EACD,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,YAAY,EAAE,CAChB,EAEL,aAAa,KACZ,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAE,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,EACtE,EAAA,aAAa,CACZ,CACL,EAEA,YAAY,KACX,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAC,EAAE,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,EACrE,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,YAAY,CACX,CACL,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsInput","__stencil_proxyCustomElement"],"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: var(--pine-dimension-xs);\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: calc(var(--pine-dimension-450) + 2px);\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: 1;\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 }\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-end-end: var(--pine-dimension-none);\n --pds-button-border-radius-start-end: var(--pine-dimension-none);\n --pds-button-min-height: var(--pine-dimension-450);\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-end-start: var(--pine-dimension-none);\n --pds-button-border-radius-start-start: var(--pine-dimension-none);\n --pds-button-min-height: var(--pine-dimension-450);\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: var(--pine-dimension-450);\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: var(--pine-dimension-450);\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([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 gap: var(--pine-dimension-2xs);\n}\n\n.pds-input__label {\n color: var(--pine-color-text-active);\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: var(--pine-dimension-2xs);\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\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 }\n }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n font: var(--pine-typography-body-sm-medium);\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","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 /\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n})\nexport class PdsInput {\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\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 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 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 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 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\n // Store the original pdsInput event emitter\n this.originalPdsInput = this.pdsInput;\n }\n\n componentDidLoad() {\n this.debounceChanged();\n this.updateAddonWidths();\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\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 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 >\n <div class=\"pds-input\">\n {label && (\n <label htmlFor={componentId} class=\"pds-input__label\">\n {label}\n {this.required && <span class=\"pds-input__required-indicator\"> </span>}\n </label>\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"],"version":3}

package/components/pds-link.js CHANGED Viewed

@@ -1,70 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { l as launch } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-const pdsLinkCss = ":host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{text-decoration:none}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}";
-const PdsLink$1 = /*@__PURE__*/ proxyCustomElement(class PdsLink extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Determines whether the link should open in a new tab.
-         * @defaultValue false
-         */
-        this.external = false;
-        /**
-         * Sets the link variant styles.
-         * @defaultValue inline
-         */
-        this.variant = 'inline';
-        /**
-         * The font size of the link's text.
-         * @defaultValue lg
-         */
-        this.fontSize = 'lg';
-    }
-    classNames() {
-        const classNames = ['pds-link'];
-        if (this.fontSize) {
-            classNames.push('pds-link--' + this.fontSize);
-        }
-        if (this.variant) {
-            classNames.push('pds-link--' + this.variant);
-        }
-        return classNames.join(' ');
-    }
-    render() {
-        return (h("a", { key: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
-            h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', icon: launch, size: this.fontSize })));
-    }
-    static get style() { return pdsLinkCss; }
-}, [1, "pds-link", {
-        "componentId": [1, "component-id"],
-        "external": [4],
-        "variant": [1],
-        "fontSize": [1, "font-size"],
-        "href": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-link", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsLink$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { P as PdsLink$1, d as defineCustomElement$1 } from './pds-link2.js';
 const PdsLink = PdsLink$1;
 const defineCustomElement = defineCustomElement$1;

package/components/pds-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,khCAAkhC;;MCaxhCA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAWE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAsC5C;IA/BS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG7B,MAAM,GAAA;AAEJ,QAAA,QACE,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,IAAI,EAAC,MAAM,EAAA,EAEX,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[~~"PdsLink","__stencil_proxyCustomElement"~~],"sources":[~~"src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"~~],"sourcesContent":[":host {\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--pine-color-text);\n display: inline-flex;\n font-weight: var(--pine-font-weight-medium);\n\n &:focus-visible {\n border-radius: var(--pine-dimension-2xs);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width-thick);\n position: relative;\n }\n\n &:hover {\n text-decoration: none;\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--pine-font-size-body-xs);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--md {\n font-size: var(--pine-font-size-body-sm);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--lg {\n font-size: var(--pine-font-size-body-md);\n\n pds-icon {\n height: var(--pine-dimension-sm);\n width: var(--pine-dimension-sm);\n }\n}\n\n.pds-link--plain {\n text-decoration: none;\n\n &:hover {\n color: var(--pine-color-text-hover);\n text-decoration: underline;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/*\n @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the href will be used as a fallback.\n /\n@Component({\n tag: 'pds-link',\n styleUrls: ['pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines whether the link should open in a new tab.\n * @defaultValue false\n /\n @Prop() external = false;\n\n /\n Sets the link variant styles.\n * @defaultValue inline\n /\n @Prop() variant: 'inline' \| 'plain' = 'inline';\n\n /\n The font size of the link's text.\n * @defaultValue lg\n /\n @Prop() fontSize: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /\n The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n target={this.external ? '_blank' : undefined}\n part=\"~~link\"\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"~~version":3}
1	+ {"file":"pds-link.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/pds-link2.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as setColor } from './utils.js';
+import { l as launch } from './index2.js';
+import { d as defineCustomElement$1 } from './pds-icon2.js';
+const pdsLinkCss = ":host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pine-color-text));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pine-color-text-hover));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-grey-150)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}";
+const PdsLink = /*@__PURE__*/ proxyCustomElement(class PdsLink extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Determines whether the link should open in a new tab.
+         * @defaultValue false
+         */
+        this.external = false;
+        /**
+         * Sets the link variant styles.
+         * @defaultValue inline
+         */
+        this.variant = 'inline';
+        /**
+         * The font size of the link's text.
+         * @defaultValue lg
+         */
+        this.fontSize = 'lg';
+    }
+    classNames() {
+        const classNames = ['pds-link'];
+        if (this.fontSize) {
+            classNames.push('pds-link--' + this.fontSize);
+        }
+        if (this.variant) {
+            classNames.push('pds-link--' + this.variant);
+        }
+        return classNames.join(' ');
+    }
+    setLinkStyles() {
+        if (!this.color)
+            return;
+        const linkColors = {
+            secondary: 'var(--pine-color-text-primary)',
+            accent: 'var(--pine-color-accent)',
+            danger: 'var(--pine-color-danger)',
+        };
+        const linkStyles = setColor(this.color, linkColors);
+        return linkStyles;
+    }
+    render() {
+        return (h("a", { key: 'f2b3e7f26b833f7b187fce6f36c392415e2499df', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, h("slot", { key: 'c85c0add786ab8a90f7cb0d12b75d65a51b8e313' }, this.href), this.external &&
+            h("pds-icon", { key: '2ce9fa8d29168659546bc95b0633815978142bbb', icon: launch, size: this.fontSize })));
+    }
+    static get style() { return pdsLinkCss; }
+}, [1, "pds-link", {
+        "color": [1],
+        "componentId": [1, "component-id"],
+        "external": [4],
+        "variant": [1],
+        "fontSize": [1, "font-size"],
+        "href": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-link", "pds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsLink);
+            }
+            break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { PdsLink as P, defineCustomElement as d };
+//# sourceMappingURL=pds-link2.js.map
+//# sourceMappingURL=pds-link2.js.map

package/components/pds-link2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pds-link2.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,u/CAAu/C;;MCc7/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAgBE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAqD5C;IA9CS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AAEjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,MAAM,EAAE,0BAA0B;SACnC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAEnD,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;AAEJ,QAAA,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n display: inline;\n\n pds-icon {\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-link {\n align-items: center;\n color: var(--color, var(--pine-color-text));\n display: inline-flex;\n font-weight: var(--pine-font-weight-medium);\n\n &:focus-visible {\n border-radius: var(--pine-dimension-2xs);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width-thick);\n position: relative;\n }\n\n &:hover {\n color: var(--color, var(--pine-color-text-hover));\n text-decoration: none;\n }\n\n :host([color=\"secondary\"]) & {\n color: var(--pine-color-text-primary);\n\n &:hover {\n color: var(--pine-color-grey-150);\n }\n }\n\n :host([color=\"accent\"]) & {\n color: var(--pine-color-accent);\n\n &:hover {\n color: var(--pine-color-accent-hover);\n }\n }\n\n :host([color=\"danger\"]) & {\n color: var(--pine-color-danger);\n\n &:hover {\n color: var(--pine-color-danger-hover);\n }\n }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n font-size: var(--pine-font-size-body-xs);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--md {\n font-size: var(--pine-font-size-body-sm);\n\n pds-icon {\n height: var(--pine-dimension-xs);\n width: var(--pine-dimension-xs);\n }\n}\n\n.pds-link--lg {\n font-size: var(--pine-font-size-body-md);\n\n pds-icon {\n height: var(--pine-dimension-sm);\n width: var(--pine-dimension-sm);\n }\n}\n\n.pds-link--plain {\n text-decoration: none;\n\n &:hover {\n color: var(--pine-color-text-hover);\n text-decoration: underline;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n tag: 'pds-link',\n styleUrls: ['pds-link.scss'],\n shadow: true,\n})\nexport class PdsLink {\n /**\n * Sets the link color.\n */\n @Prop() color?: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether the link should open in a new tab.\n * @defaultValue false\n */\n @Prop() external = false;\n\n /**\n * Sets the link variant styles.\n * @defaultValue inline\n */\n @Prop() variant: 'inline' | 'plain' = 'inline';\n\n /**\n * The font size of the link's text.\n * @defaultValue lg\n */\n @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n /**\n * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n */\n @Prop() href!: string;\n\n private classNames() {\n const classNames = ['pds-link'];\n\n if (this.fontSize) {\n classNames.push('pds-link--' + this.fontSize);\n }\n\n if (this.variant) {\n classNames.push('pds-link--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n private setLinkStyles() {\n if (!this.color) return;\n\n const linkColors = {\n secondary: 'var(--pine-color-text-primary)',\n accent: 'var(--pine-color-accent)',\n danger: 'var(--pine-color-danger)',\n }\n\n const linkStyles = setColor(this.color, linkColors);\n\n return linkStyles;\n }\n\n render() {\n\n return (\n <a\n class={this.classNames()}\n href={this.href}\n id={this.componentId}\n part=\"link\"\n target={this.external ? '_blank' : undefined}\n style={this.setLinkStyles()}\n >\n <slot>{this.href}</slot>\n {this.external &&\n <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n }\n </a>\n );\n }\n}\n"],"version":3}

package/components/pds-loader2.js CHANGED Viewed

@@ -48,7 +48,7 @@ const PdsLoader = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: 'c01b34ac171a5581e1456737f17043cf8b47af8e', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'ffd9e050fef503f1614c06896b8d888202df8656', class: "pds-loader--spinner" }, h("svg", { key: '056b84ca6f89f6dc93f72d115c9cad3efa9f468d', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '85bfeab6bc686de25e4156154273067fbcb3ba0b' }, h("linearGradient", { key: 'd32d0c03f7f851cd56365af16298c4da0db74ec8', id: "spinner-secondHalf" }, h("stop", { key: '1113756349854bc4ab581c0ce282dcd54def3891', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0f649b9e828409cab1b67a26d9a35d35e9fe7b0a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '4aabb11799007ae40d7e112696809b35b652bb46', id: "spinner-firstHalf" }, h("stop", { key: '9624d9de9eaba0f29264d3b76bc27287bbc1b68b', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '37fd5de86c5db30731b4dc39b1cd2cb6afbe7393', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '06ccf17d191612cd5566714e69299a9e749618da', class: "pds-loader__spinner-path" }, h("path", { key: '9b5556b7c20e3c0f7effaa6d09120baa0b07e614', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'aacb689fcace08aa9bee3c3eb2ee1b571ed1b9ee', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '875a3faf04e718f095d616db6a2cd1c7bcde2f14', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '515a530c8acd7807d45c3f54ff1d264002e3e627', class: "pds-loader--typing" }, h("span", { key: 'bbb55e71064ab200ca388360a8a0986eda5b2008' }), h("span", { key: '77f42ba8124be61565479f21ed9253d928da49b3' }), h("span", { key: 'f8ef81fc9a9bf1a24f0bb3501c49291fe5028c5a' }))), h("div", { key: 'fd73795dfb15359ff655ed6abf4b2e41faa079a7', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'cdfb46d54431a84b3ceaaaf94d48f69c42956c8d', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '5f9677b6338e4b1d7df0ab3182c91ecae4c5c857', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '5083b0fd6d468439dd0faa4375107c2cddc49812', class: "pds-loader--spinner" }, h("svg", { key: '689659c659901091215e3745e1778613dc8c64dc', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '2f20b260a1155a966abb9f8d0541374d707d4c09' }, h("linearGradient", { key: '2049a48645d6c02c3e5b4a659cb3767af297172a', id: "spinner-secondHalf" }, h("stop", { key: '8a51fd7117b39505d6e40ded168c1a323f19d791', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7a5273675a64eb794b8bbe513fa3fbfddb2b8b6b', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '12ea88879ebbd8c207e9d5e5838505796c747fd6', id: "spinner-firstHalf" }, h("stop", { key: '08a2198273017b0feeb16ec93a1a1daed34ada94', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '02ac704dd21ba49f579f0f305123b53333ae669e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'feb3d05f93da9f8d67181864d318678d2930b1dd', class: "pds-loader__spinner-path" }, h("path", { key: 'dde73e34e0a78bdd87f33212eb21a25e0c212b4f', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ce0c541df6294f6b08772d89cf791f0e6342ec0b', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '25fae107003b2c9172131b54a97ecd9780ac4e42', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '7b467d87b5d4c0dbd96a277868bc587544259cff', class: "pds-loader--typing" }, h("span", { key: '1e0833eec5fc48e990bbfa7ce4e724a1eee019ad' }), h("span", { key: 'ef517f1aafca68e77fed199552a7a468ac8b37b2' }), h("span", { key: 'b6379ba5b3e1fb88c5ce0478bb51bf4471bd6dd1' }))), h("div", { key: '6148a67bddb3749b8778f5a97d381f01096fda23', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '774fd7274d111b17afe9ef0740e64448c6fcd8d4', name: "label" }, "Loading..."))));
     }
     static get style() { return pdsLoaderCss; }
 }, [1, "pds-loader", {

package/components/pds-modal-content.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+interface PdsModalContent extends Components.PdsModalContent, HTMLElement {}
+export const PdsModalContent: {
+    prototype: PdsModalContent;
+    new (): PdsModalContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-modal-content.js ADDED Viewed

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const pdsModalContentCss = "pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;width:100%}pds-modal-content:has(.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200);-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-grey-200);border-block-start:1px solid var(--pine-color-grey-200)}pds-modal-content:has(.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-grey-200);border-block-end:1px solid var(--pine-color-grey-200)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;overflow-y:auto;width:100%}";
+const PdsModalContent$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalContent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * The border style for the content area. Automatically set based on available space of the modal content.
+         * @default 'none'
+         */
+        this.border = 'none';
+        this.contentMaxHeight = '60vh';
+    }
+    componentDidLoad() {
+        const slotContent = this.el.firstElementChild;
+        const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;
+        this.border = isScrollable ? 'both' : 'none';
+        this.calculateMaxHeight();
+        window.addEventListener('resize', this.calculateMaxHeight.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.calculateMaxHeight.bind(this));
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Calculates the max-height based on header and footer heights
+     */
+    calculateMaxHeight() {
+        // Find the modal element (parent of this component)
+        const modalElement = this.el.closest('pds-modal');
+        if (!modalElement)
+            return;
+        setTimeout(() => {
+            // Find header and footer elements
+            const headerElement = modalElement.querySelector('pds-modal-header');
+            const footerElement = modalElement.querySelector('pds-modal-footer');
+            // Get header and footer heights
+            const headerHeight = headerElement ? headerElement.offsetHeight : 0;
+            const footerHeight = footerElement ? footerElement.offsetHeight : 0;
+            // Set the max-height as a calculation
+            if (headerHeight > 0 || footerHeight > 0) {
+                // Calculate the available height by subtracting:
+                // 1. Header and footer heights
+                // 2. Modal padding (48px)
+                // 3. Additional space for modal positioning (6vh)
+                // 4. Extra adjustment for perfect fit (50px)
+                const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation
+                const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;
+                // Set the content max height
+                this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;
+                // Apply the style directly to ensure it takes effect
+                const contentElement = this.el.querySelector('.pds-modal-content');
+                if (contentElement) {
+                    contentElement.style.maxHeight = this.contentMaxHeight;
+                }
+            }
+            else {
+                this.contentMaxHeight = '60vh'; // Default fallback
+            }
+        }, 100); // Delay to ensure DOM is fully rendered
+        // Set up mutation observer if not already done
+        if (!this.mutationObserver && modalElement) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.calculateMaxHeight();
+            });
+            // Observe changes to the modal's children
+            this.mutationObserver.observe(modalElement, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class']
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '6b214e3462d8e1e1cb58d6c0075b3143e0db2d51' }, h("div", { key: '2f6a2daeb09a99f096cd46230813fe1b9a6950e9', class: {
+                'pds-modal-content': true,
+                [`pds-modal-content--border-${this.border}`]: true
+            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, h("slot", { key: '8392cc48a2dba0f32d4a83e642bd3f295832251b' }))));
+    }
+    get el() { return this; }
+    static get style() { return pdsModalContentCss; }
+}, [4, "pds-modal-content", {
+        "border": [513],
+        "contentMaxHeight": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-modal-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-modal-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsModalContent$1);
+            }
+            break;
+    } });
+}
+const PdsModalContent = PdsModalContent$1;
+const defineCustomElement = defineCustomElement$1;
+export { PdsModalContent, defineCustomElement };
+//# sourceMappingURL=pds-modal-content.js.map
+//# sourceMappingURL=pds-modal-content.js.map

package/components/pds-modal-content.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pds-modal-content.js","mappings":"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","names":["PdsModalContent","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-content/pds-modal-content.scss?tag=pds-modal-content","src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"sourcesContent":["pds-modal-content {\n display: block;\n flex: 1 1 auto;\n overflow-y: auto;\n width: 100%;\n\n &:has(.pds-modal-content--border-none) {\n border: 0;\n }\n\n &:has(.pds-modal-content--border-both) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content--border-top) {\n border-block-start: 1px solid var(--pine-color-grey-200);\n }\n\n &:has(.pds-modal-content--border-bottom) {\n border-block-end: 1px solid var(--pine-color-grey-200);\n }\n}\n\n.pds-modal-content {\n display: block;\n flex: 1 1 auto;\n // Max height is set via inline styles based on header and footer heights\n min-height: 0;\n overflow-y: auto;\n width: 100%;\n\n}\n","import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\ndeclare global {\n interface HTMLPdsModalContentElement extends HTMLElement {\n border: 'none' | 'both';\n }\n}\n\n@Component({\n tag: 'pds-modal-content',\n styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n @Element() el: HTMLPdsModalContentElement;\n\n /**\n * The border style for the content area. Automatically set based on available space of the modal content.\n * @default 'none'\n */\n @Prop({ reflect: true }) border: 'none' | 'both' | 'top' | 'bottom' = 'none';\n\n @State() contentMaxHeight: string = '60vh';\n\n componentDidLoad() {\n const slotContent = this.el.firstElementChild as HTMLElement;\n const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;\n this.border = isScrollable ? 'both' : 'none';\n\n this.calculateMaxHeight();\n\n window.addEventListener('resize', this.calculateMaxHeight.bind(this));\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.calculateMaxHeight.bind(this));\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n /**\n * Calculates the max-height based on header and footer heights\n */\n private mutationObserver: MutationObserver;\n\n /**\n * Calculates the max-height based on header and footer heights\n */\n private calculateMaxHeight() {\n // Find the modal element (parent of this component)\n const modalElement = this.el.closest('pds-modal');\n if (!modalElement) return;\n\n setTimeout(() => {\n // Find header and footer elements\n const headerElement = modalElement.querySelector('pds-modal-header');\n const footerElement = modalElement.querySelector('pds-modal-footer');\n\n // Get header and footer heights\n const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n // Set the max-height as a calculation\n if (headerHeight > 0 || footerHeight > 0) {\n // Calculate the available height by subtracting:\n // 1. Header and footer heights\n // 2. Modal padding (48px)\n // 3. Additional space for modal positioning (6vh)\n // 4. Extra adjustment for perfect fit (50px)\n const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation\n const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n // Set the content max height\n this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n // Apply the style directly to ensure it takes effect\n const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n if (contentElement) {\n contentElement.style.maxHeight = this.contentMaxHeight;\n }\n } else {\n this.contentMaxHeight = '60vh'; // Default fallback\n }\n }, 100); // Delay to ensure DOM is fully rendered\n\n // Set up mutation observer if not already done\n if (!this.mutationObserver && modalElement) {\n this.mutationObserver = new MutationObserver(() => {\n this.calculateMaxHeight();\n });\n\n // Observe changes to the modal's children\n this.mutationObserver.observe(modalElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n });\n }\n }\n render() {\n return (\n <Host>\n <div\n class={{\n 'pds-modal-content': true,\n [`pds-modal-content--border-${this.border}`]: true\n }}\n style={{ maxHeight: this.contentMaxHeight }}\n tabindex=\"-1\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}"],"version":3}

package/components/pds-modal-footer.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+interface PdsModalFooter extends Components.PdsModalFooter, HTMLElement {}
+export const PdsModalFooter: {
+    prototype: PdsModalFooter;
+    new (): PdsModalFooter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-modal-footer.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+const pdsModalFooterCss = "pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}";
+const PdsModalFooter$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("footer", { key: '63d1121b84d10ea99354d07b029b7625d52d9095', class: "pds-modal__footer" }, h("slot", { key: 'dd08fc600f122e422ccd3161bc558f3b9cc075f9' })));
+    }
+    static get style() { return pdsModalFooterCss; }
+}, [4, "pds-modal-footer"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-modal-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-modal-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsModalFooter$1);
+            }
+            break;
+    } });
+}
+const PdsModalFooter = PdsModalFooter$1;
+const defineCustomElement = defineCustomElement$1;
+export { PdsModalFooter, defineCustomElement };
+//# sourceMappingURL=pds-modal-footer.js.map
+//# sourceMappingURL=pds-modal-footer.js.map

package/components/pds-modal-footer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pds-modal-footer.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalFooter","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-footer/pds-modal-footer.scss?tag=pds-modal-footer","src/components/pds-modal/pds-modal-footer/pds-modal-footer.tsx"],"sourcesContent":["pds-modal-footer {\n display: block;\n width: 100%;\n}\n\n.pds-modal__footer {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-footer',\n styleUrl: 'pds-modal-footer.scss',\n shadow: false,\n})\nexport class PdsModalFooter {\n render() {\n return (\n <footer class=\"pds-modal__footer\">\n <slot></slot>\n </footer>\n );\n }\n}\n"],"version":3}

package/components/pds-modal-header.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+interface PdsModalHeader extends Components.PdsModalHeader, HTMLElement {}
+export const PdsModalHeader: {
+    prototype: PdsModalHeader;
+    new (): PdsModalHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-modal-header.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+const pdsModalHeaderCss = "pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}";
+const PdsModalHeader$1 = /*@__PURE__*/ proxyCustomElement(class PdsModalHeader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h("header", { key: 'c832013aee204170c29336e931d36f1eda667f11', class: "pds-modal__header" }, h("slot", { key: '19a76b689a8d8bf116f7061fd7c32415da4299e1' })));
+    }
+    static get style() { return pdsModalHeaderCss; }
+}, [4, "pds-modal-header"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-modal-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-modal-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsModalHeader$1);
+            }
+            break;
+    } });
+}
+const PdsModalHeader = PdsModalHeader$1;
+const defineCustomElement = defineCustomElement$1;
+export { PdsModalHeader, defineCustomElement };
+//# sourceMappingURL=pds-modal-header.js.map
+//# sourceMappingURL=pds-modal-header.js.map

package/components/pds-modal-header.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pds-modal-header.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0EAA0E;;MCOvFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;IACzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsModalHeader","__stencil_proxyCustomElement"],"sources":["src/components/pds-modal/pds-modal-header/pds-modal-header.scss?tag=pds-modal-header","src/components/pds-modal/pds-modal-header/pds-modal-header.tsx"],"sourcesContent":["pds-modal-header {\n display: block;\n width: 100%;\n}\n\n.pds-modal__header {\n width: 100%;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-modal-header',\n styleUrl: 'pds-modal-header.scss',\n shadow: false,\n})\nexport class PdsModalHeader {\n render() {\n return (\n <header class=\"pds-modal__header\">\n <slot></slot>\n </header>\n );\n }\n}\n"],"version":3}

package/components/pds-modal.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+interface PdsModal extends Components.PdsModal, HTMLElement {}
+export const PdsModal: {
+    prototype: PdsModal;
+    new (): PdsModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;