@postnord/web-components
Version:
PostNord Web Components
262 lines (261 loc) • 9.61 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 {
constructor() {
this.moving = false;
this.label = undefined;
this.value = undefined;
this.name = undefined;
this.checked = false;
this.radio = false;
this.choiceid = `pn-choice-chip-${uuidv4()}`;
this.icon = undefined;
this.required = false;
this.disabled = false;
this.small = false;
this.large = false;
}
hostElement;
render() {
return (h(Host, { key: 'b74986fe1928d28a6a3eacfdb9919a33d847de89' }, h("div", { key: '6b25a1b32b29596c3862af80d22f5063e5a1d7be', class: "pn-choice-chip" }, h("input", { key: '58308564d6ee8ce60472fe037fe7bef42627733d', 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: 'f1debc7c902d94df49dcdb8b0abeaab331c25073', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '9a5ed1e9107f5c63b54dea6943290e74c5b7aca8', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '05631fab98155a693063d1576675fa4aa10e3081', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '41e6de5e34ea3ba1115ab1a7d14f81c6154c3a5a', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'ba505e94891f9d8fe50c3c9364c6e12cc1e9e844', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: 'd0e2ccf06db3d4fb19dc470b1b422dc1ca04c9d5' }, this.label), h("slot", { key: '25ffbcad9a5e81594d39dffc6d0b2421013ab89d' }))))));
}
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"
},
"attribute": "label",
"reflect": false
},
"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"
},
"attribute": "value",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name of the checkbox group"
},
"attribute": "name",
"reflect": false
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Precheck the choice chip"
},
"attribute": "checked",
"reflect": false,
"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"
},
"attribute": "radio",
"reflect": false,
"defaultValue": "false"
},
"choiceid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A unique HTML id"
},
"attribute": "choiceid",
"reflect": false,
"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"
},
"attribute": "icon",
"reflect": false
},
"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."
},
"attribute": "required",
"reflect": false,
"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."
},
"attribute": "disabled",
"reflect": false,
"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."
},
"attribute": "small",
"reflect": false,
"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."
},
"attribute": "large",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"moving": {}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-choice-chip.js.map