@elderbyte/ngx-starter 17.3.2 → 17.3.4

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -11355,15 +11355,6 @@ class CardStack {
 
 class ElderPaddingDirective {
     constructor() {
-        /*
-        @HostBinding('style.padding.px')
-        hostPadding = '10';
-      
-        @Input('elderPadding')
-        public set padding(padding: string) {
-          this.hostPadding = padding;
-        }
-        */
         this.padding = '8px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderPaddingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -11385,37 +11376,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Title of a card, needed as it's used as a selector in the API.
  */
 class ElderCardTitleDirective {
+    constructor() {
+        this.classTitle = true;
+        this.classCardTitle = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardTitleDirective, selector: "elder-card-title, [elder-card-title], [elderCardTitle]", host: { classAttribute: "mat-subtitle-1 elder-card-title" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardTitleDirective, selector: "elder-card-title, [elder-card-title], [elderCardTitle]", host: { properties: { "class.mat-subtitle-1": "this.classTitle", "class.elder-card-title": "this.classCardTitle" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `elder-card-title, [elder-card-title], [elderCardTitle]`,
-                    host: {
-                        'class': 'mat-subtitle-1 elder-card-title'
-                    }
+                    selector: `elder-card-title, [elder-card-title], [elderCardTitle]`
                 }]
-        }] });
+        }], propDecorators: { classTitle: [{
+                type: HostBinding,
+                args: ['class.mat-subtitle-1']
+            }], classCardTitle: [{
+                type: HostBinding,
+                args: ['class.elder-card-title']
+            }] } });
 /**
  * Content of a card, needed as it's used as a selector in the API.
  */
 class ElderCardContentDirective {
     constructor() {
+        this.classCardContent = true;
         this.padding = '4px 12px 4px 12px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardContentDirective, selector: "elder-card-content, [elder-card-content], [elderCardContent]", inputs: { padding: "padding" }, host: { properties: { "style.padding": "this.padding" }, classAttribute: "elder-card-content" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardContentDirective, selector: "elder-card-content, [elder-card-content], [elderCardContent]", inputs: { padding: "padding" }, host: { properties: { "class.elder-card-content": "this.classCardContent", "style.padding": "this.padding" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `elder-card-content, [elder-card-content], [elderCardContent]`,
-                    host: {
-                        'class': 'elder-card-content'
-                    }
+                    selector: `elder-card-content, [elder-card-content], [elderCardContent]`
                 }]
-        }], propDecorators: { padding: [{
+        }], propDecorators: { classCardContent: [{
+                type: HostBinding,
+                args: ['class.elder-card-content']
+            }], padding: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -11425,41 +11424,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Actions in the right top corner, needed as it's used as a selector in the API.
  */
 class ElderCardHeaderActionsDirective {
+    constructor() {
+        this.classHeaderActions = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardHeaderActionsDirective, selector: "elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]", host: { classAttribute: "elder-card-header-actions" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardHeaderActionsDirective, selector: "elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]", host: { properties: { "class.elder-card-header-actions": "this.classHeaderActions" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardHeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]`,
-                    host: {
-                        'class': 'elder-card-header-actions'
-                    }
+                    selector: `elder-card-header-actions, [elder-card-header-actions], [elderCardHeaderActions]`
                 }]
-        }] });
+        }], propDecorators: { classHeaderActions: [{
+                type: HostBinding,
+                args: ['class.elder-card-header-actions']
+            }] } });
 /**
  * Subsection title
  */
 class ElderCardSubtitleDirective {
+    constructor() {
+        this.classSubtitle = true;
+        this.classCardSubtitle = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]", host: { classAttribute: "mat-subtitle-1 elder-card-subtitle" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]", host: { properties: { "class.mat-subtitle-1": "this.classSubtitle", "class.elder-card-subtitle": "this.classCardSubtitle" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]`,
-                    host: {
-                        'class': 'mat-subtitle-1 elder-card-subtitle'
-                    }
+                    selector: `elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]`
                 }]
-        }] });
+        }], propDecorators: { classSubtitle: [{
+                type: HostBinding,
+                args: ['class.mat-subtitle-1']
+            }], classCardSubtitle: [{
+                type: HostBinding,
+                args: ['class.elder-card-subtitle']
+            }] } });
 class ElderCardComponent {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() { }
+    constructor() {
+        this.classCardHost = true;
+    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -11468,6 +11479,9 @@ class ElderCardComponent {
     get appearance() {
         return this._appearance;
     }
+    set appearance(appearance) {
+        this._appearance = appearance;
+    }
     /**
      * @deprecated Switch to appearance="raised"
      */
@@ -11481,12 +11495,15 @@ class ElderCardComponent {
         this._appearance = coerceBooleanProperty(value) ? 'outlined' : 'raised';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardComponent, selector: "elder-card", inputs: { appearance: "appearance", float: "float", flat: "flat" }, host: { classAttribute: "elder-card-host" }, ngImport: i0, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ElderCardComponent, selector: "elder-card", inputs: { appearance: "appearance", float: "float", flat: "flat" }, host: { properties: { "class.elder-card-host": "this.classCardHost" } }, ngImport: i0, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ElderCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-card', encapsulation: ViewEncapsulation.None, host: { 'class': 'elder-card-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { appearance: [{
+            args: [{ selector: 'elder-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card\n  class=\"full mat-typography\"\n  [appearance]=\"appearance\"\n>\n  <!-- If one does not want to use predefined card-sections. -->\n  <ng-content></ng-content>\n\n  <!-- Card Header -->\n  <ng-content select=\"elder-card-header\"></ng-content>\n\n  <!-- Card Content -->\n  <ng-content select=\"elder-card-content\"></ng-content>\n</mat-card>\n", styles: [".elder-card-host{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { classCardHost: [{
+                type: HostBinding,
+                args: ['class.elder-card-host']
+            }], appearance: [{
                 type: Input
             }], float: [{
                 type: Input