@ptcwebops/ptcw-design 0.0.14 → 0.1.0

package/dist/collection/components/ptc-spacer/ptc-spacer.css

@@ -1,307 +0,0 @@
-: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
-	}
-}

package/dist/collection/components/ptc-spacer/ptc-spacer.js

@@ -1,99 +0,0 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcSpacer {
-  constructor() {
-    /**
-     * 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',
-    };
-  }
-  static get is() { return "ptc-spacer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-spacer.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-spacer.css"]
-  }; }
-  static get properties() { return {
-    "breakpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small'",
-        "resolved": "\"\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Breakpoint"
-      },
-      "attribute": "breakpoint",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Spacing Size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "direction": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'vertical' | 'horizontal'",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Direction"
-      },
-      "attribute": "direction",
-      "reflect": false,
-      "defaultValue": "'vertical'"
-    }
-  }; }
-}

package/dist/collection/components/ptc-span/ptc-span.css

@@ -1,36 +0,0 @@
-: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;
-}

package/dist/collection/components/ptc-span/ptc-span.js

@@ -1,86 +0,0 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcSpan {
-  constructor() {
-    /**
-     * 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,
-    };
-  }
-  static get is() { return "ptc-span"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-span.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-span.css"]
-  }; }
-  static get properties() { return {
-    "spanStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'link-style' | 'tag-style' | 'nav-style'",
-        "resolved": "\"link-style\" | \"nav-style\" | \"tag-style\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Span Style"
-      },
-      "attribute": "span-style",
-      "reflect": false,
-      "defaultValue": "'tag-style'"
-    },
-    "display": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'block' | 'inline-block' | 'inline'",
-        "resolved": "\"block\" | \"inline\" | \"inline-block\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "'inline'"
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Injected Styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    }
-  }; }
-}

package/dist/collection/components/ptc-title/ptc-title.css

@@ -1,64 +0,0 @@
-div.center {
-  text-align: center;
-}
-div.center.dotted h1::before, div.center.dotted h2::before, div.center.dotted h3::before {
-  left: 50%;
-  transform: translateX(-50%);
-}
-div.left {
-  text-align: left;
-}
-div.left.dotted h1::before, div.left.dotted h2::before, div.left.dotted h3::before {
-  left: 0%;
-}
-div.right {
-  text-align: right;
-}
-div.right.dotted h1::before, div.right.dotted h2::before, div.right.dotted h3::before {
-  right: 0%;
-}
-div.dotted h1::before, div.dotted h2::before, div.dotted h3::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  width: 30%;
-  display: block;
-  border-top: 3px dashed #5bb73b;
-}
-div.solid h1::before, div.solid h2::before, div.solid h3::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 0.7px;
-  background-color: var(--color-secondary-grey);
-  opacity: 0.9;
-  left: 0px;
-}
-div.solid h1::after, div.solid h2::after, div.solid h3::after {
-  content: "";
-  position: absolute;
-  width: 20%;
-  height: 2px;
-  background-color: var(--color-primary-green);
-  top: -2px;
-  left: 0px;
-}
-div h1,
-div h2,
-div h3 {
-  display: inline-block;
-  position: relative;
-}
-div h1 {
-  font-size: 46px;
-  line-height: 52px;
-  font-weight: 800;
-  letter-spacing: 0px;
-  color: var(--color-primary-grey);
-}
-div h2 {
-  font-size: 28px;
-  line-height: 32px;
-  font-weight: 800;
-  color: var(--color-primary-grey);
-}

package/dist/collection/components/ptc-title/ptc-title.js

@@ -1,105 +0,0 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcTitle {
-  constructor() {
-    /**
-     * 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,
-    };
-  }
-  static get is() { return "ptc-title"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-title.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-title.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'h1' | 'h2' | 'h3'",
-        "resolved": "\"h1\" | \"h2\" | \"h3\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Title Tag Type"
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'h2'"
-    },
-    "textAlign": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'left' | 'center' | 'right'",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text Align"
-      },
-      "attribute": "text-align",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "upperline": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'dotted' | 'solid'",
-        "resolved": "\"dotted\" | \"solid\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Upperline Style"
-      },
-      "attribute": "upperline",
-      "reflect": false,
-      "defaultValue": "'dotted'"
-    }
-  }; }
-}

package/dist/collection/index.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/utils/interfaces.js

@@ -1,6 +0,0 @@
-let ResponsiveBgVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-img',
-  interval: 250
-};
-export { ResponsiveBgVariables };

package/dist/collection/utils/utils.js

@@ -1,3 +0,0 @@
-export function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}