@ptcwebops/ptcw-design 0.5.8 → 0.6.0

package/dist/esm/my-component.entry.js

@@ -1,22 +1,22 @@
-import { r as registerInstance, h } from './index-357497dc.js';
+import { r as registerInstance, h } from './index-f64012bd.js';
 
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
 
 const myComponentCss = ":host{display:block}";
 
-let MyComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return h("div", null, "Hello, World! I'm ", this.getText());
-  }
-};
+let MyComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return h("div", null, "Hello, World! I'm ", this.getText());
+  }
+};
 MyComponent.style = myComponentCss;
 
 export { MyComponent as my_component };

package/dist/esm/ptc-accordion-item.entry.js

@@ -1,106 +1,106 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-357497dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f64012bd.js';
 
-const hasSlot = (parentEl, slotName) => {
-  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
+const hasSlot = (parentEl, slotName) => {
+  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
 };
 
 const ptcAccordionItemCss = ":host{display:block}:host .heading{display:flex;align-items:center;justify-content:initial;width:100%;border:none;text-align:left;padding:var(--ptc-element-spacing-06);padding-left:0;cursor:pointer;transition:border-radius var(--ptc-transition-fast) ease var(--ptc-transition-fast);background-color:transparent;border-bottom:1px solid var(--color-gray-03)}:host .heading .heading-text{color:var(--color-gray-10);margin:0;font-weight:var(--ptc-font-weight-bold);flex:1;font-size:var(--ptc-font-size-large);font-family:var(--ptc-font-latin)}:host .heading .arrow{color:var(--color-green-06);margin-right:var(--ptc-element-spacing-05);transition:transform var(--ptc-transition-fast) ease-in-out}:host .heading .arrow svg{width:34px;height:34px}:host .heading .arrow svg path{fill:currentColor}:host .body-container{overflow:hidden;max-height:0;transition:max-height var(--ptc-transition-fast) ease-in-out;scrollbar-width:none;}:host .body-container::-webkit-scrollbar{display:none;}:host .body-container .body{border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;padding:var(--ptc-layout-spacing-02)}:host(.autoHeight) .body-container{overflow:hidden}:host(.active) .heading{border-bottom-left-radius:0;border-bottom-right-radius:0;transition:border-radius 0s ease;border-color:var(--color-gray-02)}:host(.active) .heading .arrow{transform:rotate(180deg)}:host(.active) .heading .arrow svg{color:var(--color-gray-03)}:host(.active) .body-container{max-height:var(--ptc-accordion-item-body-max-height)}";
 
-let PtcAccordionItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.opened = createEvent(this, "opened", 7);
-    this.opening = createEvent(this, "opening", 7);
-    this.closed = createEvent(this, "closed", 7);
-    this.closing = createEvent(this, "closing", 7);
-    /**
-     * Heading text.
-     * This will be overwritten by `heading` slot
-     */
-    this.heading = null;
-    /**
-     * The HTML tag to be applied to the heading text.
-     * This will be overwritten by `heading` slot
-     */
-    this.headingTag = 'h3';
-    /**
-     * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
-     */
-    this.autoHeight = false;
-    /**
-     * If the accordion item should be opened by default
-     */
-    this.active = false;
-    this.hasHeadingSlot = true;
-    this.hasArrowSlot = true;
-  }
-  componentWillLoad() {
-    this.hasHeadingSlot = hasSlot(this.el, 'heading');
-    this.hasArrowSlot = hasSlot(this.el, 'arrow');
-  }
-  componentDidLoad() {
-    if (this.autoHeight) {
-      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
-    }
-    this.onTransitionEnd();
-    this.bodyEl.addEventListener('transitionstart', () => {
-      this.onTransitionStart();
-    });
-    this.bodyEl.addEventListener('transitionend', () => {
-      this.onTransitionEnd();
-    });
-    this.hasHeadingSlot = hasSlot(this.el, 'heading');
-    this.hasArrowSlot = hasSlot(this.el, 'arrow');
-  }
-  onTransitionEnd() {
-    if (this.active) {
-      this.bodyEl.style.overflow = 'auto';
-      this.opened.emit();
-    }
-    else {
-      this.bodyEl.style.overflow = 'hidden';
-      this.bodyEl.style.visibility = 'hidden';
-      this.closed.emit();
-    }
-  }
-  onTransitionStart() {
-    if (this.active) {
-      this.bodyEl.style.visibility = 'visible';
-      this.opening.emit();
-    }
-    else {
-      this.closing.emit();
-    }
-  }
-  /**
-   * Toggle open state of accordion item
-   */
-  async toggle() {
-    if (this.active) {
-      this.close();
-    }
-    else {
-      this.open();
-    }
-  }
-  /**
-   * Closes the accordion item
-   */
-  async close() {
-    this.active = false;
-  }
-  /**
-   * Opens the accordion item.
-   */
-  async open() {
-    this.active = true;
-  }
-  render() {
-    const { active, autoHeight, headingTag: HeadingTag } = this;
-    return (h(Host, { class: { active, autoHeight } }, h("button", { class: "heading", role: "button", onClick: () => this.toggle() }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), h("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h("div", { class: "body" }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-};
+let PtcAccordionItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.opened = createEvent(this, "opened", 7);
+    this.opening = createEvent(this, "opening", 7);
+    this.closed = createEvent(this, "closed", 7);
+    this.closing = createEvent(this, "closing", 7);
+    /**
+     * Heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.heading = null;
+    /**
+     * The HTML tag to be applied to the heading text.
+     * This will be overwritten by `heading` slot
+     */
+    this.headingTag = 'h3';
+    /**
+     * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
+     */
+    this.autoHeight = false;
+    /**
+     * If the accordion item should be opened by default
+     */
+    this.active = false;
+    this.hasHeadingSlot = true;
+    this.hasArrowSlot = true;
+  }
+  componentWillLoad() {
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  componentDidLoad() {
+    if (this.autoHeight) {
+      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
+    }
+    this.onTransitionEnd();
+    this.bodyEl.addEventListener('transitionstart', () => {
+      this.onTransitionStart();
+    });
+    this.bodyEl.addEventListener('transitionend', () => {
+      this.onTransitionEnd();
+    });
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
+  }
+  onTransitionEnd() {
+    if (this.active) {
+      this.bodyEl.style.overflow = 'auto';
+      this.opened.emit();
+    }
+    else {
+      this.bodyEl.style.overflow = 'hidden';
+      this.bodyEl.style.visibility = 'hidden';
+      this.closed.emit();
+    }
+  }
+  onTransitionStart() {
+    if (this.active) {
+      this.bodyEl.style.visibility = 'visible';
+      this.opening.emit();
+    }
+    else {
+      this.closing.emit();
+    }
+  }
+  /**
+   * Toggle open state of accordion item
+   */
+  async toggle() {
+    if (this.active) {
+      this.close();
+    }
+    else {
+      this.open();
+    }
+  }
+  /**
+   * Closes the accordion item
+   */
+  async close() {
+    this.active = false;
+  }
+  /**
+   * Opens the accordion item.
+   */
+  async open() {
+    this.active = true;
+  }
+  render() {
+    const { active, autoHeight, headingTag: HeadingTag } = this;
+    return (h(Host, { class: { active, autoHeight } }, h("button", { class: "heading", role: "button", onClick: () => this.toggle() }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), h("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h("div", { class: "body" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
 PtcAccordionItem.style = ptcAccordionItemCss;
 
 export { PtcAccordionItem as ptc_accordion_item };

package/dist/esm/ptc-accordion.entry.js

@@ -1,45 +1,45 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-357497dc.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f64012bd.js';
 
 const ptcAccordionCss = ":host{--ptc-accordion-item-body-max-height:100vh}";
 
-let PtcAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * If multiple `<ptc-accordion-item>`s can open at the same time
-     */
-    this.multiple = false;
-  }
-  componentWillLoad() {
-    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
-    if (!this.multiple) {
-      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
-      if (this.activeItem) {
-        this.activeItem.open();
-      }
-      this.closeNonActive();
-    }
-  }
-  openHandler(e) {
-    e.stopPropagation();
-    const eventTarget = e.target;
-    if (!this.multiple) {
-      this.activeItem = eventTarget;
-      this.closeNonActive();
-    }
-  }
-  closeNonActive() {
-    this.items.forEach(item => {
-      if (!item.isEqualNode(this.activeItem)) {
-        item.close();
-      }
-    });
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
+let PtcAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If multiple `<ptc-accordion-item>`s can open at the same time
+     */
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    if (!this.multiple) {
+      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
+      if (this.activeItem) {
+        this.activeItem.open();
+      }
+      this.closeNonActive();
+    }
+  }
+  openHandler(e) {
+    e.stopPropagation();
+    const eventTarget = e.target;
+    if (!this.multiple) {
+      this.activeItem = eventTarget;
+      this.closeNonActive();
+    }
+  }
+  closeNonActive() {
+    this.items.forEach(item => {
+      if (!item.isEqualNode(this.activeItem)) {
+        item.close();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
 PtcAccordion.style = ptcAccordionCss;
 
 export { PtcAccordion as ptc_accordion };

package/dist/esm/ptc-announcement.entry.js

@@ -1,44 +1,44 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-357497dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-f64012bd.js';
 
-const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border:1px solid var(--color-green-06);box-shadow:var(--ptc-shadow-small);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-03);margin:0 auto;align-items:center;justify-content:space-between}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media only screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:18%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose);text-align:left;color:var(--color-gray-10);text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:var(--ptc-element-spacing-04)}.description{flex-basis:82%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;text-align:left;color:var(--color-gray-10)}a{color:var(--color-blue-07);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;white-space:nowrap;margin-left:var(--ptc-element-spacing-04)}a:hover{color:var(--color-blue-08)}a:focus{outline:3px solid var(--color-blue-07);outline-offset:0.25rem;border-radius:var(--ptc-border-radius-standard)}a:visited{color:var(--color-blue-09)}@media only screen and (min-width: 768px){.bar-close{padding-right:0px}}@media only screen and (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-loose)}.description{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense)}}";
+const ptcAnnouncementCss = ":host{display:block}.announcement{width:100%;position:relative;background-color:var(--color-gray-02);z-index:860;background-size:cover;background-repeat:repeat-x;border:1px solid var(--color-green-06);box-shadow:var(--ptc-shadow-small);z-index:999;display:none}.visible{display:block}.content-wrapper{display:flex;padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-03);margin:0 auto;align-items:center;justify-content:space-between}@media only screen and (min-width: 768px){.content-wrapper{padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-04)}}@media only screen and (min-width: 768px){.temp-container{width:750px}}@media only screen and (min-width: 992px){.temp-container{width:970px}}@media only screen and (min-width: 1200px){.temp-container{width:1170px}}@media only screen and (min-width: 1440px){.temp-container{width:1400px}}@media only screen and (min-width: 1600px){.temp-container{width:1560px}}.left-content{display:flex;flex-basis:82%;flex-direction:column}@media only screen and (min-width: 768px){.left-content{align-items:flex-start;justify-content:flex-start}}.title{flex-basis:17%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose);text-align:left;color:var(--color-gray-10);text-transform:uppercase}.ptc-svg-btn{flex-basis:18%}.bar-close{padding-right:var(--ptc-element-spacing-04)}.description{flex-basis:82%;font-family:Raleway;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);font-stretch:normal;font-style:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;text-align:left;color:var(--color-gray-10)}a{color:var(--color-blue-07);-webkit-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);-o-transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);transition:color var(--ptc-transition-slow) var(--ptc-ease-inout);font-weight:var(--ptc-font-weight-bold);text-decoration:underline;white-space:nowrap;margin-left:var(--ptc-element-spacing-04)}a:hover{color:var(--color-blue-08)}a:focus{outline:3px solid var(--color-blue-07);outline-offset:0.25rem;border-radius:var(--ptc-border-radius-standard)}a:visited{color:var(--color-blue-09)}@media only screen and (min-width: 768px){.bar-close{padding-right:0px}}@media only screen and (min-width: 992px){.left-content{flex-direction:row;align-items:center}.title{font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-loose);padding-left:var(--ptc-element-spacing-03)}.description{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense)}}";
 
-let PtcAnnouncement = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    /**
-     * bar title
-     */
-    this.barTitle = "";
-    /**
-     * bar description
-     */
-    this.Description = "";
-    /**
-     * Link Url
-     */
-    this.linkUrl = '#';
-    /**
-    * Target
-    */
-    this.target = '_self';
-    this.closeClick = () => {
-      this.visible = false;
-      this.close.emit();
-    };
-  }
-  render() {
-    var _a;
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? h("div", { class: "title" }, this.barTitle) : null, h("div", { class: "description" }, !!this.Description ? h("span", null, this.Description) : null, !!this.linkText ? (h("a", { href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)), h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
-  }
-  getCssClassMap() {
-    return {
-      ['announcement']: true,
-      [this.visible ? 'visible' : '']: true,
-    };
-  }
-};
+let PtcAnnouncement = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    /**
+     * bar title
+     */
+    this.barTitle = "";
+    /**
+     * bar description
+     */
+    this.Description = "";
+    /**
+     * Link Url
+     */
+    this.linkUrl = '#';
+    /**
+    * Target
+    */
+    this.target = '_self';
+    this.closeClick = () => {
+      this.visible = false;
+      this.close.emit();
+    };
+  }
+  render() {
+    var _a;
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap, part: "part-announcement" }, h("div", { class: this.tempContainer ? 'content-wrapper temp-container' : 'content-wrapper' }, h("div", { class: "left-content", part: "part-left-content" }, !!this.barTitle ? h("div", { class: "title" }, this.barTitle) : null, h("div", { class: "description" }, !!this.Description ? h("span", null, this.Description) : null, !!this.linkText ? (h("a", { href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target }, this.linkText)) : null)), h("ptc-svg-btn", { class: "bar-close", "svg-name": "close", onClick: this.closeClick })))));
+  }
+  getCssClassMap() {
+    return {
+      ['announcement']: true,
+      [this.visible ? 'visible' : '']: true,
+    };
+  }
+};
 PtcAnnouncement.style = ptcAnnouncementCss;
 
 export { PtcAnnouncement as ptc_announcement };

package/dist/esm/ptc-breadcrumb.entry.js

@@ -1,19 +1,19 @@
-import { r as registerInstance, h, H as Host } from './index-357497dc.js';
+import { r as registerInstance, h, H as Host } from './index-f64012bd.js';
 
-const ptcBreadcrumbCss = ":host{display:block;margin-top:var(--ptc-layout-spacing-02)}::slotted(*){transform:translate(-2px, -2px)}";
+const ptcBreadcrumbCss = ":host{display:block;margin-top:var(--ptc-element-spacing-05)}::slotted(*){transform:translate(-2px, -2px)}";
 
-let PtcBreadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
-  }
-  getCssClassMap() {
-    return {};
-  }
-};
+let PtcBreadcrumb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {};
+  }
+};
 PtcBreadcrumb.style = ptcBreadcrumbCss;
 
 export { PtcBreadcrumb as ptc_breadcrumb };

package/dist/esm/ptc-button.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-f64012bd.js';
+
+const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-gray-10);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard)}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:var(--ptc-line-height-densest)}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-green-07);background-image:linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01))}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-gray-10)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:var(--ptc-element-spacing-01);margin-top:var(--ptc-element-spacing-01);box-shadow:var(--ptc-shadow-large);border:solid 2.5px var(--color-green-08);background-image:linear-gradient(to right, var(--color-green-06), var(--color-green-08))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-green-08), var(--color-green-06));opacity:0;transition:opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);border-radius:2px}.legacy-green:hover{box-shadow:var(--ptc-shadow-x-large)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 768px){.legacy-green span{font-size:var(--ptc-font-size-small);letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard);display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all var(--ptc-ease-inout) var(--ptc-transition-medium);position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{font-family:var(--ptc-font-latin);background-color:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:var(--ptc-font-size-xx-small);font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-loose);list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.nav:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav:hover{background-color:var(--color-gray-12)}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary{padding:var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled{pointer-events:none;border-color:var(--color-gray-03);background:var(--color-gray-02)}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span{color:var(--color-gray-03)}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]){fill:var(--color-gray-03) !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);letter-spacing:normal}.ptc-primary{background:var(--color-gray-10);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-primary:hover{background-color:var(--color-gray-12)}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:var(--color-gray-10);border:2px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}.ptc-secondary:hover{background-color:var(--color-gray-12)}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard)}.ptc-tertiary:hover{background-color:var(--color-gray-02)}.ptc-tertiary:active{background-color:var(--color-gray-03)}.ptc-tertiary span{color:var(--color-gray-10)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.ptc-quaternary{background:var(--color-green-07);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-quaternary:hover{background-color:var(--color-green-08)}.ptc-quaternary:active{background-color:var(--color-green-09)}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}";
+
+let PtcButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.clickEvent = createEvent(this, "clickEvent", 7);
+    /**
+     * Disabled button
+     */
+    this.disabled = false;
+    /**
+     * Button type
+     */
+    this.type = 'button';
+    /**
+     * Button theme color
+     */
+    this.color = 'ptc-primary';
+    /**
+     * Icon Animation
+     */
+    this.iconAnimation = '';
+    /**
+     * Icon Position
+     */
+    this.iconPosition = 'icon-right';
+    /**
+     * Link URL
+     */
+    this.linkHref = undefined;
+    /**
+     * link Title
+     */
+    this.linkTitle = undefined;
+    /**
+     * Link target
+     * */
+    this.target = '_self';
+    /**
+     *  Link rel
+     * */
+    this.rel = undefined;
+    /**
+     *  (optional) tab-nav.
+     *  indicates that its element can be focused, and where it participates in sequential keyboard navigation.
+     *  A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
+     */
+    this.tabNav = 0;
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+    //console.log('click!');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (h(Host, null, this.styles && h("style", null, this.styles), h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), h("span", null, h("slot", { name: "slot-before-text" }), h("slot", null), h("slot", { name: "slot-after-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
+      ['disabled']: this.disabled ? true : false,
+    };
+  }
+};
+PtcButton.style = ptcButtonCss;
+
+export { PtcButton as ptc_button };

package/dist/esm/ptc-card-bottom.entry.js

@@ -1,38 +1,38 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-357497dc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f64012bd.js';
 
 const ptcCardBottomCss = ":host{display:block}:host(.card-tall) .ptc-card-bottom-wrapper,:host(.card-wide) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0 var(--ptc-element-spacing-07) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);z-index:2}:host(.card-2up) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0px 24px 24px 16px}:host(.card-playlist){flex:72% 2 1;align-self:center}:host(.mouse-hover-card-bottom) .ptc-card-bottom-wrapper{z-index:5;cursor:pointer}@media only screen and (min-width: 768px){:host(.card-2up) .ptc-card-bottom-wrapper{padding:0 32px 32px 24px}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:20% 2 1;justify-content:flex-end}:host(.card-video-intro) .ptc-card-bottom-wrapper{display:flex;justify-content:flex-end}}@media only screen and (min-width: 1440px){:host(.card-2up) .ptc-card-bottom-wrapper{width:70%}}@media only screen and (min-width: 1980px){:host(.card-2up) .ptc-card-bottom-wrapper{width:60%}}";
 
-let PtcCardBottom = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hoverEvent = createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = createEvent(this, "leaveEvent", 7);
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.add('mouse-hover');
-      this.el.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.remove('mouse-hover');
-      this.el.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false,
-    };
-  }
-  get el() { return getElement(this); }
-};
+let PtcCardBottom = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hoverEvent = createEvent(this, "hoverEvent", 7);
+    this.leaveEvent = createEvent(this, "leaveEvent", 7);
+  }
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.previousElementSibling.classList.add('mouse-hover');
+      this.el.classList.add('mouse-hover-card-bottom');
+    }
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
+      this.el.previousElementSibling.classList.remove('mouse-hover');
+      this.el.classList.remove('mouse-hover-card-bottom');
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false,
+    };
+  }
+  get el() { return getElement(this); }
+};
 PtcCardBottom.style = ptcCardBottomCss;
 
 export { PtcCardBottom as ptc_card_bottom };