@ptcwebops/ptcw-design 4.5.3 → 4.5.5

package/dist/cjs/homepage-clickable-tab.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-63ddc79c.js');
+
+const homepageClickableTabCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;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}}:host{display:block;position:relative}.tab-item{cursor:pointer;color:#fff;border-radius:4px;background:var(--color-gray-11);transition:background-color 0.3s;display:flex;width:auto;min-height:72px;padding:24px;justify-content:center;align-items:center;gap:10px;align-self:stretch;color:#FFF;text-align:center;font-family:Raleway;font-size:20px;font-style:normal;font-weight:800}@media screen and (min-width: 1280px){.tab-item{width:160px}}@media only screen and (min-width: 1440px){.tab-item{width:172px}}.tab-item span{z-index:2}.tab-item.active{color:#fff;position:relative}.tab-item.active::after{content:\"\";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent}.tab-item.hp-blue.active{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-blue.active::after{border-style:solid;border-top-width:10px;border-top-color:var(--color-blue-06)}.tab-item.hp-blue:hover{background:linear-gradient(180deg, #197BC0 0%, #4795CD 100%)}.tab-item.hp-green.active{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-green.active::after{border-style:solid;border-top-width:10px;border-top-color:var(--color-green-06)}.tab-item.hp-green:hover{background:linear-gradient(180deg, #00890B 0%, #33A13C 100%)}.tab-item.hp-red.active{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-red.active::after{border-style:solid;border-top-width:10px;border-top-color:var(--color-red-06)}.tab-item.hp-red:hover{background:linear-gradient(180deg, #D33E3E 0%, #DC6565 100%)}.tab-item.hp-gray.active{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-gray.active::after{border-style:solid;border-top-width:10px;border-top-color:var(--color-gray-06)}.tab-item.hp-gray:hover{background:linear-gradient(180deg, #617480 0%, #819099 100%)}.tab-item.hp-orange.active{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}.tab-item.hp-orange.active::after{border-style:solid;border-top-width:10px;border-top-color:var(--color-orange-06)}.tab-item.hp-orange:hover{background:linear-gradient(180deg, #C37729 0%, #CF9254 100%)}";
+
+const HomepageClickableTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabSelected = index.createEvent(this, "tabSelected", 7);
+    this.active = undefined;
+    this.label = undefined;
+    this.activeColor = 'hp-blue';
+    this.isHovered = false;
+  }
+  handleClick() {
+    this.tabSelected.emit();
+  }
+  handleMouseEnter() {
+    this.isHovered = true;
+  }
+  handleMouseLeave() {
+    this.isHovered = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: { 'tab-item': true, 'active': this.active, [this.activeColor]: true }, onClick: () => this.handleClick(), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, (this.active || this.isHovered) ? index.h("ptc-overlay", { "filter-color": this.activeColor, "border-radius": "radius-standard" }) : index.h("ptc-overlay", { "filter-color": "transparent", "border-radius": "radius-standard" }), index.h("span", null, this.label))));
+  }
+};
+HomepageClickableTab.style = homepageClickableTabCss;
+
+exports.homepage_clickable_tab = HomepageClickableTab;