@postnord/web-components
Version:
PostNord Web Components
66 lines (62 loc) • 9.07 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-XKg-ydzH.js';
import { uuidv4 } from './index.js';
import { c as check } from './check-BpI8peGn.js';
const pnChoiceChipCss = () => `${transformTag("pn-choice-chip")}{display:inline-block}${transformTag("pn-choice-chip")} .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}${transformTag("pn-choice-chip")} .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-container{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-container{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}${transformTag("pn-choice-chip")} .pn-choice-chip-container[data-large]{padding:0.6875em 1.25em}${transformTag("pn-choice-chip")} .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-icon ${transformTag("pn-icon")}.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}${transformTag("pn-choice-chip")} .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-choice-chip")} .pn-choice-chip-label{transition-duration:0s;transition-delay:0s}}${transformTag("pn-choice-chip")} .pn-choice-chip-label{cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}${transformTag("pn-choice-chip")} .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}${transformTag("pn-choice-chip")} .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}${transformTag("pn-choice-chip")} .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled{cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}${transformTag("pn-choice-chip")} .pn-choice-chip>input:disabled~.pn-choice-chip-container ${transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}`;
const PnChoiceChip = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-choice-chip-${uuidv4()}`;
get hostElement() { return getElement(this); }
/** 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' }))))));
}
};
PnChoiceChip.style = pnChoiceChipCss();
export { PnChoiceChip as pn_choice_chip };