@salla.sa/twilight-components/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { h } from "@stencil/core";
import PencilRuler from "../../assets/svg/pencil-ruler.svg";
/**
 * @slot header - The upper section of the component.Empty by default.
 * @slot footer - The bottom section of the component.Empty by default.
 */
export class SallaProductSizeGuide {
  constructor() {
    this.guides = undefined;
    this.productId = undefined;
    this.placeholder_title = undefined;
    this.placeholder_description = undefined;
    this.modal_title = undefined;
    this.hasError = false;
    salla.event.on('size-guide::open', (product_id) => this.open(product_id));
    salla.lang.onLoaded(() => {
      this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
      this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
      this.modal_title = salla.lang.get('pages.products.size_guides');
    });
  }
  /**
   * Show the size-guide modal window
   */
  async open(product_id) {
    this.modal.setTitle(this.modal_title);
    this.modal.open();
    return await salla.api.withoutNotifier(() => salla.product.getSizeGuides(product_id))
      .then((response) => {
      this.guides = response.data;
    })
      .catch(e => {
      var _a, _b, _c, _d;
      console.log(e);
      this.hasError = true;
      this.placeholder_description = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
    })
      .finally(() => this.modal.stopLoading());
  }
  /**
   *
   * Hide the size-guide modal window
   */
  async close() {
    return this.modal.close();
  }
  showPlaceholder() {
    return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
  }
  render() {
    return (h("salla-modal", { class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !this.hasError && !!this.guides ?
      [
        h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
      ]
      : this.showPlaceholder(), h("slot", { name: "footer" })));
  }
  static get is() { return "salla-product-size-guide"; }
  static get originalStyleUrls() {
    return {
      "$": ["salla-product-size-guide.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["salla-product-size-guide.css"]
    };
  }
  static get states() {
    return {
      "guides": {},
      "productId": {},
      "placeholder_title": {},
      "placeholder_description": {},
      "modal_title": {},
      "hasError": {}
    };
  }
  static get methods() {
    return {
      "open": {
        "complexType": {
          "signature": "(product_id: number) => Promise<any>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<any>"
        },
        "docs": {
          "text": "Show the size-guide modal window",
          "tags": []
        }
      },
      "close": {
        "complexType": {
          "signature": "() => Promise<HTMLElement>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            },
            "HTMLElement": {
              "location": "global",
              "id": "global::HTMLElement"
            }
          },
          "return": "Promise<HTMLElement>"
        },
        "docs": {
          "text": "\nHide the size-guide modal window",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=salla-product-size-guide.js.map