@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.js

@@ -1,133 +1,133 @@
-import { Host, h } from '@stencil/core';
-export class PtcReadmoreChar {
-  constructor() {
-    this.expanded = false;
-    this.maxCharacters = 100;
-    this.description = undefined;
-    this.readMoreText = "Read More";
-    this.readLessText = "Read Less";
-  }
-  toggleExpand() {
-    this.expanded = !this.expanded;
-    this.readMoreClicked.emit(this.expanded);
-  }
-  render() {
-    const contentText = this.description
-      ? this.description.trim()
-      : '';
-    const truncatedContent = contentText.length > this.maxCharacters ? contentText.substring(0, this.maxCharacters) + '...' : contentText;
-    const label = this.expanded ? this.readLessText : this.readMoreText;
-    return (h(Host, null, h("p", { class: "description" }, this.expanded ? (this.description) : (truncatedContent)), contentText.length > this.maxCharacters && (h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, label))));
-  }
-  static get is() { return "ptc-readmore-char"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-readmore-char.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-readmore-char.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "maxCharacters": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Character limits: Set your desired maximum character count"
-        },
-        "attribute": "max-characters",
-        "reflect": false,
-        "defaultValue": "100"
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text content"
-        },
-        "attribute": "description",
-        "reflect": false
-      },
-      "readMoreText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Read More Text"
-        },
-        "attribute": "read-more-text",
-        "reflect": false,
-        "defaultValue": "\"Read More\""
-      },
-      "readLessText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Read Less Text"
-        },
-        "attribute": "read-less-text",
-        "reflect": false,
-        "defaultValue": "\"Read Less\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "expanded": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "readMoreClicked",
-        "name": "readMoreClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcReadmoreChar {
+  constructor() {
+    this.expanded = false;
+    this.maxCharacters = 100;
+    this.description = undefined;
+    this.readMoreText = "Read More";
+    this.readLessText = "Read Less";
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+    this.readMoreClicked.emit(this.expanded);
+  }
+  render() {
+    const contentText = this.description
+      ? this.description.trim()
+      : '';
+    const truncatedContent = contentText.length > this.maxCharacters ? contentText.substring(0, this.maxCharacters) + '...' : contentText;
+    const label = this.expanded ? this.readLessText : this.readMoreText;
+    return (h(Host, null, h("p", { class: "description" }, this.expanded ? (this.description) : (truncatedContent)), contentText.length > this.maxCharacters && (h("label", { class: "truncated-label", onClick: () => this.toggleExpand() }, label))));
+  }
+  static get is() { return "ptc-readmore-char"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-readmore-char.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-readmore-char.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "maxCharacters": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Character limits: Set your desired maximum character count"
+        },
+        "attribute": "max-characters",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text content"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "readMoreText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read More Text"
+        },
+        "attribute": "read-more-text",
+        "reflect": false,
+        "defaultValue": "\"Read More\""
+      },
+      "readLessText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Read Less Text"
+        },
+        "attribute": "read-less-text",
+        "reflect": false,
+        "defaultValue": "\"Read Less\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "readMoreClicked",
+        "name": "readMoreClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-related-card-rail/ptc-related-card-rail.js

@@ -1,190 +1,190 @@
-import { Host, h } from '@stencil/core';
-export class PtcRelatedCardRail {
-  constructor() {
-    this.setScreenBasedProps = () => {
-      let windowWidth = window.innerWidth;
-      let props = {
-        contentContainerMargin: undefined,
-        contentCards: undefined,
-        parahFontSize: undefined
-      };
-      if (windowWidth >= 2600) {
-        props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1980) {
-        props.contentCards = 3;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1440) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 1200) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 992) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xx-small';
-      }
-      else if (windowWidth >= 768) {
-        props.contentCards = 2;
-        props.parahFontSize = 'xxx-small';
-      }
-      else {
-        props.contentCards = 1;
-        props.parahFontSize = 'xxx-small';
-      }
-      this.screenBasedProps = Object.assign({}, props);
-    };
-    this.handlePrevClick = () => {
-      var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView > 0) {
-        this.cardInView -= 1;
-        const content = contentCards[this.cardInView];
-        contentContainer.scrollTo({
-          left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
-        });
-      }
-    };
-    this.handleNextClick = () => {
-      var _a, _b;
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
-        this.cardInView += 1;
-        const content = contentCards[this.cardInView];
-        contentContainer.scrollTo({
-          left: content.offsetLeft - contentContainerMarginLeft,
-          behavior: "smooth"
-        });
-      }
-    };
-    this.handleOnScrollBehaviour = () => {
-      if (!this.closed) {
-        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
-        let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
-        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
-        let trackLength = documentHeight - windowHeight;
-        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
-        if (percentageSrolled >= 50) {
-          this.el.style.display = 'block';
-        }
-        else {
-          this.el.style.display = 'none';
-        }
-        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
-        let pageFooter = document.querySelector(this.footerQuerySelector);
-        if (pageFooter) {
-          let pageFooterTop = pageFooter.getBoundingClientRect().top;
-          let windowBottom = window.innerHeight;
-          if (pageFooterTop <= windowBottom) {
-            let newBottom = 132 + (windowBottom - pageFooterTop);
-            cardRailContainer.style.bottom = `${newBottom}px`;
-          }
-        }
-      }
-    };
-    this.handleOnResizeBehaviour = () => {
-      var _a, _b;
-      this.setScreenBasedProps();
-      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
-      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
-      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
-      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
-      contentContainer.scrollTo({
-        left: contentCards[0].offsetLeft - contentContainerMarginLeft,
-      });
-      this.cardInView = 0;
-    };
-    this.footerQuerySelector = undefined;
-    this.closed = false;
-    this.cardInView = 0;
-    this.data = [];
-    this.screenBasedProps = {
-      contentContainerMargin: undefined,
-      contentCards: undefined,
-      parahFontSize: undefined
-    };
-  }
-  componentWillLoad() {
-    const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
-    for (let ind in relatedCards) {
-      let card = relatedCards[ind];
-      if (card.tagName === 'DIV') {
-        let cardData = {
-          image: undefined,
-          text: undefined,
-          href: undefined
-        };
-        let cardImage = card.querySelector('img');
-        let cardLink = card.querySelector('a');
-        cardData.image = cardImage.getAttribute('src');
-        cardData.text = cardLink.innerHTML;
-        cardData.href = cardLink.getAttribute('href');
-        this.data.push(cardData);
-        card.remove();
-      }
-    }
-    this.handleOnScrollBehaviour();
-  }
-  componentDidLoad() {
-    this.setScreenBasedProps();
-    window.addEventListener('scroll', this.handleOnScrollBehaviour);
-    window.addEventListener('resize', this.handleOnResizeBehaviour);
-  }
-  render() {
-    return (this.closed ? null :
-      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
-  }
-  static get is() { return "ptc-related-card-rail"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-related-card-rail.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-related-card-rail.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "footerQuerySelector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Query selector of page footer above which the related card rail will unstick"
-        },
-        "attribute": "footer-query-selector",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "closed": {},
-      "cardInView": {},
-      "data": {},
-      "screenBasedProps": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcRelatedCardRail {
+  constructor() {
+    this.setScreenBasedProps = () => {
+      let windowWidth = window.innerWidth;
+      let props = {
+        contentContainerMargin: undefined,
+        contentCards: undefined,
+        parahFontSize: undefined
+      };
+      if (windowWidth >= 2600) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1980) {
+        props.contentCards = 3;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1440) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 1200) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 992) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xx-small';
+      }
+      else if (windowWidth >= 768) {
+        props.contentCards = 2;
+        props.parahFontSize = 'xxx-small';
+      }
+      else {
+        props.contentCards = 1;
+        props.parahFontSize = 'xxx-small';
+      }
+      this.screenBasedProps = Object.assign({}, props);
+    };
+    this.handlePrevClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView > 0) {
+        this.cardInView -= 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleNextClick = () => {
+      var _a, _b;
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      if (this.cardInView < (contentCards.length - this.screenBasedProps.contentCards)) {
+        this.cardInView += 1;
+        const content = contentCards[this.cardInView];
+        contentContainer.scrollTo({
+          left: content.offsetLeft - contentContainerMarginLeft,
+          behavior: "smooth"
+        });
+      }
+    };
+    this.handleOnScrollBehaviour = () => {
+      if (!this.closed) {
+        let windowHeight = window.innerHeight || (document.documentElement || document.body).clientHeight;
+        let documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
+        let scrollTop = window.scrollY || (document.documentElement || document.body).scrollTop;
+        let trackLength = documentHeight - windowHeight;
+        let percentageSrolled = Math.floor(scrollTop / trackLength * 100);
+        if (percentageSrolled >= 50) {
+          this.el.style.display = 'block';
+        }
+        else {
+          this.el.style.display = 'none';
+        }
+        let cardRailContainer = this.el.shadowRoot.querySelector('.card-rail-container');
+        let pageFooter = document.querySelector(this.footerQuerySelector);
+        if (pageFooter) {
+          let pageFooterTop = pageFooter.getBoundingClientRect().top;
+          let windowBottom = window.innerHeight;
+          if (pageFooterTop <= windowBottom) {
+            let newBottom = 132 + (windowBottom - pageFooterTop);
+            cardRailContainer.style.bottom = `${newBottom}px`;
+          }
+        }
+      }
+    };
+    this.handleOnResizeBehaviour = () => {
+      var _a, _b;
+      this.setScreenBasedProps();
+      let contentContainer = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('.content-container');
+      let contentContainerMarginLeftString = window.getComputedStyle(contentContainer).marginLeft;
+      let contentContainerMarginLeft = Number(contentContainerMarginLeftString.substring(0, contentContainerMarginLeftString.length - 2));
+      let contentCards = (_b = this.el) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelectorAll('.content');
+      contentContainer.scrollTo({
+        left: contentCards[0].offsetLeft - contentContainerMarginLeft,
+      });
+      this.cardInView = 0;
+    };
+    this.footerQuerySelector = undefined;
+    this.closed = false;
+    this.cardInView = 0;
+    this.data = [];
+    this.screenBasedProps = {
+      contentContainerMargin: undefined,
+      contentCards: undefined,
+      parahFontSize: undefined
+    };
+  }
+  componentWillLoad() {
+    const relatedCards = this.el.querySelectorAll('[slot^="related-card-"]');
+    for (let ind in relatedCards) {
+      let card = relatedCards[ind];
+      if (card.tagName === 'DIV') {
+        let cardData = {
+          image: undefined,
+          text: undefined,
+          href: undefined
+        };
+        let cardImage = card.querySelector('img');
+        let cardLink = card.querySelector('a');
+        cardData.image = cardImage.getAttribute('src');
+        cardData.text = cardLink.innerHTML;
+        cardData.href = cardLink.getAttribute('href');
+        this.data.push(cardData);
+        card.remove();
+      }
+    }
+    this.handleOnScrollBehaviour();
+  }
+  componentDidLoad() {
+    this.setScreenBasedProps();
+    window.addEventListener('scroll', this.handleOnScrollBehaviour);
+    window.addEventListener('resize', this.handleOnResizeBehaviour);
+  }
+  render() {
+    return (this.closed ? null :
+      h(Host, null, h("div", { class: "card-rail-container" }, h("div", { class: "card-rail-header" }, h("div", { class: "card-rail-heading" }, h("ptc-para", { "ellipsis-line-cutoff": "0", "font-size": "x-small", "font-weight": "w-7", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-normal", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, "Read More Case Studies")), h("div", { class: "card-rail-close", onClick: () => { this.closed = true; } }, h("icon-asset", { type: "ptc", size: "xx-small", name: "times", color: "gray" }))), h("div", { class: "card-rail-content" }, h("icon-asset", { id: "left-arrow", type: "ptc", size: "small", name: "previous_button_arrow", color: "gray", onClick: this.handlePrevClick }), h("icon-asset", { id: "right-arrow", type: "ptc", size: "small", name: "next_button_arrow", color: "gray", onClick: this.handleNextClick }), h("div", { class: "content-container" }, this.data.map(item => h("div", { class: "content", onClick: () => { window.open(item.href); } }, h("div", { class: "content-image" }, h("img", { alt: "", src: item.image })), h("div", { class: "content-text" }, h("ptc-para", { "ellipsis-line-cutoff": "3", "font-size": this.screenBasedProps.parahFontSize, "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush", "para-style": "", "para-z-index": "z-1", styles: "" }, item.text)))))))));
+  }
+  static get is() { return "ptc-related-card-rail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-related-card-rail.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-related-card-rail.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "footerQuerySelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Query selector of page footer above which the related card rail will unstick"
+        },
+        "attribute": "footer-query-selector",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "closed": {},
+      "cardInView": {},
+      "data": {},
+      "screenBasedProps": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-responsive-wrapper/ptc-responsive-wrapper.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}