@cbpds/web-components
Version:
Web components for the CBP Design System.
66 lines (60 loc) • 7.25 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpChipCss = ":root{--cbp-chip-color-text:var(--cbp-color-text-lightest);--cbp-chip-color-text-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-hover:var(--cbp-color-text-lightest);--cbp-chip-color-text-hover-dark:var(--cbp-color-text-lightest);--cbp-chip-color-text-focus:var(--cbp-color-text-lightest);--cbp-chip-color-text-focus-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-pressed:var(--cbp-color-text-lightest);--cbp-chip-color-text-pressed-dark:var(--cbp-color-text-darkest);--cbp-chip-color-text-disabled:var(--cbp-color-interactive-disabled-light);--cbp-chip-color-text-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-chip-color-background:var(--cbp-color-interactive-secondary-dark);--cbp-chip-color-background-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-chip-color-background-hover:var(--cbp-color-interactive-secondary-darker);--cbp-chip-color-background-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-chip-color-background-focus:var(--cbp-color-interactive-focus-dark);--cbp-chip-color-background-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-chip-icon-color-background-focus:transparent;--cbp-chip-icon-color-background-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-chip-color-background-pressed:var(--cbp-color-interactive-selected-dark);--cbp-chip-color-background-pressed-dark:var(--cbp-color-interactive-selected-light);--cbp-chip-color-background-disabled:var(--cbp-color-interactive-disabled-dark);--cbp-chip-color-background-disabled-dark:var(--cbp-color-interactive-disabled-light);--cbp-chip-icon-color-outline-focus:var(--cbp-color-white);--cbp-chip-icon-color-outline-focus-dark:transparent}[data-cbp-theme=light] cbp-chip[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-chip:not([context=dark-inverts]):not([context=light-always]){--cbp-chip-color-text:var(--cbp-chip-color-text-dark);--cbp-chip-color-text-hover:var(--cbp-chip-color-text-hover-dark);--cbp-chip-color-text-focus:var(--cbp-chip-color-text-focus-dark);--cbp-chip-color-text-pressed:var(--cbp-chip-color-text-pressed-dark);--cbp-chip-color-text-disabled:var(--cbp-chip-color-text-disabled-dark);--cbp-chip-color-background:var(--cbp-chip-color-background-dark);--cbp-chip-color-background-hover:var(--cbp-chip-color-background-hover-dark);--cbp-chip-color-background-focus:var(--cbp-chip-color-background-focus-dark);--cbp-chip-icon-color-background-focus:var(--cbp-chip-icon-color-background-focus-dark);--cbp-chip-color-background-pressed:var(--cbp-chip-color-background-pressed-dark);--cbp-chip-color-background-disabled:var(--cbp-chip-color-background-disabled-dark);--cbp-chip-icon-color-outline-focus:var(--cbp-chip-icon-color-outline-focus-dark)}cbp-chip button{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:0 0 0 var(--cbp-space-3x);color:var(--cbp-chip-color-text);background-color:var(--cbp-chip-color-background);border-width:0;border-radius:var(--cbp-border-radius-pill);text-transform:uppercase;line-height:var(--cbp-space-7x);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);max-width:100%;white-space:nowrap}cbp-chip button .cbp-chip__label{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}cbp-chip button .cbp-chip__label+cbp-icon{display:flex;align-items:center;justify-content:center;min-width:var(--cbp-space-7x);min-height:var(--cbp-space-7x);border-width:0;border-radius:var(--cbp-border-radius-pill);margin-left:4px}cbp-chip button .cbp-chip__label+cbp-icon svg{transition:var(--cbp-motion-duration-shortest)}cbp-chip button :last-child{--cbp-icon-size:var(--cbp-space-3x)}cbp-chip button[aria-pressed=true]{background-color:var(--cbp-chip-color-background-pressed);color:var(--cbp-chip-color-text-pressed)}cbp-chip button[aria-pressed=true] .cbp-chip__label+cbp-icon[name=plus]>svg{transform:rotate(-135deg)}cbp-chip button:hover:not(:disabled){cursor:pointer}cbp-chip button:hover:not(:disabled) .cbp-chip__label+cbp-icon{color:var(--cbp-chip-color-text-hover);background-color:var(--cbp-chip-color-background-hover)}cbp-chip button:focus-visible{background-color:var(--cbp-chip-color-background-focus);outline:0}cbp-chip button:focus-visible>.cbp-chip__label+cbp-icon{background-color:var(--cbp-chip-icon-color-background-focus);border-color:var(--cbp-color-white);border:var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus);outline:var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);color:var(--cbp-color-text-lightest);outline-offset:-4px}cbp-chip button:disabled{font-style:italic;background-color:var(--cbp-chip-color-background-disabled);color:var(--cbp-chip-color-text-disabled)}";
const CbpChipStyle0 = cbpChipCss;
const CbpChip = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.chipClick = index.createEvent(this, "chipClick", 7);
this.iconName = "plus";
this.name = undefined;
this.value = undefined;
this.pressed = false;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleClick(e) {
this.ariaPressed = !this.ariaPressed;
if (this.iconName == "plus") {
this.button.setAttribute('aria-pressed', `${this.ariaPressed}`);
}
else {
this.pressed = !this.pressed;
this.pressed ? this.icon.name = "times" : this.icon.name = this.iconName;
}
this.chipClick.emit({
host: this.host,
name: this.name,
value: this.value || this.button.innerText,
active: this.ariaPressed,
nativeEvent: e,
});
}
componentWillLoad() {
this.ariaPressed = this.pressed ? true : false;
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!this.icon)
this.icon = this.host.querySelector('cbp-icon');
this.iconName = this.icon.name;
}
render() {
return (index.h(index.Host, { key: '7f7316e5ee918ce49276800ad1f15f037b410423' }, index.h("button", { key: '8414d1273efd3ee3a9ca820e040ac6438d7dfa0e', type: "button", value: this.value, "aria-pressed": `${this.pressed}`, ref: (el) => this.button = el, onClick: (e) => this.handleClick(e), disabled: this.disabled }, index.h("span", { key: '173a2a7cc71b7ae22cdbdb53d170a1012f67fcdc', class: "cbp-chip__label" }, index.h("slot", { key: '59a35e632ddf8922e67cda10919b732772548e0e' })), this.host.querySelector('[slot=cbp-chip-icon]')
? index.h("slot", { name: "cbp-chip-icon" })
: index.h("cbp-icon", { name: "plus", ref: el => this.icon = el }))));
}
get host() { return index.getElement(this); }
};
CbpChip.style = CbpChipStyle0;
exports.cbp_chip = CbpChip;
//# sourceMappingURL=cbp-chip.cjs.entry.js.map