@ptcwebops/ptcw-design 0.6.5 → 0.6.7

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: "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"; }
-}
+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", color: "white", 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

@@ -1,10 +1,15 @@
 :host {
   display: block;
+  height: 100%;
 }
 
 .container {
   border-right: 1px solid rgba(112, 112, 112, 0.25);
   position: relative;
+  height: 100%;
+}
+.container > ul {
+  overflow: visible;
 }
 
 a {
@@ -19,40 +24,70 @@ ul {
   margin: 0;
 }
 
-.level-1 > ul, .level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
+li {
+  cursor: pointer;
+}
+
+.level-1 > ul {
+  max-height: 0;
+}
+.level-1 > ul > li {
+  margin: 12px 0;
+}
+.level-1 > ul > li:first-child {
+  margin-top: 20px;
+}
+.level-1 > ul > li:last-child {
+  margin-bottom: 10px;
+}
+
+.level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
   max-height: 0;
 }
+.level-2 > ul > li, .level-3 > ul > li, .level-4 > ul > li, .level-5 > ul > li {
+  margin: 8px 0;
+}
+
+.level-2 > ul {
+  padding-left: 2.25rem;
+}
+
+.level-3 > ul {
+  padding-left: 3rem;
+}
+
+.level-4 > ul {
+  padding-left: 3.75rem;
+}
+
+.level-5 > ul {
+  padding-left: 4.5rem;
+}
 
 .level-1 {
   position: relative;
-  padding: 17px 20px 17px 0;
-  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
 }
 .level-1 > a {
+  position: relative;
+  padding: 16px 20px 17.5px 0;
+  display: block;
   font-size: 18px;
   letter-spacing: 0.45px;
   font-weight: 800;
-  color: #40434a;
+  color: var(--color-gray-08);
   text-decoration: none;
+  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
 }
 .level-1 > a:hover, .level-1 > a:active, .level-1 > a:focus {
   text-decoration: none;
 }
-.level-1 > icon-asset {
-  transition: transform ease-out 250ms;
+.level-1 > a > icon-asset {
+  transition: transform var(--ptc-ease-out) var(--ptc-transition-medium), padding var(--ptc-ease-out) var(--ptc-transition-medium);
   position: absolute;
-  right: 32px;
+  right: 20px;
+  padding-top: 2px;
 }
-.level-1 > ul {
-  padding-top: 0;
-}
-.level-1.expanded > icon-asset {
-  transform: rotate(-180deg);
-}
-.level-1.expanded > ul {
-  padding-top: 14px;
-}
-.level-1:after {
+.level-1 > a:after {
   content: "";
   display: block;
   position: absolute;
@@ -60,62 +95,100 @@ ul {
   left: 0;
   height: 3px;
   width: 40px;
-  background-color: #74c34d;
+  background-color: var(--color-green-07);
+  transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium);
+}
+.level-1.expanded a > icon-asset {
+  transform: rotate(-180deg);
+  padding-top: 0;
+}
+.level-1.expanded a > ul {
+  padding-top: 14px;
+}
+.level-1.expanded a:after {
+  background-color: var(--color-gray-11);
+}
+.level-1 > ul {
+  padding-top: 0;
+}
+.level-1:first-child > a {
+  padding-top: 20px;
 }
 
-.level-2 {
-  margin: 8px 0;
+.level-2, .level-3, .level-4, .level-5 {
+  position: relative;
 }
-.level-2 > a {
+.level-2 > a, .level-3 > a, .level-4 > a, .level-5 > a {
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.4px;
-  color: #3b4550;
+  color: var(--color-gray-10);
   text-decoration: none;
+  display: inline-block;
+  margin-left: 20px;
 }
-.level-2 > a:hover, .level-2 > a:active, .level-2 > a:focus {
+.level-2 > a:hover, .level-2 > a:active, .level-3 > a:hover, .level-3 > a:active, .level-4 > a:hover, .level-4 > a:active, .level-5 > a:hover, .level-5 > a:active {
   font-weight: 800;
-  color: #74c34d;
+  color: var(--color-green-07);
   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;
+.level-2 .expander-icon, .level-3 .expander-icon, .level-4 .expander-icon, .level-5 .expander-icon {
+  position: absolute;
+  left: -18px;
+  top: 2px;
 }
-input[type=text]:focus {
-  outline: none;
+
+.level-3:before, .level-4:before, .level-5:before {
+  position: absolute;
+  content: "";
+  width: 2rem;
+  height: 1px;
+  display: block;
+  left: 0;
+  top: 9px;
+  background-color: var(--color-gray-02);
 }
-input[type=text]::-webkit-input-placeholder {
-  color: var(--color-gray-02);
+
+.level-3:before {
+  width: 2rem;
+  left: -2.25rem;
 }
-input[type=text]:-moz-placeholder {
-  /* FF 4-18 */
-  color: var(--color-gray-02);
-  opacity: 1;
+
+.level-4:before {
+  width: 2.75rem;
+  left: -3rem;
 }
-input[type=text]::-moz-placeholder {
-  /* FF 19+ */
-  color: var(--color-gray-02);
-  opacity: 1;
+
+.level-5:before {
+  width: 3.5rem;
+  left: -3.75rem;
 }
-input[type=text]:-ms-input-placeholder {
-  /* IE 10+ */
-  color: var(--color-gray-02);
+
+.search-box {
+  display: flex;
+  width: 100%;
+}
+.search-box input[type=text] {
+  font-family: var(--ptc-font-latin);
+  padding: 8px 45px 8px 18px;
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--color-gray-12);
+  box-shadow: var(--ptc-shadow-x-small);
+  border: solid 1px var(--color-gray-06);
+  transition: border var(--ptc-transition-medium) var(--ptc-ease-out), box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);
+  background-color: var(--color-white);
+  width: 100%;
+  margin-right: 2rem;
+}
+.search-box input[type=text]::-ms-clear {
+  display: none;
 }
-input[type=text]::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: var(--color-gray-02);
+.search-box input[type=text]:focus {
+  outline: none;
+  box-shadow: var(--ptc-shadow-small);
+  border: solid 1px var(--color-gray-12);
 }
-input[type=text] *::placeholder {
-  /* modern browser */
-  color: var(--color-gray-02);
+.search-box input[type=text]::placeholder {
+  color: var(--color-gray-07);
 }