@ptcwebops/ptcw-design 0.6.1 → 0.6.2

package/dist/collection/components/ptc-checkbox/ptc-checkbox.js

@@ -1,114 +1,114 @@
-import { Component, h, Host, Prop, Event, Element } from '@stencil/core';
-export class PtcCheckbox {
-  constructor() {
-    this.checked = 'unchecked';
-    this.handleClick = (e) => {
-      let input = this.host.shadowRoot.querySelector('input');
-      if (this.checked == 'unchecked') {
-        this.checked = 'checked';
-      }
-      else {
-        this.checked = 'unchecked';
-      }
-      let parameter = {
-        event: e,
-        sender: input,
-        value: this.value,
-        checked: this.checked
-      };
-      this.checkedChanged.emit(parameter);
-    };
-  }
-  componentDidLoad() {
-    let input = this.host.shadowRoot.querySelector('input');
-    input.checked = this.checked == 'checked';
-  }
-  render() {
-    return (h(Host, null,
-      h("label", { class: "ptc-checkbox" },
-        h("slot", null),
-        h("input", { type: "checkbox", checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleClick(e) }),
-        h("span", { class: "check" },
-          h("span", { class: "mark" },
-            h("icon-asset", { type: "ptc", size: "xx-small", name: "check-mark" }))))));
-  }
-  static get is() { return "ptc-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-checkbox.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "'checked' | 'unchecked'",
-        "resolved": "\"checked\" | \"unchecked\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "checked",
-      "reflect": false,
-      "defaultValue": "'unchecked'"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "inputName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "input-name",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "checkedChanged",
-      "name": "checkedChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-}
+import { Component, h, Host, Prop, Event, Element } from '@stencil/core';
+export class PtcCheckbox {
+  constructor() {
+    this.checked = 'unchecked';
+    this.handleClick = (e) => {
+      let input = this.host.shadowRoot.querySelector('input');
+      if (this.checked == 'unchecked') {
+        this.checked = 'checked';
+      }
+      else {
+        this.checked = 'unchecked';
+      }
+      let parameter = {
+        event: e,
+        sender: input,
+        value: this.value,
+        checked: this.checked
+      };
+      this.checkedChanged.emit(parameter);
+    };
+  }
+  componentDidLoad() {
+    let input = this.host.shadowRoot.querySelector('input');
+    input.checked = this.checked == 'checked';
+  }
+  render() {
+    return (h(Host, null,
+      h("label", { class: "ptc-checkbox" },
+        h("slot", null),
+        h("input", { type: "checkbox", checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleClick(e) }),
+        h("span", { class: "check" },
+          h("span", { class: "mark" },
+            h("icon-asset", { type: "ptc", size: "xx-small", name: "checkmark" }))))));
+  }
+  static get is() { return "ptc-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'checked' | 'unchecked'",
+        "resolved": "\"checked\" | \"unchecked\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "'unchecked'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "checkedChanged",
+      "name": "checkedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.css

@@ -0,0 +1,121 @@
+:host {
+  display: block;
+}
+
+.container {
+  border-right: 1px solid rgba(112, 112, 112, 0.25);
+  position: relative;
+}
+
+a {
+  transition: color ease-out 250ms;
+}
+
+ul {
+  transition: max-height ease-out 250ms, padding ease-out 250ms;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.level-1 > ul, .level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
+  max-height: 0;
+}
+
+.level-1 {
+  position: relative;
+  padding: 17px 20px 17px 0;
+  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
+}
+.level-1 > a {
+  font-size: 18px;
+  letter-spacing: 0.45px;
+  font-weight: 800;
+  color: #40434a;
+  text-decoration: none;
+}
+.level-1 > a:hover, .level-1 > a:active, .level-1 > a:focus {
+  text-decoration: none;
+}
+.level-1 > icon-asset {
+  transition: transform ease-out 250ms;
+  position: absolute;
+  right: 32px;
+}
+.level-1 > ul {
+  padding-top: 0;
+}
+.level-1.expanded > icon-asset {
+  transform: rotate(-180deg);
+}
+.level-1.expanded > ul {
+  padding-top: 14px;
+}
+.level-1:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  height: 3px;
+  width: 40px;
+  background-color: #74c34d;
+}
+
+.level-2 {
+  margin: 8px 0;
+}
+.level-2 > a {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  color: #3b4550;
+  text-decoration: none;
+}
+.level-2 > a:hover, .level-2 > a:active, .level-2 > a:focus {
+  font-weight: 800;
+  color: #74c34d;
+  text-decoration: none;
+}
+
+input[type=text] {
+  padding: 9px 45px 9px 18px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--color-gray-07);
+  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.16);
+  border: solid 1px var(--color-gray-07);
+  background-color: #ffffff;
+}
+input[type=text]::-ms-clear {
+  display: none;
+}
+input[type=text]:focus {
+  outline: none;
+}
+input[type=text]::-webkit-input-placeholder {
+  color: var(--color-gray-02);
+}
+input[type=text]:-moz-placeholder {
+  /* FF 4-18 */
+  color: var(--color-gray-02);
+  opacity: 1;
+}
+input[type=text]::-moz-placeholder {
+  /* FF 19+ */
+  color: var(--color-gray-02);
+  opacity: 1;
+}
+input[type=text]:-ms-input-placeholder {
+  /* IE 10+ */
+  color: var(--color-gray-02);
+}
+input[type=text]::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--color-gray-02);
+}
+input[type=text] *::placeholder {
+  /* modern browser */
+  color: var(--color-gray-02);
+}

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js

@@ -0,0 +1,288 @@
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
+import { generateUUID, MapDOM } from '../../utils/utils';
+import { Event } from '@stencil/core';
+class CollapseListItem {
+}
+export class PtcCollapseList {
+  componentWillLoad() {
+    this.loadListItems();
+  }
+  componentDidLoad() {
+    this.ready.emit({
+      sender: this.el,
+      tree: this.data
+    });
+  }
+  componentDidUpdate() {
+    this.updated.emit({
+      sender: this.el,
+      tree: this.data
+    });
+  }
+  onItemSelectedHandler(event) {
+    this.itemSelected.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+  }
+  onItemExpandeddHandler(event) {
+    this.itemExpanded.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+  }
+  loadListItems() {
+    this.hashMap = {};
+    if (!this.data) {
+      let dom = MapDOM(this.el);
+      if (dom.collapseListItem) {
+        this.data = new Array();
+        let buildChildren = (arr, outArr) => {
+          arr.map((z) => {
+            var newItem = new CollapseListItem();
+            newItem.isExternalLink = z.linkHref ? true : false;
+            if (z.linkHref) {
+              newItem.href = z.linkHref;
+              newItem.target = z.linkTarget;
+              newItem.title = z.linkTitle;
+            }
+            else {
+              newItem.id = generateUUID();
+              newItem.text = z.facetDisplay;
+              newItem.name = z.facetName;
+              newItem.value = z.facetValue;
+              newItem.category = z.category;
+              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
+              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
+            }
+            if (z.collapseListItem) {
+              newItem.children = new Array();
+              buildChildren(z.collapseListItem, newItem.children);
+            }
+            this.hashMap[newItem.id] = newItem;
+            outArr.push(newItem);
+          });
+        };
+        this.setUpCategory('default', true);
+        buildChildren(dom.collapseListItem, this.data);
+      }
+    }
+  }
+  setUpCategory(name, allowMultiSelect) {
+    if (!this.selectedItems) {
+      this.selectedItems = {};
+    }
+    if (name && !this.selectedItems[name]) {
+      this.selectedItems[name] = {
+        name: name,
+        items: new Array(),
+        allowMultiSelect: allowMultiSelect
+      };
+    }
+  }
+  collapseAllFirstLevelItems(exclude) {
+    let items = this.el.shadowRoot.querySelectorAll('.level-1');
+    items.forEach((z) => {
+      if (z.classList.contains('expanded') && z != exclude) {
+        z.classList.remove('expanded');
+      }
+    });
+  }
+  updateExpandedItems() {
+    let items = this.el.shadowRoot.querySelectorAll('li');
+    items.forEach((z) => {
+      let ul = z.querySelector(':scope > ul');
+      if (ul) {
+        if (!z.classList.contains('expanded')) {
+          ul.style.removeProperty('max-height');
+        }
+        else {
+          ul.style.maxHeight = ul.scrollHeight + "px";
+        }
+      }
+    });
+  }
+  updateSelectedItemStatus(uuid) {
+    var _a;
+    let selectedItem = this.hashMap[uuid];
+    if (selectedItem && selectedItem.value) {
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      if (!this.selectedItems[categoryName]) {
+        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
+      }
+      let items = this.selectedItems[categoryName].items;
+      if (items.indexOf(selectedItem.value) < 0) {
+        if (this.selectedItems[categoryName].allowMultiSelect) {
+          items.push(selectedItem.value);
+        }
+        else {
+          items = [selectedItem.value];
+        }
+      }
+      else {
+        items = items.filter((z) => { return z != selectedItem.value; });
+      }
+      this.selectedItems[categoryName].items = items;
+    }
+  }
+  onItemLinkClick(event, uuid) {
+    if (event) {
+      event.preventDefault();
+    }
+    this.updateSelectedItemStatus(uuid);
+    this.onItemSelectedHandler(event);
+  }
+  onExpandClick(event, collapseParents) {
+    if (event) {
+      event.preventDefault();
+      let sender = event.target;
+      if (collapseParents) {
+        this.collapseAllFirstLevelItems(sender.parentNode);
+      }
+      if (sender && sender.parentNode) {
+        let parent = sender.parentNode;
+        parent.classList.toggle("expanded");
+      }
+      this.updateExpandedItems();
+    }
+    this.onItemExpandeddHandler(event);
+  }
+  render() {
+    let renderLevel = (arr, index) => {
+      let levelClass = `level-${index}`;
+      return (h("ul", null, arr.map((z) => {
+        let expandable = false;
+        let icon = '';
+        if (index == 1 && z.children) {
+          expandable = true;
+          icon = (h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
+        }
+        return (h("li", { class: levelClass },
+          icon,
+          getLink(z, expandable),
+          z.children ? renderLevel(z.children, index + 1) : ''));
+      })));
+    };
+    let getLink = (item, expandable) => {
+      let clickEvent = (e) => {
+        if (expandable) {
+          this.onExpandClick(e, true);
+        }
+        else {
+          this.onItemLinkClick(e, item.id);
+        }
+      };
+      if (item.isExternalLink) {
+        return (h("a", { href: item.href, target: item.target, title: item.title }, item.text));
+      }
+      else {
+        return (h("a", { href: "#", title: item.text, onClick: clickEvent }, item.text));
+      }
+    };
+    return (h(Host, null,
+      h("div", { class: "container" },
+        h("ptc-title", { type: 'h4', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, "Filter Results :"),
+        h("input", { type: "text", placeholder: 'Search' }),
+        renderLevel(this.data, 1))));
+  }
+  static get is() { return "ptc-collapse-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-collapse-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-collapse-list.css"]
+  }; }
+  static get properties() { return {
+    "listItems": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "data": {},
+    "selectedItems": {},
+    "hashMap": {}
+  }; }
+  static get events() { return [{
+      "method": "itemSelected",
+      "name": "itemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "itemExpanded",
+      "name": "itemExpanded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "ready",
+      "name": "ready",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "updated",
+      "name": "updated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}