@postnord/web-components
Version:
PostNord Web Components
81 lines (77 loc) • 10.1 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
import { c as chevron_down } from './chevron_down-DrYFvs2M.js';
import { uuidv4 } from './index.js';
const pnSelectCss = () => `${transformTag("pn-select")}{display:inline-block}${transformTag("pn-select")} .pn-select-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${transformTag("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${transformTag("pn-select")} .pn-select-label>span{font-size:0.875em}${transformTag("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${transformTag("pn-select")} .pn-select-input{position:relative}${transformTag("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${transformTag("pn-select")} .pn-select-icon[data-default]{right:1em}${transformTag("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${transformTag("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${transformTag("pn-select")} .pn-select-icon[data-error]{right:3.5em}${transformTag("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${transformTag("pn-select")} .pn-select-element:-webkit-autofill,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:hover,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:focus,${transformTag("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${transformTag("pn-select")} .pn-select-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${transformTag("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${transformTag("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${transformTag("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${transformTag("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${transformTag("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${transformTag("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-select")} .pn-select-element:hover{border-color:#005d92}${transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-select")} .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}${transformTag("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${transformTag("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${transformTag("pn-select")} .pn-select-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-select")} .pn-select-helper[role=alert]{color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`;
const PnSelect = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-select-${uuidv4()}`;
idHelpertext = `${this.id}-text`;
select;
mo;
get hostElement() { return getElement(this); }
/** Label placed above the select. */
label;
/** Display a helper text underneath the select. */
helpertext;
/** Select HTML id */
selectId = this.id;
/** Display an icon to the left of the select input. */
icon;
/** Use the compact label variant. @since v7.21.0 */
compact = false;
/** HTML select name. @category HTML */
name;
/** HTML form name. @category HTML */
form;
/** HTML autocomplete. @category HTML */
autocomplete;
/**
* Set the select as required.
* @category Validation
*/
required = false;
/**
* Disable the select.
* @category Validation
*/
disabled = false;
/**
* Trigger the invalid state.
* @category Validation
*/
invalid = false;
/**
* Display an error message and trigger the invalid state.
* @category Validation
*/
error;
componentDidLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
hasError() {
return this.invalid || !!this.error;
}
hasMessage() {
return !!this.helpertext || !!this.error;
}
renderLabel() {
if (!this.label)
return null;
return (h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
}
render() {
return (h(Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
}
};
PnSelect.style = pnSelectCss();
export { PnSelect as pn_select };