@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.42

package/dist/collection/components/hy-search-field/hy-search-field.js

@@ -1,12 +1,14 @@
-import { Component, Prop, h, State, Element, Host } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { ColorVariant } from '../../utils/utils';
 export class HySearchField {
   constructor() {
+    this.label = undefined;
     this.isLabelBold = false;
     this.labelLarge = false;
     this.isLuomusSearch = false;
     this.placeholder = 'Type here...';
     this.isLabelHidden = false;
+    this.inputId = undefined;
     this.prefillParameter = '';
     this.isInputValueEmpty = true;
   }
@@ -33,175 +35,173 @@ export class HySearchField {
     searchInput.focus();
   }
   render() {
-    return (h(Host, { class: "search-field" },
-      !this.isLuomusSearch && (h("label", { htmlFor: this.inputId, class: `search-field__label 
+    return (h(Host, { class: "search-field" }, !this.isLuomusSearch && (h("label", { htmlFor: this.inputId, class: `search-field__label 
           ${this.isLabelHidden ? 'visually-hidden' : ''} 
           ${this.labelLarge ? 'label-large' : ''} 
-          ${this.isLabelBold ? 'bold' : ''}` }, this.label)),
-      h("div", { class: "search-field__actions" },
-        h("div", { class: "search-field__wrapper" },
-          this.isLuomusSearch && (h("input", { id: this.inputId, name: "search", "data-drupal-selector": "edit-search", value: "", type: "text", placeholder: this.placeholder, class: "search-field__input" })),
-          !this.isLuomusSearch && (h("input", { id: this.inputId, type: "text", placeholder: this.placeholder, class: "search-field__input" })),
-          !this.isInputValueEmpty && (h("button", { type: "button", class: "search-field__reset", "aria-label": "Reset", onClick: () => this.handleInputReset() },
-            h("hy-icon", { icon: 'hy-icon-remove', size: 14, "aria-hidden": "true" })))),
-        this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search", "data-drupal-selector": "edit-submit-luomus-search", id: "edit-submit-luomus-search", value: "Apply" },
-          h("hy-icon", { icon: 'hy-icon-search', size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))),
-        !this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search" },
-          h("hy-icon", { icon: 'hy-icon-search', size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))))));
+          ${this.isLabelBold ? 'bold' : ''}` }, this.label)), h("div", { class: "search-field__actions" }, h("div", { class: "search-field__wrapper" }, this.isLuomusSearch && (h("input", { id: this.inputId, name: "search", "data-drupal-selector": "edit-search", value: "", type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isLuomusSearch && (h("input", { id: this.inputId, type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isInputValueEmpty && (h("button", { type: "button", class: "search-field__reset", "aria-label": "Reset", onClick: () => this.handleInputReset() }, h("hy-icon", { icon: 'hy-icon-remove', size: 14, "aria-hidden": "true" })))), this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search", "data-drupal-selector": "edit-submit-luomus-search", id: "edit-submit-luomus-search", value: "Apply" }, h("hy-icon", { icon: 'hy-icon-search', size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))), !this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search" }, h("hy-icon", { icon: 'hy-icon-search', size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))))));
   }
   static get is() { return "hy-search-field"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-search-field.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-search-field.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "isLabelBold": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-label-bold",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "labelLarge": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-large",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isLuomusSearch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-luomus-search",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "'Type here...'"
-    },
-    "isLabelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "inputId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "input-id",
-      "reflect": false
-    },
-    "prefillParameter": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "prefill-parameter",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
-  static get states() { return {
-    "isInputValueEmpty": {}
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-search-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-search-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "isLabelBold": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-label-bold",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "labelLarge": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-large",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isLuomusSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-luomus-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "'Type here...'"
+      },
+      "isLabelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "inputId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-id",
+        "reflect": false
+      },
+      "prefillParameter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prefill-parameter",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isInputValueEmpty": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=hy-search-field.js.map

package/dist/collection/components/hy-search-field/hy-search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-search-field.js","sourceRoot":"","sources":["../../../src/components/hy-search-field/hy-search-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, State, Element, Host} from '@stencil/core';\nimport {ColorVariant} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-search-field',\n  styleUrl: 'hy-search-field.scss',\n  shadow: false,\n})\nexport class HySearchField {\n  @Element() el: HTMLElement;\n  @Prop() label: string;\n  @Prop() isLabelBold: boolean = false;\n  @Prop() labelLarge: boolean = false;\n  @Prop() isLuomusSearch: boolean = false;\n  @Prop() placeholder: string = 'Type here...';\n  @Prop() isLabelHidden?: boolean = false;\n  @Prop() inputId: string;\n  @Prop() prefillParameter: string = '';\n  @State() isInputValueEmpty: boolean = true;\n\n  componentDidLoad() {\n    const searchInput = this.el.querySelector('.search-field__input');\n\n    searchInput.addEventListener('keyup', (event) => {\n      const {value} = event.target as HTMLInputElement;\n\n      this.isInputValueEmpty = value.length > 0 ? false : true;\n    });\n\n    if (this.prefillParameter.length > 0) {\n      if (window.location === undefined) return;\n\n      const urlParams = new URLSearchParams(window.location.search);\n      const searchValue = urlParams.get(`${this.prefillParameter}`);\n      const searchInput = this.el.querySelector('.search-field__input') as HTMLInputElement;\n      searchInput.value = searchValue && searchValue.length > 0 ? searchValue : '';\n      this.isInputValueEmpty = false;\n    }\n  }\n\n  handleInputReset() {\n    this.isInputValueEmpty = true;\n    const searchInput = this.el.querySelector('.search-field__input') as HTMLInputElement;\n    searchInput.value = '';\n    searchInput.focus();\n  }\n\n  render() {\n    return (\n      <Host class=\"search-field\">\n        {!this.isLuomusSearch && (\n          <label\n            htmlFor={this.inputId}\n            class={`search-field__label \n          ${this.isLabelHidden ? 'visually-hidden' : ''} \n          ${this.labelLarge ? 'label-large' : ''} \n          ${this.isLabelBold ? 'bold' : ''}`}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class=\"search-field__actions\">\n          <div class=\"search-field__wrapper\">\n            {this.isLuomusSearch && (\n              <input\n                id={this.inputId}\n                name=\"search\"\n                data-drupal-selector=\"edit-search\"\n                value=\"\"\n                type=\"text\"\n                placeholder={this.placeholder}\n                class=\"search-field__input\"\n              />\n            )}\n            {!this.isLuomusSearch && (\n              <input id={this.inputId} type=\"text\" placeholder={this.placeholder} class=\"search-field__input\" />\n            )}\n            {!this.isInputValueEmpty && (\n              <button\n                type=\"button\"\n                class=\"search-field__reset\"\n                aria-label=\"Reset\"\n                onClick={() => this.handleInputReset()}\n              >\n                <hy-icon icon={'hy-icon-remove'} size={14} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          {this.isLuomusSearch && (\n            <button\n              type=\"submit\"\n              class=\"search-field__submit\"\n              aria-label=\"Search\"\n              data-drupal-selector=\"edit-submit-luomus-search\"\n              id=\"edit-submit-luomus-search\"\n              value=\"Apply\"\n            >\n              <hy-icon icon={'hy-icon-search'} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n            </button>\n          )}\n          {!this.isLuomusSearch && (\n            <button type=\"submit\" class=\"search-field__submit\" aria-label=\"Search\">\n              <hy-icon icon={'hy-icon-search'} size={18} fill={ColorVariant.white} aria-hidden=\"true\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-shortcuts/hy-shortcuts.css

@@ -132,7 +132,7 @@
 
 @media (min-width: 30rem) {
   .hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3.first a.shortcut-link,
-.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link {
+  .hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link {
     border-top: 3px solid var(--brand-main-nearly-black);
   }
 }

package/dist/collection/components/hy-shortcuts/hy-shortcuts.js

@@ -1,7 +1,8 @@
-import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { HeadingVarians } from '../../utils/utils';
 export class HyShortcuts {
   constructor() {
+    this.dataItems = undefined;
     this.listHeading = '';
     this.headerstyle = 'default';
   }
@@ -29,96 +30,98 @@ export class HyShortcuts {
     const textClassAttributes = ['text'].join(' ');
     const iconClassAttributes = ['link-icon'].join(' ');
     let classItem = ['shortcut-link-wrapper', this._dataItems.length % 4 == 0 ? 'box-4' : 'box-3'].join(' ');
-    return (h(Host, null,
-      h("div", { class: classAttributes },
-        this.listHeading.length > 0 && (h("hy-heading", { class: "list-title", heading: HeadingVarians.h2 }, this.listHeading)),
-        h("div", { class: "shortcut-link-container" }, this._dataItems.map((x, index) => {
-          let isFirstLine = '';
-          if (this._dataItems.length % 4 == 0) {
-            isFirstLine = index == 0 || index == 1 ? 'first' : '';
-          }
-          else {
-            isFirstLine = index == 0 ? 'first' : '';
-          }
-          let classLinkWrapper = classItem.concat(' ', isFirstLine);
-          let target = x.isExternal ? '_blank' : '_self';
-          return (h("div", { class: classLinkWrapper },
-            h("a", { "aria-label": x.ariaLabel, class: "shortcut-link", href: x.url, target: target },
-              h("span", { class: textClassAttributes }, x.heading),
-              h("span", { class: iconClassAttributes },
-                h("hy-icon", { icon: 'hy-icon-arrow-right', size: 28 })))));
-        }))),
-      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+    return (h(Host, null, h("div", { class: classAttributes }, this.listHeading.length > 0 && (h("hy-heading", { class: "list-title", heading: HeadingVarians.h2 }, this.listHeading)), h("div", { class: "shortcut-link-container" }, this._dataItems.map((x, index) => {
+      let isFirstLine = '';
+      if (this._dataItems.length % 4 == 0) {
+        isFirstLine = index == 0 || index == 1 ? 'first' : '';
+      }
+      else {
+        isFirstLine = index == 0 ? 'first' : '';
+      }
+      let classLinkWrapper = classItem.concat(' ', isFirstLine);
+      let target = x.isExternal ? '_blank' : '_self';
+      return (h("div", { class: classLinkWrapper }, h("a", { "aria-label": x.ariaLabel, class: "shortcut-link", href: x.url, target: target }, h("span", { class: textClassAttributes }, x.heading), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 28 })))));
+    }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
   }
   static get is() { return "hy-shortcuts"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-shortcuts.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-shortcuts.css"]
-  }; }
-  static get properties() { return {
-    "dataItems": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ShortcutLinkValue[] | string",
-        "resolved": "ShortcutLinkValue[] | string",
-        "references": {
-          "ShortcutLinkValue": {
-            "location": "local"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-shortcuts.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-shortcuts.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dataItems": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ShortcutLinkValue[] | string",
+          "resolved": "ShortcutLinkValue[] | string",
+          "references": {
+            "ShortcutLinkValue": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-shortcuts/hy-shortcuts.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-items",
+        "reflect": false
       },
-      "attribute": "data-items",
-      "reflect": false
-    },
-    "listHeading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "listHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "list-heading",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "list-heading",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'default'"
-    }
-  }; }
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "'default'"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "dataItems",
-      "methodName": "arrayDataWatcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "dataItems",
+        "methodName": "arrayDataWatcher"
+      }];
+  }
 }
+//# sourceMappingURL=hy-shortcuts.js.map

package/dist/collection/components/hy-shortcuts/hy-shortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-shortcuts.js","sourceRoot":"","sources":["../../../src/components/hy-shortcuts/hy-shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ShortcutLinkValue {\n  heading: string;\n  url: string;\n  isExternal: boolean;\n  ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, Watch} from '@stencil/core';\nimport {HeadingVarians} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-shortcuts',\n  styleUrl: 'hy-shortcuts.scss',\n  shadow: false,\n})\nexport class HyShortcuts implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private _dataItems: ShortcutLinkValue[];\n  @Prop() dataItems: ShortcutLinkValue[] | string;\n  @Prop() listHeading: string = '';\n  @Prop() headerstyle: string = 'default';\n\n  @Watch('dataItems')\n  arrayDataWatcher(newValue: ShortcutLinkValue[] | string) {\n    if (typeof newValue === 'string') {\n      this._dataItems = JSON.parse(newValue);\n    } else {\n      this._dataItems = newValue;\n    }\n  }\n  componentWillLoad() {\n    this.arrayDataWatcher(this.dataItems);\n  }\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest('.hy-main');\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains('with-sidebar')) {\n        this.headerstyle = 'large';\n      }\n    }\n  }\n\n  render() {\n    const classAttributes = ['hy-shortcuts', `hy-shortcuts__${this.headerstyle}`].join(' ');\n    const textClassAttributes = ['text'].join(' ');\n    const iconClassAttributes = ['link-icon'].join(' ');\n\n    let classItem = ['shortcut-link-wrapper', this._dataItems.length % 4 == 0 ? 'box-4' : 'box-3'].join(' ');\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          {this.listHeading.length > 0 && (\n            <hy-heading class=\"list-title\" heading={HeadingVarians.h2}>\n              {this.listHeading}\n            </hy-heading>\n          )}\n          <div class=\"shortcut-link-container\">\n            {this._dataItems.map((x, index) => {\n              let isFirstLine = '';\n              if (this._dataItems.length % 4 == 0) {\n                isFirstLine = index == 0 || index == 1 ? 'first' : '';\n              } else {\n                isFirstLine = index == 0 ? 'first' : '';\n              }\n              let classLinkWrapper = classItem.concat(' ', isFirstLine);\n              let target = x.isExternal ? '_blank' : '_self';\n\n              return (\n                <div class={classLinkWrapper}>\n                  <a aria-label={x.ariaLabel} class=\"shortcut-link\" href={x.url} target={target}>\n                    <span class={textClassAttributes}>{x.heading}</span>\n                    <span class={iconClassAttributes}>\n                      <hy-icon icon={'hy-icon-arrow-right'} size={28} />\n                    </span>\n                  </a>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"]}