@progressive-development/pd-spa-helper 0.8.22 → 0.9.1

package/dist/index.js

@@ -1,91 +1,32 @@
-import { PdSpaHelper, startInit } from "./PdSpaHelper.js";
-import * as serviceProviderModel from "./service-provider/service-provider-model.js";
-import * as spaModel from "./model/spa-model.js";
-import * as offlineWatcherHelper from "./helper/offline-watcher-helper.js";
-import * as blobHelper from "./helper/blob-helper.js";
-import * as dateHelper from "./helper/date-helper.js";
-import * as priceHelper from "./helper/price-helper.js";
-import * as numberHelper from "./helper/number-helper.js";
-import * as textHelper from "./helper/text-helper.js";
-import { DefaultViewPage } from "./defaultpage/default-view-page.js";
-import { ABORT_EVENT_NAME, DefaultConfirmPopup, STORE_EVENT_NAME } from "./defaultpage/default-confirm-popup.js";
-import { DefaultDialogPopup } from "./defaultpage/default-dialog-popup.js";
-import { DefaultPopup } from "./defaultpage/default-popup.js";
-import { DefaultWizard } from "./defaultpage/default-wizard.js";
-import { PdDefaultWizardStep } from "./defaultpage/pd-default-wizard-step.js";
-import { DefaultStepAddress } from "./defaultpage/default-step-address.js";
-import { createLogger, defaultLogger } from "./helper/logger.js";
-import { DefaultStepSummary } from "./defaultpage/default-step-summary.js";
-import { activateCollectionListener, callFunctionImpl, deleteFile, downloadFile, getApp, getMessagingImpl, getStorageConfiguration, getStorageFile, getStorageFileList, getUser, getUserIdToken, isAuthenticatedImpl, loginImpl, logoutImpl, registerAppDeviceForNotification, uploadFile } from "./service-provider/service-provider-impl.js";
-import { refreshAndPersistUserIdToken } from "./helper/refresh-id-token.js";
-import { pdStore } from "./store/mini-rx.store.js";
-import { setRouteElement } from "./store/spa-app-effects.js";
-import * as spaAppActions from "./store/spa-app-actions.js";
-import * as spaAppSelector from "./store/spa-app-selector.js";
-import * as indexDB from "./store/indexDB.js";
-import { templates } from "./generated/locale-wrapper/be-wrapper.js";
-import { templates as templates2 } from "./generated/locale-wrapper/de-wrapper.js";
-import { templates as templates3 } from "./generated/locale-wrapper/en-wrapper.js";
-const dispatchToastEvent = (element, txt, isSuccess, isError) => {
-  element.dispatchEvent(
-    new CustomEvent("toast-event", {
-      detail: {
-        txt,
-        isSuccess,
-        isError
-      },
-      bubbles: true,
-      composed: true
-    })
-  );
-};
-export {
-  ABORT_EVENT_NAME,
-  DefaultConfirmPopup,
-  DefaultDialogPopup,
-  DefaultPopup,
-  DefaultStepAddress,
-  DefaultStepSummary,
-  DefaultViewPage,
-  DefaultWizard,
-  PdDefaultWizardStep,
-  PdSpaHelper,
-  STORE_EVENT_NAME,
-  activateCollectionListener,
-  templates as beTemplaes,
-  callFunctionImpl,
-  createLogger,
-  templates2 as deTemplaes,
-  defaultLogger,
-  deleteFile,
-  dispatchToastEvent,
-  downloadFile,
-  templates3 as enTemplaes,
-  getApp,
-  getMessagingImpl,
-  getStorageConfiguration,
-  getStorageFile,
-  getStorageFileList,
-  getUser,
-  getUserIdToken,
-  isAuthenticatedImpl,
-  loginImpl,
-  logoutImpl,
-  spaAppActions as pdAction,
-  indexDB as pdDB,
-  dateHelper as pdDateHelper,
-  blobHelper as pdFileHelper,
-  numberHelper as pdNumberHelper,
-  offlineWatcherHelper as pdOfflineWatcher,
-  priceHelper as pdPriceHelper,
-  spaAppSelector as pdSelector,
-  serviceProviderModel as pdSpaModel,
-  spaModel as pdSpaModel2,
-  pdStore,
-  textHelper as pdTextHelper,
-  refreshAndPersistUserIdToken,
-  registerAppDeviceForNotification,
-  setRouteElement,
-  startInit,
-  uploadFile
-};
+export { PdSpaHelper, startInit } from './components/pd-spa-helper/PdSpaHelper.js';
+export { PdSectionPage } from './components/pd-section-page/PdSectionPage.js';
+export { createLogger, defaultLogger } from './helper/logger.js';
+export { refreshAndPersistUserIdToken } from './helper/refresh-id-token.js';
+import * as offlineWatcherHelper from './helper/offline-watcher-helper.js';
+export { offlineWatcherHelper as offlineWatcher };
+export { ServiceRegistry, services } from './service-provider/ServiceRegistry.js';
+export { BusinessError, SC_INVALID_USER, SC_TECHNICAL_FAILURE } from './service-provider/service-provider-model.js';
+export { extractErrorInfo, isBusinessError, validateFunctionResult, validateResult } from './service-provider/function-utils.js';
+export { initializeStore, pdStore } from './store/mini-rx.store.js';
+export { setRouteElement } from './store/spa-app-effects.js';
+import * as spaAppActions from './store/spa-app-actions.js';
+export { spaAppActions as SpaActions };
+export { addLoadingState, loginSuccess, logoutSuccess, removeLoadingState, routeAction } from './store/spa-app-actions.js';
+import * as spaAppSelector from './store/spa-app-selector.js';
+export { spaAppSelector as SpaSelectors };
+export { getLoadingSelector, getOfflineSelector, selectAuthUser } from './store/spa-app-selector.js';
+export { createAsyncAction, createAsyncActionGroup, getConfigForAction, isActionFromGroup } from './store/async-action-utils.js';
+export { createAllLoadingEffects, createErrorToastEffect, createLoadingEffect, createRemoveLoadingEffect, createSuccessToastEffect } from './store/async-action-effects.js';
+export { POST_LOGIN_REDIRECT_KEY, pdRouterService } from './router/PdRouterService.js';
+export { USER_COLLECTION, add, addAll, deleteAll, deleteAllEl, get, getAll, getAllIds, initDB, removeDatabase, update, updateAll } from './db/indexDB.js';
+export { APP_CONF_EVENT, UNDEF } from './model/spa-model.js';
+export { getCurrentUser, getUserClaims, getUserEmail, getUserId, hasAllRoles, hasAnyRole, hasRole, isLoggedIn } from './auth/auth-utils.js';
+export { AuthController } from './auth/AuthController.js';
+export { ifAuth, ifNotAuth, ifRole } from './auth/auth-directives.js';
+export { screenSizeService } from './screen-size/ScreenSizeService.js';
+export { ScreenSizeController } from './screen-size/ScreenSizeController.js';
+export { responsiveText, responsiveValue } from './screen-size/responsive-directives.js';
+export { fireOnceService } from './services/fire-once-service.js';
+export { templates as beTemplates } from './generated/locale-wrapper/be-wrapper.js';
+export { templates as deTemplates } from './generated/locale-wrapper/de-wrapper.js';
+export { templates as enTemplates } from './generated/locale-wrapper/en-wrapper.js';

package/dist/model/index.d.ts

@@ -0,0 +1,4 @@
+export { APP_CONF_EVENT, UNDEF } from './spa-model.js';
+export type { AppUser } from './spa-model.js';
+export type { LoadingState, LoadingSubTask, } from '@progressive-development/pd-content';
+//# sourceMappingURL=index.d.ts.map

package/dist/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvD,YAAY,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EACV,YAAY,EACZ,cAAc,GACf,MAAM,qCAAqC,CAAC"}

package/dist/model/spa-model.d.ts

@@ -1,24 +1,23 @@
 export declare const APP_CONF_EVENT = "get-app-conf";
 export declare const UNDEF = "UNDEF";
+/**
+ * Minimal auth user interface for both Firebase and Mock providers.
+ * Used for auth state change callbacks.
+ */
+export interface AuthUser {
+    uid: string;
+    email?: string | null;
+    displayName?: string | null;
+    emailVerified?: boolean;
+}
+/**
+ * Application user with claims after successful login.
+ */
 export interface AppUser {
     uid: string;
     email: string | null;
     emailVerified: boolean;
     providerId: string;
-    claims: Record<string, any>;
-}
-export interface LoadingSubTask {
-    actionKey: string;
-    completed: boolean;
-    loadingTxt: string;
-}
-export interface LoadingState {
-    creation?: Date;
-    isLoading: boolean;
-    actionKey: string;
-    modal?: boolean;
-    smallBackground?: boolean;
-    loadingTxt?: string;
-    subTask?: LoadingSubTask[];
+    claims: Record<string, unknown>;
 }
 //# sourceMappingURL=spa-model.d.ts.map

package/dist/model/spa-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spa-model.d.ts","sourceRoot":"","sources":["../../src/model/spa-model.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAE7C,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B"}
+{"version":3,"file":"spa-model.d.ts","sourceRoot":"","sources":["../../src/model/spa-model.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAE7C,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC"}

package/dist/model/spa-model.js

@@ -1,6 +1,4 @@
 const APP_CONF_EVENT = "get-app-conf";
 const UNDEF = "UNDEF";
-export {
-  APP_CONF_EVENT,
-  UNDEF
-};
+
+export { APP_CONF_EVENT, UNDEF };

package/dist/router/PdRouterService.d.ts

@@ -1,9 +1,12 @@
 import { RouteChangeInfo, RouteDefinition } from './rout-types.js';
+export declare const POST_LOGIN_REDIRECT_KEY = "postLoginRedirect";
 type RouteChangeHandler = (info: RouteChangeInfo) => void;
 declare class PdRouterService {
     private router;
     private onChangeHandlers;
-    private currentRoute;
+    private _currentRoute;
+    private _previousRoute;
+    get previousRoute(): string;
     constructor();
     /**
      * Setzt die Routen-Konfiguration. Muss vor Verwendung von navigate() aufgerufen werden.

package/dist/router/PdRouterService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdRouterService.d.ts","sourceRoot":"","sources":["../../src/router/PdRouterService.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAMnE,KAAK,kBAAkB,GAAG,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;AAE1D,cAAM,eAAe;IACnB,OAAO,CAAC,MAAM,CAAqC;IAEnD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,YAAY,CAAc;;IAQlC;;OAEG;IACI,eAAe,CAAC,WAAW,EAAE,eAAe,EAAE;IAgErD;;OAEG;IACU,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,UAAQ;IAejD;;OAEG;IACI,aAAa,CAAC,OAAO,EAAE,kBAAkB;IAIhD;;OAEG;YACW,OAAO;CAwDtB;AAaD,eAAO,MAAM,eAAe,iBAAwB,CAAC"}
+{"version":3,"file":"PdRouterService.d.ts","sourceRoot":"","sources":["../../src/router/PdRouterService.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKnE,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAI3D,KAAK,kBAAkB,GAAG,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;AAmB1D,cAAM,eAAe;IAEnB,OAAO,CAAC,MAAM,CAAmD;IAEjE,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,cAAc,CAAc;IAEpC,IAAW,aAAa,IAAI,MAAM,CAEjC;;IAQD;;OAEG;IACI,eAAe,CAAC,WAAW,EAAE,eAAe,EAAE;IAiFrD;;OAEG;IACU,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,UAAQ;IAejD;;OAEG;IACI,aAAa,CAAC,OAAO,EAAE,kBAAkB;IAIhD;;OAEG;YACW,OAAO;CAiEtB;AAaD,eAAO,MAAM,eAAe,iBAAwB,CAAC"}

package/dist/router/PdRouterService.js

@@ -1,18 +1,25 @@
-import UniversalRouter from "universal-router";
-import { firstValueFrom, first, filter } from "rxjs";
-import { selectAuthUser } from "../store/spa-app-selector.js";
-import { pdStore } from "../store/mini-rx.store.js";
-import { createLogger } from "../helper/logger.js";
+import UniversalRouter from 'universal-router';
+import { firstValueFrom, first, filter } from 'rxjs';
+import { selectAuthUser } from '../store/spa-app-selector.js';
+import { pdStore } from '../store/mini-rx.store.js';
+import { createLogger } from '../helper/logger.js';
+
+const POST_LOGIN_REDIRECT_KEY = "postLoginRedirect";
 const routingLogger = createLogger("PdRouterService");
 class PdRouterService {
   constructor() {
+    // UniversalRouter generic typing is complex; using explicit result type
     this.router = null;
     this.onChangeHandlers = [];
-    this.currentRoute = "";
+    this._currentRoute = "";
+    this._previousRoute = "";
     window.addEventListener("popstate", () => {
       this.resolve(location.pathname + location.search);
     });
   }
+  get previousRoute() {
+    return this._previousRoute;
+  }
   /**
    * Setzt die Routen-Konfiguration. Muss vor Verwendung von navigate() aufgerufen werden.
    */
@@ -24,28 +31,36 @@ class PdRouterService {
     const universalRoutes = definitions.flatMap((def) => {
       return {
         path: def.pattern,
+        // Context type from UniversalRouter extended with userCheck
         action: async (context) => {
-          var _a, _b;
-          if (def.auth) {
-            let authResult;
-            if (!((_a = context.userCheck) == null ? void 0 : _a.loginCheckFinish)) {
+          const requiresAuth = def.auth || def.roles && def.roles.length > 0;
+          if (requiresAuth) {
+            if (!context.userCheck?.loginCheckFinish) {
               routingLogger.debug("Check login is running, wait for result...");
-              authResult = await waitForFinalAuthState();
+              const authResult = await waitForFinalAuthState();
               routingLogger.debug("Check login is done, go on");
               context.userCheck = authResult;
             }
-            if (!((_b = context.userCheck) == null ? void 0 : _b.user)) {
+            if (!context.userCheck?.user) {
               const fallbackRoute = def.authFallback ?? "login";
+              const currentPath = context.pathname || window.location.pathname;
+              if (currentPath && currentPath !== "/" + fallbackRoute) {
+                sessionStorage.setItem(POST_LOGIN_REDIRECT_KEY, currentPath);
+                routingLogger.debug(
+                  "Stored redirect route for after login:",
+                  currentPath
+                );
+              }
               return { redirect: fallbackRoute };
             }
-          }
-          if (def.roles && !def.roles.some(
-            (role) => {
-              var _a2;
-              return ((_a2 = context.userCheck.user.claims) == null ? void 0 : _a2[role]) === true;
+            if (def.roles && def.roles.length > 0 && !def.roles.some(
+              (role) => context.userCheck?.user?.claims?.[role] === true
+            )) {
+              routingLogger.debug(
+                "User lacks required role, redirecting to unauthorized"
+              );
+              return { redirect: "unauthorized" };
             }
-          )) {
-            return { redirect: "unauthorized" };
           }
           if (def.action) {
             const result = await def.action();
@@ -95,10 +110,6 @@ class PdRouterService {
     const pathname = url.pathname;
     const query = Object.fromEntries(url.searchParams.entries());
     try {
-      routingLogger.debug(
-        "Bevore resolve current location:",
-        location.pathname
-      );
       const userCheck = await firstValueFrom(
         pdStore().select(selectAuthUser).pipe(first())
       );
@@ -106,12 +117,16 @@ class PdRouterService {
         pathname,
         userCheck
       });
+      if (!result) {
+        routingLogger.warn("No route result for path:", path);
+        return;
+      }
       if (result.redirect) {
         history.replaceState({}, "", result.redirect);
         await this.resolve(result.redirect);
         return;
       }
-      if (!result || typeof result !== "object" || !result.route) {
+      if (typeof result !== "object" || !result.route) {
         routingLogger.warn("Invalid route result:", result);
         return;
       }
@@ -121,7 +136,13 @@ class PdRouterService {
         params: result.params ?? {},
         query
       };
-      this.currentRoute = routeInfo.route;
+      if (routeInfo.route !== "login" && !userCheck?.user && sessionStorage.getItem(POST_LOGIN_REDIRECT_KEY)) {
+        sessionStorage.removeItem(POST_LOGIN_REDIRECT_KEY);
+      }
+      if (this._currentRoute && this._currentRoute !== "login") {
+        this._previousRoute = this._currentRoute;
+      }
+      this._currentRoute = routeInfo.route;
       this.onChangeHandlers.forEach((fn) => fn(routeInfo));
     } catch (err) {
       routingLogger.error("Routing error:", err);
@@ -137,6 +158,5 @@ async function waitForFinalAuthState() {
   );
 }
 const pdRouterService = new PdRouterService();
-export {
-  pdRouterService
-};
+
+export { POST_LOGIN_REDIRECT_KEY, pdRouterService };

package/dist/router/index.d.ts

@@ -0,0 +1,3 @@
+export { pdRouterService } from './PdRouterService.js';
+export type { RouteDefinition, RouteChangeInfo } from './rout-types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/router/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/router/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/screen-size/ScreenSizeController.d.ts

@@ -0,0 +1,34 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Breakpoint } from './types.js';
+export declare class ScreenSizeController implements ReactiveController {
+    private _host;
+    private _unsubscribe?;
+    constructor(host: ReactiveControllerHost);
+    /** Current breakpoint name */
+    get breakpoint(): Breakpoint;
+    /** Current viewport width in pixels */
+    get width(): number;
+    /** True if viewport is extra small or small (< 768px) */
+    get isMobile(): boolean;
+    /** True if viewport is medium (768px - 1023px) */
+    get isTablet(): boolean;
+    /** True if viewport is large or extra large (>= 1024px) */
+    get isDesktop(): boolean;
+    /**
+     * Check if the current breakpoint matches the given breakpoint.
+     */
+    is(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at least the given breakpoint.
+     * E.g., isAtLeast('md') returns true for md, lg, xl.
+     */
+    isAtLeast(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at most the given breakpoint.
+     * E.g., isAtMost('md') returns true for xs, sm, md.
+     */
+    isAtMost(breakpoint: Breakpoint): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=ScreenSizeController.d.ts.map

package/dist/screen-size/ScreenSizeController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSizeController.d.ts","sourceRoot":"","sources":["../../src/screen-size/ScreenSizeController.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,qBAAa,oBAAqB,YAAW,kBAAkB;IAC7D,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,YAAY,CAAC,CAAa;gBAEtB,IAAI,EAAE,sBAAsB;IAKxC,8BAA8B;IAC9B,IAAI,UAAU,IAAI,UAAU,CAE3B;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yDAAyD;IACzD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,kDAAkD;IAClD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,2DAA2D;IAC3D,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;OAEG;IACH,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAInC;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAI1C;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAIzC,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;CAGzB"}

package/dist/screen-size/ScreenSizeController.js

@@ -0,0 +1,58 @@
+import { screenSizeService } from './ScreenSizeService.js';
+
+class ScreenSizeController {
+  constructor(host) {
+    this._host = host;
+    host.addController(this);
+  }
+  /** Current breakpoint name */
+  get breakpoint() {
+    return screenSizeService.breakpoint;
+  }
+  /** Current viewport width in pixels */
+  get width() {
+    return screenSizeService.width;
+  }
+  /** True if viewport is extra small or small (< 768px) */
+  get isMobile() {
+    return screenSizeService.isMobile;
+  }
+  /** True if viewport is medium (768px - 1023px) */
+  get isTablet() {
+    return screenSizeService.isTablet;
+  }
+  /** True if viewport is large or extra large (>= 1024px) */
+  get isDesktop() {
+    return screenSizeService.isDesktop;
+  }
+  /**
+   * Check if the current breakpoint matches the given breakpoint.
+   */
+  is(breakpoint) {
+    return screenSizeService.is(breakpoint);
+  }
+  /**
+   * Check if the current breakpoint is at least the given breakpoint.
+   * E.g., isAtLeast('md') returns true for md, lg, xl.
+   */
+  isAtLeast(breakpoint) {
+    return screenSizeService.isAtLeast(breakpoint);
+  }
+  /**
+   * Check if the current breakpoint is at most the given breakpoint.
+   * E.g., isAtMost('md') returns true for xs, sm, md.
+   */
+  isAtMost(breakpoint) {
+    return screenSizeService.isAtMost(breakpoint);
+  }
+  hostConnected() {
+    this._unsubscribe = screenSizeService.subscribe(() => {
+      this._host.requestUpdate();
+    });
+  }
+  hostDisconnected() {
+    this._unsubscribe?.();
+  }
+}
+
+export { ScreenSizeController };

package/dist/screen-size/ScreenSizeService.d.ts

@@ -0,0 +1,49 @@
+import { Breakpoint, BreakpointConfig } from './types.js';
+declare class ScreenSizeServiceImpl {
+    private _listeners;
+    private _currentBreakpoint;
+    private _width;
+    private _breakpoints;
+    constructor(breakpoints?: BreakpointConfig);
+    /** Current breakpoint name */
+    get breakpoint(): Breakpoint;
+    /** Current viewport width in pixels */
+    get width(): number;
+    /** True if viewport is extra small or small (< 768px) */
+    get isMobile(): boolean;
+    /** True if viewport is medium (768px - 1023px) */
+    get isTablet(): boolean;
+    /** True if viewport is large or extra large (>= 1024px) */
+    get isDesktop(): boolean;
+    /** Breakpoint order for fallback resolution */
+    get breakpointOrder(): readonly Breakpoint[];
+    /**
+     * Subscribe to breakpoint changes.
+     * Callback is called when the breakpoint changes (not on every resize).
+     *
+     * @param callback - Function to call when breakpoint changes
+     * @returns Unsubscribe function
+     */
+    subscribe(callback: () => void): () => void;
+    /**
+     * Check if the current breakpoint matches the given breakpoint.
+     */
+    is(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at least the given breakpoint.
+     * E.g., isAtLeast('md') returns true for md, lg, xl.
+     */
+    isAtLeast(breakpoint: Breakpoint): boolean;
+    /**
+     * Check if the current breakpoint is at most the given breakpoint.
+     * E.g., isAtMost('md') returns true for xs, sm, md.
+     */
+    isAtMost(breakpoint: Breakpoint): boolean;
+    private _handleResize;
+    private _updateSize;
+    private _notifyListeners;
+}
+/** Singleton instance of the screen size service */
+export declare const screenSizeService: ScreenSizeServiceImpl;
+export {};
+//# sourceMappingURL=ScreenSizeService.d.ts.map

package/dist/screen-size/ScreenSizeService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenSizeService.d.ts","sourceRoot":"","sources":["../../src/screen-size/ScreenSizeService.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAc/D,cAAM,qBAAqB;IACzB,OAAO,CAAC,UAAU,CAAyB;IAC3C,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,YAAY,CAAmB;gBAE3B,WAAW,GAAE,gBAAsC;IAS/D,8BAA8B;IAC9B,IAAI,UAAU,IAAI,UAAU,CAE3B;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,yDAAyD;IACzD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,kDAAkD;IAClD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,2DAA2D;IAC3D,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,+CAA+C;IAC/C,IAAI,eAAe,IAAI,SAAS,UAAU,EAAE,CAE3C;IAED;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAK3C;;OAEG;IACH,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAInC;;;OAGG;IACH,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAM1C;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO;IAMzC,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,gBAAgB;CAGzB;AAED,oDAAoD;AACpD,eAAO,MAAM,iBAAiB,uBAA8B,CAAC"}

package/dist/screen-size/ScreenSizeService.js

@@ -0,0 +1,107 @@
+const DEFAULT_BREAKPOINTS = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+const BREAKPOINT_ORDER = ["xs", "sm", "md", "lg", "xl"];
+class ScreenSizeServiceImpl {
+  constructor(breakpoints = DEFAULT_BREAKPOINTS) {
+    this._listeners = /* @__PURE__ */ new Set();
+    this._currentBreakpoint = "lg";
+    this._width = 0;
+    this._handleResize = () => {
+      const oldBreakpoint = this._currentBreakpoint;
+      this._updateSize();
+      if (oldBreakpoint !== this._currentBreakpoint) {
+        this._notifyListeners();
+      }
+    };
+    this._breakpoints = breakpoints;
+    if (typeof window !== "undefined") {
+      this._updateSize();
+      window.addEventListener("resize", this._handleResize);
+    }
+  }
+  /** Current breakpoint name */
+  get breakpoint() {
+    return this._currentBreakpoint;
+  }
+  /** Current viewport width in pixels */
+  get width() {
+    return this._width;
+  }
+  /** True if viewport is extra small or small (< 768px) */
+  get isMobile() {
+    return this._currentBreakpoint === "xs" || this._currentBreakpoint === "sm";
+  }
+  /** True if viewport is medium (768px - 1023px) */
+  get isTablet() {
+    return this._currentBreakpoint === "md";
+  }
+  /** True if viewport is large or extra large (>= 1024px) */
+  get isDesktop() {
+    return this._currentBreakpoint === "lg" || this._currentBreakpoint === "xl";
+  }
+  /** Breakpoint order for fallback resolution */
+  get breakpointOrder() {
+    return BREAKPOINT_ORDER;
+  }
+  /**
+   * Subscribe to breakpoint changes.
+   * Callback is called when the breakpoint changes (not on every resize).
+   *
+   * @param callback - Function to call when breakpoint changes
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this._listeners.add(callback);
+    return () => this._listeners.delete(callback);
+  }
+  /**
+   * Check if the current breakpoint matches the given breakpoint.
+   */
+  is(breakpoint) {
+    return this._currentBreakpoint === breakpoint;
+  }
+  /**
+   * Check if the current breakpoint is at least the given breakpoint.
+   * E.g., isAtLeast('md') returns true for md, lg, xl.
+   */
+  isAtLeast(breakpoint) {
+    const currentIndex = BREAKPOINT_ORDER.indexOf(this._currentBreakpoint);
+    const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    return currentIndex >= targetIndex;
+  }
+  /**
+   * Check if the current breakpoint is at most the given breakpoint.
+   * E.g., isAtMost('md') returns true for xs, sm, md.
+   */
+  isAtMost(breakpoint) {
+    const currentIndex = BREAKPOINT_ORDER.indexOf(this._currentBreakpoint);
+    const targetIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    return currentIndex <= targetIndex;
+  }
+  _updateSize() {
+    this._width = window.innerWidth;
+    const bp = this._breakpoints;
+    if (this._width >= bp.xl) {
+      this._currentBreakpoint = "xl";
+    } else if (this._width >= bp.lg) {
+      this._currentBreakpoint = "lg";
+    } else if (this._width >= bp.md) {
+      this._currentBreakpoint = "md";
+    } else if (this._width >= bp.sm) {
+      this._currentBreakpoint = "sm";
+    } else {
+      this._currentBreakpoint = "xs";
+    }
+  }
+  _notifyListeners() {
+    this._listeners.forEach((cb) => cb());
+  }
+}
+const screenSizeService = new ScreenSizeServiceImpl();
+
+export { screenSizeService };

package/dist/screen-size/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Screen Size module - Utilities for responsive behavior in Lit applications
+ *
+ * Provides:
+ * - ScreenSizeService: Singleton service for tracking viewport size
+ * - ScreenSizeController: Reactive controller for Lit components
+ * - responsiveText/responsiveValue: Directives for responsive values in templates
+ */
+export { screenSizeService } from './ScreenSizeService.js';
+export { ScreenSizeController } from './ScreenSizeController.js';
+export { responsiveText, responsiveValue } from './responsive-directives.js';
+export type { Breakpoint, BreakpointConfig, ResponsiveTextOptions, ResponsiveValueOptions, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/screen-size/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/screen-size/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7E,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,YAAY,CAAC"}