@colijnit/product 259.1.3 → 260.1.1

package/fesm2015/colijnit-product.js

@@ -31,8 +31,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "259.1.3";
-        this.publishDate = "29-9-2025 15:45:45";
+        this.symVer = "260.1.1";
+        this.publishDate = "15-12-2025 17:02:25";
     }
 }
 
@@ -837,17 +837,17 @@ class IoneProductComponent {
 IoneProductComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-ione-product',
-                template: `
-    <app-product-page *ngIf="settingsLoaded"
-                      [createFrozenArticle]="handleAddArticleInternally"
-                      [isReturn]="isReturn"
-                      [sku]="sku"
-                      [showRelatedProductsPopup]="showRelatedProductsPopup"
-                      [enableRenderCarousel]="enableRenderCarousel"
-                      (openStockEvent)="openStock()"
-    ></app-product-page>
-    <!--  <co-button [label]="'click'" (click)="showHD = !showHD"></co-button>
-      <co-product-hd [sku]="'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'" *ngIf="showHD"></co-product-hd>-->
+                template: `
+    <app-product-page *ngIf="settingsLoaded"
+                      [createFrozenArticle]="handleAddArticleInternally"
+                      [isReturn]="isReturn"
+                      [sku]="sku"
+                      [showRelatedProductsPopup]="showRelatedProductsPopup"
+                      [enableRenderCarousel]="enableRenderCarousel"
+                      (openStockEvent)="openStock()"
+    ></app-product-page>
+    <!--  <co-button [label]="'click'" (click)="showHD = !showHD"></co-button>
+      <co-product-hd [sku]="'657946ca-e1e1-41fd-7ae0-08dbf7df0cef'" *ngIf="showHD"></co-product-hd>-->
   `,
                 providers: [
                     ProductSettingsService,
@@ -1248,25 +1248,25 @@ class ProductSelectorTypeComponent {
 ProductSelectorTypeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-selector-type',
-                template: `
-        <div *ngIf="show2D || show3D" class="show-in" [textContent]="'SHOW_IN' | localize"></div>
-        <co-icon *ngIf="show2D && !showRenderCarousel" class="selector-type-icon"
-                 [class.active]="currentType === type.TwoD"
-                 [iconData]="twoDIcon"
-                 (click)="handleIconClick(type.TwoD)"
-        ></co-icon>
-
-        <co-icon *ngIf="show2D && showRenderCarousel" class="selector-type-icon"
-                 [class.active]="currentType === type.TwoD"
-                 [iconData]="twoDIcon"
-                 (click)="handleIconClick(type.TwoD)"
-        ></co-icon>
-
-        <co-icon *ngIf="show3D" class="selector-type-icon"
-                 [class.active]="currentType === type.ThreeD"
-                 [iconData]="threeDIcon"
-                 (click)="handleIconClick(type.ThreeD)"
-        ></co-icon>
+                template: `
+        <div *ngIf="show2D || show3D" class="show-in" [textContent]="'SHOW_IN' | localize"></div>
+        <co-icon *ngIf="show2D && !showRenderCarousel" class="selector-type-icon"
+                 [class.active]="currentType === type.TwoD"
+                 [iconData]="twoDIcon"
+                 (click)="handleIconClick(type.TwoD)"
+        ></co-icon>
+
+        <co-icon *ngIf="show2D && showRenderCarousel" class="selector-type-icon"
+                 [class.active]="currentType === type.TwoD"
+                 [iconData]="twoDIcon"
+                 (click)="handleIconClick(type.TwoD)"
+        ></co-icon>
+
+        <co-icon *ngIf="show3D" class="selector-type-icon"
+                 [class.active]="currentType === type.ThreeD"
+                 [iconData]="threeDIcon"
+                 (click)="handleIconClick(type.ThreeD)"
+        ></co-icon>
   `,
                 styles: [":host{display:flex;flex-direction:row;align-items:center}:host .show-in{display:none}:host>*:not(:last-child){margin-right:10px}::ng-deep co-icon.selector-type-icon{box-shadow:inset 0 0 0 1px #22313c;border-radius:50%;background:none;height:34px;width:34px;cursor:pointer}::ng-deep co-icon.selector-type-icon.active{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}::ng-deep co-icon.selector-type-icon.active [fill]{fill:#fff}\n"]
             },] }
@@ -1553,60 +1553,60 @@ class ImageCarouselComponent {
 ImageCarouselComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-image-carousel',
-                template: `
-      <div id="product_page_carousel">
-          <div id="product_page_carousel_items">
-              <co-loader [isShown]="true" *ngIf="showLoader"></co-loader>
-              <div #carousel class="inner-carousel">
-                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-                  <div *ngIf="imageViewModels[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
-                      <img [src]="imageViewModels[0].source">
-                  </div>
-                  <div *ngFor="let imageViewModel of imageViewModels.slice(1); let index = index" class="carousel-item"
-                       [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
-                      <img [src]="imageViewModel.source">
-                  </div>
-                  <div class="carousel-scroller-layer" *ngIf="imageViewModels && imageViewModels.length > 1">
-                      <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
-                      <div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
-                  </div>
-              </div>
-              <!--
-                      <co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
-              -->
-          </div>
-
-          <div id="product_page_carousel_thumbs">
-              <co-scroll-container class="scroll-container" *ngIf="imageViewModels && imageViewModels.length > 1">
-                  <div *ngFor="let imageViewModel of imageViewModels; let index = index" class="carousel-thumb"
-                       [class.active]="index === currentIndex">
-                      <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
-                  </div>
-              </co-scroll-container>
-          </div>
-      </div>
-      <!-- Modal (real popup) -->
-      <div
-        class="image-modal"
-        *ngIf="isPopupOpen"
-        (click)="closePopup()"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Image preview"
-      >
-        <div class="image-modal__content" (click)="$event.stopPropagation()">
-          <button
-            class="image-modal__close"
-            type="button"
-            aria-label="Close"
-            (click)="closePopup()"
-          >
-            ×
-          </button>
-
-          <img [src]="selectedImage?.originalSource" alt="Image preview" />
-        </div>
-      </div>
+                template: `
+      <div id="product_page_carousel">
+          <div id="product_page_carousel_items">
+              <co-loader [isShown]="true" *ngIf="showLoader"></co-loader>
+              <div #carousel class="inner-carousel">
+                  <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+                  <div *ngIf="imageViewModels[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+                      <img [src]="imageViewModels[0].source">
+                  </div>
+                  <div *ngFor="let imageViewModel of imageViewModels.slice(1); let index = index" class="carousel-item"
+                       [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+                      <img [src]="imageViewModel.source">
+                  </div>
+                  <div class="carousel-scroller-layer" *ngIf="imageViewModels && imageViewModels.length > 1">
+                      <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
+                      <div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
+                  </div>
+              </div>
+              <!--
+                      <co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
+              -->
+          </div>
+
+          <div id="product_page_carousel_thumbs">
+              <co-scroll-container class="scroll-container" *ngIf="imageViewModels && imageViewModels.length > 1">
+                  <div *ngFor="let imageViewModel of imageViewModels; let index = index" class="carousel-thumb"
+                       [class.active]="index === currentIndex">
+                      <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+                  </div>
+              </co-scroll-container>
+          </div>
+      </div>
+      <!-- Modal (real popup) -->
+      <div
+        class="image-modal"
+        *ngIf="isPopupOpen"
+        (click)="closePopup()"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image preview"
+      >
+        <div class="image-modal__content" (click)="$event.stopPropagation()">
+          <button
+            class="image-modal__close"
+            type="button"
+            aria-label="Close"
+            (click)="closePopup()"
+          >
+            ×
+          </button>
+
+          <img [src]="selectedImage?.originalSource" alt="Image preview" />
+        </div>
+      </div>
   `,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;-o-object-fit:contain;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"]
@@ -1656,11 +1656,11 @@ class ProductDescriptionComponent {
 ProductDescriptionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-description',
-                template: `
-    <div class="pd-title-wrapper">
-      <span class="pd-description" [textContent]="article?.descriptionRetail" *ngIf="article?.descriptionRetail"></span>
-      <span class="pd-sku" [textContent]="article?.articleNr" *ngIf="article?.articleNr"></span>
-    </div>
+                template: `
+    <div class="pd-title-wrapper">
+      <span class="pd-description" [textContent]="article?.descriptionRetail" *ngIf="article?.descriptionRetail"></span>
+      <span class="pd-sku" [textContent]="article?.articleNr" *ngIf="article?.articleNr"></span>
+    </div>
   `,
                 styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:bold;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width: 650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}\n"]
             },] }
@@ -1741,13 +1741,13 @@ class ProductAdditionalDescriptionComponent {
 ProductAdditionalDescriptionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-additional-description',
-                template: `
-    <ng-container *ngIf="description !== ''">
-      <div class="pd-additional-description">
-        <p [innerHTML]="description"></p>
-        <button class="pd-read-more-btn" [textContent]="'READ_MORE' | localize" (click)="onReadMore()"></button>
-      </div>
-    </ng-container>
+                template: `
+    <ng-container *ngIf="description !== ''">
+      <div class="pd-additional-description">
+        <p [innerHTML]="description"></p>
+        <button class="pd-read-more-btn" [textContent]="'READ_MORE' | localize" (click)="onReadMore()"></button>
+      </div>
+    </ng-container>
   `,
                 styles: [":host{display:block;padding-top:0!important}:host *:focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:transparent;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width: 650px){:host .pd-additional-description{font-size:12px}}\n"]
             },] }
@@ -1827,17 +1827,17 @@ class ProductPriceComponent {
 ProductPriceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-price',
-                template: `
-    <div *ngIf="toPrice">
-      <div class="price-wrapper" *ngIf="fromPrice > toPrice">
-        <div class="from-price-label" [textContent]="fromLabel | localize"></div>
-        <div class="from-price" [textContent]="fromPrice | priceDisplay: valutaSign"></div>
-      </div>
-      <div class="price-wrapper">
-        <div class="to-price-label" [textContent]="toLabel | localize"></div>
-        <div class="to-price" [textContent]="toPrice | priceDisplay: valutaSign"></div>
-      </div>
-    </div>
+                template: `
+    <div *ngIf="toPrice">
+      <div class="price-wrapper" *ngIf="fromPrice > toPrice">
+        <div class="from-price-label" [textContent]="fromLabel | localize"></div>
+        <div class="from-price" [textContent]="fromPrice | priceDisplay: valutaSign"></div>
+      </div>
+      <div class="price-wrapper">
+        <div class="to-price-label" [textContent]="toLabel | localize"></div>
+        <div class="to-price" [textContent]="toPrice | priceDisplay: valutaSign"></div>
+      </div>
+    </div>
   `,
                 styles: [":host{display:flex;flex-direction:column}.price-wrapper{width:100%;font-size:15px;margin:0 0 5px;display:inline-block}.price-wrapper:last-child{margin:0}.from-price-label,.to-price-label{color:#5b6875;display:none}.from-price{font-size:16px;font-weight:bold;text-decoration:line-through;color:#5b6875}.to-price{font-size:25px;font-weight:bold;color:#74b77f}@media screen and (max-width: 650px){.from-price{font-size:13px}.to-price{font-size:21px}}\n"]
             },] }
@@ -1986,36 +1986,36 @@ class ProductAddtocartComponent {
 ProductAddtocartComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-addtocart',
-                template: `
-    <div class="atc-wrapper">
-      <ng-container *ngIf="isReturn">
-        <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="-100" horizontal></co-number-picker>
-      </ng-container>
-
-      <ng-container *ngIf="!isReturn">
-        <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="1" horizontal></co-number-picker>
-      </ng-container>
-
-      <div class="button-wrapper" *ngIf="configurable">
-        <co-button class="configure-button"
-                   [iconData]="iconCache.getIcon(icon.MagicWand)"
-                   [label]="'CONFIGURE' | localize"
-                   (onClick)="startConfiguration.emit()"
-        ></co-button>
-      </div>
-      <div class="button-wrapper" *ngIf="showAddToCart && !configurable">
-        <co-button #addtocartbutton class="cart-button"
-                   [iconData]="iconCache.getIcon(icon.AddToCartDrop)"
-                   [label]="'SHOPPING_CART_IN' | localize"
-                   (onClick)="handleAddToCartClick(quantity)"
-        ></co-button>
-        <co-button class="cart-button quote" *ngIf="showQuoteButton"
-                   [iconData]="iconCache.getIcon(icon.Quote)"
-                   [label]="'QUOTATION' | localize"
-                   (onClick)="handleAddToQuoteClick(quantity)"
-        ></co-button>
-      </div>
-    </div>
+                template: `
+    <div class="atc-wrapper">
+      <ng-container *ngIf="isReturn">
+        <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="-100" horizontal></co-number-picker>
+      </ng-container>
+
+      <ng-container *ngIf="!isReturn">
+        <co-number-picker *ngIf="!configurable && !configuring" class="quantity-select" [(model)]="quantity" [min]="1" horizontal></co-number-picker>
+      </ng-container>
+
+      <div class="button-wrapper" *ngIf="configurable">
+        <co-button class="configure-button"
+                   [iconData]="iconCache.getIcon(icon.MagicWand)"
+                   [label]="'CONFIGURE' | localize"
+                   (onClick)="startConfiguration.emit()"
+        ></co-button>
+      </div>
+      <div class="button-wrapper" *ngIf="showAddToCart && !configurable">
+        <co-button #addtocartbutton class="cart-button"
+                   [iconData]="iconCache.getIcon(icon.AddToCartDrop)"
+                   [label]="'SHOPPING_CART_IN' | localize"
+                   (onClick)="handleAddToCartClick(quantity)"
+        ></co-button>
+        <co-button class="cart-button quote" *ngIf="showQuoteButton"
+                   [iconData]="iconCache.getIcon(icon.Quote)"
+                   [label]="'QUOTATION' | localize"
+                   (onClick)="handleAddToQuoteClick(quantity)"
+        ></co-button>
+      </div>
+    </div>
   `,
                 styles: [":host{display:flex;flex-direction:column}:host *:not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:none!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74B77F}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}\n"]
             },] }
@@ -2072,7 +2072,7 @@ class ProductRelatedComponent {
         this._settingsService = _settingsService;
         this.isSmallModus = true;
         this.createFrozenArticle = true;
-        this.imageData = '';
+        this.imageDataMap = new Map();
         this._articles = [];
     }
     set articles(value) {
@@ -2132,38 +2132,40 @@ class ProductRelatedComponent {
         });
     }
     _loadImages() {
-        this._articles.forEach((a) => __awaiter(this, void 0, void 0, function* () {
-            if (a.image) {
-                const imageContent = yield this._iOne.getImageForCoDocument(a.image, false);
-                this.imageData = imageContent.image;
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const a of this._articles) {
+                if (a.image) {
+                    const imageContent = yield this._iOne.getImageForCoDocument(a.image, false);
+                    this.imageDataMap.set(a.goodId, imageContent.image);
+                }
             }
-        }));
+        });
     }
 }
 ProductRelatedComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-related',
-                template: `
-        <div *ngIf="articles && articles.length > 0">
-            <app-header [label]="label" [amount]="articles?.length" *ngIf="label"></app-header>
-            <co-scroll-container>
-                <div class="article-wrapper" *ngFor="let article of articles">
-                    <co-article-tile
-                        [imageData]="imageData"
-                        [description]="article.description"
-                        [price]="article.price"
-                        [level]="article.stockStatus"
-                        [hasCartButton]="true"
-                        [isSmallModus]="isSmallModus"
-                        [hasConfigureButton]="article.goodType === 'B'"
-                        (contentClick)="handleContentClick(article)"
-                        (cartButtonClick)="handleAddToCartClick(article)"
-                        (configureButtonClick)="handleContentClick(article)"
-                        (threeDButtonClick)="handleThreeDButtonClick(article)"
-                    ></co-article-tile>
-                </div>
-            </co-scroll-container>
-        </div>
+                template: `
+        <div *ngIf="articles && articles.length > 0">
+            <app-header [label]="label" [amount]="articles?.length" *ngIf="label"></app-header>
+            <co-scroll-container>
+                <div class="article-wrapper" *ngFor="let article of articles">
+                    <co-article-tile 
+                        [imageData]="imageDataMap.get(article.goodId)"
+                        [description]="article.description"
+                        [price]="article.price"
+                        [level]="article.stockStatus"
+                        [hasCartButton]="true"
+                        [isSmallModus]="isSmallModus"
+                        [hasConfigureButton]="article.goodType === 'B'"
+                        (contentClick)="handleContentClick(article)"
+                        (cartButtonClick)="handleAddToCartClick(article)"
+                        (configureButtonClick)="handleContentClick(article)"
+                        (threeDButtonClick)="handleThreeDButtonClick(article)"
+                    ></co-article-tile>
+                </div>
+            </co-scroll-container>
+        </div>
     `,
                 styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row;flex:1;min-width:25%}.article-wrapper ::ng-deep co-tile{transition:all .14s ease-out;border:1px solid transparent;padding:10px 20px;display:flex;flex-direction:column;color:#171721;justify-content:space-between}.article-wrapper ::ng-deep co-tile .price{display:block}.article-wrapper ::ng-deep co-tile .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:30px}.article-wrapper ::ng-deep co-tile .tile-bottom{display:flex;flex-direction:column;grid-gap:5px;gap:5px}.article-wrapper ::ng-deep co-tile:hover{border:1px solid #DCE4EA}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon{width:24px;height:24px}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon svg [fill]{fill:#fff}.article-wrapper ::ng-deep co-tile.small{max-width:189px;width:100%;height:100%;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:none!important;padding-bottom:0;overflow:hidden;grid-gap:10px;gap:10px;display:flex;flex-direction:column}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini{pointer-events:all;padding:0!important;font-size:0;width:42px;height:42px;text-align:center;margin:0;border-radius:100%;background:#3E7EFF;cursor:pointer;place-content:center;color:#fff}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:none!important;background:transparent!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}\n"]
             },] }
@@ -2191,13 +2193,13 @@ class HeaderComponent {
 HeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-header',
-                template: `
-    <ng-container *ngIf="label">
-      <div class="header-wrapper">
-        <h3 [textContent]="label"></h3>
-        <span *ngIf="amount" class="amount" [textContent]="'(' + amount + ')'"></span>
-      </div>
-    </ng-container>
+                template: `
+    <ng-container *ngIf="label">
+      <div class="header-wrapper">
+        <h3 [textContent]="label"></h3>
+        <span *ngIf="amount" class="amount" [textContent]="'(' + amount + ')'"></span>
+      </div>
+    </ng-container>
   `,
                 styles: [".header-wrapper{display:flex;flex-direction:row;align-items:center}.header-wrapper .amount{margin-left:5px}\n"]
             },] }
@@ -2286,15 +2288,15 @@ class ProductStockComponent {
 ProductStockComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-stock',
-                template: `
-    <!--<app-header [label]="'STOCK' | localize"></app-header>-->
-    <!--<co-level-indicator [model]="'medium'"></co-level-indicator>-->
-    <div class="product-stock-wrapper">
-      <co-icon class="stock-icon" [iconData]="iconData"></co-icon>
-      <div class="product-stock-fields" (click)="openStock()">
-        <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
-      </div>
-    </div>
+                template: `
+    <!--<app-header [label]="'STOCK' | localize"></app-header>-->
+    <!--<co-level-indicator [model]="'medium'"></co-level-indicator>-->
+    <div class="product-stock-wrapper">
+      <co-icon class="stock-icon" [iconData]="iconData"></co-icon>
+      <div class="product-stock-fields" (click)="openStock()">
+        <div class="pp-default-label" [class.in-stock]="inStock" [textContent]="stockLabel | localize"></div>
+      </div>
+    </div>
   `,
                 styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74B77F}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
             },] }
@@ -2348,15 +2350,15 @@ class ProductDeliveryComponent {
 ProductDeliveryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-delivery',
-                template: `
-    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
-    <div class="product-delivery-wrapper">
-      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
-      <div class="product-delivery-fields">
-        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
-        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
-      </div>
-    </div>
+                template: `
+    <!--<app-header [label]="'DELIVERY_TIME_PERIOD' | localize"></app-header>-->
+    <div class="product-delivery-wrapper">
+      <co-icon class="delivery-icon" [iconData]="iconData"></co-icon>
+      <div class="product-delivery-fields">
+        <div class="pp-default-label" [textContent]="'DELIVERY_TIME_PERIOD' | localize"></div>
+        <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
+      </div>
+    </div>
   `,
                 styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"]
             },] }
@@ -2434,28 +2436,28 @@ class ProductInfoTabsComponent {
 ProductInfoTabsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-info-tabs',
-                template: `
-    <div class="tab-container">
-      <div class="tab-header">
-        <button *ngFor="let tab of tabs; let i = index" class="tab-header-button" [class.active]="activeTab === i" [textContent]="tab.title | localize" (click)="updateTab(i)"></button>
-      </div>
-      <div class="tab-content" #tabContent [style.height.px]="(activeTabHeight > 0 ? activeTabHeight : '')">
-        <div class="tab-content-item" *ngFor="let tab of tabs; let i = index" [class.active]="activeTab === i">
-          <ng-container *ngIf="i === 0">
-            <app-product-additional-info class="" [article]="articleObject" [showLabel]="false"></app-product-additional-info>
-          </ng-container>
-          <ng-container *ngIf="i === 1">
-            <app-product-properties class="" [article]="articleObject" [showLabel]="false"></app-product-properties>
-          </ng-container>
-          <ng-container *ngIf="i === 2">
-            <app-product-documents [showLabel]="false" class="" *ngIf="articleObject?.documents && articleObject?.documents.length > 0" [documents]="articleObject?.documents"></app-product-documents>
-          </ng-container>
-          <ng-container *ngIf="i === 3">
-            <app-product-symbols class="" *ngIf="articleObject?.symbols && articleObject?.symbols.length > 0" [symbols]="articleObject?.symbols"></app-product-symbols>
-          </ng-container>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div class="tab-container">
+      <div class="tab-header">
+        <button *ngFor="let tab of tabs; let i = index" class="tab-header-button" [class.active]="activeTab === i" [textContent]="tab.title | localize" (click)="updateTab(i)"></button>
+      </div>
+      <div class="tab-content" #tabContent [style.height.px]="(activeTabHeight > 0 ? activeTabHeight : '')">
+        <div class="tab-content-item" *ngFor="let tab of tabs; let i = index" [class.active]="activeTab === i">
+          <ng-container *ngIf="i === 0">
+            <app-product-additional-info class="" [article]="articleObject" [showLabel]="false"></app-product-additional-info>
+          </ng-container>
+          <ng-container *ngIf="i === 1">
+            <app-product-properties class="" [article]="articleObject" [showLabel]="false"></app-product-properties>
+          </ng-container>
+          <ng-container *ngIf="i === 2">
+            <app-product-documents [showLabel]="false" class="" *ngIf="articleObject?.documents && articleObject?.documents.length > 0" [documents]="articleObject?.documents"></app-product-documents>
+          </ng-container>
+          <ng-container *ngIf="i === 3">
+            <app-product-symbols class="" *ngIf="articleObject?.symbols && articleObject?.symbols.length > 0" [symbols]="articleObject?.symbols"></app-product-symbols>
+          </ng-container>
+        </div>
+      </div>
+    </div>
   `,
                 styles: ["*:focus{outline:none}:host .tab-header{border-bottom:3px solid #f6f5f4;margin:0 0 30px}:host .tab-header .tab-header-button{background:transparent;border:none;border-bottom:3px solid transparent;line-height:20px;padding:15px 20px;cursor:pointer;font-family:iOneMontserrat;color:#22313c;font-weight:bold;margin:0 0 -3px;opacity:.5}:host .tab-header .tab-header-button:hover{opacity:1}:host .tab-header .tab-header-button.active{opacity:1;border-color:#74b77f}:host .tab-content{padding:0 20px 30px;margin:0 0 20px;border-bottom:2px solid #f6f5f4;transition:all .2s ease-in-out;position:relative}:host .tab-content .tab-content-item{opacity:0;position:absolute;left:0;top:0;visibility:hidden;width:100%}:host .tab-content .tab-content-item.active{opacity:1;visibility:visible;position:static}@media screen and (max-width: 650px){:host .tab-content{padding:0 10px 15px}}@media screen and (max-width: 450px){:host .tab-header{display:flex}:host .tab-header .tab-header-button{width:100%;padding:10px;font-size:11px}}\n"]
             },] }
@@ -2552,11 +2554,11 @@ class ProductAdditionalInfoComponent {
 ProductAdditionalInfoComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-additional-info',
-                template: `
-    <h3 *ngIf="showLabel" [textContent]="'ADDITIONAL_DATA' | localize"></h3>
-    <ng-container *ngIf="textParts && textParts.length > 0">
-      <div class="additional-info-parts" *ngFor="let text of textParts" [innerHTML]="text"></div>
-    </ng-container>
+                template: `
+    <h3 *ngIf="showLabel" [textContent]="'ADDITIONAL_DATA' | localize"></h3>
+    <ng-container *ngIf="textParts && textParts.length > 0">
+      <div class="additional-info-parts" *ngFor="let text of textParts" [innerHTML]="text"></div>
+    </ng-container>
   `,
                 styles: [":host{display:block}:host .additional-info-parts{margin-bottom:20px;line-height:190%;color:#22313c;font-size:13px}:host ::ng-deep p{line-height:190%;margin:15px 0}:host ::ng-deep font{font-family:\"iOneMontserrat\"}:host .additional-info-parts>*:first-child{margin-top:0}:host .additional-info-parts>*:last-child{margin-bottom:0}\n"]
             },] }
@@ -2628,16 +2630,16 @@ class ProductPropertiesComponent {
 ProductPropertiesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-properties',
-                template: `
-    <div class="article-properties-wrapper">
-      <h3 *ngIf="showLabel" [textContent]="'PROPERTIES' | localize"></h3>
-      <ng-container *ngFor="let property of properties">
-        <div class="article-property">
-          <div class="article-property-key" [textContent]="property.key | localize"></div>
-          <div class="article-property-value" [textContent]="property.value"></div>
-        </div>
-      </ng-container>
-    </div>
+                template: `
+    <div class="article-properties-wrapper">
+      <h3 *ngIf="showLabel" [textContent]="'PROPERTIES' | localize"></h3>
+      <ng-container *ngFor="let property of properties">
+        <div class="article-property">
+          <div class="article-property-key" [textContent]="property.key | localize"></div>
+          <div class="article-property-value" [textContent]="property.value"></div>
+        </div>
+      </ng-container>
+    </div>
   `,
                 styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width: 450px){.article-property-key{flex-basis:130px}}\n"]
             },] }
@@ -2676,13 +2678,13 @@ class ProductDocumentsComponent {
 ProductDocumentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-documents',
-                template: `
-    <app-header *ngIf="showLabel" [label]="'DOCUMENTS' | localize" [amount]="documents?.length"></app-header>
-    <div *ngIf="documents && documents.length > 0">
-      <co-files-upload [documents]="documents" [canAdd]="false" readonly></co-files-upload>
-    </div>
+                template: `
+    <app-header *ngIf="showLabel" [label]="'DOCUMENTS' | localize" [amount]="documents?.length"></app-header>
+    <div *ngIf="documents && documents.length > 0">
+      <co-files-upload [documents]="documents" [canAdd]="false" readonly></co-files-upload>
+    </div>
   `,
-                styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:none!important;border:none!important;background:transparent!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%3Csvg   xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22   xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22   xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22   xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22   xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22   xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22   xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22   viewBox%3D%220 0 50 50%22   version%3D%221.1%22   id%3D%22svg8%22   sodipodi%3Adocname%3D%22download.svg%22   inkscape%3Aversion%3D%220.92.4 (5da689c313%2C 2019-01-14)%22%3E  %3Cmetadata     id%3D%22metadata14%22%3E    %3Crdf%3ARDF%3E      %3Ccc%3AWork         rdf%3Aabout%3D%22%22%3E        %3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E        %3Cdc%3Atype           rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22 %2F%3E        %3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E      %3C%2Fcc%3AWork%3E    %3C%2Frdf%3ARDF%3E  %3C%2Fmetadata%3E  %3Cdefs     id%3D%22defs12%22 %2F%3E  %3Csodipodi%3Anamedview     pagecolor%3D%22%23ffffff%22     bordercolor%3D%22%23666666%22     borderopacity%3D%221%22     objecttolerance%3D%2210%22     gridtolerance%3D%2210%22     guidetolerance%3D%2210%22     inkscape%3Apageopacity%3D%220%22     inkscape%3Apageshadow%3D%222%22     inkscape%3Awindow-width%3D%221920%22     inkscape%3Awindow-height%3D%221017%22     id%3D%22namedview10%22     showgrid%3D%22false%22     inkscape%3Azoom%3D%226.675088%22     inkscape%3Acx%3D%22-14.056273%22     inkscape%3Acy%3D%2229.806579%22     inkscape%3Awindow-x%3D%22-8%22     inkscape%3Awindow-y%3D%22-8%22     inkscape%3Awindow-maximized%3D%221%22     inkscape%3Acurrent-layer%3D%22svg8%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g62%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g64%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g66%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g68%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g70%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g72%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g74%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g76%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g78%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g80%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g82%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g84%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g86%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g88%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22     id%3D%22g90%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g6-0%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g4-9%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22m 498.966%2C339.946 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 v 49.804 c 0%2C28.747 -23.388%2C52.135 -52.135%2C52.135 H 78.203 c -28.747%2C0 -52.135%2C-23.388 -52.135%2C-52.135 V 352.98 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 C 5.835%2C339.946 0%2C345.782 0%2C352.98 v 49.804 c 0%2C43.121 35.082%2C78.203 78.203%2C78.203 h 355.594 c 43.121%2C0 78.203%2C-35.082 78.203%2C-78.203 V 352.98 c 0%2C-7.198 -5.835%2C-13.034 -13.034%2C-13.034 z%22         id%3D%22path2%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g12-0%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g10-8%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22M 419.833%2C391.3 H 92.167 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 0%2C7.197 5.835%2C13.034 13.034%2C13.034 h 327.665 c 7.199%2C0 13.034%2C-5.835 13.034%2C-13.034 0%2C-7.197 -5.835%2C-13.034 -13.033%2C-13.034 z%22         id%3D%22path8-3%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g18-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E    %3Cg       id%3D%22g16-7%22       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E      %3Cpath         inkscape%3Aconnector-curvature%3D%220%22         d%3D%22m 387.919%2C207.93 c -4.795%2C-5.367 -13.034%2C-5.834 -18.404%2C-1.038 L 269.033%2C296.657 V 44.048 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 -7.197%2C0 -13.034%2C5.835 -13.034%2C13.034 V 296.657 L 142.483%2C206.893 c -5.367%2C-4.796 -13.607%2C-4.328 -18.404%2C1.038 -4.794%2C5.369 -4.331%2C13.609 1.037%2C18.404 l 109.174%2C97.527 c 6.187%2C5.529 13.946%2C8.292 21.708%2C8.292 7.759%2C0 15.519%2C-2.763 21.708%2C-8.289 l 109.174%2C-97.53 c 5.37%2C-4.798 5.834%2C-13.038 1.039%2C-18.405 z%22         id%3D%22path14-9%22         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E    %3C%2Fg%3E  %3C%2Fg%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g20%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g22-9%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g24-3%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g26%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g28-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g30-2%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g32%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g34-2%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g36-1%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g38%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g40-6%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g42-4%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g44%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g46-7%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E  %3Cg     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22     id%3D%22g48-3%22     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%3C%2Fsvg%3E\") no-repeat left 6px center / 36px auto!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}\n"]
+                styles: [":host{display:block}::ng-deep co-files-upload{flex-direction:column!important;width:100%}::ng-deep co-file-upload{margin:0!important;border-bottom:1px solid #f6f5f4}::ng-deep co-file-upload:first-child{border-top:1px solid #f6f5f4}::ng-deep co-files-upload .files-upload-wrapper{flex-direction:column!important;width:100%}::ng-deep co-file-upload co-tile{max-width:100%!important;width:100%;position:relative}::ng-deep co-file-upload co-tile:hover{box-shadow:none!important}::ng-deep co-file-upload co-tile:hover .tile-extra-bottom{background-color:#f6f5f4!important}::ng-deep co-file-upload co-tile .tile-wrapper{position:absolute!important;left:0;top:0;width:100%;height:100%;z-index:2;opacity:0;box-sizing:border-box}::ng-deep co-file-upload co-tile .tile-wrapper .image{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;cursor:pointer}::ng-deep co-file-upload co-tile .tile-extra-bottom{outline:none!important;border:none!important;background:transparent!important;line-height:20px;padding:20px 20px 20px 60px!important;margin:0!important;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%0D%3Csvg%0D   xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%0D   xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%0D   xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%0D   xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D   xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D   xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%0D   xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%0D   viewBox%3D%220 0 50 50%22%0D   version%3D%221.1%22%0D   id%3D%22svg8%22%0D   sodipodi%3Adocname%3D%22download.svg%22%0D   inkscape%3Aversion%3D%220.92.4 (5da689c313%2C 2019-01-14)%22%3E%0D  %3Cmetadata%0D     id%3D%22metadata14%22%3E%0D    %3Crdf%3ARDF%3E%0D      %3Ccc%3AWork%0D         rdf%3Aabout%3D%22%22%3E%0D        %3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0D        %3Cdc%3Atype%0D           rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22 %2F%3E%0D        %3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%0D      %3C%2Fcc%3AWork%3E%0D    %3C%2Frdf%3ARDF%3E%0D  %3C%2Fmetadata%3E%0D  %3Cdefs%0D     id%3D%22defs12%22 %2F%3E%0D  %3Csodipodi%3Anamedview%0D     pagecolor%3D%22%23ffffff%22%0D     bordercolor%3D%22%23666666%22%0D     borderopacity%3D%221%22%0D     objecttolerance%3D%2210%22%0D     gridtolerance%3D%2210%22%0D     guidetolerance%3D%2210%22%0D     inkscape%3Apageopacity%3D%220%22%0D     inkscape%3Apageshadow%3D%222%22%0D     inkscape%3Awindow-width%3D%221920%22%0D     inkscape%3Awindow-height%3D%221017%22%0D     id%3D%22namedview10%22%0D     showgrid%3D%22false%22%0D     inkscape%3Azoom%3D%226.675088%22%0D     inkscape%3Acx%3D%22-14.056273%22%0D     inkscape%3Acy%3D%2229.806579%22%0D     inkscape%3Awindow-x%3D%22-8%22%0D     inkscape%3Awindow-y%3D%22-8%22%0D     inkscape%3Awindow-maximized%3D%221%22%0D     inkscape%3Acurrent-layer%3D%22svg8%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g62%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g64%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g66%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g68%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g70%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g72%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g74%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g76%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g78%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g80%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g82%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g84%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g86%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g88%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05570714%2C0%2C0%2C0.05570648%2C10.763%2C10.859394)%22%0D     id%3D%22g90%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g6-0%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D    %3Cg%0D       id%3D%22g4-9%22%0D       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D      %3Cpath%0D         inkscape%3Aconnector-curvature%3D%220%22%0D         d%3D%22m 498.966%2C339.946 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 v 49.804 c 0%2C28.747 -23.388%2C52.135 -52.135%2C52.135 H 78.203 c -28.747%2C0 -52.135%2C-23.388 -52.135%2C-52.135 V 352.98 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 C 5.835%2C339.946 0%2C345.782 0%2C352.98 v 49.804 c 0%2C43.121 35.082%2C78.203 78.203%2C78.203 h 355.594 c 43.121%2C0 78.203%2C-35.082 78.203%2C-78.203 V 352.98 c 0%2C-7.198 -5.835%2C-13.034 -13.034%2C-13.034 z%22%0D         id%3D%22path2%22%0D         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D    %3C%2Fg%3E%0D  %3C%2Fg%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g12-0%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D    %3Cg%0D       id%3D%22g10-8%22%0D       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D      %3Cpath%0D         inkscape%3Aconnector-curvature%3D%220%22%0D         d%3D%22M 419.833%2C391.3 H 92.167 c -7.197%2C0 -13.034%2C5.837 -13.034%2C13.034 0%2C7.197 5.835%2C13.034 13.034%2C13.034 h 327.665 c 7.199%2C0 13.034%2C-5.835 13.034%2C-13.034 0%2C-7.197 -5.835%2C-13.034 -13.033%2C-13.034 z%22%0D         id%3D%22path8-3%22%0D         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D    %3C%2Fg%3E%0D  %3C%2Fg%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g18-4%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D    %3Cg%0D       id%3D%22g16-7%22%0D       style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22%3E%0D      %3Cpath%0D         inkscape%3Aconnector-curvature%3D%220%22%0D         d%3D%22m 387.919%2C207.93 c -4.795%2C-5.367 -13.034%2C-5.834 -18.404%2C-1.038 L 269.033%2C296.657 V 44.048 c 0%2C-7.197 -5.835%2C-13.034 -13.034%2C-13.034 -7.197%2C0 -13.034%2C5.835 -13.034%2C13.034 V 296.657 L 142.483%2C206.893 c -5.367%2C-4.796 -13.607%2C-4.328 -18.404%2C1.038 -4.794%2C5.369 -4.331%2C13.609 1.037%2C18.404 l 109.174%2C97.527 c 6.187%2C5.529 13.946%2C8.292 21.708%2C8.292 7.759%2C0 15.519%2C-2.763 21.708%2C-8.289 l 109.174%2C-97.53 c 5.37%2C-4.798 5.834%2C-13.038 1.039%2C-18.405 z%22%0D         id%3D%22path14-9%22%0D         style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D    %3C%2Fg%3E%0D  %3C%2Fg%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g20%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g22-9%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g24-3%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g26%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g28-4%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g30-2%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g32%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g34-2%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g36-1%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g38%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g40-6%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g42-4%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g44%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g46-7%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D  %3Cg%0D     transform%3D%22matrix(0.05555739%2C0%2C0%2C0.05555739%2C10.739964%2C11.357401)%22%0D     id%3D%22g48-3%22%0D     style%3D%22fill%3A%23484f60%3Bfill-opacity%3A1%22 %2F%3E%0D%3C%2Fsvg%3E%0D\") no-repeat left 6px center / 36px auto!important}::ng-deep co-file-upload co-tile .tile-extra-bottom .main{padding:0!important}\n"]
             },] }
 ];
 ProductDocumentsComponent.ctorParameters = () => [
@@ -2736,20 +2738,20 @@ class ProductSymbolsComponent {
 ProductSymbolsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-product-symbols',
-                template: `
-    <div *ngIf="symbols && symbols.length > 0">
-      <app-header [label]="'SYMBOLS' | localize" [amount]="symbols?.length"></app-header>
-      <co-scroll-container>
-        <co-tile small noImagePlaceholder *ngFor="let symbol of symbolStrings">
-          <ng-container tile-over-image>
-            <div class="symbol" [textContent]="symbol"></div>
-          </ng-container>
-          <ng-container tile-extra-bottom-content>
-            <div class="symbol-name" [textContent]="'Wat moet hier?'"></div>
-          </ng-container>
-        </co-tile>
-      </co-scroll-container>
-    </div>
+                template: `
+    <div *ngIf="symbols && symbols.length > 0">
+      <app-header [label]="'SYMBOLS' | localize" [amount]="symbols?.length"></app-header>
+      <co-scroll-container>
+        <co-tile small noImagePlaceholder *ngFor="let symbol of symbolStrings">
+          <ng-container tile-over-image>
+            <div class="symbol" [textContent]="symbol"></div>
+          </ng-container>
+          <ng-container tile-extra-bottom-content>
+            <div class="symbol-name" [textContent]="'Wat moet hier?'"></div>
+          </ng-container>
+        </co-tile>
+      </co-scroll-container>
+    </div>
   `,
                 styles: [":host{display:block}:host.floor .symbol{font-family:iOneFloorsymbols}:host.ginetex .symbol{font-family:iOneGinetexsymbols}.symbol{font-size:100px}\n"]
             },] }