@progalaxyelabs/ngx-stonescriptphp-client 1.19.0 → 1.20.0

package/fesm2022/progalaxyelabs-ngx-stonescriptphp-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injectable, Inject, Optional, EventEmitter, Output, Input, Component } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, Injectable, Inject, Optional, EventEmitter, Output, Input, Component, input, output, signal, computed } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -3393,6 +3393,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }] } });
 
+class MonthYearPickerComponent {
+    label = input('Select date', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    today = {
+        month: new Date().getMonth(),
+        year: new Date().getFullYear(),
+    };
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    tempMonth = signal(null, ...(ngDevMode ? [{ debugName: "tempMonth" }] : []));
+    tempYear = signal(null, ...(ngDevMode ? [{ debugName: "tempYear" }] : []));
+    yearStart = signal(this.today.year - 4, ...(ngDevMode ? [{ debugName: "yearStart" }] : []));
+    years = computed(() => Array.from({ length: 12 }, (_, i) => this.yearStart() + i), ...(ngDevMode ? [{ debugName: "years" }] : []));
+    displayValue = computed(() => {
+        const v = this.value();
+        return v ? `${this.MONTHS[v.month]} ${v.year}` : '— / —';
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    preview = computed(() => {
+        const m = this.tempMonth();
+        const y = this.tempYear();
+        if (m !== null && y !== null)
+            return `${this.MONTHS[m]} ${y}`;
+        if (m !== null)
+            return `${this.MONTHS[m]} —`;
+        if (y !== null)
+            return `— ${y}`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    open() {
+        const v = this.value();
+        this.tempMonth.set(v?.month ?? null);
+        this.tempYear.set(v?.year ?? null);
+        this.isOpen.set(true);
+    }
+    selectMonth(m) { this.tempMonth.set(m); }
+    selectYear(y) { this.tempYear.set(y); }
+    shiftYears(delta) { this.yearStart.update(s => s + delta); }
+    confirm() {
+        const m = this.tempMonth();
+        const y = this.tempYear();
+        if (m === null || y === null)
+            return;
+        this.valueChange.emit({ month: m, year: y });
+        this.isOpen.set(false);
+    }
+    cancel() { this.isOpen.set(false); }
+    isSelectedMonth(m) { return this.tempMonth() === m; }
+    isSelectedYear(y) { return this.tempYear() === y; }
+    isCurrentMonth(m) { return m === this.today.month; }
+    isCurrentYear(y) { return y === this.today.year; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MonthYearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MonthYearPickerComponent, isStandalone: true, selector: "nsx-month-year-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="btn btn-outline-secondary w-100 d-flex justify-content-between align-items-center"
+      (click)="open()">
+      <span class="font-monospace" [class.text-muted]="!value()">
+        {{ displayValue() }}
+      </span>
+      <small class="text-muted">&#9662;</small>
+    </button>
+
+    @if (isOpen()) {
+      <div class="border rounded mt-1" style="overflow: hidden; position: relative; z-index: 10; background: white;">
+
+        <div class="d-flex justify-content-between align-items-center px-3 py-2 bg-body-tertiary border-bottom">
+          <span class="text-uppercase text-muted fw-semibold" style="font-size: 10px; letter-spacing: .08em;">
+            {{ label() }}
+          </span>
+          <span class="font-monospace fw-semibold">{{ preview() }}</span>
+        </div>
+
+        <div class="px-2 pt-2 pb-1">
+          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
+          <div class="row row-cols-4 g-1">
+            @for (month of MONTHS; track $index) {
+              <div class="col">
+                <button
+                  type="button"
+                  class="btn btn-sm w-100"
+                  [class.btn-success]="isSelectedMonth($index)"
+                  [class.btn-outline-success]="isCurrentMonth($index) && !isSelectedMonth($index)"
+                  [class.btn-light]="!isSelectedMonth($index) && !isCurrentMonth($index)"
+                  (click)="selectMonth($index)">
+                  {{ month }}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+
+        <div class="px-2 pt-1 pb-2">
+          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
+          <div class="row row-cols-4 g-1">
+            @for (year of years(); track year) {
+              <div class="col">
+                <button
+                  type="button"
+                  class="btn btn-sm w-100 font-monospace"
+                  [class.btn-success]="isSelectedYear(year)"
+                  [class.btn-outline-success]="isCurrentYear(year) && !isSelectedYear(year)"
+                  [class.btn-light]="!isSelectedYear(year) && !isCurrentYear(year)"
+                  (click)="selectYear(year)">
+                  {{ year }}
+                </button>
+              </div>
+            }
+          </div>
+
+          <div class="row g-1 mt-1">
+            <div class="col">
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-12)">
+                &lsaquo; Earlier
+              </button>
+            </div>
+            <div class="col">
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(12)">
+                Later &rsaquo;
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-0 border-top">
+          <div class="col border-end">
+            <button
+              type="button"
+              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
+              (click)="confirm()">
+              OK
+            </button>
+          </div>
+          <div class="col">
+            <button
+              type="button"
+              class="btn btn-light w-100 rounded-0 py-2"
+              (click)="cancel()">
+              Cancel
+            </button>
+          </div>
+        </div>
+
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MonthYearPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nsx-month-year-picker',
+                    standalone: true,
+                    template: `
+    <button
+      type="button"
+      class="btn btn-outline-secondary w-100 d-flex justify-content-between align-items-center"
+      (click)="open()">
+      <span class="font-monospace" [class.text-muted]="!value()">
+        {{ displayValue() }}
+      </span>
+      <small class="text-muted">&#9662;</small>
+    </button>
+
+    @if (isOpen()) {
+      <div class="border rounded mt-1" style="overflow: hidden; position: relative; z-index: 10; background: white;">
+
+        <div class="d-flex justify-content-between align-items-center px-3 py-2 bg-body-tertiary border-bottom">
+          <span class="text-uppercase text-muted fw-semibold" style="font-size: 10px; letter-spacing: .08em;">
+            {{ label() }}
+          </span>
+          <span class="font-monospace fw-semibold">{{ preview() }}</span>
+        </div>
+
+        <div class="px-2 pt-2 pb-1">
+          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
+          <div class="row row-cols-4 g-1">
+            @for (month of MONTHS; track $index) {
+              <div class="col">
+                <button
+                  type="button"
+                  class="btn btn-sm w-100"
+                  [class.btn-success]="isSelectedMonth($index)"
+                  [class.btn-outline-success]="isCurrentMonth($index) && !isSelectedMonth($index)"
+                  [class.btn-light]="!isSelectedMonth($index) && !isCurrentMonth($index)"
+                  (click)="selectMonth($index)">
+                  {{ month }}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+
+        <div class="px-2 pt-1 pb-2">
+          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
+          <div class="row row-cols-4 g-1">
+            @for (year of years(); track year) {
+              <div class="col">
+                <button
+                  type="button"
+                  class="btn btn-sm w-100 font-monospace"
+                  [class.btn-success]="isSelectedYear(year)"
+                  [class.btn-outline-success]="isCurrentYear(year) && !isSelectedYear(year)"
+                  [class.btn-light]="!isSelectedYear(year) && !isCurrentYear(year)"
+                  (click)="selectYear(year)">
+                  {{ year }}
+                </button>
+              </div>
+            }
+          </div>
+
+          <div class="row g-1 mt-1">
+            <div class="col">
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-12)">
+                &lsaquo; Earlier
+              </button>
+            </div>
+            <div class="col">
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(12)">
+                Later &rsaquo;
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-0 border-top">
+          <div class="col border-end">
+            <button
+              type="button"
+              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
+              (click)="confirm()">
+              OK
+            </button>
+          </div>
+          <div class="col">
+            <button
+              type="button"
+              class="btn btn-light w-100 rounded-0 py-2"
+              (click)="cancel()">
+              Cancel
+            </button>
+          </div>
+        </div>
+
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
 class TenantRegisterComponent {
     auth;
     providerRegistry;
@@ -4283,5 +4533,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTH_PLUGIN, ApiConnectionService, ApiResponse, AuthPageComponent, AuthService, CsrfService, DbService, FilesService, LogService, LoginDialogComponent, MyEnvironmentModel, ProgalaxyElabsAuth, ProviderRegistryService, RegisterComponent, SigninStatusService, StoneScriptPHPAuth, TenantLoginComponent, TenantLoginDialogComponent, TenantRegisterComponent, TenantRegisterDialogComponent, TokenService, VerifyStatus, provideNgxStoneScriptPhpClient };
+export { AUTH_PLUGIN, ApiConnectionService, ApiResponse, AuthPageComponent, AuthService, CsrfService, DbService, FilesService, LogService, LoginDialogComponent, MonthYearPickerComponent, MyEnvironmentModel, ProgalaxyElabsAuth, ProviderRegistryService, RegisterComponent, SigninStatusService, StoneScriptPHPAuth, TenantLoginComponent, TenantLoginDialogComponent, TenantRegisterComponent, TenantRegisterDialogComponent, TokenService, VerifyStatus, provideNgxStoneScriptPhpClient };
 //# sourceMappingURL=progalaxyelabs-ngx-stonescriptphp-client.mjs.map