UNPKG

@telekom/scale-components

Version:

Scale is the digital design system for Telekom products and experiences.

1 lines 2.07 kB
import{r as e,h as t,a as r}from"./p-d52b3602.js";const n=class{constructor(t){e(this,t),this.variant="informational"}renderHelperIcon(){const e=this.variant;return"informational"===e||"warning"===e?t("scale-icon-alert-information",null):"danger"===e?t("scale-icon-alert-error",null):"success"===e?t("scale-icon-action-success",null):void 0}render(){return t(r,null,t("div",{class:{"helper-text":!0,"helper-text--informational":"informational"===this.variant,"helper-text--warning":"warning"===this.variant,"helper-text--danger":"danger"===this.variant,"helper-text--success":"success"===this.variant,"helper-text--neutral":"neutral"===this.variant},part:"base"},t("span",{part:"text"},this.helperText?this.helperText:t("slot",null)),this.renderHelperIcon()),this.styles&&t("style",null,this.styles))}};n.style=":host{--color-informational:var(\n --telekom-color-text-and-icon-functional-informational\n );--color-warning:var(--telekom-color-text-and-icon-functional-warning);--color-danger:var(--telekom-color-text-and-icon-functional-danger);--color-success:var(--telekom-color-text-and-icon-functional-success);--color-neutral:var(--telekom-color-text-and-icon-additional);--font-size:0.75rem;--font-weight:700;--line-height:1.35;--icon-size-helper-text:11px}.helper-text{display:flex;align-items:flex-start;flex-direction:row-reverse;justify-content:flex-end;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}[part='text']{text-align:left}scale-icon-alert-information,scale-icon-alert-error,scale-icon-alert-success{display:flex;justify-content:center;align-items:center;margin-right:var(--telekom-spacing-composition-space-03);margin-top:0.1666em;}.scale-icon{height:var(--icon-size-helper-text);width:var(--icon-size-helper-text)}.helper-text--informational{color:var(--color-informational)}.helper-text--warning{color:var(--color-warning)}.helper-text--danger{color:var(--color-danger)}.helper-text--success{color:var(--color-success)}.helper-text--neutral{color:var(--color-neutral)}";export{n as scale_helper_text}