@postnord/web-components
Version:
PostNord Web Components
427 lines (426 loc) • 17.4 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4 } from "../../../globals/helpers";
import { h, Host, Mixin } from "@stencil/core";
import { animateHeightFactory } from "../../../globals/mixins/index";
/**
* The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
* This means you can use native events to listen to the changes.
*
* @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
*
* @slot - The default slot for adding custom HTML under the label/helpertext. {@since v7.17.0}
* @slot helpertext - Use this slot to add custom HTML inside of the helpertext element.
* Only recommended if you need a link without the `tile` prop. {@since v7.17.0}
* @slot content - When using the `tile` and `expand` props, this slot will be revealed when the input is checked. {@since v7.17.0}
*/
export class PnCheckbox extends Mixin(animateHeightFactory) {
constructor() {
super();
}
id = `pn-checkbox-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
contentArea;
hostElement;
/** 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: '52273e4f6d71183fa2360c147c5d2ed6fbb3d31a' }, h("input", { key: 'fba94a81a38009f36d938751c6362ed7340d68d7', 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: '850ecfd3abddccfe8b0ada1d0272dfa3155a669f', class: "pn-checkbox", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '728efcdb0cd59f1af39839dd9fd1accc66f2da00', class: "pn-checkbox-outer" }, h("svg", { key: '55d82cc64b735706a57d301e9c8f64edc4aeebe9', class: "pn-checkbox-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '02a30f7a2cbf5d502be29ff14945f22e89ca19c5', class: "pn-checkbox-svg-line pn-checkbox-svg-checkmark", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '9c01a39dec7dc5d3961bffd07badf694ebdbadc1', class: "pn-checkbox-svg-line pn-checkbox-svg-indeterminate", points: "4,12 20,12", "stroke-width": "3" }))), h("p", { key: '0b63e31f00d2dea465e9e36b3cceb56bf0a4ad48', class: "pn-checkbox-content", hidden: !this.displayText() }, h("label", { key: '9aeebad0076718474224594b5c17cd5e3c3590dc', htmlFor: this.checkboxid, class: "pn-checkbox-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '1d99d825512267e4560b817f8853319b10b05d08', id: this.idHelpertext, class: "pn-checkbox-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '981da5a8b25f6e780a5c0a1f9e32ee7aa11fef11', name: "helpertext" })), h("slot", { key: '192f09f50bd3592c41e8836c70dc264edfc3e332' })), this.displayIcon() && h("pn-icon", { key: '4ab2aaf2819ca83f08233cac99922e5234837408', icon: this.icon, color: "gray900" }), h("div", { key: '6247821b031e2d57a216612b166db6622aaa2225', class: "pn-checkbox-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'd35445d61a6e9a7faca6ca349f56b36097a077d2', class: "pn-checkbox-area" }, h("slot", { key: '7cbcc9648ae405d6aa8729f2071c3b03a914a027', name: "content" }))))));
}
static get is() { return "pn-checkbox"; }
static get originalStyleUrls() {
return {
"$": ["pn-checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-checkbox.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The checkbox label"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "This adds an optional helpertext under the label."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helpertext"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "This will be emitted on change and input events."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name of the checkbox group."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Check the checkbox."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"checkboxid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A unique HTML ID for the checkbox."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checkboxid",
"defaultValue": "this.id"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the checkbox as required."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the checkbox."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "invalid",
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "indeterminate",
"defaultValue": "false"
},
"tile": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Tile"
}],
"text": "Turn the checkbox into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tile",
"defaultValue": "false"
},
"expand": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link tile }"
}, {
"name": "since",
"text": "v7.17.0"
}, {
"name": "category",
"text": "Tile"
}],
"text": "Allow the checkbox to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "expand",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link tile }"
}, {
"name": "category",
"text": "Tile"
}],
"text": "Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon",
"defaultValue": "null"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "checkboxid",
"methodName": "handleId"
}, {
"propName": "checked",
"methodName": "handleChecked"
}];
}
}