@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
69 lines (65 loc) • 6.33 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as classnames } from './index2.js';
import { s as statusNote } from './status-note.js';
const notificationBadgeCss = ":host{--padding-type-text-after-badge-slot:0 0 0 12px;--padding-type-icon-after-badge-slot:0 0 0 7px;--background-color-circle:var(--telekom-color-primary-standard);--color-circle:var(--telekom-color-text-and-icon-inverted-standard);--font-size-circle:var(--telekom-typography-font-size-badge);--font-weight-circle:bold;--border-radius-circle:var(--telekom-radius-circle);--color-notification-badge-border-focus:var(\n --telekom-color-functional-focus-standard\n );--color-notification-badge-border-hover:var(\n --telekom-color-text-and-icon-primary-hovered\n );--line-width-notification-badge-border-focus:2px;--padding-notification-badge-border:8px 5px 0 5px;--margin-notification-badge-border:-8px -5px 0 -5px}.notification-badge-border{display:inline-block;border:var(--line-width-notification-badge-border-focus) solid transparent;padding:var(--padding-notification-badge-border);margin:var(--margin-notification-badge-border)}.notification-badge-border:hover{color:var(--color-notification-badge-border-hover);cursor:pointer}.notification-badge-border:focus{border:var(--line-width-notification-badge-border-focus) solid\n var(--color-notification-badge-border-focus);outline:none;padding:var(--padding-notification-badge-border);border-radius:3px}.notification-badge{display:flex;align-items:center}.notification-badge__wrapper{text-decoration:none;position:relative;display:inline-block;justify-content:center}.notification-badge--nav-icon .notification-badge__wrapper{margin-bottom:-5px}.notification-badge__circle{display:flex;position:absolute;font-size:var(--font-size-circle);font-weight:var(--font-weight-circle);border-radius:var(--border-radius-circle);background-color:var(--background-color-circle);color:var(--color-circle);align-items:center;justify-content:center}.notification-badge.notification-badge--label .notification-badge__circle{padding:0 2px}::slotted([slot='after-badge']){padding:var(--padding-type-icon-after-badge-slot)}.notification-badge.notification-badge--text ::slotted([slot='after-badge']){padding:var(--padding-type-text-after-badge-slot)}@media (min-width: 1040px){.notification-badge.notification-badge--icon .notification-badge__circle{top:-4px;right:-2px;height:8px;min-width:8px}.notification-badge.notification-badge--label.notification-badge--icon .notification-badge__circle{top:-8px;right:-5px;height:14px;min-width:10px}.notification-badge.notification-badge--nav-icon .notification-badge__circle{top:-5px;right:4px;height:8px;min-width:8px}.notification-badge.notification-badge--label.notification-badge--nav-icon .notification-badge__circle{top:-8px;right:1px;height:14px;min-width:10px}.notification-badge.notification-badge--text .notification-badge__circle{top:-5px;right:-10px;height:8px;min-width:8px}.notification-badge.notification-badge--label.notification-badge--text .notification-badge__circle{top:-10px;right:-15px;height:14px;min-width:10px}}@media (max-width: 1039px){.notification-badge.notification-badge--icon .notification-badge__circle{top:-4px;right:-1px;height:8px;min-width:8px}.notification-badge.notification-badge--label.notification-badge--icon .notification-badge__circle{top:-6px;right:-4px;height:14px;min-width:10px}.notification-badge.notification-badge--nav-icon .notification-badge__circle{top:0px;right:-1px;height:6px;min-width:6px}.notification-badge.notification-badge--label.notification-badge--nav-icon .notification-badge__circle{top:-3px;right:-4.5px;height:12px;min-width:8px}.notification-badge.notification-badge--text .notification-badge__circle{top:-4px;right:-10px;height:6px;min-width:6px}.notification-badge.notification-badge--label.notification-badge--text .notification-badge__circle{top:-6px;right:-15px;height:14px;min-width:10px}}";
const NotificationBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** (optional) Maximal number of characters displayed in the badge */
this.maxCharacters = 3;
/** (optional) Setting/Slotcontent in which the badge is used */
this.type = 'icon';
}
connectedCallback() {
statusNote({ source: this.hostElement, tag: 'beta' });
}
getBadgeLabel() {
if (this.label) {
if (!isNaN(this.label)) {
let labelNumber = '' + this.label;
if (labelNumber.length > this.maxCharacters) {
const SI_SYMBOL = ['', 'k', 'M', 'G', 'T', 'P', 'E'];
const tier = Math.floor(Math.log10(Number(this.label)) / 3) || 0;
if (tier > 0) {
const scaled = Number(this.label) / Math.pow(10, tier * 3);
labelNumber = scaled.toFixed(1).replace('.0', '') + SI_SYMBOL[tier];
}
}
return labelNumber;
}
return this.label;
}
}
getRender() {
return (h("div", { class: this.getCssClassMap() }, h("span", { class: "notification-badge__wrapper" }, h("slot", null), h("span", { class: "notification-badge__circle" }, this.getBadgeLabel())), h("slot", { name: "after-badge" })));
}
render() {
return (h(Host, null, this.type !== 'nav-icon' ? (h("div", { class: "notification-badge-border", tabIndex: 0, onClick: this.clickHandler }, this.getRender())) : (this.getRender())));
}
getCssClassMap() {
return classnames(`notification-badge`, this.label && `notification-badge--label`, this.type && `notification-badge--${this.type}`);
}
get hostElement() { return this; }
static get style() { return notificationBadgeCss; }
}, [1, "scale-notification-badge", {
"label": [2],
"maxCharacters": [2, "max-characters"],
"type": [1],
"clickHandler": [8, "click-handler"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["scale-notification-badge"];
components.forEach(tagName => { switch (tagName) {
case "scale-notification-badge":
if (!customElements.get(tagName)) {
customElements.define(tagName, NotificationBadge);
}
break;
} });
}
export { NotificationBadge as N, defineCustomElement as d };