@postnord/web-components/esm/pn-input-chip.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, c as createEvent, h, a as Host } from './index-XKg-ydzH.js';
import { c as close_small } from './close_small-gPbnChG6.js';
import { uuidv4 } from './index.js';

const pnInputChipCss = () => `${transformTag("pn-input-chip")}{display:inline-block}${transformTag("pn-input-chip")} .pn-input-chip{position:relative;font-size:1em;font-weight:500;text-align:center;display:flex;align-items:center;gap:0.25em;padding:0.5em 0.5em 0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;cursor:pointer;transition-property:border-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-input-chip")} .pn-input-chip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-input-chip")} .pn-input-chip{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-input-chip")} .pn-input-chip[data-icon]{padding-left:0.75em}${transformTag("pn-input-chip")} .pn-input-chip[data-icon][data-small]{padding-left:0.5em}${transformTag("pn-input-chip")} .pn-input-chip[data-icon][data-large]{padding-left:1em}${transformTag("pn-input-chip")} .pn-input-chip[data-small]{padding:0.25em 0.25em 0.25em 0.75em}${transformTag("pn-input-chip")} .pn-input-chip[data-small] .pn-input-chip-label{line-height:1.25em;font-size:0.875em}${transformTag("pn-input-chip")} .pn-input-chip[data-large]{padding:0.6875em 0.6875em 0.6875em 1.25em}${transformTag("pn-input-chip")} .pn-input-chip:hover{background-color:#effbff;border-color:#005d92}${transformTag("pn-input-chip")} .pn-input-chip:hover .pn-input-chip-label{color:#005d92}${transformTag("pn-input-chip")} .pn-input-chip:hover .pn-input-chip-icon .pn-icon-svg path{fill:#005d92}${transformTag("pn-input-chip")} .pn-input-chip:focus-visible{outline-color:#005d92;border-color:#005d92}${transformTag("pn-input-chip")} .pn-input-chip:active{background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-input-chip")} .pn-input-chip:active .pn-input-chip-label{color:#0d234b}${transformTag("pn-input-chip")} .pn-input-chip:active .pn-input-chip-icon .pn-icon-svg path{fill:#0d234b}${transformTag("pn-input-chip")} .pn-input-chip:disabled{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${transformTag("pn-input-chip")} .pn-input-chip:disabled .pn-input-chip-label{color:#5e554a;margin-right:0.5em}${transformTag("pn-input-chip")} .pn-input-chip:disabled .pn-input-chip-icon .pn-icon-svg path{fill:#5e554a}${transformTag("pn-input-chip")} .pn-input-chip-icon{flex-shrink:0;width:1.5em;height:1.5em}${transformTag("pn-input-chip")} .pn-input-chip-label{color:#005d92;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}${transformTag("pn-input-chip")} .pn-input-chip-close{flex-shrink:0;width:1.5em;height:1.5em;display:flex;align-items:center;justify-content:center}`;

const PnInputChip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pnDelete = createEvent(this, "pnDelete", 7);
    }
    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 }))));
    }
};
PnInputChip.style = pnInputChipCss();

export { PnInputChip as pn_input_chip };