@pine-ds/core 2.1.0 → 2.1.2

package/dist/collection/components/pds-radio/pds-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/base.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = 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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\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   * 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  render() {\n    return (\n      <Host class={this.classNames()}>\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        <PdsLabel htmlFor={this.componentId} text={this.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            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;;wBAWJ,KAAK;;;uBAgBJ,KAAK;;;wBAgBN,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;oBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;oBACtC,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/base.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\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   * 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   * 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  render() {\n    return (\n      <Host class={this.classNames()}>\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        <PdsLabel htmlFor={this.componentId} text={this.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"]}

package/dist/collection/components/pds-row/pds-row.js

@@ -32,7 +32,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '1760d9bd45d53d371c0a4c73171a12a6e4c59b51', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-select/pds-select.css

@@ -0,0 +1,126 @@
+:host {
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);
+  --color-background-disabled: var(--pine-color-grey-100);
+  --color-background-error: var(--pine-color-red-050);
+  --color-border-active: var(--pine-color-grey-400);
+  --color-border-default: var(--pine-color-grey-300);
+  --color-border-disabled: var(--pine-color-grey-200);
+  --color-border-error: var(--pine-color-red-600);
+  --color-border-hover: var(--pine-color-grey-500);
+  --color-text-disabled: var(--pine-color-grey-600);
+  --color-text-error: var(--pine-color-red-600);
+  --font-size-helper-message: var(--pine-font-size-085);
+  --font-size-select-field: var(--pine-font-size-100);
+  --font-size-label: var(--pine-font-size-100);
+  --font-weight-helper-message: var(--pine-font-weight-normal);
+  --font-weight-select-field: var(--pine-font-weight-normal);
+  --font-weight-label: var(--pine-font-weight-medium);
+  --line-height-label: var(--pine-line-height-150);
+  --line-height-helper-message: var(--pine-line-height-125);
+  --line-height-select-field: var(--pine-line-height-150);
+  --spacing-error-message: var(--pine-spacing-050);
+  --spacing-field-padding-block: var(--pine-spacing-100);
+  --spacing-label-margin-block-end: var(--pine-spacing-100);
+  --spacing-margin-top-helper-message: var(--pine-spacing-100);
+  --spacing-select-field-padding-inline: var(--pine-spacing-150);
+  --spacing-select-field-icon-allowance: var(--pine-spacing-450);
+}
+:host .hidden,
+:host :host([hidden]) {
+  display: none;
+}
+
+.pds-select {
+  display: grid;
+  flex-direction: column;
+  grid-template-areas: "label label" "field field" "message message";
+  grid-template-columns: 1fr minmax(2rem, min-content);
+  grid-template-rows: min-content min-content min-content;
+  position: relative;
+  width: 100%;
+}
+
+label {
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  grid-area: label;
+  line-height: var(--line-height-label);
+  margin-block-end: var(--spacing-label-margin-block-end);
+}
+
+select {
+  appearance: none;
+  border: 1px solid var(--color-border-default);
+  border-radius: 10px;
+  font-size: var(--font-size-select-field);
+  font-weight: var(--font-weight-select-field);
+  grid-area: field;
+  line-height: var(--line-height-select-field);
+  padding: var(--spacing-field-padding-block) var(--spacing-select-field-padding-inline);
+  padding-right: var(--spacing-select-field-icon-allowance);
+  position: relative;
+}
+select:hover {
+  border-color: var(--color-border-hover);
+  cursor: pointer;
+}
+select:focus-visible {
+  border-color: var(--color-border-active);
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+select:disabled {
+  background-color: var(--color-background-disabled);
+  border-color: var(--color-border-disabled);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+select:has(~ .pds-select__message .pds-select__error-message) {
+  background-color: var(--color-background-error);
+  border-color: var(--color-border-error);
+}
+select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
+}
+
+:host(.is-invalid) select {
+  background-color: var(--color-background-error);
+  border-color: var(--color-border-error);
+}
+:host(.is-invalid) select:focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
+}
+
+.pds-select__error-message,
+.pds-select__helper-message {
+  font-size: var(--font-size-helper-message);
+  font-weight: var(--font-weight-helper-message);
+  line-height: var(--line-height-helper-message);
+  margin-block-end: 0;
+  margin-block-start: var(--spacing-margin-top-helper-message);
+}
+
+.pds-select__error-message {
+  align-items: center;
+  color: var(--color-text-error);
+  display: flex;
+  gap: var(--spacing-error-message);
+}
+
+.pds-select__message {
+  grid-area: message;
+}
+
+.pds-select__select-icon {
+  align-items: center;
+  display: flex;
+  grid-column: -1/-2;
+  grid-row: 2/3;
+  height: 2.5rem;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}

package/dist/collection/components/pds-select/pds-select.js

@@ -0,0 +1,360 @@
+import { Host, h } from "@stencil/core";
+import { messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsSelect {
+    constructor() {
+        /**
+         * Emits an event on input change.
+        */
+        this.onSelectUpdate = (e) => {
+            const target = e.target;
+            const values = Array.from(target.options)
+                .filter((option) => (option.selected))
+                .map((option) => (option.value));
+            if (values.length === 1 && !this.multiple) {
+                this.value = values[0];
+            }
+            else {
+                this.value = values;
+            }
+            this.pdsSelectChange.emit(e);
+        };
+        /**
+         * Handles the change event for the slot element.
+         * This method is triggered when the slot content changes.
+         * It updates the inner HTML of the select element by cloning and appending
+         * the assigned <option> elements from the slot.
+         */
+        this.handleSlotChange = () => {
+            const slot = this.slotContainer.querySelector('slot');
+            this.selectEl.innerHTML = '';
+            const assignedElements = slot.assignedElements({ flatten: true });
+            assignedElements.forEach((item) => {
+                if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
+                    const clonedItem = item.cloneNode(true);
+                    if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
+                        clonedItem.selected = true;
+                    }
+                    this.selectEl.appendChild(clonedItem);
+                }
+            });
+            this.updateSelectedOption();
+        };
+        this.autocomplete = undefined;
+        this.componentId = undefined;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.multiple = false;
+        this.name = undefined;
+        this.required = false;
+        this.value = undefined;
+    }
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged() {
+        this.updateSelectedOption();
+    }
+    componentWillLoad() {
+        this.updateSelectedOption();
+    }
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    updateSelectedOption() {
+        if (this.selectEl) {
+            const options = this.selectEl.options;
+            // Update the selected attribute for all options.
+            Array.from(options).map((option) => {
+                if (Array.isArray(this.value)) {
+                    option.selected = this.value.includes(option.value);
+                }
+                else {
+                    option.selected = this.value === option.value;
+                }
+            });
+        }
+        ;
+    }
+    getHelperMessage() {
+        return this.helperMessage && (h("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
+    }
+    getErrorMessage() {
+        return this.errorMessage && (h("p", { class: "pds-select__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { name: "danger", size: "small" }), this.errorMessage));
+    }
+    renderMessages() {
+        if (!this.helperMessage && !this.errorMessage)
+            return null;
+        return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: 'f0baf957ee67ee9171a41fc4171e548b94d5c22c', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '88ef7c54afc654133d613c91c4bb3fbfe4a944b3', class: "pds-select" }, h(PdsLabel, { key: '7723f468412f6567e0d4fd236807e1ba2fdea16a', htmlFor: this.componentId, text: this.label }), h("select", { key: '1bdb1e22360972aa6cb77902d1288abfcc9dbf07', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'ddbac1f772b335688d7eb219a7ea3a9ab4a3192a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'aa6093fd8833fdf4860dd8127c32f95405679a11', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'de8dc37035701942d8b2bcf56b40edf2f6de20df', class: "pds-select__select-icon", name: "enlarge" }))));
+    }
+    static get is() { return "pds-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "attribute": "autocomplete",
+                "reflect": false
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the select field is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays error message text describing an invalid state."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays helper message text below select."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the select is invalid."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the select label."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether multiple options can be selected."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name. Submitted with the form name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the select field is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value(s) of the selected option(s)."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsSelectChange",
+                "name": "pdsSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input occurs."
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=pds-select.js.map

package/dist/collection/components/pds-select/pds-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-select',\n  styleUrl: 'pds-select.scss',\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\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   * 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   * 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  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\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 name=\"danger\" size=\"small\" />\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  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n            <select\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              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\" name=\"enlarge\" />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}