@malga-checkout-full/core/dist/collection/components/malga-checkout-full/partials/malga-checkout-full-header/malga-checkout-full-header.js

Core components for Malga Checkout Full

import { t } from '@malga-checkout/i18n';
import { Component, Host, h, Prop, Event, State } from '@stencil/core';
import MalgaBrand from '../../../../assets/malga-brand.svg';
export class MalgaCheckoutFullHeader {
  constructor() {
    this.isLoading = false;
    this.imageLoaded = false;
    this.handleImageLoad = () => {
      this.imageLoaded = true;
    };
    this.handleNavigation = () => {
      if (this.backRoute) {
        location.assign(this.backRoute);
        return;
      }
      history.back();
    };
    this.renderImg = () => {
      if (this.brand) {
        return (h("img", { class: { 'malga-checkout-full-header__logo': true }, src: this.brand, alt: "Logo", onLoad: this.handleImageLoad }));
      }
      return (h("i", { class: { 'malga-checkout-full-header__logo': true }, innerHTML: MalgaBrand }));
    };
    this.handleChangeLanguage = (language) => {
      this.changeLanguage.emit({ value: language });
    };
  }
  render() {
    return (h(Host, { class: { 'malga-checkout-full-header__container': true } },
      this.isLoading && (h("div", { class: { 'malga-checkout-full-header__progress-horizontal': true } },
        h("div", { class: { 'malga-checkout-full-header__bar-horizontal': true } }))),
      h("header", { class: { 'malga-checkout-full-header__content': true } },
        !!this.backRoute && (h("button", { class: { 'malga-checkout-full-header__navigation': true }, onClick: this.handleNavigation },
          h("checkout-icon", { icon: "arrowLeft" }))),
        h("div", { class: { 'malga-checkout-full-header__brand-container': true } },
          this.renderImg(),
          h("div", { class: { 'malga-checkout-full-header__message': true } },
            h("checkout-icon", { icon: "lock" }),
            h("h5", null, t('page.safeEnvironment', this.locale)))),
        h("div", { class: { 'malga-checkout-full-header__language': true } },
          h("checkout-dropdown", { value: this.language, startIcon: "globe", options: [
              { label: 'Português', value: 'pt' },
              { label: 'English', value: 'en' },
            ], onChanged: ({ detail: { value } }) => this.handleChangeLanguage(value) })))));
  }
  static get is() { return "malga-checkout-full-header"; }
  static get originalStyleUrls() { return {
    "$": ["malga-checkout-full-header.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["malga-checkout-full-header.css"]
  }; }
  static get properties() { return {
    "locale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Locale",
        "resolved": "\"default\" | \"en\" | \"en-US\" | \"en_US\" | \"pt\" | \"pt-BR\" | \"pt_BR\"",
        "references": {
          "Locale": {
            "location": "import",
            "path": "@malga-checkout/i18n/dist/utils"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "locale",
      "reflect": false
    },
    "backRoute": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "back-route",
      "reflect": false
    },
    "brand": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "brand",
      "reflect": false
    },
    "language": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "language",
      "reflect": false
    },
    "isLoading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-loading",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "imageLoaded": {}
  }; }
  static get events() { return [{
      "method": "changeLanguage",
      "name": "changeLanguage",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ value: Locale }",
        "resolved": "{ value: Locale; }",
        "references": {
          "Locale": {
            "location": "import",
            "path": "@malga-checkout/i18n/dist/utils"
          }
        }
      }
    }]; }
}