@ptcwebops/ptcw-design 1.4.1 → 1.4.2

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.js

@@ -1,114 +1,114 @@
-import { h, Host } from '@stencil/core';
-export class PtcNavLink {
-  constructor() {
-    this.href = undefined;
-    this.isOutsideLink = false;
-    this.titleText = "";
-  }
-  handleClick() {
-    // Check if the href starts with #   
-    if (this.href && this.href.startsWith('#')) {
-      // Find the corresponding section
-      const section = document.querySelector(this.href);
-      section.scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-  }
-  componentWillLoad() {
-    // Get the text content of the <slot> tag
-    const text = this.el.textContent;
-    // Set the maximum number of characters to display
-    const charLimit = 32;
-    // Check if the text content is longer than the character limit
-    if (text.length > charLimit) {
-      // Adding link text in title
-      this.titleText = text;
-      // Trim the text to the character limit and add "..."
-      this.el.textContent = text.substring(0, charLimit) + "...";
-    }
-  }
-  render() {
-    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: () => { this.handleClick(); } }, h("slot", null), !(this.href.startsWith('#')) &&
-      h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))));
-  }
-  static get is() { return "ptc-nav-link"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "href": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Link href\r\nSpecify Link Href,"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "isOutsideLink": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "isOutsideLink = false"
-        },
-        "attribute": "is-outside-link",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "titleText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Anchor link Title"
-        },
-        "attribute": "title-text",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcNavLink {
+  constructor() {
+    this.href = undefined;
+    this.isOutsideLink = false;
+    this.titleText = "";
+  }
+  handleClick() {
+    // Check if the href starts with #   
+    if (this.href && this.href.startsWith('#')) {
+      // Find the corresponding section
+      const section = document.querySelector(this.href);
+      section.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
+  componentWillLoad() {
+    // Get the text content of the <slot> tag
+    const text = this.el.textContent;
+    // Set the maximum number of characters to display
+    const charLimit = 32;
+    // Check if the text content is longer than the character limit
+    if (text.length > charLimit) {
+      // Adding link text in title
+      this.titleText = text;
+      // Trim the text to the character limit and add "..."
+      this.el.textContent = text.substring(0, charLimit) + "...";
+    }
+  }
+  render() {
+    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: () => { this.handleClick(); } }, h("slot", null), !(this.href.startsWith('#')) &&
+      h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))));
+  }
+  static get is() { return "ptc-nav-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Link href\nSpecify Link Href,"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "isOutsideLink": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "isOutsideLink = false"
+        },
+        "attribute": "is-outside-link",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "titleText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Anchor link Title"
+        },
+        "attribute": "title-text",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.js

@@ -1,126 +1,126 @@
-import { Host, h } from '@stencil/core';
-export class PtcNavSlider {
-  constructor() {
-    this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
-  }
-  componentDidLoad() {
-    // use the ID to select elements within the component's shadow root    
-    this.updateSlider(undefined);
-    const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
-    const boxWrap = shadowRoot.querySelector('.box-wrap');
-    boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
-  }
-  handledropdownClickEvent(element) {
-    const sliderId = element.target.querySelector('.nav-slider').id;
-    const boxWrap = element.target.querySelector('.nav-slider').shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
-    this.updateArrows(boxWrap, prevBtn, nextBtn);
-  }
-  updateArrows(boxWrap, prevBtn, nextBtn) {
-    // let offsetWidth = boxWrap.offsetWidth;
-    // let scrollWidth = boxWrap.scrollWidth;
-    // let scrollLeft = boxWrap.scrollLeft;
-    // let combine = offsetWidth + scrollLeft;
-    // console.log("offsetWidth " + offsetWidth);
-    // console.log("scrollWidth " + scrollWidth);
-    // console.log("scrollLeft " + scrollLeft);
-    // console.log("offsetWidth +  scrollLeft " + combine);
-    if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
-      prevBtn.style.visibility = "hidden";
-      nextBtn.style.visibility = "hidden";
-    }
-    else if ((boxWrap.scrollLeft + boxWrap.offsetWidth) <= boxWrap.scrollWidth) {
-      if (boxWrap.scrollLeft > 0) {
-        if ((boxWrap.scrollLeft + boxWrap.offsetWidth) == boxWrap.scrollWidth) {
-          nextBtn.style.visibility = "hidden";
-          prevBtn.style.visibility = "visible";
-        }
-        else {
-          prevBtn.style.visibility = "visible";
-          nextBtn.style.visibility = "visible";
-        }
-      }
-      else {
-        prevBtn.style.visibility = "hidden";
-        nextBtn.style.visibility = "visible";
-      }
-    }
-    else {
-      prevBtn.style.visibility = "visible";
-      nextBtn.style.visibility = "hidden";
-    }
-  }
-  updateSlider(event) {
-    const boxWrap = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('.box-wrap');
-    const prevBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#prevBtn');
-    const nextBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#nextBtn');
-    if (event !== undefined) {
-      this.updateArrows(event.target, prevBtn, nextBtn);
-    }
-    else {
-      this.updateArrows(boxWrap, prevBtn, nextBtn);
-    }
-  }
-  leftScroll(ele) {
-    const sliderId = ele.sliderId;
-    const left = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
-    if (left.scrollLeft > 0) {
-      left.scrollBy(-200, 0);
-    }
-  }
-  rightScroll(ele) {
-    const sliderId = ele.sliderId;
-    const right = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
-    if (right.scrollLeft + right.offsetWidth < right.scrollWidth) {
-      right.scrollBy(200, 0);
-    }
-  }
-  render() {
-    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
-  }
-  static get is() { return "ptc-nav-slider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-slider.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-slider.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "sliderId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slider-id",
-        "reflect": false,
-        "defaultValue": "`ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "dropdownClickEvent",
-        "method": "handledropdownClickEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcNavSlider {
+  constructor() {
+    this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
+  }
+  componentDidLoad() {
+    // use the ID to select elements within the component's shadow root    
+    this.updateSlider(undefined);
+    const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
+    const boxWrap = shadowRoot.querySelector('.box-wrap');
+    boxWrap.addEventListener('scroll', this.updateSlider.bind(this));
+  }
+  handledropdownClickEvent(element) {
+    const sliderId = element.target.querySelector('.nav-slider').id;
+    const boxWrap = element.target.querySelector('.nav-slider').shadowRoot.querySelector('.box-wrap');
+    const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
+    const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
+    this.updateArrows(boxWrap, prevBtn, nextBtn);
+  }
+  updateArrows(boxWrap, prevBtn, nextBtn) {
+    // let offsetWidth = boxWrap.offsetWidth;
+    // let scrollWidth = boxWrap.scrollWidth;
+    // let scrollLeft = boxWrap.scrollLeft;
+    // let combine = offsetWidth + scrollLeft;
+    // console.log("offsetWidth " + offsetWidth);
+    // console.log("scrollWidth " + scrollWidth);
+    // console.log("scrollLeft " + scrollLeft);
+    // console.log("offsetWidth +  scrollLeft " + combine);
+    if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+      prevBtn.style.visibility = "hidden";
+      nextBtn.style.visibility = "hidden";
+    }
+    else if ((boxWrap.scrollLeft + boxWrap.offsetWidth) <= boxWrap.scrollWidth) {
+      if (boxWrap.scrollLeft > 0) {
+        if ((boxWrap.scrollLeft + boxWrap.offsetWidth) == boxWrap.scrollWidth) {
+          nextBtn.style.visibility = "hidden";
+          prevBtn.style.visibility = "visible";
+        }
+        else {
+          prevBtn.style.visibility = "visible";
+          nextBtn.style.visibility = "visible";
+        }
+      }
+      else {
+        prevBtn.style.visibility = "hidden";
+        nextBtn.style.visibility = "visible";
+      }
+    }
+    else {
+      prevBtn.style.visibility = "visible";
+      nextBtn.style.visibility = "hidden";
+    }
+  }
+  updateSlider(event) {
+    const boxWrap = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('.box-wrap');
+    const prevBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#prevBtn');
+    const nextBtn = document.querySelector(`#${this.sliderId}`).shadowRoot.querySelector('#nextBtn');
+    if (event !== undefined) {
+      this.updateArrows(event.target, prevBtn, nextBtn);
+    }
+    else {
+      this.updateArrows(boxWrap, prevBtn, nextBtn);
+    }
+  }
+  leftScroll(ele) {
+    const sliderId = ele.sliderId;
+    const left = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    if (left.scrollLeft > 0) {
+      left.scrollBy(-200, 0);
+    }
+  }
+  rightScroll(ele) {
+    const sliderId = ele.sliderId;
+    const right = document.querySelector(`#${sliderId}`).shadowRoot.querySelector(`.box-wrap`);
+    if (right.scrollLeft + right.offsetWidth < right.scrollWidth) {
+      right.scrollBy(200, 0);
+    }
+  }
+  render() {
+    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
+  }
+  static get is() { return "ptc-nav-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sliderId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slider-id",
+        "reflect": false,
+        "defaultValue": "`ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "dropdownClickEvent",
+        "method": "handledropdownClickEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.js

@@ -1,85 +1,85 @@
-import { Host, h } from '@stencil/core';
-export class PtcNavSubmenu {
-  constructor() {
-    this.label = undefined;
-    this.iconAssetName = undefined;
-  }
-  handleClick(event) {
-    setTimeout(() => {
-      this.dropdownClickEvent.emit(event);
-    }, 100);
-  }
-  render() {
-    return (h(Host, { class: `dropdown` }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back"), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this) }, this.iconAssetName &&
-      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), this.label, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
-  }
-  static get is() { return "ptc-nav-submenu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-submenu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-submenu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Dropdown label"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "iconAssetName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "iconAssetName is used for icon used beside the link, icon-assest name can be used from <icon-aset> atom"
-        },
-        "attribute": "icon-asset-name",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dropdownClickEvent",
-        "name": "dropdownClickEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Creating dropdownClickEvent to emite the dropdown value to get the ID of slider"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcNavSubmenu {
+  constructor() {
+    this.label = undefined;
+    this.iconAssetName = undefined;
+  }
+  handleClick(event) {
+    setTimeout(() => {
+      this.dropdownClickEvent.emit(event);
+    }, 100);
+  }
+  render() {
+    return (h(Host, { class: `dropdown` }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back"), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this) }, this.iconAssetName &&
+      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), this.label, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
+  }
+  static get is() { return "ptc-nav-submenu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-submenu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-submenu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dropdown label"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "iconAssetName": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "iconAssetName is used for icon used beside the link, icon-assest name can be used from <icon-aset> atom"
+        },
+        "attribute": "icon-asset-name",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dropdownClickEvent",
+        "name": "dropdownClickEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Creating dropdownClickEvent to emite the dropdown value to get the ID of slider"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}