@postnord/web-components
Version:
PostNord Web Components
233 lines (232 loc) • 8.41 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { close_small } from "pn-design-assets/pn-assets/icons";
import { uuidv4 } from "../../../globals/helpers";
/**
* The `pn-input-chip` represents a confirmed user input value that can be removed.
* It is visually similar to the `pn-choice-chip` but its only action is deletion.
* Clicking anywhere on the chip removes it.
*/
export class PnInputChip {
id = `pn-input-chip-${uuidv4()}`;
/** The chip label text. */
label;
/** Optional value identifier emitted with the delete event. @category Native attributes */
value;
/** Add a leading icon to the chip. @category Features */
icon;
/** Use the small size for the input chip. @category Features */
small = false;
/** Use the large size for the input chip. @category Features */
large = false;
/** Disable the chip. When disabled, the chip is not interactive. @category Native attributes */
disabled = false;
/** Emitted when the chip is clicked (removed). */
pnDelete;
/**
* A unique HTML ID for the input chip.
* @category HTML attributes
*/
pnId;
handleDelete = () => {
if (!this.disabled) {
this.pnDelete.emit({ label: this.label, value: this.value });
}
};
getId() {
return this.pnId || this.id;
}
render() {
return (h(Host, { key: '38bf6d618ac176e63fc2da44b20aa45b744c3ff8' }, h("button", { key: '43a8fa2b75eedefef49ce8881c72e86cf1323486', type: "button", class: "pn-input-chip", id: this.getId(), "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large, disabled: this.disabled, "aria-label": `Remove ${this.label}`, onClick: this.handleDelete }, !!this.icon && h("pn-icon", { key: '53b015eba2c0a074febc78089bcdefc9cb799ad1', class: "pn-input-chip-icon", icon: this.icon }), h("span", { key: '0baa4ef7ebe84ac5102f295c02ad3f0e08a6516e', class: "pn-input-chip-label" }, this.label), !this.disabled && h("pn-icon", { key: '320c04a05bb38411734a77c085bd536c29296423', color: "blue700", icon: close_small }))));
}
static get is() { return "pn-input-chip"; }
static get originalStyleUrls() {
return {
"$": ["pn-input-chip.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-input-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 chip label text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Optional value identifier emitted with the delete event."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Add a leading icon to the 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 input 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 input chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "large",
"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 chip. When disabled, the chip is not interactive."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML attributes"
}],
"text": "A unique HTML ID for the input chip."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id"
}
};
}
static get events() {
return [{
"method": "pnDelete",
"name": "pnDelete",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the chip is clicked (removed)."
},
"complexType": {
"original": "{ label: string; value?: string }",
"resolved": "{ label: string; value?: string; }",
"references": {}
}
}];
}
}