@postnord/web-components
Version:
PostNord Web Components
352 lines (351 loc) • 13.3 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 {
id = `pn-choice-chip-${uuidv4()}`;
hostElement;
/** The choice chip label. This is required for the component to be accessible. */
label;
/** This will be emitted on change and input. @category Native attributes */
value;
/** The name of the checkbox group. This is required if you use the `radio` prop. @category Native attributes */
name;
/** Programatically check the input. @category Native attributes */
checked = false;
/** Set the input as required. @category Native attributes */
required = false;
/** Disable the input. @category Native attributes */
disabled = false;
/**
* Make the choice chip a radio input. By default, it behaves as a checkbox.
* You must assign a `name` for the radio to work.
* @category Features
*/
radio = false;
/** Add an icon to the choice chip. @category Features */
icon;
/** Use the small size for the choice chip. @category Features */
small = false;
/** Use the large size for the choice chip. @category Features*/
large = false;
/**
* A unique HTML ID for the choice chip
* @since v7.25.0
* @category HTML attributes
*/
pnId;
/**
* A unique HTML ID for the choice chip.
* @deprecated Use the `pn-id` prop instead.
* @category HTML attributes
*/
choiceid;
inputType() {
return this.radio ? 'radio' : 'checkbox';
}
getId() {
return this.pnId || this.choiceid || this.id;
}
render() {
return (h(Host, { key: '34b4a84a6fa6ebd0c592a4d585d333084e72c89f' }, h("div", { key: '66c7aa91b09795d9d452b1d6c0b65f0b64ba25f9', class: "pn-choice-chip" }, h("input", { key: '8723fd54d3ff2fed1a64c955ab3ea2e4812ff04f', type: this.inputType(), id: this.getId(), value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '9fd84d08b519181f954c3b62b1644afab67569ad', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '29b394a6806acbd2d9f905971555242f8bf81d32', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '22031f1693f50efa6b9e049c643e9ecbc931bea6', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '573e411940efa3054290a5cb574978dddddfb766', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'c0deb7c6cd33da32bc4b89af84d04a7383664024', class: "pn-choice-chip-label", htmlFor: this.getId() }, h("span", { key: 'ea43103d3f3d2332a52e9191ff37262bce642dbb' }, this.label), h("slot", { key: '904ac98a84bd191e74323154b7ea6de39dca964a' }))))));
}
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. This is required for the component to be accessible."
},
"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": [{
"name": "category",
"text": "Native attributes"
}],
"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": [{
"name": "category",
"text": "Native attributes"
}],
"text": "The name of the checkbox group. This is required if you use the `radio` prop."
},
"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": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Programatically check the input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Set the input 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": "Native attributes"
}],
"text": "Disable the input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"radio": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Make the choice chip a radio input. By default, it behaves as a checkbox.\nYou must assign a `name` for the radio to work."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "radio",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Add an icon to the choice chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Use the small size for the choice chip."
},
"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": "Features"
}],
"text": "Use the large size for the choice chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "large",
"defaultValue": "false"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "A unique HTML ID for the choice chip"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id"
},
"choiceid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Use the `pn-id` prop instead."
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "A unique HTML ID for the choice chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "choiceid"
}
};
}
static get elementRef() { return "hostElement"; }
}