@colijnit/sharedcomponents 262.1.2 → 262.1.3

package/fesm2022/colijnit-sharedcomponents.mjs

@@ -23527,7 +23527,16 @@ class PreferredPlanningComponent {
     disclaimerHeader = "";
     disclaimerDescription = "";
     loadMoreButtonText = "";
-    eventsPerDay = [];
+    showDisclaimer = true;
+    showConfirmButton = true;
+    verticalLayout = true;
+    set eventsPerDay(value) {
+        this._eventsPerDay = value;
+        this.checkForMoreLoadable();
+    }
+    get eventsPerDay() {
+        return this._eventsPerDay;
+    }
     selectedDate;
     buttonClick = new EventEmitter();
     selected = new EventEmitter();
@@ -23538,6 +23547,7 @@ class PreferredPlanningComponent {
     selectedOption;
     moreLoadable = true;
     checkDisabled = false;
+    _eventsPerDay = [];
     constructor(locale, iconCacheService, _changeDetector) {
         this.locale = locale;
         this.iconCacheService = iconCacheService;
@@ -23613,6 +23623,9 @@ class PreferredPlanningComponent {
         //
         // this.events.push(testData);
         // this.events.push(testDataTwo);
+        this.checkForMoreLoadable();
+    }
+    checkForMoreLoadable() {
         if (this.eventsPerDay) {
             this.events = this.eventsPerDay;
             if (this.eventsPerDay.length <= this.limit) {
@@ -23653,52 +23666,58 @@ class PreferredPlanningComponent {
         this._changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PreferredPlanningComponent, deps: [{ token: LOCALE_ID }, { token: IconCacheService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PreferredPlanningComponent, isStandalone: false, selector: "co-preferred-planning", inputs: { firstAvailableDate: "firstAvailableDate", buttonLabel: "buttonLabel", headerText: "headerText", headerDescription: "headerDescription", disclaimerHeader: "disclaimerHeader", disclaimerDescription: "disclaimerDescription", loadMoreButtonText: "loadMoreButtonText", eventsPerDay: "eventsPerDay", selectedDate: "selectedDate" }, outputs: { buttonClick: "buttonClick", selected: "selected" }, host: { properties: { "class.co-preferred-planning": "this.showClass" } }, viewQueries: [{ propertyName: "dayStart", first: true, predicate: ["dayStart"], descendants: true, static: true }], ngImport: i0, template: `
-    <div class="co-preferred-planning">
-      <div class="content-wrapper">
-        <p [textContent]="headerDescription"></p>
-        <div class="planning-container">
-          @if (events) {
-            <div class="planning-options">
-              @for (event of events | slice:0:limit; track event; let i = $index) {
-                <div class="eventOption" id="event-{{i}}">
-                  <p [textContent]="event.date | date:'EEEE dd MMMM':'nl'"></p>
-                  @for (option of event.events; track option) {
-                    <div class="planning-option">
-                      <co-input-checkbox
-                        [disabled]="checkDisabled"
-                        [model]="option.checked"
-                        [label]="option.description"
-                        (modelChange)="handleOptionSelect($event, option, event.date, i)"
-                      ></co-input-checkbox>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-          <div class="planning-disclaimer">
-            <h2 [textContent]="disclaimerHeader"></h2>
-            <div class="planning-disclaimer-contents">
-              <co-icon class="disclaimer-icon" [iconData]="iconCacheService.getIcon(icons.CheckRound)"></co-icon>
-              <p [textContent]="disclaimerDescription"></p>
-            </div>
-          </div>
-        </div>
-        <div (click)="loadMore()" class="load-more-container"
-          [ngClass]="!moreLoadable ? 'load-more-container-disabled':''">
-          <p>
-            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
-            <span [textContent]="loadMoreButtonText"></span>
-          </p>
-        </div>
-      </div>
-    </div>
-    
-    <co-button class="submit-button"
-      [label]="buttonLabel"
-      (click)="buttonClick.emit($event)">
-    </co-button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PreferredPlanningComponent, isStandalone: false, selector: "co-preferred-planning", inputs: { firstAvailableDate: "firstAvailableDate", buttonLabel: "buttonLabel", headerText: "headerText", headerDescription: "headerDescription", disclaimerHeader: "disclaimerHeader", disclaimerDescription: "disclaimerDescription", loadMoreButtonText: "loadMoreButtonText", showDisclaimer: "showDisclaimer", showConfirmButton: "showConfirmButton", verticalLayout: "verticalLayout", eventsPerDay: "eventsPerDay", selectedDate: "selectedDate" }, outputs: { buttonClick: "buttonClick", selected: "selected" }, host: { properties: { "class.co-preferred-planning": "this.showClass" } }, viewQueries: [{ propertyName: "dayStart", first: true, predicate: ["dayStart"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="co-preferred-planning">
+      <div class="content-wrapper">
+        <p [textContent]="headerDescription"></p>
+        <div class="planning-container">
+          @if (events) {
+            <div class="planning-options" [class.horizontal-layout]="!verticalLayout">
+              @for (event of events | slice:0:limit; track event; let i = $index) {
+                <div class="eventOption" id="event-{{i}}">
+                  <p [textContent]="event.date | date:'EEEE dd MMMM':'nl'"></p>
+                  @for (option of event.events; track option) {
+                    <div class="planning-option">
+                      <co-input-checkbox
+                        [disabled]="checkDisabled"
+                        [model]="option.checked"
+                        [label]="option.description"
+                        (modelChange)="handleOptionSelect($event, option, event.date, i)"
+                      ></co-input-checkbox>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @if (showDisclaimer) {
+            <div class="planning-disclaimer">
+              <h2 [textContent]="disclaimerHeader"></h2>
+              <div class="planning-disclaimer-contents">
+                <co-icon class="disclaimer-icon" [iconData]="iconCacheService.getIcon(icons.CheckRound)"></co-icon>
+
+                <p [textContent]="disclaimerDescription"></p>
+              </div>
+            </div>
+          }
+        </div>
+        <div (click)="loadMore()" class="load-more-container"
+          [ngClass]="!moreLoadable ? 'load-more-container-disabled':''">
+          <p>
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
+            <span [textContent]="loadMoreButtonText"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    @if (showConfirmButton) {
+      <co-button class="submit-button"
+        [label]="buttonLabel"
+        (click)="buttonClick.emit($event)">
+      </co-button>
+    }
     `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i3.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: i3.InputCheckboxComponent, selector: "co-input-checkbox", inputs: ["cssClass", "clickableLabel"], outputs: ["modelChange"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], animations: [
             trigger("showHideWindow", [
                 state("void", style({ transform: "scaleY(0)" })),
@@ -23713,52 +23732,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             type: Component,
             args: [{
                     selector: "co-preferred-planning",
-                    template: `
-    <div class="co-preferred-planning">
-      <div class="content-wrapper">
-        <p [textContent]="headerDescription"></p>
-        <div class="planning-container">
-          @if (events) {
-            <div class="planning-options">
-              @for (event of events | slice:0:limit; track event; let i = $index) {
-                <div class="eventOption" id="event-{{i}}">
-                  <p [textContent]="event.date | date:'EEEE dd MMMM':'nl'"></p>
-                  @for (option of event.events; track option) {
-                    <div class="planning-option">
-                      <co-input-checkbox
-                        [disabled]="checkDisabled"
-                        [model]="option.checked"
-                        [label]="option.description"
-                        (modelChange)="handleOptionSelect($event, option, event.date, i)"
-                      ></co-input-checkbox>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          }
-          <div class="planning-disclaimer">
-            <h2 [textContent]="disclaimerHeader"></h2>
-            <div class="planning-disclaimer-contents">
-              <co-icon class="disclaimer-icon" [iconData]="iconCacheService.getIcon(icons.CheckRound)"></co-icon>
-              <p [textContent]="disclaimerDescription"></p>
-            </div>
-          </div>
-        </div>
-        <div (click)="loadMore()" class="load-more-container"
-          [ngClass]="!moreLoadable ? 'load-more-container-disabled':''">
-          <p>
-            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
-            <span [textContent]="loadMoreButtonText"></span>
-          </p>
-        </div>
-      </div>
-    </div>
-    
-    <co-button class="submit-button"
-      [label]="buttonLabel"
-      (click)="buttonClick.emit($event)">
-    </co-button>
+                    template: `
+    <div class="co-preferred-planning">
+      <div class="content-wrapper">
+        <p [textContent]="headerDescription"></p>
+        <div class="planning-container">
+          @if (events) {
+            <div class="planning-options" [class.horizontal-layout]="!verticalLayout">
+              @for (event of events | slice:0:limit; track event; let i = $index) {
+                <div class="eventOption" id="event-{{i}}">
+                  <p [textContent]="event.date | date:'EEEE dd MMMM':'nl'"></p>
+                  @for (option of event.events; track option) {
+                    <div class="planning-option">
+                      <co-input-checkbox
+                        [disabled]="checkDisabled"
+                        [model]="option.checked"
+                        [label]="option.description"
+                        (modelChange)="handleOptionSelect($event, option, event.date, i)"
+                      ></co-input-checkbox>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+
+          @if (showDisclaimer) {
+            <div class="planning-disclaimer">
+              <h2 [textContent]="disclaimerHeader"></h2>
+              <div class="planning-disclaimer-contents">
+                <co-icon class="disclaimer-icon" [iconData]="iconCacheService.getIcon(icons.CheckRound)"></co-icon>
+
+                <p [textContent]="disclaimerDescription"></p>
+              </div>
+            </div>
+          }
+        </div>
+        <div (click)="loadMore()" class="load-more-container"
+          [ngClass]="!moreLoadable ? 'load-more-container-disabled':''">
+          <p>
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
+            <span [textContent]="loadMoreButtonText"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    @if (showConfirmButton) {
+      <co-button class="submit-button"
+        [label]="buttonLabel"
+        (click)="buttonClick.emit($event)">
+      </co-button>
+    }
     `,
                     animations: [
                         trigger("showHideWindow", [
@@ -23792,6 +23817,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], loadMoreButtonText: [{
                 type: Input
+            }], showDisclaimer: [{
+                type: Input
+            }], showConfirmButton: [{
+                type: Input
+            }], verticalLayout: [{
+                type: Input
             }], eventsPerDay: [{
                 type: Input
             }], selectedDate: [{