@ptcwebops/ptcw-design 4.3.0 → 4.3.2

package/dist/collection/components/jumbotron-sub-mune/jumbotron-sub-mune.css

@@ -0,0 +1,133 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+.menu {
+  background-color: transparent;
+  color: white;
+  position: relative;
+}
+
+.menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.menu-list li {
+  margin: 0 10px;
+}
+
+.menu-list a, .menu-list button {
+  color: white;
+  text-decoration: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.menu-list a::after, .menu-list button::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: white;
+  transition: transform 0.3s ease;
+  transform: scaleX(0);
+  transform-origin: right;
+}
+
+.menu-list a:hover::after, .menu-list a:focus::after,
+.menu-list button:hover::after, .menu-list button:focus::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+
+.mobile-menu-icon {
+  display: none;
+  cursor: pointer;
+  font-size: 24px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (max-width: 768px) {
+  .menu-list {
+    display: none;
+    flex-direction: column;
+    background-color: transparent;
+    width: 100%;
+    position: absolute;
+    top: 40px;
+    /* adjust according to your needs */
+    right: 0;
+  }
+
+  .menu-list.open {
+    display: flex;
+  }
+
+  .mobile-menu-icon {
+    display: block;
+  }
+
+  .menu-list li {
+    margin: 10px 0;
+  }
+}

package/dist/collection/components/jumbotron-sub-mune/jumbotron-sub-mune.js

@@ -0,0 +1,61 @@
+import { h } from '@stencil/core';
+export class JumbotronSubMune {
+  constructor() {
+    this.items = undefined;
+    this.isOpen = false;
+  }
+  getItems() {
+    try {
+      return JSON.parse(this.items);
+    }
+    catch (e) {
+      console.error('Invalid Json format for items prop', e);
+      return [];
+    }
+  }
+  toggleMenu() {
+    this.isOpen = !this.isOpen;
+  }
+  render() {
+    const menuItems = this.getItems();
+    return (h("nav", { class: "menu" }, h("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu() }, h("span", null, this.isOpen ? '▲' : '▼')), h("ul", { class: `menu-list ${this.isOpen ? 'open' : ''}` }, menuItems.map(item => h("li", null, item.isButton ? (h("button", { onClick: () => { console.log('clicked!'); } }, item.text)) : (h("a", { href: item.link }, item.text)))))));
+  }
+  static get is() { return "jumbotron-sub-mune"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["jumbotron-sub-mune.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["jumbotron-sub-mune.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "items",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+}