ng-configcat-publicapi-ui 5.3.9 → 5.3.10

package/fesm2022/ng-configcat-publicapi-ui.mjs

@@ -1,4 +1,5 @@
 import { OVERLAY_DEFAULT_CONFIG, Overlay } from '@angular/cdk/overlay';
+import { DatePipe, NgClass, NgTemplateOutlet, SlicePipe, KeyValuePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Injectable, Component, viewChild, DestroyRef, DOCUMENT, InjectionToken, HostListener, Directive, input, ElementRef, model, effect, output, forwardRef, ChangeDetectionStrategy, signal, linkedSignal, computed, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
@@ -17,7 +18,6 @@ import { FormArray, Validators, FormGroup, FormControl, FormBuilder, NonNullable
 import { NativeDateAdapter, MatOption, MatRipple, DateAdapter, MatOptgroup } from '@angular/material/core';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { NgClass, NgTemplateOutlet, SlicePipe, KeyValuePipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import Papa from 'papaparse';
 import { MatSnackBarRef, MAT_SNACK_BAR_DATA, MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel, MatSnackBar } from '@angular/material/snack-bar';
@@ -394,72 +394,20 @@ var UserComparatorType;
     UserComparatorType[UserComparatorType["DateTime"] = 5] = "DateTime";
 })(UserComparatorType || (UserComparatorType = {}));
 
-class DateHelper {
-    static addDays(date, value) {
-        // https://stackoverflow.com/a/3674550/8656352
-        date.setDate(date.getDate() + value);
-    }
-    static { this.daysBetweenDates = function (from, to) {
-        if (!from || !to) {
-            return 0;
-        }
-        return (new Date(to).getTime() - new Date(from).getTime()) / (1000 * 60 * 60 * 24);
-    }; }
-    static formatDate(date, formatString) {
-        if (!date) {
-            return "";
-        }
-        const dateObj = new Date(date);
-        return Object.entries({
-            YYYY: dateObj.getFullYear(),
-            YY: dateObj.getFullYear().toString().substring(2),
-            yyyy: dateObj.getFullYear(),
-            yy: dateObj.getFullYear().toString().substring(2),
-            MMMM: dateObj.toLocaleString("default", { month: "long" }),
-            MMM: dateObj.toLocaleString("default", { month: "short" }),
-            MM: (dateObj.getMonth() + 1).toString().padStart(2, "0"),
-            M: dateObj.getMonth() + 1,
-            DDDD: dateObj.toLocaleDateString("default", { weekday: "long" }),
-            DDD: dateObj.toLocaleDateString("default", { weekday: "short" }),
-            DD: dateObj.getDate().toString().padStart(2, "0"),
-            D: dateObj.getDate(),
-            dddd: dateObj.toLocaleDateString("default", { weekday: "long" }),
-            ddd: dateObj.toLocaleDateString("default", { weekday: "short" }),
-            dd: dateObj.getDate().toString().padStart(2, "0"),
-            d: dateObj.getDate(),
-            HH: dateObj.getHours().toString().padStart(2, "0"), // military
-            H: dateObj.getHours().toString(), // military
-            hh: (dateObj.getHours() % 12).toString().padStart(2, "0"),
-            h: (dateObj.getHours() % 12).toString(),
-            mm: dateObj.getMinutes().toString().padStart(2, "0"),
-            m: dateObj.getMinutes(),
-            SS: dateObj.getSeconds().toString().padStart(2, "0"),
-            S: dateObj.getSeconds(),
-            ss: dateObj.getSeconds().toString().padStart(2, "0"),
-            s: dateObj.getSeconds(),
-            TTT: dateObj.getMilliseconds().toString().padStart(3, "0"),
-            ttt: dateObj.getMilliseconds().toString().padStart(3, "0"),
-            AMPM: dateObj.getHours() < 13 ? "AM" : "PM",
-            ampm: dateObj.getHours() < 13 ? "am" : "pm",
-        }).reduce((acc, entry) => {
-            return acc.replace(entry[0], entry[1].toString());
-        }, formatString);
-    }
-    static offsetDate(date, offsetMins) {
-        return new Date(date.getTime() + offsetMins * 60000);
-    }
-}
-
 class AppDateAdapter extends NativeDateAdapter {
+    constructor() {
+        super(...arguments);
+        this.datepipe = inject(DatePipe);
+    }
     format(date, displayFormat) {
         if (!displayFormat?.["hour"]) {
-            return DateHelper.formatDate(date, "yyyy. MM. dd");
+            return this.datepipe.transform(date, "yyyy. MM. dd") ?? "";
         }
         else if (!displayFormat?.["year"]) {
-            return DateHelper.formatDate(date, "HH:mm");
+            return this.datepipe.transform(date, "HH:mm") ?? "";
         }
         else {
-            return DateHelper.formatDate(date, "yyyy. MM. dd HH:mm");
+            return this.datepipe.transform(date, "yyyy. MM. dd HH:mm") ?? "";
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1571,6 +1519,7 @@ function provideConfigCatPublicApiUi() {
             provide: MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS,
             useValue: { hideSingleSelectionIndicator: true, hideMultipleSelectionIndicator: true },
         },
+        { provide: DatePipe },
         AppDateAdapter,
         FormGenerator,
         ComparisonValueListHelper,
@@ -4181,6 +4130,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     ], template: "<div class=\"targeting-rule-line\">\n  <div class=\"explanation-wrapper\">\n    <app-condition-chip [targetingRuleIndex]=\"targetingRuleIndex()\" [conditionIndex]=\"conditionIndex()\" />\n\n    <div class=\"explanation\">\n      <a\n        href=\"https://configcat.com/docs/targeting/targeting-rule/segment-condition/\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        class=\"user-link\">\n        user\n      </a>\n    </div>\n  </div>\n\n  <div class=\"targeting-rule-component pad-right\">\n    <mat-form-field class=\"small-form-field select\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n      <mat-select matTooltip=\"Comparator\" [formControl]=\"formGroup().controls.comparator\">\n        @for (comparator of segmentComparators; track $index) {\n          <mat-option [value]=\"comparator.value\">\n            {{ comparator.label }}\n          </mat-option>\n        }\n      </mat-select>\n      @if (formGroup().controls.comparator.invalid) {\n        <mat-error>\n          {{ FormHelper.getErrorMessage(formGroup().controls.comparator) }}\n        </mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <div class=\"wrapper-group\">\n    <div class=\"targeting-rule-component suffixed\">\n      <mat-form-field\n        class=\"small-form-field\"\n        appearance=\"outline\"\n        subscriptSizing=\"dynamic\"\n        [class.select-suffixed]=\"canManageSegments()\">\n        <mat-select\n          matTooltip=\"Segment\"\n          placeholder=\"Select segment ...\"\n          [formControl]=\"formGroup().controls.segmentId\"\n          (opened)=\"clearFilter()\"\n          (closed)=\"clearFilter()\">\n          <div class=\"menu-filter small-density-form-field\">\n            <mat-form-field\n              subscriptSizing=\"dynamic\"\n              appearance=\"outline\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown)=\"$event.stopPropagation()\">\n              <input matInput placeholder=\"Filter segments\" [(ngModel)]=\"filterText\" />\n              <span matSuffix [hidden]=\"!filterText()\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  class=\"clear-filter\"\n                  aria-label=\"Clear\"\n                  matTooltip=\"Clear search filters\"\n                  (click)=\"clearFilter()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </span>\n            </mat-form-field>\n          </div>\n          <mat-divider />\n\n          @for (segment of filteredSegments(); track $index) {\n            <mat-option\n              [value]=\"segment.segmentId\"\n              [matTooltip]=\"segment.description\"\n              [ngClass]=\"{ hidden: segment.hidden }\">\n              {{ segment.name }}\n            </mat-option>\n          } @empty {\n            <mat-option disabled>No segments available.</mat-option>\n          }\n          @if (segments().length && !hasFilteredSegments()) {\n            <mat-option disabled>No segments found.</mat-option>\n          }\n        </mat-select>\n        @if (canManageSegments()) {\n          <button\n            matSuffix\n            class=\"input-suffix-button\"\n            type=\"button\"\n            mat-icon-button\n            matTooltip=\"Create and manage segments\"\n            [matMenuTriggerFor]=\"segmentMenu\"\n            [track]=\"['segment menu click', 'feature flags and settings']\"\n            (click)=\"$event.stopPropagation()\">\n            <mat-icon>more_vert</mat-icon>\n          </button>\n        }\n        @if (formGroup().controls.segmentId.invalid) {\n          <mat-error>\n            {{ FormHelper.getErrorMessage(formGroup().controls.segmentId) }}\n          </mat-error>\n        }\n      </mat-form-field>\n    </div>\n  </div>\n</div>\n\n<mat-menu #segmentMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    <a\n      mat-menu-item\n      [track]=\"['create segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"createSegmentRequested.emit()\">\n      <mat-icon>add</mat-icon>\n      <span>Create new segment</span>\n    </a>\n    <a\n      mat-menu-item\n      [track]=\"['manage segment click', 'Feature flags & settings V2 page']\"\n      (click)=\"manageSegmentsRequested.emit()\">\n      <mat-icon class=\"icon-transform-rotate\">pie_chart</mat-icon>\n      <span>Manage segments</span>\n    </a>\n  </ng-template>\n</mat-menu>\n", styles: [".targeting-rule-line{display:flex;flex-wrap:wrap;margin:2px 0}.targeting-rule-line .wrapper-group{display:flex;flex-wrap:wrap}.targeting-rule-line .wrapper-group.grow{flex-grow:1}.targeting-rule-component{margin:2px 0}.targeting-rule-component[hidden]{display:none}.targeting-rule-component{width:212px}.targeting-rule-component.small{width:102px}.targeting-rule-component.grow{flex-grow:1}.targeting-rule-component.pad-right{margin-right:8px}.targeting-rule-component mat-form-field{width:100%}.delete-button{display:flex;color:var(--flag-delete-btn);margin-top:4px;margin-left:4px}.delete-button button{display:flex;align-items:center;justify-content:center}.delete-button mat-icon{font-size:18px;height:18px;width:18px}.explanation-wrapper{display:flex;margin-top:2px;margin-bottom:3px}.explanation-wrapper .explanation{min-width:44px;margin-top:7px;margin-right:8px}@media(max-width:500px){.targeting-rule-component{max-width:calc(100% - 4px);width:160px}.targeting-rule-component.small{width:78px}.targeting-rule-component.pad-right{margin-right:4px}}\n", ".filter{display:flex;margin:0 8px 8px;justify-content:space-around}.filter mat-form-field{width:100%}.hidden{display:none}\n"] }]
         }], propDecorators: { targetingRuleIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetingRuleIndex", required: true }] }], conditionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionIndex", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], canManageSegments: [{ type: i0.Input, args: [{ isSignal: true, alias: "canManageSegments", required: true }] }], createSegmentRequested: [{ type: i0.Output, args: ["createSegmentRequested"] }], manageSegmentsRequested: [{ type: i0.Output, args: ["manageSegmentsRequested"] }] } });
 
+class DateHelper {
+    static addDays(date, value) {
+        // https://stackoverflow.com/a/3674550/8656352
+        date.setDate(date.getDate() + value);
+    }
+    static { this.daysBetweenDates = function (from, to) {
+        if (!from || !to) {
+            return 0;
+        }
+        return (new Date(to).getTime() - new Date(from).getTime()) / (1000 * 60 * 60 * 24);
+    }; }
+    static offsetDate(date, offsetMins) {
+        return new Date(date.getTime() + offsetMins * 60000);
+    }
+}
+
 class DateTimePickerComponent {
     constructor() {
         this.FormHelper = FormHelper;