@porscheinformatik/clr-addons 15.7.0 → 15.8.0

package/fesm2020/clr-addons.mjs

@@ -2954,12 +2954,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             }] } });
 
 /*
- * Copyright (c) 2018-2020 Porsche Informatik. All Rights Reserved.
+ * Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrPagedSearchResultList {
     constructor() {
+        /**
+         * Page size label.
+         */
+        this.pageSizeLabel = 'Results per page (Translate me)';
         /**
          * The position of the pager
          */
@@ -2968,16 +2972,26 @@ class ClrPagedSearchResultList {
          * Triggered whenever a page change occurs.
          */
         this.pageChange = new EventEmitter();
+        /**
+         * Triggered whenever a page size change occurs.
+         */
+        this.pageSizeChange = new EventEmitter();
     }
 }
 ClrPagedSearchResultList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrPagedSearchResultList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClrPagedSearchResultList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrPagedSearchResultList, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-top\"\n    *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-bottom\"\n    *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }] });
+ClrPagedSearchResultList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: ClrPagedSearchResultList, selector: "clr-paged-search-result-list", inputs: { pageSize: ["clrPageSize", "pageSize"], pageSizeOptions: ["clrPageSizeOptions", "pageSizeOptions"], pageSizeLabel: ["clrPageSizeLabel", "pageSizeLabel"], currentPage: ["clrPage", "currentPage"], totalItems: ["clrTotalItems", "totalItems"], items: ["clrItems", "items"], clrPagerPosition: "clrPagerPosition" }, outputs: { pageChange: "clrPageChange", pageSizeChange: "clrPageSizeChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\">\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"> </ng-container>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\">\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"> </ng-container>\n</div>\n<ng-template #pager let-position>\n  <div class=\"clr-row\">\n    <div [class.pager-top]=\"position === 'top'\" [class.pager-bottom]=\"position === 'bottom'\">\n      <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n      <clr-pager\n        [clrPage]=\"currentPage\"\n        [clrPageSize]=\"pageSize\"\n        [clrTotalItems]=\"totalItems\"\n        (clrPageChange)=\"pageChange.emit($event)\"\n      ></clr-pager>\n    </div>\n  </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n  <div *ngIf=\"pageSizeOptions?.length > 1\">\n    <clr-dropdown>\n      <button type=\"button\" class=\"btn btn-link options-text-button btn-no-capitalized\" clrDropdownTrigger>\n        {{pageSizeLabel}}: {{pageSize}}\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <button type=\"button\" class=\"btn btn-link options-icon-button\" clrDropdownTrigger>\n        <cds-icon shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu class=\"spinner-in-front\" clrPosition=\"top-right\">\n        <ng-container *ngFor=\"let sizeOption of pageSizeOptions\">\n          <button type=\"button\" clrDropdownItem (click)=\"pageSizeChange.emit(sizeOption)\">{{sizeOption}}</button>\n        </ng-container>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: i1$1.ClrDropdown, selector: "clr-dropdown", inputs: ["clrCloseMenuOnItemClick"] }, { kind: "component", type: i1$1.ClrDropdownMenu, selector: "clr-dropdown-menu", inputs: ["clrPosition"] }, { kind: "directive", type: i1$1.ClrDropdownTrigger, selector: "[clrDropdownTrigger],[clrDropdownToggle]" }, { kind: "directive", type: i1$1.ClrDropdownItem, selector: "[clrDropdownItem]", inputs: ["clrDisabled", "id"] }, { kind: "component", type: ClrPager, selector: "clr-pager", inputs: ["clrPageSize", "clrTotalItems", "clrLast", "clrPage"], outputs: ["clrPageChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: ClrPagedSearchResultList, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-paged-search-result-list', template: "<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-top\"\n    *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div class=\"clr-row\">\n  <clr-pager\n    class=\"pager-bottom\"\n    *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\"\n    [clrPage]=\"currentPage\"\n    [clrPageSize]=\"pageSize\"\n    [clrTotalItems]=\"totalItems\"\n    (clrPageChange)=\"pageChange.emit($event)\"\n  ></clr-pager>\n</div>\n" }]
+            args: [{ selector: 'clr-paged-search-result-list', template: "<div *ngIf=\"clrPagerPosition === 'top' || clrPagerPosition === 'both'\">\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'top' }\"> </ng-container>\n</div>\n<ng-container *ngFor=\"let item of items\" [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{item: item}\">\n  <div *ngIf=\"!itemTemplate\">Item template input is undefined!</div>\n</ng-container>\n<div *ngIf=\"clrPagerPosition === 'bottom' || clrPagerPosition === 'both'\">\n  <ng-container [ngTemplateOutlet]=\"pager\" [ngTemplateOutletContext]=\"{ $implicit: 'bottom' }\"> </ng-container>\n</div>\n<ng-template #pager let-position>\n  <div class=\"clr-row\">\n    <div [class.pager-top]=\"position === 'top'\" [class.pager-bottom]=\"position === 'bottom'\">\n      <ng-container *ngTemplateOutlet=\"pageSizeDropdown\"></ng-container>\n      <clr-pager\n        [clrPage]=\"currentPage\"\n        [clrPageSize]=\"pageSize\"\n        [clrTotalItems]=\"totalItems\"\n        (clrPageChange)=\"pageChange.emit($event)\"\n      ></clr-pager>\n    </div>\n  </div>\n</ng-template>\n<ng-template #pageSizeDropdown>\n  <div *ngIf=\"pageSizeOptions?.length > 1\">\n    <clr-dropdown>\n      <button type=\"button\" class=\"btn btn-link options-text-button btn-no-capitalized\" clrDropdownTrigger>\n        {{pageSizeLabel}}: {{pageSize}}\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <button type=\"button\" class=\"btn btn-link options-icon-button\" clrDropdownTrigger>\n        <cds-icon shape=\"cog\"></cds-icon>\n        <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n      </button>\n      <clr-dropdown-menu class=\"spinner-in-front\" clrPosition=\"top-right\">\n        <ng-container *ngFor=\"let sizeOption of pageSizeOptions\">\n          <button type=\"button\" clrDropdownItem (click)=\"pageSizeChange.emit(sizeOption)\">{{sizeOption}}</button>\n        </ng-container>\n      </clr-dropdown-menu>\n    </clr-dropdown>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { pageSize: [{
                 type: Input,
                 args: ['clrPageSize']
+            }], pageSizeOptions: [{
+                type: Input,
+                args: ['clrPageSizeOptions']
+            }], pageSizeLabel: [{
+                type: Input,
+                args: ['clrPageSizeLabel']
             }], currentPage: [{
                 type: Input,
                 args: ['clrPage']
@@ -2996,6 +3010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             }], pageChange: [{
                 type: Output,
                 args: ['clrPageChange']
+            }], pageSizeChange: [{
+                type: Output,
+                args: ['clrPageSizeChange']
             }] } });
 
 /*
@@ -4660,30 +4677,20 @@ function clrIconSVG(content, viewBox = '0 0 24 24') {
  */
 // To support badges, alerts or the is-solid, the SVGs would need to be extended.
 const CarOffSite = clrIconSVG(`
-  <polygon
-        points="18 4.195 5 13.285 5 29.805 6.3 29.805 6.3 13.965 18 5.775 29.7 13.965 29.7 29.805 31 29.805 31 13.285 18 4.195"/>
-    <path
-        d="M27.4688,14.0205l-1.1744.794a.65.65,0,0,0,.3648,1.1884.6427.6427,0,0,0,.3637-.1123l1.1744-.7939a.65.65,0,1,0-.7285-1.0762Z"/>
-    <path d="M13.8433,23.23l-2.49,1.6826a.65.65,0,1,0,.7276,1.0781l2.49-1.6826a.65.65,0,0,0-.7275-1.0781Z"/>
-    <path
-        d="M19.7266,20.0371a.65.65,0,0,0-.9029-.1738l-.8811.5957-.8811-.5957A.65.65,0,1,0,16.333,20.94l.45.3038-.449.3036a.65.65,0,1,0,.7285,1.0761l.8806-.5953.8806.5953a.6433.6433,0,0,0,.3638.1124.65.65,0,0,0,.3648-1.1885l-.449-.3036.4494-.3038A.65.65,0,0,0,19.7266,20.0371Z"/>
-    <path
-        d="M23.8042,16.4971l-2.49,1.6836a.65.65,0,0,0,.3647,1.1884.643.643,0,0,0,.3638-.1123l2.49-1.6836a.65.65,0,1,0-.7285-1.0761Z"/>
-    <path
-        d="M8.8623,26.5967l-1.1743.7939a.65.65,0,0,0,.3647,1.1885.643.643,0,0,0,.3638-.1123l1.1743-.7939a.65.65,0,1,0-.7285-1.0762Z"/>
-    <path
-        d="M8.4165,14.0205a.65.65,0,1,0-.7285,1.0762l1.1743.7939a.643.643,0,0,0,.3638.1123.65.65,0,0,0,.3647-1.1884Z"/>
-    <path
-        d="M12.0811,16.4971a.65.65,0,1,0-.7286,1.0761l2.49,1.6836a.6429.6429,0,0,0,.3637.1123.65.65,0,0,0,.3648-1.1884Z"/>
-    <path d="M22.042,23.23a.65.65,0,0,0-.7275,1.0781l2.49,1.6826a.65.65,0,0,0,.7275-1.0781Z"/>
-    <path
-        d="M27.0229,26.5967a.65.65,0,1,0-.7285,1.0762l1.1744.7939a.6427.6427,0,0,0,.3637.1123.65.65,0,0,0,.3648-1.1885Z"/>`, '0 0 36 36');
+  <polygon points="24 8.39 24 24 22.7 24 22.7 9.07 12 1.58 1.3 9.07 1.3 24 0 24 0 8.39 12 0 24 8.39"/>
+    <path d="M20.7166,10.9785a.6429.6429,0,0,0,.3637-.1123l.6446-.4358,0,0L23.8,9.0283l-.7275-1.0762-1.542,1.042-.0047.002L20.3518,9.79a.65.65,0,0,0,.3648,1.1885Z"/>
+    <path d="M7.9006,18.2051,5.41,19.8877a.65.65,0,1,0,.7275,1.0781l2.49-1.6826a.65.65,0,0,0-.7276-1.0781Z"/>
+    <path d="M13.7839,15.0127a.65.65,0,0,0-.9028-.1738L12,15.4346l-.8811-.5957A.65.65,0,1,0,10.39,15.915l.4494.3039-.4489.3036a.65.65,0,1,0,.7285,1.0761L12,17.0033l.8806.5953a.643.643,0,0,0,.3638.1123.65.65,0,0,0,.3647-1.1884l-.4489-.3036.4494-.3039A.6493.6493,0,0,0,13.7839,15.0127Z"/>
+    <path d="M17.8616,11.4727l-2.49,1.6835A.65.65,0,1,0,16.1,14.2324l2.49-1.6836a.65.65,0,1,0-.7285-1.0761Z"/>
+    <path d="M3.65,22.65l-.59.4-.37.25-.22.14L1.65,24H.6l-.4-.59,2.13-1.44.59-.4a.6518.6518,0,0,1,.73,1.08Z"/>
+    <path d="M2.4739,8.9961,2.469,8.994.9277,7.9521.1992,9.0283l1.9517,1.3194.0005-.0009.7683.5194a.6429.6429,0,0,0,.3637.1123A.65.65,0,0,0,3.6482,9.79Z"/>
+    <path d="M6.1384,11.4727A.65.65,0,1,0,5.41,12.5488L7.9,14.2324a.6432.6432,0,0,0,.3638.1123.65.65,0,0,0,.3648-1.1885Z"/>
+    <path d="M16.0994,18.2051a.65.65,0,0,0-.7276,1.0781l2.49,1.6826a.65.65,0,0,0,.7275-1.0781Z"/>
+    <path d="M23.8,23.41l-.4.59H22.35l-1.37-.93-.63-.42a.6518.6518,0,0,1,.73-1.08l.63.43Z"/>`);
 const CarOnSite = clrIconSVG(`
-<path d="M18,22.605a.86.86,0,0,0-.8.8.8515.8515,0,0,0,1.7.1A.8963.8963,0,0,0,18,22.605Z"/>
- <path
-        d="M27.8,16.405a16.9577,16.9577,0,0,1-2.2.4l-1.1-2.6a2.9653,2.9653,0,0,0-2.2-1.4H13.7a2.5336,2.5336,0,0,0-2.1,1.5l-1.2,2.6a16.9577,16.9577,0,0,0-2.2-.4l-.2,1.3c.7.1,1.3.2,2,.3l-.6,1a6.0075,6.0075,0,0,0-.7,2.7v5.5a1.43,1.43,0,0,0,1.4,1.4h1.6a1.3671,1.3671,0,0,0,1.4-1.4v-.4h9.7v.4a1.43,1.43,0,0,0,1.4,1.4h1.7a1.3671,1.3671,0,0,0,1.4-1.4v-5.5a5.1892,5.1892,0,0,0-.7-2.7l-.5-1.1c.6-.1,1.3-.2,1.9-.3Zm-15-1.6a1.4454,1.4454,0,0,1,1-.7h8.4a1.4425,1.4425,0,0,1,1.1.7l.9,2.2a50.6175,50.6175,0,0,1-12.3,0Zm13.1,12.6v.1H24.2v-1.9H11.8v1.8H10.1v-5c1.2.2,2.5.3,3.8.4v-1.3c-1.3-.1-2.6-.2-3.8-.4a5.0234,5.0234,0,0,1,.5-1.3l.8-1.6a48.7229,48.7229,0,0,0,6.6.4,51.7006,51.7006,0,0,0,6.8-.4l.6207,1.4462A8.2376,8.2376,0,0,1,25.9,21.105c-1.2.2-2.4.3-3.7.4l.1,1.3c1.3-.1,2.5-.2,3.7-.4Z"/>
- <polygon
-        points="18 4.195 5 13.285 5 29.805 6.3 29.805 6.3 13.965 18 5.775 29.7 13.965 29.7 29.805 31 29.805 31 13.285 18 4.195"/>`, '0 0 36 36');
+    <path d="M12,16.8a.86.86,0,0,0-.8.8.8515.8515,0,0,0,1.7.1A.8963.8963,0,0,0,12,16.8Z"/>
+    <path d="M21.8,10.6a16.9577,16.9577,0,0,1-2.2.4L18.5,8.4A2.9653,2.9653,0,0,0,16.3,7H7.7A2.5336,2.5336,0,0,0,5.6,8.5L4.4,11.1a16.9577,16.9577,0,0,0-2.2-.4L2,12c.7.1,1.3.2,2,.3l-.6,1A6.0075,6.0075,0,0,0,2.7,16v5.5a1.43,1.43,0,0,0,1.4,1.4H5.7a1.3671,1.3671,0,0,0,1.4-1.4v-.4h9.7v.4a1.43,1.43,0,0,0,1.4,1.4h1.7a1.3671,1.3671,0,0,0,1.4-1.4V16a5.1892,5.1892,0,0,0-.7-2.7l-.5-1.1c.6-.1,1.3-.2,1.9-.3ZM6.8,9a1.4454,1.4454,0,0,1,1-.7h8.4a1.4425,1.4425,0,0,1,1.1.7l.9,2.2a50.6175,50.6175,0,0,1-12.3,0ZM19.9,21.6v.1H18.2V19.8H5.8v1.8H4.1v-5c1.2.2,2.5.3,3.8.4V15.7c-1.3-.1-2.6-.2-3.8-.4A5.0234,5.0234,0,0,1,4.6,14l.8-1.6a48.7229,48.7229,0,0,0,6.6.4,51.7006,51.7006,0,0,0,6.8-.4l.6207,1.4462A8.24,8.24,0,0,1,19.9,15.3c-1.2.2-2.4.3-3.7.4l.1,1.3c1.3-.1,2.5-.2,3.7-.4Z"/>
+    <polygon points="12 0 0 8.39 0 24 1.3 24 1.3 9.07 12 1.58 22.7 9.07 22.7 24 24 24 24 8.39 12 0"/>`);
 const CampaignOutdatedShape = clrIconSVG(` <path
   d="m 24.664062,20.947266 a 0.85000002,0.85000002 0 0 0 -0.857421,0.84375 l -0.03516,4.699218 a 0.85000002,0.85000002 0 0 0 0.84375,0.857422 0.85000002,0.85000002 0 0 0 0.857422,-0.84375 l 0.03516,-4.701172 a 0.85000002,0.85000002 0 0 0 -0.84375,-0.855468 z"
   id="path1534" />