import { Component, h, Host, Prop } from '@stencil/core';
import createSvg from '../../utils/createSvg';
import getSvgContent from '../../utils/getSvgContent';
import { getIconsBundle, hasIconsBundleBeenRegistered } from '@teliads/icons';
export class TeliaIcon {
  constructor() {
    /** Icon size */
    this.size = 'md';
    /** Describe unclear icon context for better accessibility support. */
    this.allyTitle = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-icon';
  }
  /**
   * Returns svg string from svg property or svg string from icons bundle if icons bundle is registered
   * @private
   * @returns string
   */
  getSvgString() {
    if (this.svg) {
      return this.svg;
    }
    if (hasIconsBundleBeenRegistered() && this.name) {
      const icons = getIconsBundle();
      return icons[this.name] ? icons[this.name].svg : '';
    }
    if (this.name) {
      console.warn(this.name, 'Icons bundle is not registered and will not be rendered. Check if you have registered icons bundle or use svg property');
    }
    return '';
  }
  render() {
    let svgIconString = this.getSvgString();
    let svgAttributes = [{ name: 'viewBox', value: '0 0 64 64' }];
    // If title is defined, title is linked to svg. Otherwise svg is hidden from screen readers.
    if (this.allyTitle) {
      svgAttributes = [...svgAttributes, { name: 'role', value: 'img' }];
    }
    else {
      svgAttributes = [
        ...svgAttributes,
        { name: 'aria-hidden', value: 'true' },
      ];
    }
    const svgString = createSvg({
      content: getSvgContent(svgIconString),
      attributes: svgAttributes,
      title: this.allyTitle,
    });
    return (h(Host, { class: `telia-icon telia-icon--${this.size}` },
      h("span", { "aria-label": this.allyTitle, class: "telia-icon__container", innerHTML: svgString }),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-icon"; }
  static get originalStyleUrls() { return {
    "$": ["telia-icon.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-icon.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IconProps['name']",
        "resolved": "\"check-bold\" | \"minus-bold\" | \"4g\" | \"5g\" | \"accessories\" | \"activity-level\" | \"add\" | \"address-book\" | \"ai-robot\" | \"airplay\" | \"alarm-off\" | \"alarm\" | \"alert-filled\" | \"alert\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-subdirectory\" | \"arrow-up\" | \"attachment\" | \"b2b-customer\" | \"bag\" | \"bar-chart\" | \"basketball\" | \"battery\" | \"blood-pressure\" | \"bluetooth\" | \"bookmark\" | \"broadband\" | \"broken-phone\" | \"bulb\" | \"business-continuity\" | \"business-intelligence\" | \"calendar\" | \"camera\" | \"card-view\" | \"care\" | \"cart\" | \"cast\" | \"chat-robot\" | \"chat\" | \"check-circle-filled\" | \"check-circle\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"child-1\" | \"child-2\" | \"close-circle\" | \"close\" | \"cloud-connect\" | \"cloud\" | \"coffee\" | \"compass\" | \"connected-building\" | \"connected\" | \"construction\" | \"conversation\" | \"copy\" | \"core-router\" | \"credit-card\" | \"customer-dialogue\" | \"daas-device\" | \"data-transfer\" | \"delete-filled\" | \"delete\" | \"delivery\" | \"desktop\" | \"devices\" | \"dislike\" | \"doc\" | \"document-doc\" | \"document-edit\" | \"document-pdf\" | \"document-ppt\" | \"download\" | \"drone\" | \"dsl-hub\" | \"edit\" | \"education\" | \"efficiency\" | \"email\" | \"end-user\" | \"entertainment\" | \"environment\" | \"error-filled\" | \"error\" | \"esim-simcard\" | \"esim\" | \"euro\" | \"excel\" | \"external\" | \"face-id\" | \"facebook\" | \"facemask\" | \"fiber\" | \"film\" | \"filter\" | \"fingerprint\" | \"flag\" | \"focus\" | \"folder-copy\" | \"folder-new\" | \"folder\" | \"food\" | \"fraud\" | \"games\" | \"getting-started\" | \"gif\" | \"graph\" | \"grid-view\" | \"handshake\" | \"headphones\" | \"heart-filled\" | \"heart\" | \"help\" | \"home-care\" | \"home-installation\" | \"home\" | \"hospital\" | \"image\" | \"industrial-iot\" | \"industry\" | \"infinite\" | \"info-filled\" | \"info\" | \"instagram\" | \"internet\" | \"invoice\" | \"job-search\" | \"key\" | \"kontantkort\" | \"laptop\" | \"late-payment\" | \"layers\" | \"letter\" | \"like\" | \"link\" | \"linkedin\" | \"list-view\" | \"lock-closed\" | \"lock-open\" | \"login\" | \"logout\" | \"map\" | \"measuring-health\" | \"media-content\" | \"megaphone\" | \"menu\" | \"microphone\" | \"minus\" | \"mms\" | \"mobile-broadband\" | \"moisture\" | \"money-back\" | \"money-euro\" | \"money-krone\" | \"more-horizontal\" | \"more-vertical\" | \"music\" | \"mute\" | \"network\" | \"new-contact\" | \"new-group\" | \"news\" | \"offering\" | \"offshore\" | \"optimization\" | \"org-chart\" | \"parental-guide\" | \"password-invisible\" | \"password-visible\" | \"pay-monthly\" | \"pay-once\" | \"payment-success\" | \"pebble\" | \"people-hub\" | \"people\" | \"pet-dog\" | \"phone-recycling\" | \"phone-ringing\" | \"phone\" | \"pie-chart\" | \"pin\" | \"plane\" | \"play\" | \"player-settings\" | \"plus-minus\" | \"plus\" | \"police\" | \"portal\" | \"power-grid\" | \"premises-datacenter\" | \"premises-large\" | \"premises-medium\" | \"premises-small\" | \"premises\" | \"present\" | \"press-button\" | \"price\" | \"print\" | \"pulse\" | \"question-filled\" | \"question\" | \"rack\" | \"radio\" | \"record\" | \"recycle\" | \"refill-card\" | \"register\" | \"remote-control\" | \"repair\" | \"report\" | \"reservation\" | \"reverse\" | \"roaming\" | \"route\" | \"router\" | \"ruler\" | \"satellite\" | \"save\" | \"savings\" | \"search\" | \"secure-device\" | \"secured-1\" | \"secured-2\" | \"security-camera\" | \"send\" | \"sense-car\" | \"server\" | \"service-device\" | \"service-supervision\" | \"services\" | \"settings\" | \"share\" | \"shopping\" | \"shuffle\" | \"signature\" | \"simcard\" | \"skip-back-10sec\" | \"skip-back-30sec\" | \"skip-forward-10sec\" | \"skip-forward-30sec\" | \"slow-wifi\" | \"smart-wifi\" | \"smartphone\" | \"smartwatch\" | \"smiley-happy\" | \"smiley-sad\" | \"sms\" | \"snapchat\" | \"snowflake\" | \"sorter\" | \"speedometer\" | \"spell-check\" | \"split\" | \"spyware\" | \"star-filled\" | \"star\" | \"stop\" | \"store\" | \"stream\" | \"suitcase\" | \"summary\" | \"support\" | \"sustainability\" | \"switch\" | \"sync\" | \"table-view\" | \"tablet\" | \"tag\" | \"temperature\" | \"thinking\" | \"time\" | \"trade-phone\" | \"trailer\" | \"train\" | \"transfer\" | \"tv-next\" | \"tv-pause\" | \"tv-play\" | \"tv-previous\" | \"tv-stop\" | \"tv\" | \"twitter\" | \"undo\" | \"upload\" | \"usb\" | \"user-admin\" | \"vcard\" | \"video-conference\" | \"video\" | \"voice-switch\" | \"voicemail\" | \"volume\" | \"wallet\" | \"wallplug\" | \"warning\" | \"wavelength\" | \"weather\" | \"wireless-off\" | \"wireless\" | \"world-alert\" | \"world-off\" | \"world-question\" | \"world\" | \"youtube\" | \"zoom-out\" | \"zoom\"",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Icon name used for rendering icons from bundle (registerIconsBundle shim needs to be imported in app)"
      },
      "attribute": "name",
      "reflect": false
    },
    "svg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Svg string used for tree-shakable icon rendering"
      },
      "attribute": "svg",
      "reflect": false
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IconProps['size']",
        "resolved": "\"lg\" | \"md\" | \"sm\"",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Icon size"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'md'"
    },
    "allyTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IconProps['allyTitle']",
        "resolved": "string",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Describe unclear icon context for better accessibility support."
      },
      "attribute": "ally-title",
      "reflect": false,
      "defaultValue": "null"
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IconProps['dataTestid']",
        "resolved": "string",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    }
  }; }
}
