@postnord/web-components
Version:
PostNord Web Components
138 lines (133 loc) • 13.2 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DWu-2oJc.js');
var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
var chevron_down = require('./chevron_down-BLU6_yOG.js');
var index$1 = require('./index.cjs.js');
const pnSelectCss = () => `${index.transformTag("pn-select")}{display:inline-block}${index.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){${index.transformTag("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${index.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}${index.transformTag("pn-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${index.transformTag("pn-select")} .pn-select-label>span{font-size:0.875em}${index.transformTag("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${index.transformTag("pn-select")} .pn-select-input{position:relative}${index.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}${index.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){${index.transformTag("pn-select")} .pn-select-icon .pn-icon-svg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-icon[data-default]{right:1em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${index.transformTag("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${index.transformTag("pn-select")} .pn-select-icon[data-error]{right:3.5em}${index.transformTag("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${index.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}${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:focus,${index.transformTag("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.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){${index.transformTag("pn-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${index.transformTag("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${index.transformTag("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${index.transformTag("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${index.transformTag("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{border-color:#005d92}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${index.transformTag("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2;pointer-events:none}${index.transformTag("pn-select")} .pn-select-element:disabled:hover{background-color:#f3f2f2}${index.transformTag("pn-select")} .pn-select-element:has(option[value=""]:checked){color:#5e554a;font-weight:normal}${index.transformTag("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${index.transformTag("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${index.transformTag("pn-select")} .pn-select-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${index.transformTag("pn-select")} .pn-select-text[role=alert]{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${index.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}${index.transformTag("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`;
const PnSelect = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
id = `pn-select-${index$1.uuidv4()}`;
idHelper = `${this.id}-text`;
idError = `${this.id}-error`;
mo;
get hostElement() { return index.getElement(this); }
/** Label placed above the select. */
label;
/** Display a helper text underneath the select. */
helpertext;
/** HTML select name. @category Native attributes */
name;
/** HTML form name. @category Native attributes */
form;
/** HTML autocomplete. @category Native attributes */
autocomplete;
/** Set the select as required. @category Native attributes */
required = false;
/** Disable the select. @category Native attributes */
disabled = false;
/** Use the compact label variant. @since v7.21.0 @category Features */
compact = false;
/** Display an icon to the left of the select input. @category Features */
icon;
/** Trigger the invalid state. @category Features */
invalid = false;
/** Display an error message and trigger the invalid state. @category Features */
error;
/** Set a custom ID for the select. @since v7.25.0 @category HTML attributes */
pnId;
/**
* Provide the label via an aria attribute.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabel;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/** Set a custom ID for the select. @deprecated Use `pn-id` instead. @category HTML attributes */
selectId;
handleId() {
this.idHelper = `${this.getId()}-text`;
this.idError = `${this.getId()}-error`;
}
connectedCallback() {
this.mo = new MutationObserver(() => index.forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
disconnectedCallback() {
if (this.mo)
this.mo.disconnect();
}
hasHelperText() {
return this.helpertext?.length > 0 || this.checkSlottedHelper();
}
/** If any `error` text is present, either via prop/slot. */
hasErrorMessage() {
return this.error?.length > 0 || this.checkSlottedError();
}
/** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
hasError() {
return this.hasErrorMessage() || this.invalid || this.checkSlottedError();
}
checkSlottedHelper() {
return !!this.hostElement.querySelector('[slot=helpertext]');
}
checkSlottedError() {
return !!this.hostElement.querySelector('[slot=error]');
}
hideHelpertext() {
return this.hasErrorMessage() || !this.hasHelperText();
}
hideError() {
return !this.hasErrorMessage();
}
getId() {
return this.pnId || this.selectId || this.id;
}
displayLabel() {
return !!this.label;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
getAriaDescribedby() {
const list = [];
if (this.hasErrorMessage())
list.push(this.idError);
else if (this.hasHelperText())
list.push(this.idHelper);
return list.length ? list.join(' ') : null;
}
renderLabel() {
if (!this.label)
return null;
return (index.h("label", { htmlFor: this.getId(), class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, index.h("span", null, this.label)));
}
render() {
return (index.h(index.Host, { key: 'dfd4d3814426a88b975bd86948c7ac2207255f4b' }, index.h("div", { key: '5423289d1771840d08ab1de18ab3af4a31cb98f1', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), index.h("div", { key: '164933a196821353cf7ca31d6d12b65a84da012a', class: "pn-select-input" }, this.icon && index.h("pn-icon", { key: 'da732b9152cba5035039a9761f38471d5885ddb1', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (index.h("pn-icon", { key: '3370ffc0f4f6de399762bf5d854433020830ff2e', class: "pn-select-icon", icon: alert_exclamation_circle.alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), index.h("select", { key: '2a31f44242dd230d68c8d10ed461aeb25f8ec231', id: this.getId(), class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.getAriaDescribedby(), "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-compact": this.compact }, index.h("slot", { key: '8130b7ac6969e2fa0c801e0b10a47e97cf6505bf' })), this.compact && this.renderLabel(), index.h("pn-icon", { key: 'c2167ea78e00914296efd758d044a9ea24e428da', class: "pn-select-icon", icon: chevron_down.chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), index.h("p", { key: '528f5a13255b52009b6b291eff57a164b3650f07', id: this.idHelper, class: "pn-select-text", hidden: this.hideHelpertext() }, index.h("span", { key: '0a802a236cef453ef78783a051b29ccfd0efd997' }, this.helpertext), index.h("slot", { key: 'b23ef510ec48ac499ab6c589d0be1b71517a9496', name: "helpertext" })), index.h("p", { key: '026c3978d58c24193731048373e83510002dd116', id: this.idError, class: "pn-select-text", role: "alert", hidden: this.hideError() }, index.h("span", { key: 'b8724dfc973607a0f4776aa40846c2c86c33c8af' }, this.error), index.h("slot", { key: '90b29ba6d58e629783c4c8264c9aeaf3d84ffce8', name: "error" })))));
}
static get watchers() { return {
"selectId": [{
"handleId": 0
}],
"pnId": [{
"handleId": 1
}]
}; }
};
PnSelect.style = pnSelectCss();
exports.pn_select = PnSelect;