gm-web-components/dist/stencil-starter-project-name/gm-app-component.entry.js

Web components for GamaSmart

import { h, r as registerInstance } from './core-c70dfa5a.js';

// import { Component, Prop, h, getAssetPath, Host, State } from "@stencil/core";
const IconComponent = ({ img, title, destination }) => (h("div", { class: "logo-container" },
    h("img", { src: img }),
    h("a", { href: destination, target: "_blank" }, title)));

const GmAppComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.showModal = false;
        // iconReturn() {
        //   console.log("iz iconreturna");
        //   return (
        //     // <icon-component imga={this.img} urla={this.url} desca={this.desc}>
        //     //   koji kurac ne radi
        //     // </icon-component>
        //     <div>
        //       renderuj nesto {this.img} {this.desc} {this.url}
        //       <icon-component
        //         imga={this.img}
        //         urla={this.url}
        //         desca={this.desc}
        //       ></icon-component>
        //     </div>
        //   );
        // }
        this.menuToggle = e => {
            this.showModal = !this.showModal;
            return e.currentTarget.classList.toggle("change");
        };
    }
    componentWillLoad() {
        // this.parseMyObjectProp(this.myObject);
        this.parseMyArrayProp(this.myArray);
        console.log(this.myInnerArray);
    }
    componentDidLoad() {
        console.log("kad je loudovano", this.myInnerArray);
        console.log("kad je loudovano", this.myInnerObject);
    }
    // @Watch("myObject")
    // parseMyObjectProp(newValue: string) {
    //   console.log("uslo ovde objekat");
    //   if (newValue) this.myInnerObject = JSON.parse(newValue);
    // }
    parseMyArrayProp(newValue) {
        console.log("uslo ovde arraj");
        if (newValue) {
            this.myInnerArray = JSON.parse(newValue);
            console.log(newValue);
        }
    }
    render() {
        // console.log(this.myInnerArray);
        return [
            h("div", { class: "test-container" }, h("div", { class: "container", onClick: e => this.menuToggle(e) }, h("div", { class: "bar1" }), h("div", { class: "bar2" }), h("div", { class: "bar3" })), h("div", null, this.showModal ? (h("div", { class: "pop-holder-container" }, this.myInnerArray.map(el => (h(IconComponent, { img: el.img, destination: el.destination, title: el.title }))))) : ("")), h("slot", null))
        ];
    }
    static get watchers() { return {
        "myArray": ["parseMyArrayProp"]
    }; }
    static get style() { return ".test-container {\n  width: 900px;\n  margin: 0 auto;\n}\n\nul {\n  list-style: none;\n}\n\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: white !important;\n  border-radius: 10px !important;\n}\n\n/* Handle */\n::-webkit-scrollbar-thumb {\n  background-color: #f5f3f6 !important;\n  border-radius: none !important;\n}\n\n.container {\n  display: inline-block;\n  cursor: pointer;\n  margin: 0 auto;\n}\n\n.bar1,\n.bar2,\n.bar3 {\n  width: 35px;\n  height: 5px;\n  background-color: #333;\n  margin: 6px 0;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n}\n\n.change .bar1 {\n  -webkit-transform: rotate(-45deg) translate(-9px, 6px);\n  transform: rotate(-45deg) translate(-9px, 6px);\n}\n\n.change .bar2 {\n  opacity: 0;\n}\n\n.change .bar3 {\n  -webkit-transform: rotate(45deg) translate(-8px, -8px);\n  transform: rotate(45deg) translate(-8px, -8px);\n}\n\n.pop-holder-container {\n  width: 300px;\n  height: 300px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  -webkit-box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n}\n.pop-holder-container .logo-container {\n  margin-top: 10px;\n  width: 33.3%;\n  height: 50%;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n.pop-holder-container .logo-container img {\n  width: 100%;\n  height: 50%;\n  -o-object-fit: scale-down;\n  object-fit: scale-down;\n}\n.pop-holder-container .logo-container a {\n  width: 100%;\n  text-align: center;\n  margin-top: 5px;\n  color: #321850;\n}\n.pop-holder-container .logo-container:hover {\n  cursor: pointer;\n}"; }
};
{
    /* <div class="pop-holder-container">
            {this.myInnerArray.map(el => (
              <IconComponent
                img={el.img}
                url={el.destination}
                desc={el.title}
              ></IconComponent>
            ))} */
}
{
    /* <div class="logo-container">
              <img src={getAssetPath(`./assets/${this.img}`)} />
              <a href={this.url} target="_blank">
                {this.desc}
              </a>
            </div> */
}
{
    /* {this.iconReturn()} */
}
{
    /* <icon-component
            imga={this.img}
            urla={this.url}
            desca={this.desc}
          ></icon-component> */
}
{
    /* </div> */
}
{
    /* <div>
            {this.showModal ? (
              <div class="pop-holder-container">
                {this.myInnerArray.map(imga => (
                  <div class="logo-container">
                    <img src={getAssetPath(`./assets/${imga.img}`)} />
                    <a href={imga.destination} target="_blank">
                      {imga.title}
                    </a>
                  </div>
                ))}
              </div>
            ) : (
              ""
            )}
          </div> */
}

export { GmAppComponent as gm_app_component };