@theseam/ui-common 1.0.2-beta.63 → 1.0.2-beta.70

package/framework/route-transitions/route-transitions.css

@@ -5,23 +5,39 @@
 
 /* Keyframes */
 @keyframes seam-slide-in-left {
-  from { transform: translateX(100%); }
-  to   { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes seam-slide-in-right {
-  from { transform: translateX(-100%); }
-  to   { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes seam-slide-out-left {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes seam-slide-out-right {
-  from { transform: translateX(0); }
-  to   { transform: translateX(100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
 }
 
 /*
@@ -94,57 +110,91 @@ html[data-route-direction]::view-transition-new(root) {
  */
 
 /* Sibling swap: current slides right, new slides left */
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-0),
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-1),
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-2),
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-3),
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-4),
-html[data-route-direction="sibling"]::view-transition-old(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-right;
-}
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-0),
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-1),
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-2),
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-3),
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-4),
-html[data-route-direction="sibling"]::view-transition-new(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-left;
+html[data-route-direction='sibling']::view-transition-old(seam-route-content-0),
+html[data-route-direction='sibling']::view-transition-old(seam-route-content-1),
+html[data-route-direction='sibling']::view-transition-old(seam-route-content-2),
+html[data-route-direction='sibling']::view-transition-old(seam-route-content-3),
+html[data-route-direction='sibling']::view-transition-old(seam-route-content-4),
+html[data-route-direction='sibling']::view-transition-old(
+    seam-route-content-5
+  ) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-out-right;
+}
+html[data-route-direction='sibling']::view-transition-new(seam-route-content-0),
+html[data-route-direction='sibling']::view-transition-new(seam-route-content-1),
+html[data-route-direction='sibling']::view-transition-new(seam-route-content-2),
+html[data-route-direction='sibling']::view-transition-new(seam-route-content-3),
+html[data-route-direction='sibling']::view-transition-new(seam-route-content-4),
+html[data-route-direction='sibling']::view-transition-new(
+    seam-route-content-5
+  ) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-in-left;
 }
 
 /* Deeper: both slide left */
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-0),
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-1),
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-2),
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-3),
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-4),
-html[data-route-direction="deeper"]::view-transition-old(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-left;
-}
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-0),
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-1),
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-2),
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-3),
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-4),
-html[data-route-direction="deeper"]::view-transition-new(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-left;
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-0),
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-1),
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-2),
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-3),
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-4),
+html[data-route-direction='deeper']::view-transition-old(seam-route-content-5) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-out-left;
+}
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-0),
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-1),
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-2),
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-3),
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-4),
+html[data-route-direction='deeper']::view-transition-new(seam-route-content-5) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-in-left;
 }
 
 /* Shallower: both slide right */
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-0),
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-1),
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-2),
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-3),
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-4),
-html[data-route-direction="shallower"]::view-transition-old(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-out-right;
-}
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-0),
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-1),
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-2),
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-3),
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-4),
-html[data-route-direction="shallower"]::view-transition-new(seam-route-content-5) {
-  animation: var(--seam-route-transition-duration) var(--seam-route-transition-easing) both seam-slide-in-right;
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-0
+  ),
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-1
+  ),
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-2
+  ),
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-3
+  ),
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-4
+  ),
+html[data-route-direction='shallower']::view-transition-old(
+    seam-route-content-5
+  ) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-out-right;
+}
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-0
+  ),
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-1
+  ),
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-2
+  ),
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-3
+  ),
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-4
+  ),
+html[data-route-direction='shallower']::view-transition-new(
+    seam-route-content-5
+  ) {
+  animation: var(--seam-route-transition-duration)
+    var(--seam-route-transition-easing) both seam-slide-in-right;
 }
 
 /* Reduced motion: disable all route transition animations */

package/graphql/index.d.ts

@@ -8,7 +8,7 @@ import * as apollo_angular from 'apollo-angular';
 import { QueryRef, WatchQueryOptions, Apollo } from 'apollo-angular';
 import { DataFilterState } from '@theseam/ui-common/data-filters';
 import * as i0 from '@angular/core';
-import { InjectionToken, Type, Provider, EventEmitter } from '@angular/core';
+import { InjectionToken, Type, Provider, OutputRef, EventEmitter } from '@angular/core';
 import { OperationVariables } from '@apollo/client/core/types';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import { IDataExporter } from '@theseam/ui-common/data-exporter';
@@ -192,7 +192,7 @@ declare class GQLVariable {
     constructor(name: string, type: string);
 }
 
-type GqlDatatableAccessor = Pick<DatatableComponent, 'page' | 'sort' | 'sorts' | 'filterStates' | 'pageInfo' | 'externalSorting' | 'columns$'> & {
+type GqlDatatableAccessor = Pick<DatatableComponent, 'page' | 'sort' | 'sorts' | 'filterStates' | 'pageInfo' | 'externalSorting' | 'columns$' | 'refreshRequested'> & {
     ngxDatatable: {
         offset: number;
         pageSize: number;
@@ -711,6 +711,10 @@ declare class MockDatatable implements GqlDatatableAccessor {
     private readonly _columnsSubject;
     readonly columns$: Observable<TheSeamDatatableColumn[]>;
     private readonly _filterStatesSubject;
+    private readonly _refreshSubject;
+    readonly refreshRequested: OutputRef<void>;
+    /** Test helper: simulate the refresh button being clicked. */
+    triggerRefresh(): void;
     private _sorts;
     private _rows;
     private _offset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theseam/ui-common",
-  "version": "1.0.2-beta.63",
+  "version": "1.0.2-beta.70",
   "peerDependencies": {
     "@angular/cdk": "^20.2.3",
     "@angular/common": "^20.3.0",

package/utils/index.d.ts

@@ -366,24 +366,21 @@ declare class PollingTickerOptions {
  */
 declare function pollingTicker<R>(action: PollingActionFn<R>, pollingInterval?: number, ticker?: Observable<number | void>, options?: PollingTickerOptions): Observable<R>;
 
+interface RefreshableOptions<T> {
+    action: () => Observable<T>;
+    invalidate$?: Observable<unknown>;
+    poll$?: Observable<unknown>;
+}
 declare class Refreshable<T> {
-    private _initialized;
-    private _pollingInterval;
-    private _ticker;
-    private _pending;
-    data$: Observable<T>;
-    pending$: Observable<boolean>;
-    constructor(action: () => T | Observable<T>, pollingInterval?: number);
-    get initialized(): boolean;
-    /**
-     * Intercepts the action call to monitor pending state
-     */
-    private _actionHandler;
-    /**
-     * Selects the data observable
-     */
-    select(refresh?: boolean): Observable<T>;
-    refresh(): Observable<void>;
+    private readonly _refresh$;
+    private readonly _cache$;
+    private readonly _loading$;
+    private _dataSubCount;
+    readonly loading$: Observable<boolean>;
+    readonly initialized$: Observable<boolean>;
+    readonly data$: Observable<T>;
+    constructor(opts: RefreshableOptions<T>);
+    refresh(): void;
 }
 
 declare function wrapIntoObservable<T>(value: T | Promise<T> | Observable<T>): Observable<T>;
@@ -456,4 +453,4 @@ interface SanitizeFilenameOptions {
 declare function sanitizeFilename(filename: string, options?: SanitizeFilenameOptions): string;
 
 export { IS_FEATURE_COLLECTION_VALIDATOR_NAME, IS_ONLY_GEOMETRY_TYPES_VALIDATOR_NAME, MIN_MAX_POINTS_VALIDATOR_NAME, NO_EMPTY_FEATURE_COLLECTION_VALIDATOR_NAME, NO_INNER_RINGS_VALIDATOR_NAME, NO_KINKS_VALIDATOR_NAME, PollingTickerOptions, Refreshable, activatedRoutesWithDataProperty, arrayMoveImmutable, arrayMoveMutable, calcPercentage, closePolygons, coerceFeatureCollection, createPadding, deleteProperties, deleteProperty, fileBufferToBlob, fileBufferToObjectUrl, fileDataFromBuffer, fractionalDigitsCount, geoJsonToArea, getAttribute, getClosestWidgetCdkDrag, getControlName, getControlPath, hasAttribute, hasProperty, hasRequiredControl, isAbsoluteUrl, isEmptyInputValue, isEmptyUrlRoute, isFeatureCollectionValidator, isNullOrUndefined, isNullOrUndefinedOrEmpty, isNumeric, isOnlyGeometryTypes, isOnlyGeometryTypesValidator, leafChildRoute, loadStyle, loadStyleSheet, mapEach, mergePolygons, minMaxPointsValidator, noEmptyFeatureCollectionValidator, noInnerRingsValidator, noKinksValidator, notNullOrUndefined, notNullOrUndefinedOrEmpty, observeControlIsDifferent, observeControlStatus, observeControlValid, observeControlValue, observeControlValueChange, observeQueryList, openBlob, padEnd, padStart, phoneNumberMask, pollingTicker, readFileAsDataUrlAsync, readFileAsync, readGeoFile, routeSnapshotPathFull, routeSnapshotPathRelative, sanitizeFilename, splitMultiPolygons, stripOuter, subscriberCount, tapFirst, toggleAttribute, trimRepeated, waitOnConditionAsync, waitOnNonPendingStatus, willHaveDataProp, withoutProperties, withoutProperty, wrapIntoObservable };
-export type { IActivatedRouteWithData, IFileData, PollingActionFn, SanitizeFilenameOptions, SubscriberCountChangedFn };
+export type { IActivatedRouteWithData, IFileData, PollingActionFn, RefreshableOptions, SanitizeFilenameOptions, SubscriberCountChangedFn };