@postnord/web-components
Version:
PostNord Web Components
68 lines (64 loc) • 11.7 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { uuidv4 } from './index.js';
const pnToggleSwitchCss = () => `${transformTag("pn-toggle-switch")}{display:inline-block;position:relative}${transformTag("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${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}${transformTag("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${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}${transformTag("pn-toggle-switch")} .pn-toggle-button[data-loading] ${transformTag("pn-spinner")}{opacity:1}${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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${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;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle-circle{transform:translateX(0%)}${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;}${transformTag("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${transformTag("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${transformTag("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${transformTag("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${transformTag("pn-spinner")} .pn-spinner-circle{stroke:#969087}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${transformTag("pn-spinner")} .pn-spinner-dot{fill:#969087}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${transformTag("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${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)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toggle-switch")} .pn-toggle ${transformTag("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`;
const PnToggleSwitch = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-toggle-${uuidv4()}`;
idHelper = `${this.id}-helper`;
get hostElement() { return getElement(this); }
/** A label for the toggle switch. */
label;
/** Provide a helpertext for the toggle switch. */
helpertext;
/** Precheck the toggle. */
checked = false;
/** Set a unique HTML id. */
toggleid = this.id;
/** HTML toggle name. @category HTML */
name = null;
/** HTML toggle value. @category HTML */
value = null;
/** Make the toggle smaller. @category Visual */
small = false;
/** Make the toggle larger. @category Visual */
large = false;
/** Disable the toggle. @category State */
disabled = false;
/** Set the loading state. @category State */
loading = false;
handleHelperId() {
if (this.id !== this.toggleid)
this.idHelper = `${this.toggleid}-helper`;
}
componentWillLoad() {
this.handleHelperId();
}
hasHelpertextProp() {
return !!this.helpertext;
}
hasHelpertextSlot() {
return !!this.hostElement.querySelector('[slot="helpertext"]');
}
showHelpertext() {
return this.hasHelpertextProp() || this.hasHelpertextSlot();
}
describedBy() {
return this.showHelpertext() ? this.idHelper : null;
}
render() {
return (h(Host, { key: 'b88bbc2385be79dd584ecee5e53dc89832de49c3' }, h("div", { key: '4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d', class: "pn-toggle" }, this.label && (h("div", { key: '944a36f2018335a283092c909af2f37846850eb8', class: "pn-toggle-content" }, h("label", { key: '2536eaf65117b1c70d1ec31f17faa41f2a6fced4', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'eae8a38d31f6bc05faa9d56c08517f9302be9a3e' }, this.label)), h("p", { key: '6173ba384459c406eb98fe4318e080b6cd36031a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'd4a52d7786e7a63ca3f201c3ad7cb8793e377c12' }, this.helpertext), h("slot", { key: '06406382d523b70b8acb094a82794652a4481528', name: "helpertext" })))), h("div", { key: '4676dd88652c903f94d3f887e97841e00bbe09e2', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'd2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: '93caefd228460120aae22ba48e6c93d6df676fcf', class: "pn-toggle-bg" }), h("div", { key: '03299104835602d126960ad67ab51f94d27cf3c5', class: "pn-toggle-circle" }, h("svg", { key: '5f61f589797b3ca97a66cd42deab3065543679d2', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'd974e5cc198d19cf17e42e0b35097f87d11404a0', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '6f5c5fb05e0c9fd95b16d45833f50167af22e358', size: 1.125 }))))));
}
static get watchers() { return {
"toggleid": [{
"handleHelperId": 0
}]
}; }
};
PnToggleSwitch.style = pnToggleSwitchCss();
export { PnToggleSwitch as pn_toggle_switch };