@ptcwebops/ptcw-design 0.2.8 → 0.2.9

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

@@ -1,8 +1,24 @@
+:host {
+  z-index: 1;
+}
+
 p.default {
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
+}
+p.main {
   text-shadow: 0 3px 6px var(--color-white);
   line-height: var(--ptc-line-height-dense);
   color: var(--color-primary-grey);
 }
+p.primary-grey {
+  color: var(--color-primary-grey);
+}
+p.white {
+  color: var(--color-white);
+}
 p.xx-small {
   font-size: var(--ptc-font-size-xx-small);
 }
@@ -30,6 +46,9 @@ p.xxx-large {
 p.xxxx-large {
   font-size: var(--ptc-font-size-xxxx-large);
 }
+p.font-size-15 {
+  font-size: var(--ptc-font-size-15);
+}
 p.w-3 {
   font-weight: var(--ptc-font-weight-thin);
 }
@@ -79,6 +98,46 @@ p.margin-bottom-5 {
 p.margin-bottom-6 {
   margin-bottom: var(--ptc-element-spacing-06);
 }
+p.margin-3 {
+  margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+p.margin-4 {
+  margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+p.margin-5 {
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+p.margin-6 {
+  margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+p.line-height-17 {
+  line-height: var(--ptc-line-height-17);
+}
+p.line-height-18 {
+  line-height: var(--ptc-line-height-18);
+}
+p.line-height-19 {
+  line-height: var(--ptc-line-height-19);
+}
+p.line-height-denser {
+  line-height: var(--ptc-line-height-denser);
+}
+p.line-height-dense {
+  line-height: var(--ptc-line-height-dense);
+}
+p.line-height-normal {
+  line-height: var(--ptc-line-height-normal);
+}
+p.line-height-loose {
+  line-height: var(--ptc-line-height-loose);
+}
+p.line-height-looser {
+  line-height: var(--ptc-line-height-looser);
+}
 p.announcement {
   text-transform: uppercase;
   font-size: var(--ptc-font-size-small);

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

@@ -13,6 +13,14 @@ export class PtcPara {
      * Paragraph Style
      **/
     this.paraStyle = 'default';
+    /**
+     * Paragraph Color
+     */
+    this.paraColor = 'primary-grey';
+    /**
+     * line height
+     */
+    this.paraLineH = 'line-height-normal';
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -24,7 +32,9 @@ export class PtcPara {
       [this.fontSize]: true,
       [this.fontWeight]: true,
       [this.paraStyle]: true,
-      [this.paraMargin]: true,
+      [this.paraMargin]: !!this.paraMargin ? true : false,
+      [this.paraColor]: true,
+      [this.paraLineH]: true
     };
   }
   static get is() { return "ptc-para"; }
@@ -40,8 +50,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'font-size-15'",
+        "resolved": "\"font-size-15\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
         "references": {}
       },
       "required": false,
@@ -76,8 +86,8 @@ export class PtcPara {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'default' | 'intro' | 'small' | 'announcement'",
-        "resolved": "\"announcement\" | \"default\" | \"intro\" | \"small\"",
+        "original": "'default' | 'intro' | 'small' | 'announcement' | 'flush-style' | 'main'",
+        "resolved": "\"announcement\" | \"default\" | \"flush-style\" | \"intro\" | \"main\" | \"small\"",
         "references": {}
       },
       "required": false,
@@ -90,12 +100,48 @@ export class PtcPara {
       "reflect": false,
       "defaultValue": "'default'"
     },
+    "paraColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary-grey' | 'white'",
+        "resolved": "\"primary-grey\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Paragraph Color"
+      },
+      "attribute": "para-color",
+      "reflect": false,
+      "defaultValue": "'primary-grey'"
+    },
+    "paraLineH": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'line-height-17' | 'line-height-18' | 'line-height-19' | 'line-height-denser' | 'line-height-dense' | 'line-height-normal' | 'line-height-loose' | 'line-height-looser'",
+        "resolved": "\"line-height-17\" | \"line-height-18\" | \"line-height-19\" | \"line-height-dense\" | \"line-height-denser\" | \"line-height-loose\" | \"line-height-looser\" | \"line-height-normal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "line height"
+      },
+      "attribute": "para-line-h",
+      "reflect": false,
+      "defaultValue": "'line-height-normal'"
+    },
     "paraMargin": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'",
-        "resolved": "\"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "original": "'margin-flush' | 'margin-top-3' | 'margin-top-4' | 'margin-top-5' | 'margin-top-6' | 'margin-bottom-3' | 'margin-bottom-4' | 'margin-bottom-5' | 'margin-bottom-6'| 'margin-3' | 'margin-4' | 'margin-5' | 'margin-6'",
+        "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
         "references": {}
       },
       "required": false,

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

@@ -3,9 +3,20 @@
   overflow: hidden;
 }
 
+:host(.relative) {
+  position: relative;
+}
+
+:host(.static) {
+  position: static;
+}
+
+:host(.absoltue) {
+  position: static;
+}
+
 img {
   max-width: 100%;
-  height: auto;
 }
 
 .cover {
@@ -34,4 +45,20 @@ img {
 
 .inherit {
   object-fit: inherit;
+}
+
+.radius-sm {
+  border-radius: var(--ptc-border-radius-small);
+}
+
+.radius-md {
+  border-radius: var(--ptc-border-radius-medium);
+}
+
+.radius-lg {
+  border-radius: var(--ptc-border-radius-large);
+}
+
+.radius-x-lg {
+  border-radius: var(--ptc-border-radius-x-large);
 }

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

@@ -27,9 +27,9 @@ export class PtcPicture {
      */
     this.sizeLg = '1920x1080';
     /**
-     * Image border shape
+     * Image Position
      */
-    this.borderRadius = '';
+    this.imagePosition = 'static';
     /**
      * Object Fit
      * Default: cover
@@ -99,9 +99,10 @@ export class PtcPicture {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null,
+    return (h(Host, { class: this.imagePosition },
       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 }))));
+      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 })),
+      h("slot", null)));
   }
   getCurrentBreakPoints() {
     // Define local variables
@@ -142,7 +143,7 @@ export class PtcPicture {
   }
   getCssClassMap() {
     return {
-      [this.borderRadius]: true,
+      [this.borderRadius]: this.borderRadius ? true : false,
       [this.objectFit]: true,
     };
   }
@@ -262,12 +263,30 @@ export class PtcPicture {
       "reflect": false,
       "defaultValue": "'1920x1080'"
     },
+    "imagePosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'relative' | 'absolute' | 'static'",
+        "resolved": "\"absolute\" | \"relative\" | \"static\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image Position"
+      },
+      "attribute": "image-position",
+      "reflect": false,
+      "defaultValue": "'static'"
+    },
     "borderRadius": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
-        "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | 'radius-x-lg'",
+        "resolved": "\"radius-lg\" | \"radius-md\" | \"radius-sm\" | \"radius-x-lg\"",
         "references": {}
       },
       "required": false,
@@ -277,8 +296,7 @@ export class PtcPicture {
         "text": "Image border shape"
       },
       "attribute": "border-radius",
-      "reflect": false,
-      "defaultValue": "''"
+      "reflect": false
     },
     "height": {
       "type": "string",

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

@@ -236,6 +236,17 @@
 	}
 }
 
+:host(.ptc-spacer-vertical.space-144){
+	width: 100%;
+	height: 144px;
+	min-height: 144px;
+}
+:host(.ptc-spacer-vertical.space-120){
+	width: 100%;
+	height: 120px;
+	min-height: 120px;
+}
+
 :host(.ptc-spacer-xx-small) {
 	display: none
 }

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

@@ -63,8 +63,8 @@ export class PtcSpacer {
       "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\"",
+        "original": "'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large' | 'space-144' | 'space-120'",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"space-120\" | \"space-144\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
         "references": {}
       },
       "required": false,

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

@@ -1,3 +1,13 @@
+:host {
+  z-index: 1;
+}
+:host span {
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
+}
+
 :host(.link-style) span {
   color: var(--color-primary-uigrey);
   font-weight: var(--ptc-font-weight-black);
@@ -20,7 +30,14 @@
   font-size: var(--ptc-font-size-medium);
   line-height: var(--ptc-line-height-dense);
   font-weight: var(--ptc-font-weight-regular);
-  color: #40434a;
+  color: var(--color-primary-grey);
+}
+
+:host(.plm-hub-style) span {
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-19);
+  font-weight: var(--ptc-font-weight-medium);
+  color: var(--color-white);
 }
 
 :host(.inline) span {
@@ -33,4 +50,12 @@
 
 :host(.inline-block) span {
   display: inline-block;
+}
+
+:host(.white) span {
+  color: var(--color-white);
+}
+
+:host(.primary-grey) span {
+  color: var(--color-primary-grey);
 }

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

@@ -5,6 +5,9 @@ export class PtcSpan {
      * Span Style
      */
     this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
     this.display = 'inline';
   }
   render() {
@@ -33,8 +36,8 @@ export class PtcSpan {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'link-style' | 'tag-style' | 'nav-style'",
-        "resolved": "\"link-style\" | \"nav-style\" | \"tag-style\"",
+        "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style'",
+        "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"tag-style\"",
         "references": {}
       },
       "required": false,
@@ -59,7 +62,7 @@ export class PtcSpan {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Display"
       },
       "attribute": "display",
       "reflect": false,

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

@@ -1,23 +1,34 @@
 div.center {
   text-align: center;
 }
-div.center.dotted h1::before, div.center.dotted h2::before, div.center.dotted h3::before {
+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 {
+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 {
+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 {
+div.inherit {
+  text-align: inherit;
+}
+div.dotted h1::before,
+div.dotted h2::before,
+div.dotted h3::before {
   content: "";
   position: absolute;
   top: -6px;
@@ -25,7 +36,9 @@ div.dotted h1::before, div.dotted h2::before, div.dotted h3::before {
   display: block;
   border-top: 3px dashed #5bb73b;
 }
-div.solid h1::before, div.solid h2::before, div.solid h3::before {
+div.solid h1::before,
+div.solid h2::before,
+div.solid h3::before {
   content: "";
   position: absolute;
   width: 100%;
@@ -34,7 +47,9 @@ div.solid h1::before, div.solid h2::before, div.solid h3::before {
   opacity: 0.9;
   left: 0px;
 }
-div.solid h1::after, div.solid h2::after, div.solid h3::after {
+div.solid h1::after,
+div.solid h2::after,
+div.solid h3::after {
   content: "";
   position: absolute;
   width: 20%;
@@ -43,22 +58,104 @@ div.solid h1::after, div.solid h2::after, div.solid h3::after {
   top: -2px;
   left: 0px;
 }
-div h1,
-div h2,
-div h3 {
+div.is-standard h1,
+div.is-standard h2,
+div.is-standard h3 {
   display: inline-block;
   position: relative;
 }
-div h1 {
+div.is-standard h1 {
   font-size: 46px;
   line-height: 52px;
   font-weight: 800;
   letter-spacing: 0px;
   color: var(--color-primary-grey);
 }
-div h2 {
+div.is-standard h2 {
   font-size: 28px;
   line-height: 32px;
   font-weight: 800;
   color: var(--color-primary-grey);
+}
+div.is-plm-hub h1,
+div.is-plm-hub h2,
+div.is-plm-hub h3 {
+  display: inline-block;
+  position: relative;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+div.is-plm-hub h1 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: 50px;
+  line-height: 59px;
+  color: var(--color-white);
+}
+div.is-plm-hub h2 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-x-large);
+  line-height: 28px;
+  color: var(--color-white);
+}
+div.is-plm-hub h3 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-large);
+  line-height: 23px;
+  color: var(--color-white);
+}
+div.margin-flush {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+div.margin-top-2 {
+  margin-top: var(--ptc-element-spacing-02);
+}
+div.margin-top-3 {
+  margin-top: var(--ptc-element-spacing-03);
+}
+div.margin-top-4 {
+  margin-top: var(--ptc-element-spacing-04);
+}
+div.margin-top-5 {
+  margin-top: var(--ptc-element-spacing-05);
+}
+div.margin-top-6 {
+  margin-top: var(--ptc-element-spacing-06);
+}
+div.margin-bottom-2 {
+  margin-bottom: var(--ptc-element-spacing-02);
+}
+div.margin-bottom-3 {
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+div.margin-bottom-4 {
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+div.margin-bottom-5 {
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+div.margin-bottom-6 {
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+div.margin-2 {
+  margin-top: var(--ptc-element-spacing-02);
+  margin-bottom: var(--ptc-element-spacing-02);
+}
+div.margin-3 {
+  margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+div.margin-4 {
+  margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+div.margin-5 {
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+div.margin-6 {
+  margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: var(--ptc-element-spacing-06);
 }

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

@@ -1,6 +1,10 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcTitle {
   constructor() {
+    /**
+     * Is this title using on the PLM Hub page
+     */
+    this.isPlmHub = false;
     /**
      * Title Tag Type
      */
@@ -36,6 +40,8 @@ export class PtcTitle {
     return {
       [this.textAlign]: true,
       [this.upperline]: true,
+      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.titleMargin]: !!this.titleMargin ? true : false
     };
   }
   static get is() { return "ptc-title"; }
@@ -47,6 +53,24 @@ export class PtcTitle {
     "$": ["ptc-title.css"]
   }; }
   static get properties() { return {
+    "isPlmHub": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Is this title using on the PLM Hub page"
+      },
+      "attribute": "is-plm-hub",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -69,8 +93,8 @@ export class PtcTitle {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'left' | 'center' | 'right'",
-        "resolved": "\"center\" | \"left\" | \"right\"",
+        "original": "'left' | 'center' | 'right' | 'inherit'",
+        "resolved": "\"center\" | \"inherit\" | \"left\" | \"right\"",
         "references": {}
       },
       "required": false,
@@ -87,8 +111,8 @@ export class PtcTitle {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'dotted' | 'solid'",
-        "resolved": "\"dotted\" | \"solid\"",
+        "original": "'dotted' | 'solid' | 'no-upperline'",
+        "resolved": "\"dotted\" | \"no-upperline\" | \"solid\"",
         "references": {}
       },
       "required": false,
@@ -100,6 +124,40 @@ export class PtcTitle {
       "attribute": "upperline",
       "reflect": false,
       "defaultValue": "'dotted'"
+    },
+    "titleMargin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'margin-flush'\n    | 'margin-top-3'\n    | 'margin-top-4'\n    | 'margin-top-5'\n    | 'margin-top-6'\n    | 'margin-bottom-3'\n    | 'margin-bottom-4'\n    | 'margin-bottom-5'\n    | 'margin-bottom-6'\n    | 'margin-3'\n    | 'margin-4'\n    | 'margin-5'\n    | 'margin-6'",
+        "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Title Margin"
+      },
+      "attribute": "title-margin",
+      "reflect": false
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Style"
+      },
+      "attribute": "styles",
+      "reflect": false
     }
   }; }
 }