@postnord/web-components
Version:
PostNord Web Components
161 lines (156 loc) • 13.9 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, Mixin, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
import { a as animateHeightFactory } from './index2.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
const pnCheckboxCss = "pn-checkbox{position:relative;display:inline-block}pn-checkbox .pn-checkbox{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}pn-checkbox .pn-checkbox-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}pn-checkbox .pn-checkbox-helpertext{color:#5e554a;margin:0 0 0.5em 0}pn-checkbox .pn-checkbox-helpertext:last-child{margin:0}pn-checkbox .pn-checkbox-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}pn-checkbox .pn-checkbox-outer{width:1.5em;height:1.5em;background-color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;border:0.0625em solid #969087;border-radius:0.25em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-outer{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg{width:1.25em;fill:none}pn-checkbox .pn-checkbox-svg-line{stroke:#ffffff;transform-origin:0 0;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox-svg-line{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox-svg-line{transition-delay:0s}pn-checkbox .pn-checkbox[data-tile]{position:relative;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:1em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-checkbox .pn-checkbox[data-tile]{transition-duration:0s;transition-delay:0s}}pn-checkbox .pn-checkbox[data-tile][data-invalid]{border-color:#a70707}pn-checkbox .pn-checkbox[data-invalid] .pn-checkbox-outer{border-color:#a70707}pn-checkbox .pn-checkbox-container{flex:1 1 100%;overflow:hidden;visibility:hidden}pn-checkbox .pn-checkbox-container[data-open]{visibility:visible;overflow:unset}pn-checkbox .pn-checkbox-container[data-moving]{visibility:visible;overflow:hidden}pn-checkbox .pn-checkbox-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}pn-checkbox .pn-checkbox>pn-icon{margin-left:0.75em}pn-checkbox>input{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}pn-checkbox>input[data-tile]:not([data-expand]){width:100%;height:100%}pn-checkbox>input[data-expand]{top:1em;left:1em}pn-checkbox>input[aria-describedby]+.pn-checkbox[data-tile] .pn-checkbox-label{font-weight:500}pn-checkbox>input:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:hover+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox>.pn-checkbox-outer{outline-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]{outline-color:#005d92;border-color:#005d92}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile][data-invalid]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-tile]>.pn-checkbox-outer{outline-color:transparent}pn-checkbox>input:focus-visible+.pn-checkbox[data-invalid]>.pn-checkbox-outer{outline-color:#a70707}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:23}pn-checkbox>input:checked+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{transition-delay:0.2s;stroke-dashoffset:0}pn-checkbox>input:checked+.pn-checkbox[data-tile]{background-color:#e0f8ff;border-color:#005d92}pn-checkbox>input:checked+.pn-checkbox[data-tile][data-invalid]{background-color:#fdefee;border-color:#a70707}pn-checkbox>input:checked+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:checked:hover+.pn-checkbox[data-tile]{border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]{border-color:#500715}pn-checkbox>input:checked:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#005d92;border-color:#005d92}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-checkmark{stroke-dashoffset:23}pn-checkbox>input:indeterminate+.pn-checkbox>.pn-checkbox-outer .pn-checkbox-svg>.pn-checkbox-svg-indeterminate{stroke-dashoffset:0}pn-checkbox>input:indeterminate+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#a70707;border-color:#a70707}pn-checkbox>input:indeterminate:hover+.pn-checkbox>.pn-checkbox-outer{background-color:#0d234b;border-color:#0d234b}pn-checkbox>input:indeterminate:hover+.pn-checkbox[data-invalid]>.pn-checkbox-outer{background-color:#500715;border-color:#500715}pn-checkbox>input:disabled{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox .pn-checkbox-label{pointer-events:none}pn-checkbox>input:disabled+.pn-checkbox>.pn-checkbox-outer{background-color:#f3f2f2;border-color:#969087}pn-checkbox>input:disabled+.pn-checkbox[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>pn-icon>.pn-icon-svg path{fill:#5e554a}pn-checkbox>input:disabled+.pn-checkbox[data-tile]>.pn-checkbox-content>.pn-checkbox-label{color:#5e554a}pn-checkbox>input:disabled:checked+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}pn-checkbox>input:disabled:indeterminate+.pn-checkbox>.pn-checkbox-outer{background-color:#969087;border-color:#969087}";
const PnCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class PnCheckbox extends Mixin(animateHeightFactory) {
constructor(registerHost) {
super(false);
if (registerHost !== false) {
this.__registerHost();
}
}
id = `pn-checkbox-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
contentArea;
get hostElement() { return this; }
/** The checkbox label */
label;
/** This adds an optional helpertext under the label. */
helpertext;
/** This will be emitted on change and input events. */
value;
/** The name of the checkbox group. */
name;
/** Check the checkbox. */
checked = false;
/** A unique HTML ID for the checkbox. */
checkboxid = this.id;
/** Set the checkbox as required. @category State */
required = false;
/** Disable the checkbox. @category State */
disabled = false;
/** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox. @category State */
invalid = false;
/** Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. @category State */
indeterminate = false;
/**
* Turn the checkbox into a clickable tile. A border and padding is added.
*
* **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
* An exception is made when using the `tile` + `expand` props together,
* which allows you to use interactive elements.
*
* @category Tile
*/
tile = false;
/**
* Allow the checkbox to control the slot area "content".
* When checked, the area is visible, when unchecked, the area is hidden.
*
* The prop `tile` must be used at the same time.
* @see {@link tile}
* @since v7.17.0
* @category Tile
*/
expand = false;
/**
* Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
* @see {@link tile}
* @category Tile
*/
icon = null;
handleId() {
this.idHelpertext = `${this.checkboxid}-helpertext`;
}
handleChecked() {
if (this.displayContent()) {
this.checked ? this.openDropdown(this.contentArea) : this.closeDropdown(this.contentArea);
}
}
componentWillLoad() {
this.handleId();
}
componentDidLoad() {
if (this.displayContent() && this.checked) {
requestAnimationFrame(() => this.openDropdown(this.contentArea));
}
}
handleChange(e) {
const { checked } = e.target;
this.indeterminate = false;
this.checked = checked;
}
isInvalid() {
return this.invalid && !this.disabled;
}
displayText() {
return this.displayLabel() || this.displayHelpertext();
}
displayLabel() {
return !!this.label;
}
displayHelpertext() {
return !!(this.helpertext || this.hostElement.querySelector('[slot="helpertext"]')?.textContent);
}
displayIcon() {
return this.tile && !!this.icon;
}
displayContent() {
return this.tile && this.expand;
}
render() {
return (h(Host, { key: '22b27984273301dd42fc8f3c8c1b69379c3b5cb6' }, h("input", { key: 'd88962b91ad4b765517fa9bedf30c47f28c72edf', type: "checkbox", id: this.checkboxid, class: "pn-checkbox-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.helpertext && this.idHelpertext, "data-tile": this.tile, "data-expand": this.expand, onChange: e => this.handleChange(e) }), h("div", { key: 'ce3f8e916f0c264db3e4822a7b91d65c787c6106', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: 'cf884607560fdc6c7b26fd2da2cf3cf60ae3a3af', class: "pn-checkbox-outer" }, h("svg", { key: 'fd6db42a2a402dd5b013d6bc1bb9085b289f7153', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '1fcc4bce45838c818b096258db1993eec5d5b2f4', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '2d46747598b773cd9b9dff34ed0d07b8c58005ae', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("p", { key: '5c803b1a0252c44caa6e091931e20993e5fc12b3', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '5c031c7acbab5d519349b19dfd39e496826d7308', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '8b880dd2b7bb1b1099693aa62e75a8c515e30cc9', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '8c953e276b0cc03b45f86dfa7c745a6f34c7f28e', name: "helpertext" })), h("slot", { key: '960d89f14d636f153d25f991be63b858165fd350' })), this.displayIcon() && h("pn-icon", { key: 'c3b12afa4fb0f0b790d37502bcae9eadabd8db8e', icon: this.icon, color: "gray900" }), h("div", { key: 'c57a28f23567bdab19ee38506433190aaabbeaf5', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: '43b7a85a8d002a747be2ec1c8717095e7cfdebaf', class: "pn-checkbox-area" }, h("slot", { key: '93f90dd386d94d68d1665f48dea84ca568e651d9', name: "content" }))))));
}
static get watchers() { return {
"checkboxid": ["handleId"],
"checked": ["handleChecked"]
}; }
static get style() { return pnCheckboxCss; }
}, [260, "pn-checkbox", {
"label": [1],
"helpertext": [1],
"value": [513],
"name": [1],
"checked": [1028],
"checkboxid": [1],
"required": [4],
"disabled": [4],
"invalid": [4],
"indeterminate": [1028],
"tile": [4],
"expand": [4],
"icon": [1],
"isClosing": [32],
"isExpanding": [32]
}, undefined, {
"checkboxid": ["handleId"],
"checked": ["handleChecked"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-checkbox", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-checkbox":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnCheckbox$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnCheckbox = PnCheckbox$1;
const defineCustomElement = defineCustomElement$1;
export { PnCheckbox, defineCustomElement };
//# sourceMappingURL=pn-checkbox.js.map
//# sourceMappingURL=pn-checkbox.js.map