@ptcwebops/ptcw-design 0.2.7 → 0.2.9

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

@@ -1,155 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-eb8ce23d.js';
-import { a as ResponsivePictureVariables } from './interfaces-3cb94654.js';
-
-const ptcPictureCss = ":host{display:block;overflow:hidden}img{max-width:100%;height:auto}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}";
-
-let PtcPicture = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Image alt
-     */
-    this.alt = "image";
-    /**
-     * Image size for smallest screen
-     * <=767px
-     */
-    this.sizeXs = '510x340';
-    /**
-     * Image size for small screen
-     * >=768px and <=991px
-     */
-    this.sizeSm = '1240x496';
-    /**
-     * Image size for medium screen
-     * >=992px and <=1199px
-     */
-    this.sizeMd = '1366x500';
-    /**
-     * Image solution for large screen
-     * >=1200px
-     */
-    this.sizeLg = '1920x1080';
-    /**
-     * Image border shape
-     */
-    this.borderRadius = '';
-    /**
-     * Object Fit
-     * Default: cover
-     */
-    this.objectFit = 'cover';
-  }
-  WindowResize() {
-    this.addIntersectionObserver();
-  }
-  componentDidLoad() {
-    this.addIntersectionObserver();
-  }
-  componentWillUpdate() {
-    if (this.src !== this.oldSrc) {
-      this.addIntersectionObserver();
-    }
-    this.oldSrc = this.src;
-  }
-  //lazy-loading
-  addIntersectionObserver() {
-    if (!this.src) {
-      return;
-    }
-    if ('IntersectionObserver' in window) {
-      let lazyLoadImages = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const image = this.el.shadowRoot.querySelector('img');
-            image.src = this.setResponsiveBg();
-            console.log('loaded');
-            lazyLoadImages.unobserve(image);
-          }
-        });
-      });
-      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
-    }
-    else {
-      // fall back to setTimeout for Safari and IE
-      setTimeout(() => {
-        const image = this.el.shadowRoot.querySelector('img');
-        image.src = this.setResponsiveBg();
-        image.onload = () => {
-          image.removeAttribute('data-src');
-          console.log('loaded fallback');
-        };
-      }, 5000);
-    }
-  }
-  //responsive image
-  setResponsiveBg() {
-    // Define local variables
-    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    for (var i = 0, len = backgrounds.length; i < len; i++) {
-      // Set current variables
-      el = backgrounds[i];
-      elData = el.getAttribute('data-' + currentBreakpoint);
-      if (elData !== null) {
-        // console.log('img src= ' + elData);
-        return elData;
-      }
-      else {
-        if (typeof console == 'object') {
-          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
-        }
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("img", Object.assign({ class: classMap, "data-xs": !!this.sizeXs ? `${this.src}:${this.sizeXs}` : `${this.src}`, "data-sm": !!this.sizeSm ? `${this.src}:${this.sizeSm}` : `${this.src}`, "data-md": !!this.sizeMd ? `${this.src}:${this.sizeMd}` : `${this.src}`, "data-lg": !!this.sizeLg ? `${this.src}:${this.sizeLg}` : `${this.src}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt }))));
-  }
-  getCurrentBreakPoints() {
-    // Define local variables
-    let doc = window.document, temp = doc.createElement('div'), env;
-    // Append test node
-    doc.body.appendChild(temp);
-    // Loop through breakpoints
-    for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
-      env = ResponsivePictureVariables.envs[i];
-      // Add classes
-      temp.className = 'hidden-' + env;
-      // Found breakpoint
-      if (temp.offsetParent === null) {
-        // Remove our test node
-        doc.body.removeChild(temp);
-        console.log('remove test node');
-        // Return current breakpoint
-        return env;
-      }
-    }
-    // Breakpoint not found, try fallback
-    doc.body.removeChild(temp);
-    return this.getFallbackBreakpoint();
-  }
-  getFallbackBreakpoint() {
-    if (window.matchMedia('(min-width: 992px)').matches) {
-      return 'lg';
-    }
-    else if (window.matchMedia('(min-width: 768px)').matches) {
-      return 'md';
-    }
-    else if (window.matchMedia('(min-width: 576px)').matches) {
-      return 'sm';
-    }
-    else {
-      return 'xs';
-    }
-  }
-  getCssClassMap() {
-    return {
-      [this.borderRadius]: true,
-      [this.objectFit]: true,
-    };
-  }
-  get el() { return getElement(this); }
-};
-PtcPicture.style = ptcPictureCss;
-
-export { PtcPicture as ptc_picture };

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

@@ -1,42 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-eb8ce23d.js';
-
-const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.ptc-spacer-xx-large){display:block}}";
-
-let PtcSpacer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Breakpoint
-     */
-    this.breakpoint = '';
-    /**
-     * Spacing Size
-     */
-    this.size = 'medium';
-    /**
-     * Direction
-     */
-    this.direction = 'vertical';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }));
-  }
-  getCssClassMap() {
-    return {
-      [this.size]: true,
-      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
-      ['ptc-spacer-vertical']: this.direction === 'vertical',
-      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
-      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
-      ['ptc-spacer-small']: this.breakpoint === 'small',
-      ['ptc-spacer-medium']: this.breakpoint === 'medium',
-      ['ptc-spacer-large']: this.breakpoint === 'large',
-      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
-      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
-    };
-  }
-};
-PtcSpacer.style = ptcSpacerCss;
-
-export { PtcSpacer as ptc_spacer };

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

@@ -1,27 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-eb8ce23d.js';
-
-const ptcSpanCss = ":host(.link-style) span{color:var(--color-primary-uigrey);font-weight:var(--ptc-font-weight-black);position:relative;line-height:var(--ptc-line-height-normal)}:host(.nav-style) span{display:block;color:#cac8c8;font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-transform:capitalize;padding-left:var(--ptc-element-spacing-05);font-size:17px;padding-bottom:var(--ptc-element-spacing-03)}:host(.tag-style) span{font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-dense);font-weight:var(--ptc-font-weight-regular);color:#40434a}:host(.inline) span{display:inline}:host(.block) span{display:block}:host(.inline-block) span{display:inline-block}";
-
-let PtcSpan = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Span Style
-     */
-    this.spanStyle = 'tag-style';
-    this.display = 'inline';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("span", { part: "part-ptc-span" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.spanStyle]: true,
-      [this.display]: true,
-    };
-  }
-};
-PtcSpan.style = ptcSpanCss;
-
-export { PtcSpan as ptc_span };

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

@@ -1,45 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-eb8ce23d.js';
-
-const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before{right:0%}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed #5bb73b}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-secondary-grey);opacity:0.9;left:0px}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after{content:\"\";position:absolute;width:20%;height:2px;background-color:var(--color-primary-green);top:-2px;left:0px}div.sc-ptc-title h1.sc-ptc-title,div.sc-ptc-title h2.sc-ptc-title,div.sc-ptc-title h3.sc-ptc-title{display:inline-block;position:relative}div.sc-ptc-title h1.sc-ptc-title{font-size:46px;line-height:52px;font-weight:800;letter-spacing:0px;color:var(--color-primary-grey)}div.sc-ptc-title h2.sc-ptc-title{font-size:28px;line-height:32px;font-weight:800;color:var(--color-primary-grey)}";
-
-let PtcTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Title Tag Type
-     */
-    this.type = 'h2';
-    /**
-     * Text Align
-     */
-    this.textAlign = 'left';
-    /**
-     * Upperline Style
-     */
-    this.upperline = 'dotted';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h(Host, null, h("div", { class: classMap }, h(TagType, null, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.textAlign]: true,
-      [this.upperline]: true,
-    };
-  }
-};
-PtcTitle.style = ptcTitleCss;
-
-export { PtcTitle as ptc_title };

package/dist/ptcw-design/p-01f4bf71.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as l}from"./p-2ca3c085.js";let i=class{constructor(t){s(this,t),this.listType="para-list",this.linkHref=void 0}render(){const s=this.getCssClassMap();return t(l,{class:s},t("li",null,this.linkHref?t("a",Object.assign({},this.linkHref?{href:this.linkHref}:{}),t("slot",null)):t("slot",null)))}getCssClassMap(){return{[this.listType]:!0}}};i.style=":host{display:block}";export{i as list_item}