@ptcwebops/ptcw-design 0.0.3 → 0.0.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/icon-asset_4.cjs.entry.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-825cf1b6.js');
+
+const iconAssetCss = "/*!\n * Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com\n * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)\n */.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:\"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa .fa-secondary,.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.fad.fa-inverse{color:#fff}svg.small{width:var(--ptc-font-size-medium);height:var(--ptc-font-size-medium)}svg.large{width:var(--ptc-font-size-large);height:var(--ptc-font-size-large)}svg.white{fill:var(--color-white)}svg.black{fill:var(--color-black)}svg.ptc-green{fill:var(--color-primary-green)}";
+
+const IconAsset = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Icon Size
+     */
+    this.size = 'small';
+    /**
+    * Icon Type
+    */
+    this.type = 'regular';
+    /**
+     * Icon Spin Animation
+     */
+    this.spin = '';
+    /**
+     * Icon Pulse Animation
+     */
+    this.pulse = '';
+    /**
+     * Icon Color
+     */
+    this.color = 'black';
+    this.regularSprite = index.getAssetPath('./assets/regular.svg');
+    this.solidSprite = index.getAssetPath('./assets/solid.svg');
+    this.brandSprite = index.getAssetPath('./assets/brands.svg');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    if (this.type == 'brands') {
+      return (index.h("svg", { class: classMap }, index.h("use", { href: `${this.brandSprite}#${this.name}` })));
+    }
+    else if (this.type == 'solid') {
+      return (index.h("svg", { class: classMap }, index.h("use", { href: `${this.solidSprite}#${this.name}` })));
+    }
+    else {
+      return (index.h("svg", { class: classMap }, index.h("use", { href: `${this.regularSprite}#${this.name}` })));
+    }
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      [this.spin]: true,
+      [this.pulse]: true,
+      [this.color]: true,
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+IconAsset.style = iconAssetCss;
+
+function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+const myComponentCss = ":host{display:block}";
+
+const MyComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  getText() {
+    return format(this.first, this.middle, this.last);
+  }
+  render() {
+    return index.h("div", null, index.h("h4", null, "Hello, World! I'm ", this.getText()));
+  }
+};
+MyComponent.style = myComponentCss;
+
+const ptcButtonCss = ":host{display:block;box-sizing:border-box}:host([disabled]){pointer-events:none}@keyframes gradient{0%{background-position:0%}100%{background-position:100%}}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:2.5px;white-space:normal;position:relative;transition:box-shadow 0.4s cubic-bezier(0, 0, 0.23, 1);text-transform:uppercase;text-decoration:none;cursor:pointer}button.large{padding:15px 28px}button.small{padding:10px 20px}button.round{border-radius:var(--ptc-border-radius-medium)}button.icon svg,button.icon-right svg,button.icon-down svg{transition:all ease-out 0.25s;position:relative;top:4px}button:hover.icon-right svg{transform:translateX(var(--ptc-element-spacing-02))}button:hover.icon-down svg{transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:\"Rajdhani\", sans-serif;font-size:19px;font-weight:bold;letter-spacing:var(--ptc-letter-spacing-normal);text-align:center;position:relative;z-index:2}.offwhite{box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover:after{opacity:1}.offwhite:after{position:absolute;content:\"\";top:0;left:0;bottom:0;right:0;width:100%;height:100%;background-image:linear-gradient(to right, #e5e5e5, #d3d3d3, #ffffff);opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1)}.offwhite:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.offwhite span{color:var(--color-primary-uigrey)}.neon{background-color:var(--color-black-100);border:0px;position:relative;-webkit-box-shadow:0 0 49px 0 rgba(116, 195, 77, 0.35);box-shadow:0 0 49px 0 rgba(116, 195, 77, 0.35)}.neon:hover{-webkit-box-shadow:0 0 49px 0 rgba(116, 195, 77, 0.6);box-shadow:0 0 49px 0 rgba(116, 195, 77, 0.6)}.neon:before{content:\"\";position:absolute;top:calc(-1 * 2.5px);left:calc(-1 * 3px);width:calc(100% + 2 * 3px);height:calc(100% + 2 * 2.5px);background:linear-gradient(to right, var(--color-secondary-turquoiseblue), var(--color-secondary-turtlegreen), var(--color-secondary-turtlegreen), var(--color-secondary-turquoiseblue));z-index:-1;background-size:200% 200%;border-radius:4px}.neon:hover:before{-webkit-animation:gradient 0.6s cubic-bezier(0, 0, 0.23, 1) forwards 1;animation:gradient 0.6s cubic-bezier(0, 0, 0.23, 1) forwards 1}.neon span{color:var(--color-white)}.blackgrey{box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-primary-uigrey);background-image:linear-gradient(to left, var(--color-primary-uigrey), var(--color-black))}.blackgrey:after{position:absolute;content:\"\";top:0;left:0;bottom:0;right:0;width:100%;height:100%;background-color:var(--color-primary-uigrey);background-image:linear-gradient(to left, var(--color-black), var(--color-primary-uigrey));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:4px}.blackgrey:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.blackgrey:hover:after{opacity:1}.blackgrey span{color:#ffffff}.turtlegreen{box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}.turtlegreen:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.turtlegreen:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.turtlegreen:hover:after{opacity:1}.turtlegreen span{color:var(--color-white)}";
+
+const PtcButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Button type
+     */
+    this.type = 'button';
+    /**
+     * Button theme color
+     */
+    this.color = 'blackgrey';
+    /**
+     * Button shape
+     */
+    this.shape = 'round';
+    /**
+     * Button Size
+     */
+    this.size = 'large';
+    /**
+     * Icon Animation
+     */
+    this.icon = '';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h("button", { type: this.type, class: classMap, disabled: this.disabled }, index.h("span", null, index.h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.size]: true,
+      [this.shape]: true,
+      [this.icon]: true,
+    };
+  }
+};
+PtcButton.style = ptcButtonCss;
+
+const ptcTitleCss = "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)}";
+
+const PtcTitle = class {
+  constructor(hostRef) {
+    index.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 (index.h(index.Host, null, index.h("div", { class: classMap }, index.h(TagType, null, index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.textAlign]: true,
+      [this.upperline]: true,
+    };
+  }
+};
+PtcTitle.style = ptcTitleCss;
+
+exports.icon_asset = IconAsset;
+exports.my_component = MyComponent;
+exports.ptc_button = PtcButton;
+exports.ptc_title = PtcTitle;