import { r as registerInstance, h, H as Host } from './index-c269755a.js';
import { e as errorFilled } from './error-filled-824dfb8c.js';

const teliaFieldAssistiveTextCss = ":host{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;color:rgba(0, 0, 0, 0.6);display:block;padding:calc(0.4rem * var(--voca-rem-multiplier)) 0 0}";

const TeliaFieldAssistiveText = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-field-assistive-text';
  }
  render() {
    return (h(Host, null, h("telia-vst", { dataTrackingId: this.dataTrackingId }), h("slot", null)));
  }
};
TeliaFieldAssistiveText.style = teliaFieldAssistiveTextCss;

const teliaFieldErrorCss = ":host{display:block}.telia-field-error{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;color:#e4175c;display:flex;flex-direction:row}.telia-field-error__icon{flex:none;line-height:1.5;margin:calc(0.4rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier)) 0 0;vertical-align:middle}";

const TeliaFieldError = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Test id set for web component host */
    this.dataTestid = null;
    /** Required change type in fields for screen reader  */
    this.relevant = 'additions text';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-field-error';
  }
  render() {
    return (h("div", { class: "telia-field-error", "aria-live": "assertive", "aria-relevant": this.relevant }, h("telia-icon", { class: "telia-field-error__icon", size: "sm", svg: errorFilled.svg }), h("slot", null), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaFieldError.style = teliaFieldErrorCss;

const teliaLabelCss = ".telia-label{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.25;color:#222222;order:1}";

const TeliaLabel = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Test id set for web component host */
    this.dataTestid = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-label';
    /**
     * Renders content passed in via props or fallbacks to slot
     * @private
     */
    this.renderContent = () => {
      if (this.text) {
        return this.text;
      }
      return h("slot", null);
    };
  }
  render() {
    return (h("label", { class: "telia-label", htmlFor: this.htmlFor, "data-testId": this.dataTestid }, this.renderContent(), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaLabel.style = teliaLabelCss;

export { TeliaFieldAssistiveText as telia_field_assistive_text, TeliaFieldError as telia_field_error, TeliaLabel as telia_label };
