@ptcwebops/ptcw-design 0.6.4 → 0.6.5

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { Components, JSX } from './components';
+export { Components, JSX } from './components';

package/dist/types/utils/component.d.ts

@@ -1 +1 @@
-export declare const hasSlot: (HTMLElement: any, string?: any) => boolean;
+export declare const hasSlot: (HTMLElement: any, string?: any) => boolean;

package/dist/types/utils/interfaces.d.ts

@@ -1,28 +1,28 @@
-declare type CssClassMap = {
-  [className: string]: boolean;
-};
-declare let ResponsiveBgVariables: {
-  envs: string[];
-  selector: string;
-  interval: number;
-};
-declare let ResponsivePictureVariables: {
-  envs: string[];
-  selector: string;
-  interval: number;
-};
-export { CssClassMap, ResponsiveBgVariables, ResponsivePictureVariables };
-export interface ITabData {
-  select: () => void;
-  unselect: () => void;
-  name: string;
-}
-export interface ITabHeaderData extends ITabData {
-  id: string;
-}
-export interface ITabContentData extends ITabData {
-}
-export interface ITabGroup {
-  header: ITabHeaderData;
-  content: ITabContentData;
-}
+declare type CssClassMap = {
+  [className: string]: boolean;
+};
+declare let ResponsiveBgVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+declare let ResponsivePictureVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+export { CssClassMap, ResponsiveBgVariables, ResponsivePictureVariables };
+export interface ITabData {
+  select: () => void;
+  unselect: () => void;
+  name: string;
+}
+export interface ITabHeaderData extends ITabData {
+  id: string;
+}
+export interface ITabContentData extends ITabData {
+}
+export interface ITabGroup {
+  header: ITabHeaderData;
+  content: ITabContentData;
+}

package/dist/types/utils/utils.d.ts

@@ -1,3 +1,3 @@
-export declare function format(first: string, middle: string, last: string): string;
-export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
-export declare function generateUUID(): string;
+export declare function format(first: string, middle: string, last: string): string;
+export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
+export declare function generateUUID(): string;

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@ptcwebops/ptcw-design",
-  "version": "0.6.4",
-  "description": "Stencil Component Starter",
-  "main": "dist/index.cjs.js",
-  "module": "dist/custom-elements/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/ptcw-design/ptcw-design.esm.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "test.unit": "stencil test --spec",
-    "test.end-to-end": "stencil test --e2e",
-    "test.unit.watch": "stencil test --spec --watch",
-    "generate": "stencil generate",
-    "prepare": "stencil build --docs"
-  },
-  "dependencies": {
-    "@daveberning/griddle": "^0.3.0",
-    "@stencil/core": "^2.13.0",
-    "@teamhive/lottie-player": "^1.0.0",
-    "npmrc": "^1.1.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@stencil/sass": "^1.4.1",
-    "@types/jest": "^27.0.3",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "mobile-select": "^1.1.2",
-    "puppeteer": "^10.0.0",
-    "stencil-inline-svg": "^1.1.0"
-  },
-  "directories": {
-    "doc": "docs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://@bitbucket.org/ptc-sitecore-workspace/ptc-design-system.git"
-  },
-  "keywords": [
-    "design system",
-    "web components",
-    "stenciljs"
-  ],
-  "author": "Yunfeng Qian",
-  "homepage": "https://bitbucket.org/ptc-sitecore-workspace/ptc-design-system#readme"
-}
+{
+  "name": "@ptcwebops/ptcw-design",
+  "version": "0.6.5",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.cjs.js",
+  "module": "dist/custom-elements/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/custom-elements/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/ptcw-design/ptcw-design.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test.unit": "stencil test --spec",
+    "test.end-to-end": "stencil test --e2e",
+    "test.unit.watch": "stencil test --spec --watch",
+    "generate": "stencil generate",
+    "prepare": "stencil build --docs"
+  },
+  "dependencies": {
+    "@daveberning/griddle": "^0.3.0",
+    "@stencil/core": "^2.13.0",
+    "@teamhive/lottie-player": "^1.0.0",
+    "npmrc": "^1.1.1",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@stencil/sass": "^1.4.1",
+    "@types/jest": "^27.0.3",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "mobile-select": "^1.1.2",
+    "puppeteer": "^10.0.0",
+    "stencil-inline-svg": "^1.1.0"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://@bitbucket.org/ptc-sitecore-workspace/ptc-design-system.git"
+  },
+  "keywords": [
+    "design system",
+    "web components",
+    "stenciljs"
+  ],
+  "author": "Yunfeng Qian",
+  "homepage": "https://bitbucket.org/ptc-sitecore-workspace/ptc-design-system#readme"
+}

package/readme.md

@@ -1,11 +1,11 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
-
-# PTC Design 0.6.4
-
-The site is the place for documentation on PTC Design System
-
-## Building the Site
-
-To build the site from the source, ensure you're using the most recent versions of Node and Npm, and pull the latest from master. Next, run `npm install`, `npm run docs` to build the docs files and `npm start` to launch the site in development mode.
-
-## License
+![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+
+# PTC Design 0.6.5
+
+The site is the place for documentation on PTC Design System
+
+## Building the Site
+
+To build the site from the source, ensure you're using the most recent versions of Node and Npm, and pull the latest from master. Next, run `npm install`, `npm run docs` to build the docs files and `npm start` to launch the site in development mode.
+
+## License

package/dist/cjs/ptc-card-content.cjs.entry.js

@@ -1,42 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b3fabe79.js');
-
-const ptcCardContentCss = ":host{display:block}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}";
-
-let PtcCardContent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hoverEvent = index.createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = index.createEvent(this, "leaveEvent", 7);
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.add('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.remove('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "ptc-card-content-wrapper" }, index.h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: !!this.cardType ? true : false,
-    };
-  }
-  get el() { return index.getElement(this); }
-};
-PtcCardContent.style = ptcCardContentCss;
-
-exports.ptc_card_content = PtcCardContent;

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

@@ -1,180 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b3fabe79.js');
-const interfaces = require('./interfaces-0ecd8027.js');
-
-const ptcPictureCss = ":host{display:block;overflow:hidden}:host img{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.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}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
-
-let PtcPicture = class {
-  constructor(hostRef) {
-    index.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 Position
-     */
-    this.imagePosition = 'static';
-    /**
-     * Object Fit
-     * Default: cover
-     */
-    this.objectFit = 'cover';
-    /**
-     * Stretch height to 100%?
-     */
-    this.isFullHeight = false;
-    /**
-     * Stretch width to 100%?
-     */
-    this.isFullWidth = false;
-    /**
-     * (optional) Image alignment
-     **/
-    this.imageAlignment = 'left';
-  }
-  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();
-    const classMapHost = this.getCssClassMapHost();
-    return (index.h(index.Host, { class: classMapHost }, this.styles && index.h("style", null, this.styles), index.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, style: Object.assign({}, (!!this.maxWidth ? { maxWidth: this.maxWidth + 'px' } : {})) })), index.h("slot", null)));
-  }
-  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 = interfaces.ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
-      env = interfaces.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]: this.borderRadius ? true : false,
-      [this.objectFit]: true,
-      [this.isFullHeight ? 'is-full-height' : 'is-normal-height']: true,
-      [this.isFullWidth ? 'is-full-width' : 'is-normal-width']: true
-    };
-  }
-  getCssClassMapHost() {
-    return {
-      [this.imagePosition]: true,
-      [this.imageAlignment]: true
-    };
-  }
-  get el() { return index.getElement(this); }
-};
-PtcPicture.style = ptcPictureCss;
-
-exports.ptc_picture = PtcPicture;

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

@@ -1,38 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-a91c2367.js';
-
-const ptcCardContentCss = ":host{display:block}:host(.speed-bump){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-06) 28px var(--ptc-element-spacing-06) 28px;text-align:center}:host(.speed-bump-2){border:1px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-large);padding:var(--ptc-element-spacing-07) var(--ptc-element-spacing-05);text-align:center}@media only screen and (min-width: 768px){:host(.speed-bump){text-align:left}}@media only screen and (min-width: 768px){:host(.speed-bump-2){text-align:left}}:host(.card-tall) .ptc-card-content-wrapper,:host(.card-video) .ptc-card-content-wrapper,:host(.card-wide) .ptc-card-content-wrapper,:host(.card-playlist) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-video) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-playlist) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-tall) .ptc-card-content-wrapper::after,:host(.card-video) .ptc-card-content-wrapper::after,:host(.card-wide) .ptc-card-content-wrapper::after,:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper{border-radius:var(--ptc-border-radius-large);position:relative}:host(.card-2up) .ptc-card-content-wrapper::before{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-large);top:0;left:0;background:transparent;z-index:1;box-shadow:var(--ptc-shadow-x-small);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-2up) .ptc-card-content-wrapper::after{content:\"\";position:absolute;opacity:0;top:52.5%;left:50%;transform:translate(-50%, -50%);z-index:2;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::after{content:url(\"data:image/svg+xml,%3Csvg width='46' height='48' viewBox='0 0 46 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10337)'%3E%3Cpath d='M34 16L12 28V4L34 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10337' x='0' y='0' width='46' height='48' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10337'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10337' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A\");width:40px;height:30px;top:50%}:host(.card-video) .ptc-card-content-wrapper::after{top:59.5%}:host(.mouse-hover) .ptc-card-content-wrapper::before{background:rgba(0, 0, 0, 0.6)}:host(.mouse-hover) .ptc-card-content-wrapper::after{opacity:1}:host(.card-tall) .ptc-card-content-wrapper::before,:host(.card-wide) .ptc-card-content-wrapper::before,:host(.card-2up) .ptc-card-content-wrapper::before{height:100%}:host(.card-playlist){flex:1 2 0%;margin-right:var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-playlist) .ptc-card-content-wrapper{width:88px;height:88px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:88px;height:88px}}@media only screen and (min-width: 768px){:host(.card-playlist) .ptc-card-content-wrapper{width:112px;height:112px}:host(.card-playlist) .ptc-card-content-wrapper::before{width:112px;height:112px}}@media screen and (min-width: 1981px){:host(.card-playlist){margin-right:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:80% 8 1}}:host(.card-video) .ptc-card-content-wrapper{padding-bottom:56.25%}:host(.card-video) .ptc-card-content-wrapper ::slotted(*){position:absolute;width:100%;height:100%;top:0;left:0}:host(.card-tall) .ptc-card-content-wrapper{height:322px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:322px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:322px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:322px}@media only screen and (min-width: 768px){:host(.card-tall) .ptc-card-content-wrapper{height:325px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:325px}:host(.card-wide) .ptc-card-content-wrapper{height:268px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:268px}:host(.card-2up) .ptc-card-content-wrapper{height:268px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:268px}}@media only screen and (min-width: 992px){:host(.card-tall) .ptc-card-content-wrapper{height:380px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:380px}}@media only screen and (min-width: 1980px){:host(.card-tall) .ptc-card-content-wrapper{height:546px}:host(.card-tall) .ptc-card-content-wrapper ::slotted(*){height:546px}:host(.card-wide) .ptc-card-content-wrapper{height:376px}:host(.card-wide) .ptc-card-content-wrapper ::slotted(*){height:376px}:host(.card-2up) .ptc-card-content-wrapper{height:376px}:host(.card-2up) .ptc-card-content-wrapper ::slotted(*){height:376px}}";
-
-let PtcCardContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hoverEvent = createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = createEvent(this, "leaveEvent", 7);
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.add('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    this.el.classList.remove('mouse-hover');
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.nextElementSibling.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-content-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: !!this.cardType ? true : false,
-    };
-  }
-  get el() { return getElement(this); }
-};
-PtcCardContent.style = ptcCardContentCss;
-
-export { PtcCardContent as ptc_card_content };