@postnord/web-components
Version:
PostNord Web Components
292 lines (291 loc) • 10.6 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
import { check } from "pn-design-assets/pn-assets/icons.js";
/**
* The `pn-choice-chip` is built with a native `input[type="checkbox|radio"]` in the background.
* This means you can use native events to listen to the changes.
*
* @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
*/
export class PnChoiceChip {
hostElement;
moving = false;
/** The choice chip label */
label;
/** This will be emitted on change and input */
value;
/** The name of the checkbox group */
name;
/** Precheck the choice chip */
checked = false;
/** Make the choice chip a radio */
radio = false;
/** A unique HTML id */
choiceid = `pn-choice-chip-${uuidv4()}`;
/** Include an icon */
icon;
/** Set the choice chip as required. @category State */
required = false;
/** Disable the choice chip. @category State */
disabled = false;
/** Set the size to small. @category Size */
small = false;
/** Set the size to large. @category Size */
large = false;
render() {
return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
}
static get is() { return "pn-choice-chip"; }
static get originalStyleUrls() {
return {
"$": ["pn-choice-chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-choice-chip.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The choice chip label"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"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"
},
"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": "Precheck the choice chip"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"radio": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the choice chip a radio"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "radio",
"defaultValue": "false"
},
"choiceid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A unique HTML id"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "choiceid",
"defaultValue": "`pn-choice-chip-${uuidv4()}`"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Include an icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the choice chip 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": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the choice chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Size"
}],
"text": "Set the size to small."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"large": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Size"
}],
"text": "Set the size to large."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "large",
"defaultValue": "false"
}
};
}
static get states() {
return {
"moving": {}
};
}
static get elementRef() { return "hostElement"; }
}