@postnord/web-components
Version:
PostNord Web Components
106 lines (101 loc) • 13.5 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DWu-2oJc.js');
var index$1 = require('./index.cjs.js');
const pnToggleSwitchCss = () => `${index.transformTag("pn-toggle-switch")}{display:inline-block;position:relative}${index.transformTag("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin: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-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${index.transformTag("pn-toggle-switch")} .pn-toggle-helper{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-toggle-switch")} .pn-toggle-content{flex:1 0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;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-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${index.transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] ${index.transformTag("pn-spinner")}{opacity:1;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%}${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transform:translateX(0%);transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-circle{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${index.transformTag("pn-spinner")} .pn-spinner-dot{fill:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${index.transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${index.transformTag("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)} (prefers-reduced-motion: reduce){${index.transformTag("pn-toggle-switch")} .pn-toggle ${index.transformTag("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`;
const PnToggleSwitch = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
id = `pn-toggle-${index$1.uuidv4()}`;
idHelper = `${this.id}-helper`;
get hostElement() { return index.getElement(this); }
/** A label for the toggle switch. */
label;
/** Provide a helpertext for the toggle switch. */
helpertext;
/** HTML toggle value. @category Native attributes */
value = null;
/** HTML toggle name. @category Native attributes */
name = null;
/** Precheck the toggle. @category Native attributes */
checked = false;
/** Set the switch as required. @since v7.25.0 @category Native attributes */
required = false;
/** Disable the toggle. @category Native attributes */
disabled = false;
/** Make the toggle smaller. @category Features */
small = false;
/** Make the toggle larger. @category Features */
large = false;
/** Set the loading state. @category Features */
loading = false;
/** Set a custom ID for the switch. @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 switch. @deprecated Use `pn-id` instead. @category HTML attributes */
toggleid;
handleHelperId() {
this.idHelper = `${this.getId()}-helper`;
}
getId() {
return this.pnId || this.toggleid || this.id;
}
getSpinnerSize() {
if (this.small)
return 1;
if (this.large)
return 1.25;
return 1.125;
}
hasHelpertextProp() {
return !!this.helpertext;
}
hasHelpertextSlot() {
return !!this.hostElement.querySelector('[slot="helpertext"]');
}
showHelpertext() {
return this.hasHelpertextProp() || this.hasHelpertextSlot();
}
describedBy() {
return this.showHelpertext() ? this.idHelper : null;
}
displayLabel() {
return !!this.label;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
render() {
return (index.h(index.Host, { key: 'e6a6de7ded1a69b16843133338ba8a1ae1294b19' }, index.h("div", { key: '142125dd53902df30a93a5e5257650a7841a1644', class: "pn-toggle" }, index.h("div", { key: 'd4e35ed179dc5f1423cdf59cf0481ecbcb33021f', class: "pn-toggle-content" }, this.label && (index.h("label", { key: 'f38bdb380fb05349909e386dd6e22d841c0caf56', htmlFor: this.getId(), class: "pn-toggle-label" }, index.h("span", { key: '94a35b2682a039613dd0814a25ba30f954018dc6' }, this.label))), index.h("p", { key: 'c621112acea7f18b7943d9d07c0af52dd7455329', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && index.h("span", { key: '1959f88dbe079595e3cd6bbb48098e2777ab642e' }, this.helpertext), index.h("slot", { key: 'e493dcb3022bd31c4ecfb349756d3d83bf51bf9a', name: "helpertext" }))), index.h("div", { key: '1f13bb2bcb798b5221d06e55640848034ad2b260', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.h("input", { key: 'ebf1c43df4b75f8df0769d2d458c04fbf17385f6', id: this.getId(), class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy() }), index.h("div", { key: '51c67cb5c61e3d3b93bd49013594109772b7d796', class: "pn-toggle-bg" }), index.h("div", { key: '1932ea8d92b8ab57a47fdd3ced9795be78cc1620', class: "pn-toggle-circle" }, index.h("svg", { key: '67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'f1722e0d19629ea38eac2faa6d2ccaf007e78463', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '60ab6b2fea45ddbc8793b06f18032df94c858a9d', size: this.getSpinnerSize() }))))));
}
static get watchers() { return {
"pnId": [{
"handleHelperId": 0
}],
"toggleid": [{
"handleHelperId": 1
}]
}; }
};
PnToggleSwitch.style = pnToggleSwitchCss();
exports.pn_toggle_switch = PnToggleSwitch;