@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/dropdown/dropdown.js

@@ -156,7 +156,7 @@ export class Dropdown {
     if (typeof this.textInput !== 'undefined' || this.textInput === null) {
       if (!this.selectedLabel && this.selectedLabel.length <= 0) {
         this.textInput.value = '';
-        this.inputSearch.emit('');
+        this.internalSddsSearch.emit('');
       }
       if (this.selectedLabel !== this.textInput.value) {
         this.textInput.value = this.selectedLabel;
@@ -184,7 +184,7 @@ export class Dropdown {
   }
   handleSearch(ev) {
     const searchTerm = ev.target.value;
-    this.inputSearch.emit(searchTerm);
+    this.internalSddsSearch.emit(searchTerm);
     this.open = true;
   }
   deselectAll() {
@@ -515,13 +515,16 @@ export class Dropdown {
   }
   static get events() {
     return [{
-        "method": "inputSearch",
-        "name": "inputSearch",
+        "method": "internalSddsSearch",
+        "name": "internalSddsSearch",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "internal",
+              "text": "Search event that is emitted to the sdds-dropdown-filter"
+            }],
           "text": ""
         },
         "complexType": {
@@ -580,4 +583,3 @@ export class Dropdown {
       }];
   }
 }
-//# sourceMappingURL=dropdown.js.map

package/dist/collection/components/footer/footer.stories.js

@@ -115,4 +115,3 @@ const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
     </div>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=footer.stories.js.map

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.css

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+}
+:host .footer-top-title {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  opacity: var(--sdds-footer-top-title-opacity);
+  color: var(--sdds-footer-top-links);
+  padding-bottom: 8px;
+}
+:host button.footer-top-title-button {
+  display: none;
+  border: none;
+  width: 100%;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-footer-top-links);
+  background-color: transparent;
+  text-align: left;
+  padding: 19px 24px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--sdds-footer-top-divider);
+}
+:host button.footer-top-title-button.expanded {
+  border-bottom: none;
+}
+:host button.footer-top-title-button.expanded sdds-icon {
+  transform: rotateZ(180deg);
+}
+:host button.footer-top-title-button:hover {
+  cursor: pointer;
+}
+:host button.footer-top-title-button:active {
+  background-color: var(--sdds-footer-top-button-active);
+}
+:host button.footer-top-title-button:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host button.footer-top-title-button sdds-icon {
+  transition: transform 0.2s ease-in-out;
+}
+:host [role=list] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 8px;
+}
+:host [role=list].left, :host [role=list].right {
+  gap: 24px;
+}
+:host [role=list].top-part-child {
+  flex-direction: column;
+}
+@media all and (max-width: 992px) {
+  :host [role=list].left:not(.top-part-child) {
+    flex-direction: column;
+  }
+  :host [role=list].left:not(.top-part-child).left, :host [role=list].left:not(.top-part-child).right {
+    gap: 8px;
+  }
+  :host [role=list].top-part-child.closed {
+    display: none;
+  }
+  :host [role=list].top-part-child {
+    gap: 0;
+  }
+  :host .footer-top-title {
+    display: none;
+  }
+  :host button.footer-top-title-button {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js

@@ -0,0 +1,63 @@
+import { Host, h } from '@stencil/core';
+export class SddsFooterGroup {
+  constructor() {
+    /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */
+    this.slotPostion = null;
+    /** Indicates the if group is part of the top part of the footer. */
+    this.topPartGroup = false;
+    this.titleText = undefined;
+    this.open = false;
+  }
+  connectedCallback() {
+    this.topPartGroup = this.host.parentElement.slot === 'top';
+    if (!this.topPartGroup) {
+      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
+    }
+  }
+  render() {
+    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        this.open = !this.open;
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("sdds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPostion ? this.slotPostion : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-footer-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title text for the link group, only valid on top part of footer."
+        },
+        "attribute": "title-text",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.css

@@ -0,0 +1,45 @@
+[role=listitem] ::slotted(*) {
+  font: var(--sdds-headline-06);
+  letter-spacing: var(--sdds-headline-06-ls);
+  color: var(--sdds-footer-main-links);
+  opacity: var(--sdds-footer-main-links-opacity);
+  text-decoration: none;
+}
+[role=listitem] ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+[role=listitem] ::slotted(*:hover) {
+  text-decoration: underline;
+}
+[role=listitem].top-part-child ::slotted(*) {
+  color: var(--sdds-footer-top-links);
+  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 18px;
+}
+[role=listitem].top-part-child ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+
+@media all and (max-width: 992px) {
+  [role=listitem].top-part-child {
+    border-bottom: 1px solid var(--sdds-footer-top-divider);
+  }
+  [role=listitem].top-part-child ::slotted(*) {
+    display: block;
+    height: 100%;
+    padding: 19px 40px;
+    font-weight: normal;
+  }
+  [role=listitem].top-part-child ::slotted(*:hover) {
+    text-decoration: underline;
+    background-color: var(--sdds-footer-top-links-background-hover);
+  }
+  [role=listitem].top-part-child ::slotted(*:focus-visible) {
+    outline: 2px solid var(--sdds-blue-400);
+    outline-offset: -2px;
+  }
+}

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+export class SddsFooterItem {
+  constructor() {
+    this.parentIsTopPart = false;
+  }
+  connectedCallback() {
+    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-footer-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-item.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/footer/webcomponent/sdds-footer.js

@@ -6,8 +6,7 @@ export class SddsFooter {
     this.hasTopPart = undefined;
   }
   connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasTopPart = children.some((element) => element.slot === 'top');
+    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
   }
   render() {
     return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));
@@ -53,4 +52,3 @@ export class SddsFooter {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-footer.js.map

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js

@@ -1,11 +1,11 @@
 import { formatHtmlPreview } from '../../../utils/utils';
 import readme from './readme.md';
-import readmeLink from './sdds-footer-link/readme.md';
-import readmeLinkGroup from './sdds-footer-link-group/readme.md';
+import readmeItem from './sdds-footer-item/readme.md';
+import readmeLinkGroup from './sdds-footer-group/readme.md';
 export default {
   title: 'Components/Footer',
   parameters: {
-    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer link': readmeLink },
+    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
     layout: 'fullscreen',
     design: [
       {
@@ -59,60 +59,86 @@ const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
       ${topPart
   ? `
       <div slot="top">
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
 
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
 
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
 
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
-
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
       `
   : ''}
       <div slot="main-left">
-        <sdds-footer-link-group>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
       <div slot="main-right">
-        <sdds-footer-link-group>
-          <sdds-footer-link link-href="#">
-          <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-          <sdds-footer-link link-href="#">
-            <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-          <sdds-footer-link link-href="#">
-            <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
     </sdds-footer>
   
   `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-footer.stories.js.map

package/dist/collection/components/header/header-all.stories.js

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -59,7 +59,7 @@ const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
                   </a>
               </li>
 
-              <li class='sdds-nav__item sdds-nav__item--active'>
+              <li class='sdds-nav__item sdds-nav__item--selected'>
                   <a class='sdds-nav__item-core ' href='#'>
                       <span class='sdds-nav__item-core-text'>Item 2</span>
                   </a>
@@ -75,7 +75,7 @@ const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
               <ul class='sdds-nav__dropdown-menu'>
                   <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
                   <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>
-                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--selected'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
               </ul>
               </li>
           </ul>
@@ -217,4 +217,3 @@ const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
     </script>
     `);
 export const AllMenus = AllMenusTemplate.bind({});
-//# sourceMappingURL=header-all.stories.js.map

package/dist/collection/components/header/header-default.stories.js

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -47,4 +47,3 @@ const Template = ({ siteName }) => formatHtmlPreview(`
 </nav>
   `);
 export const Default = Template.bind({});
-//# sourceMappingURL=header-default.stories.js.map

package/dist/collection/components/header/header-inline.stories.js

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -78,6 +78,12 @@ const InlineMenuTemplate = ({ siteName }) => formatHtmlPreview(`
                   <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
               </ul>
               </li>
+
+              <li class='sdds-nav__item sdds-nav__item--active'>
+                  <a class='sdds-nav__item-core ' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 2</span>
+                  </a>
+              </li>
           </ul>
         </div>
 
@@ -108,9 +114,7 @@ const InlineMenuTemplate = ({ siteName }) => formatHtmlPreview(`
         document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
         document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
         document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
-
     }
     </script>
     `);
 export const InlineMenu = InlineMenuTemplate.bind({});
-//# sourceMappingURL=header-inline.stories.js.map

package/dist/collection/components/header/header-search.stories.js

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -263,4 +263,3 @@ const SearchbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
     </script>
     `);
 export const SearchbarMenu = SearchbarMenuTemplate.bind({});
-//# sourceMappingURL=header-search.stories.js.map

package/dist/collection/components/header/header-toolbar.stories.js

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -204,4 +204,3 @@ const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
     </script>
     `);
 export const ToolbarMenu = ToolbarMenuTemplate.bind({});
-//# sourceMappingURL=header-toolbar.stories.js.map

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.css

@@ -0,0 +1,24 @@
+:host {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-header-nav-item-color);
+}
+:host .item {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: var(--sdds-header-height);
+  height: var(--sdds-header-height);
+  margin: 0;
+}
+:host .item * {
+  box-sizing: border-box;
+}
+:host slot {
+  white-space: nowrap;
+}
+:host ::slotted(svg) {
+  font-size: 20px;
+}

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.js

@@ -0,0 +1,18 @@
+import { h, Host } from '@stencil/core';
+export class CoreHeaderItem {
+  render() {
+    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
+  }
+  static get is() { return "sdds-core-header-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["core-header-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["core-header-item.css"]
+    };
+  }
+}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.css

@@ -0,0 +1,14 @@
+:host sdds-header-item {
+  display: none;
+}
+:host sdds-header-item a {
+  background-image: var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);
+  background-size: 30px auto;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+@media (min-width: 521px) {
+  :host sdds-header-item {
+    display: block;
+  }
+}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js

@@ -0,0 +1,46 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderBrandSymbol {
+  constructor() {
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  static get is() { return "sdds-header-brand-symbol"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-brand-symbol.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-brand-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "linkHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The href for the logo link."
+        },
+        "attribute": "link-href",
+        "reflect": false,
+        "defaultValue": "'https://www.scania.com'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}