@pine-ds/core 3.26.3 → 3.27.0

package/components/pds-select.js

@@ -1,291 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as exposeTypeProperty, m as messageId, i as isSpecTest } from './form.js';
-import { h as danger, g as enlarge } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";
-
-const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
-
-const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
-
-const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsSelectChange = createEvent(this, "pdsSelectChange", 7);
-        this.pdsBlur = createEvent(this, "pdsBlur", 7);
-        this.pdsFocus = createEvent(this, "pdsFocus", 7);
-        this.pdsKeyDown = createEvent(this, "pdsKeyDown", 7);
-        this._type = 'select-one';
-        /**
-         * Indicates whether or not the select field is disabled.
-         * @defaultValue false
-         */
-        this.disabled = false;
-        /**
-         * Indicates whether multiple options can be selected.
-         * @defaultValue false
-         */
-        this.multiple = false;
-        /**
-         * Indicates whether or not the select field is required.
-         * @defaultValue false
-         */
-        this.required = false;
-        /**
-         * 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);
-        };
-        this.onBlur = (ev) => {
-            this.pdsBlur.emit(ev);
-        };
-        this.onFocus = (ev) => {
-            this.pdsFocus.emit(ev);
-        };
-        this.onKeyDown = (ev) => {
-            this.pdsKeyDown.emit(ev);
-        };
-        /**
-         * 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();
-        };
-    }
-    /**
-     * 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();
-        this.updateFormValue();
-    }
-    /**
-     * Updates the type property when multiple changes to match native select behavior.
-     */
-    multipleChanged() {
-        this.updateType();
-    }
-    updateType() {
-        this._type = this.multiple ? 'select-multiple' : 'select-one';
-    }
-    connectedCallback() {
-        // Initialize ElementInternals for form association (only once per element instance)
-        if (this.el.attachInternals && !this.internals) {
-            this.internals = this.el.attachInternals();
-        }
-        // Expose type property on the element instance to match native form element behavior
-        exposeTypeProperty(this.el, () => this._type);
-    }
-    componentWillLoad() {
-        // Set initial type based on multiple prop
-        this.updateType();
-        this.updateSelectedOption();
-    }
-    componentDidLoad() {
-        // Set initial form value
-        this.updateFormValue();
-    }
-    /**
-     * 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", { icon: 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('  ');
-    }
-    renderAction() {
-        const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        if (hasAction) {
-            return (h("div", { class: "pds-select__action", part: "action" }, h("slot", { name: "action" })));
-        }
-        return null;
-    }
-    /**
-     * Updates the form value using ElementInternals API
-     */
-    updateFormValue() {
-        if (isSpecTest())
-            return;
-        if (this.internals && this.internals.setFormValue) {
-            const value = this.value;
-            // Handle multi-select arrays by converting to FormData or comma-separated string
-            if (Array.isArray(value)) {
-                if (value.length > 1) {
-                    // For multiple values, create FormData with multiple entries
-                    const formData = new FormData();
-                    value.forEach(val => formData.append(this.name || '', val));
-                    this.internals.setFormValue(formData);
-                }
-                else {
-                    // Single value in array, use the string value
-                    this.internals.setFormValue(value[0] || null);
-                }
-            }
-            else {
-                // Single string value
-                this.internals.setFormValue(value || null);
-            }
-            // Set validity based on native select validation
-            if (this.selectEl && this.internals && this.internals.setValidity) {
-                this.internals.setValidity(this.selectEl.validity, this.selectEl.validationMessage, this.selectEl);
-            }
-        }
-    }
-    /**
-     * Form Associated Custom Elements API: Called when the form is reset
-     */
-    formResetCallback() {
-        this.value = '';
-        this.updateFormValue();
-    }
-    /**
-     * Form Associated Custom Elements API: Called when the form is disabled
-     */
-    formDisabledCallback(disabled) {
-        this.disabled = disabled;
-    }
-    /**
-     * Form Associated Custom Elements API: Called to restore form state
-     */
-    formStateRestoreCallback(state) {
-        if (typeof state === 'string') {
-            this.value = state;
-        }
-        else if (state instanceof FormData && this.name) {
-            // Extract value(s) from FormData using the select's name
-            const values = state.getAll(this.name);
-            if (values.length > 1) {
-                // Multi-select: convert to string array
-                this.value = values.filter(v => typeof v === 'string');
-            }
-            else if (values.length === 1 && typeof values[0] === 'string') {
-                // Single select: use string value
-                this.value = values[0];
-            }
-        }
-    }
-    render() {
-        const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '28292440973cbb60c63a296415a617e05fc9c5ce', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4a0f255ecc75c9fcedfc933c0a728d26918d9a9c', class: "pds-select" }, !this.hideLabel && (h("div", { key: '1f0b2a9ccf4ce2b79d5bb4dd40ff076b415bc6ac', class: "pds-select__label-wrapper" }, h("label", { key: '9e30b1b0266981f73f0821c05e833cb66a3caf3c', htmlFor: this.componentId }, h("span", { key: '7790be41907be6c5e3b460aa84b7ea54773cc14d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'd66b39ee412bfbf3c6dfff722cb061f24ba82df6', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'daf4846494666ebade54249c8d925423e71e7d33', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '545f421fd2679d4bb6ee34658f7dd4089ece4f81', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '0b3bcd3ceee6e6b2ab24b52f16f6cbd89ae88322', class: "pds-select__select-icon", icon: enlarge }))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["valueChanged"],
-        "multiple": ["multipleChanged"]
-    }; }
-    static get style() { return pdsSelectTokensCss + (labelCss + pdsSelectCss); }
-}, [321, "pds-select", {
-        "autocomplete": [1],
-        "componentId": [1, "component-id"],
-        "disabled": [4],
-        "errorMessage": [1, "error-message"],
-        "hideLabel": [4, "hide-label"],
-        "helperMessage": [1, "helper-message"],
-        "invalid": [4],
-        "label": [1],
-        "multiple": [4],
-        "name": [1],
-        "required": [4],
-        "highlight": [516],
-        "value": [1025]
-    }, undefined, {
-        "value": ["valueChanged"],
-        "multiple": ["multipleChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-select", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsSelect$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsSelect = PdsSelect$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsSelect, defineCustomElement };
-//# sourceMappingURL=pds-select.js.map
-
-//# sourceMappingURL=pds-select.js.map
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as r,transformTag as a}from"@stencil/core/internal/client";import{e as o,m as n,i as l}from"./form.js";import{h as d,g as c}from"./index2.js";import{d as p}from"./pds-icon2.js";const h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsSelectChange=i(this,"pdsSelectChange",7),this.pdsBlur=i(this,"pdsBlur",7),this.pdsFocus=i(this,"pdsFocus",7),this.pdsKeyDown=i(this,"pdsKeyDown",7),this._type="select-one",this.disabled=!1,this.multiple=!1,this.required=!1,this.onSelectUpdate=e=>{const s=Array.from(e.target.options).filter((e=>e.selected)).map((e=>e.value));this.value=1!==s.length||this.multiple?s:s[0],this.pdsSelectChange.emit(e)},this.onBlur=e=>{this.pdsBlur.emit(e)},this.onFocus=e=>{this.pdsFocus.emit(e)},this.onKeyDown=e=>{this.pdsKeyDown.emit(e)},this.handleSlotChange=()=>{const e=this.slotContainer.querySelector("slot");this.selectEl.innerHTML="",e.assignedElements({flatten:!0}).forEach((e=>{if(["OPTION","OPTGROUP"].includes(e.tagName)){const s=e.cloneNode(!0);"OPTION"===s.tagName&&s.value===this.value&&(s.selected=!0),this.selectEl.appendChild(s)}})),this.updateSelectedOption()}}valueChanged(){this.updateSelectedOption(),this.updateFormValue()}multipleChanged(){this.updateType()}updateType(){this._type=this.multiple?"select-multiple":"select-one"}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),o(this.el,(()=>this._type))}componentWillLoad(){this.updateType(),this.updateSelectedOption()}componentDidLoad(){this.updateFormValue()}updateSelectedOption(){this.selectEl&&Array.from(this.selectEl.options).map((e=>{e.selected=Array.isArray(this.value)?this.value.includes(e.value):this.value===e.value}))}getHelperMessage(){return this.helperMessage&&t("p",{class:"pds-select__helper-message",id:n(this.componentId,"helper")},this.helperMessage)}getErrorMessage(){return this.errorMessage&&t("p",{class:"pds-select__error-message",id:n(this.componentId,"error"),"aria-live":"assertive"},t("pds-icon",{"aria-hidden":"true",icon:d,size:"small"}),this.errorMessage)}renderMessages(){return this.helperMessage||this.errorMessage?t("div",{class:"pds-select__message"},this.getHelperMessage(),this.getErrorMessage()):null}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.disabled&&e.push("is-disabled"),e.join("  ")}renderAction(){return null!==this.el.querySelector('[slot="action"]')?t("div",{class:"pds-select__action",part:"action"},t("slot",{name:"action"})):null}updateFormValue(){if(!l()&&this.internals&&this.internals.setFormValue){const e=this.value;if(Array.isArray(e))if(e.length>1){const s=new FormData;e.forEach((e=>s.append(this.name||"",e))),this.internals.setFormValue(s)}else this.internals.setFormValue(e[0]||null);else this.internals.setFormValue(e||null);this.selectEl&&this.internals&&this.internals.setValidity&&this.internals.setValidity(this.selectEl.validity,this.selectEl.validationMessage,this.selectEl)}}formResetCallback(){this.value="",this.updateFormValue()}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e){if("string"==typeof e)this.value=e;else if(e instanceof FormData&&this.name){const s=e.getAll(this.name);s.length>1?this.value=s.filter((e=>"string"==typeof e)):1===s.length&&"string"==typeof s[0]&&(this.value=s[0])}}render(){const e=null!==this.el.querySelector('[slot="action"]');return t(r,{key:"71f6bfba3361eaac3459c1b30b23183503b57ae5","aria-disabled":this.disabled?"true":null,class:this.classNames(),"has-action":e&&!this.hideLabel?"true":null},t("div",{key:"cbd0059fc405179a59c29f81510d2948e358531c",class:"pds-select"},!this.hideLabel&&t("div",{key:"87d42d145ec0a46a474bb599e46226efc72d1acb",class:"pds-select__label-wrapper"},t("label",{key:"23e4b10a8b99023d1779de0eb6c56ff31189dce1",htmlFor:this.componentId},t("span",{key:"b655a0850ce9ce173fbd814461df8529c9c150d9",class:this.hideLabel?"visually-hidden":""},this.label)),e&&this.renderAction()),t("select",{key:"a9f2cd048cdea6f0a44305a2760c418617d7c0eb","aria-label":this.hideLabel?this.label:void 0,autocomplete:this.autocomplete||void 0,class:"pds-select__field",disabled:this.disabled,id:this.componentId,multiple:this.multiple,name:this.name,onBlur:this.onBlur,onChange:this.onSelectUpdate,onFocus:this.onFocus,onKeyDown:this.onKeyDown,part:"select",required:this.required,ref:e=>this.selectEl=e}),t("div",{key:"cca5b1b634d1d77bc4164cb196fdd1c4ffcb888e","aria-hidden":"true",class:"hidden",ref:e=>this.slotContainer=e},t("slot",{key:"018780883212786a89c5e6f776dc8c69853bf732",onSlotchange:this.handleSlotChange})),this.renderMessages(),!this.multiple&&t("pds-icon",{key:"10e82ad220b4e9d8d9c0710a14335d5603bd6164","aria-hidden":"true",class:"pds-select__select-icon",icon:c})))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{value:[{valueChanged:0}],multiple:[{multipleChanged:0}]}}static get style(){return':host{--pine-select-color-background-danger:var(--pine-color-red-050)}:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}'}},[321,"pds-select",{autocomplete:[1],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],hideLabel:[4,"hide-label"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],multiple:[4],name:[1],required:[4],highlight:[516],value:[1025]},void 0,{value:[{valueChanged:0}],multiple:[{multipleChanged:0}]}]),b=h,m=function(){"undefined"!=typeof customElements&&["pds-select","pds-icon"].forEach((e=>{switch(e){case"pds-select":customElements.get(a(e))||customElements.define(a(e),h);break;case"pds-icon":customElements.get(a(e))||p()}}))};export{b as PdsSelect,m as defineCustomElement}

package/components/pds-sortable-item.js

@@ -1,67 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as handle } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";
-
-const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Determines whether `sortable-item-actions` slot should be enabled.
-         * @defaultValue false
-         */
-        this.enableActions = false;
-        /**
-         * Determines whether `sortable-item` should have a handle.
-         * @defaultValue false
-         */
-        this.showHandle = false;
-    }
-    componentWillRender() {
-        // When the parent sortable has a type of 'handle', the sortable items
-        // will automatically set showHandle to 'true'.
-        this.sortableRef = this.el.closest('pds-sortable');
-        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
-            this.showHandle = true;
-        }
-    }
-    render() {
-        return (h(Host, { key: '631a0c1150226256cdb47d1a7bc6635144bb56d0', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bdb6ff779a5d750b75d404521bc91cad02176ea8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '144f4b6fe33a3a3a864ac48041fc93935fbf99c3', icon: handle }))), h("slot", { key: 'cdddce9c5fa3fde34481c41c46c5f6504e33a358' }), this.enableActions && (h("div", { key: '527e1d22f20223a850dbd956dea4db93878fd9f9', class: "pds-sortable-item__actions" }, h("slot", { key: '85ea35dbfdf0393721471dd229e80e9e57f58230', name: "sortable-item-actions" })))));
-    }
-    get el() { return this; }
-    static get style() { return pdsSortableItemCss; }
-}, [262, "pds-sortable-item", {
-        "enableActions": [4, "enable-actions"],
-        "componentId": [1, "component-id"],
-        "showHandle": [1028, "show-handle"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-sortable-item", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-sortable-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsSortableItem$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsSortableItem = PdsSortableItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsSortableItem, defineCustomElement };
-//# sourceMappingURL=pds-sortable-item.js.map
-
-//# sourceMappingURL=pds-sortable-item.js.map
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as r,transformTag as a}from"@stencil/core/internal/client";import{i as d}from"./index2.js";import{d as o}from"./pds-icon2.js";const i=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.enableActions=!1,this.showHandle=!1}componentWillRender(){this.sortableRef=this.el.closest("pds-sortable"),this.sortableRef&&"handle"===this.sortableRef.handleType&&(this.showHandle=!0)}render(){return t(r,{key:"631a0c1150226256cdb47d1a7bc6635144bb56d0",class:"pds-sortable-item",id:this.componentId},this.showHandle&&t("div",{key:"bdb6ff779a5d750b75d404521bc91cad02176ea8",class:"pds-sortable-item__handle"},t("pds-icon",{key:"8a2d151607015d853b240517c0a1930e8c5efabb","aria-hidden":"true",icon:d})),t("slot",{key:"2749b15b7ec10bcd2e99677a59772107295a20e2"}),this.enableActions&&t("div",{key:"9019a0736eec7f62c5a1d25d92071fddd79a5c37",class:"pds-sortable-item__actions"},t("slot",{key:"6645aca60484b591231f91e4a846dbe29ccca7a7",name:"sortable-item-actions"})))}get el(){return this}static get style(){return".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}"}},[262,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],showHandle:[1028,"show-handle"]}]),n=i,l=function(){"undefined"!=typeof customElements&&["pds-sortable-item","pds-icon"].forEach((e=>{switch(e){case"pds-sortable-item":customElements.get(a(e))||customElements.define(a(e),i);break;case"pds-icon":customElements.get(a(e))||o()}}))};export{n as PdsSortableItem,l as defineCustomElement}