/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */
import { Component, h, Prop, Host, Element } from '@stencil/core';
import classNames from 'classnames';
export class Logo {
  constructor() {
    /** (optional) Variant/color of the logo text and logo */
    this.variant = 'magenta';
    /** (optional) Set transparent background */
    this.transparent = false;
    /** (optional) Language of the logo text/ claimOff showes just the T Logo */
    this.language = 'en';
    /** (optional) The height in pixels */
    this.size = 36;
    /** (optional) Set a link */
    this.href = 'javascript:void(0);';
    this.focusable = true;
    this.scrollIntoViewOnFocus = false;
    this.logoTitle = 'Telekom Logo';
  }
  render() {
    return (h(Host, null,
      h("style", null,
        this.size ? `:host { --logo-size: ${this.size}px; }` : '',
        this.styles),
      h("a", { href: this.href, class: this.getCssClassMap(), tabIndex: this.focusable === false ? -1 : 0, onFocus: () => {
          if (this.scrollIntoViewOnFocus === true) {
            window.scrollTo({ top: 0 });
          }
        }, title: this.logoTitle, "aria-describedby": this.logoAriaDescribedBy },
        h("scale-logo-svg", { language: this.language, color: this.variant, accessibilityTitle: this.accessibilityTitle, role: "link" }))));
  }
  getCssClassMap() {
    return classNames(`logo`, this.variant && `logo--variant-${this.variant}`, this.transparent && `logo--transparent`);
  }
  static get is() { return "scale-logo"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["./logo.css"]
  }; }
  static get styleUrls() { return {
    "$": ["logo.css"]
  }; }
  static get properties() { return {
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'magenta' | 'white'",
        "resolved": "\"magenta\" | \"white\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "(optional) Variant/color of the logo text and logo"
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "'magenta'"
    },
    "transparent": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "(optional) Set transparent background"
      },
      "attribute": "transparent",
      "reflect": false,
      "defaultValue": "false"
    },
    "language": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| 'de'\n    | 'en'\n    | 'cz'\n    | 'hr'\n    | 'hu'\n    | 'me'\n    | 'mk_lat'\n    | 'mk_kyr'\n    | 'ro'\n    | 'sk'\n    | string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "(optional) Language of the logo text/ claimOff showes just the T Logo"
      },
      "attribute": "language",
      "reflect": false,
      "defaultValue": "'en'"
    },
    "size": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "(optional) The height in pixels"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "36"
    },
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "(optional) Set a link"
      },
      "attribute": "href",
      "reflect": false,
      "defaultValue": "'javascript:void(0);'"
    },
    "accessibilityTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "(optional) When using the icon standalone, make it meaningful for accessibility"
      },
      "attribute": "accessibility-title",
      "reflect": false
    },
    "styles": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "(optional) Injected CSS styles"
      },
      "attribute": "styles",
      "reflect": false
    },
    "focusable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focusable",
      "reflect": false,
      "defaultValue": "true"
    },
    "scrollIntoViewOnFocus": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scroll-into-view-on-focus",
      "reflect": false,
      "defaultValue": "false"
    },
    "logoTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "logo-title",
      "reflect": false,
      "defaultValue": "'Telekom Logo'"
    },
    "logoAriaDescribedBy": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "logo-aria-described-by",
      "reflect": false
    }
  }; }
  static get elementRef() { return "hostElement"; }
}
