@moatamed-sce/ui-components 0.1.4 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moatamed-sce/ui-components",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "SCE Platform design system — presentational Angular components.",
   "license": "MIT",
   "sideEffects": [
@@ -13,8 +13,12 @@
     "@angular/forms": "^21.0.0",
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
+    "@hugeicons/angular": "^1.0.10",
+    "@hugeicons/core-free-icons": "^4.2.3",
+    "@moatamed-sce/core": "^0.1.7",
+    "@moatamed-sce/form-engine": "^0.1.7",
+    "@moatamed-sce/form-schema": "^0.1.7",
     "@ngx-translate/core": "^18.0.0",
-    "@moatamed-sce/core": "^0.1.4",
     "leaflet": "^1.9.0",
     "ngx-image-cropper": "^9.0.0",
     "primeng": "^21.0.0",
@@ -22,6 +26,9 @@
     "rxjs": "^7.8.0"
   },
   "peerDependenciesMeta": {
+    "@hugeicons/core-free-icons": {
+      "optional": true
+    },
     "leaflet": {
       "optional": true
     },
@@ -65,6 +72,10 @@
     ".": {
       "types": "./types/moatamed-sce-ui-components.d.ts",
       "default": "./fesm2022/moatamed-sce-ui-components.mjs"
+    },
+    "./maps": {
+      "types": "./types/moatamed-sce-ui-components-maps.d.ts",
+      "default": "./fesm2022/moatamed-sce-ui-components-maps.mjs"
     }
   },
   "type": "module"

package/types/moatamed-sce-ui-components-maps.d.ts

@@ -0,0 +1,220 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, ElementRef, AfterViewInit, OnChanges, SimpleChanges, OnInit } from '@angular/core';
+import * as i1 from '@moatamed-sce/core';
+import { BaladyPointDataResult, BaladyRegionItem, BaladyCityItem, BaladyDistrictItem } from '@moatamed-sce/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+
+/** A pin on `sce-osm-leaflet-map`, optionally draggable and carrying raw `popupHtml` for its popup bubble. */
+interface OsmMapMarker {
+    lat: number;
+    lng: number;
+    popupHtml?: string;
+    draggable?: boolean;
+}
+/** OpenStreetMap Leaflet map that lazily loads Leaflet, renders the given markers and emits map clicks and marker drag-ends; setting `interactive` to false disables panning, zooming, the zoom control and click events. */
+declare class SceOsmLeafletMapComponent implements OnDestroy {
+    readonly latitude: _angular_core.InputSignal<number>;
+    readonly longitude: _angular_core.InputSignal<number>;
+    readonly zoom: _angular_core.InputSignal<number>;
+    readonly markers: _angular_core.InputSignal<OsmMapMarker[]>;
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly mapClick: _angular_core.OutputEmitterRef<{
+        lat: number;
+        lng: number;
+    }>;
+    readonly markerDragEnd: _angular_core.OutputEmitterRef<{
+        lat: number;
+        lng: number;
+        index: number;
+    }>;
+    protected mapEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    private map;
+    private markerLayer;
+    private L;
+    private cancelLeafletResize;
+    private initMap;
+    private renderMarkers;
+    ngOnDestroy(): void;
+    private readonly bindHost;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOsmLeafletMapComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOsmLeafletMapComponent, "sce-osm-leaflet-map", never, { "latitude": { "alias": "latitude"; "required": false; "isSignal": true; }; "longitude": { "alias": "longitude"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "mapClick": "mapClick"; "markerDragEnd": "markerDragEnd"; }, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+/** One engineering office plotted on the offices map; `approximate` marks a coordinate derived from a city or region rather than a precise address. */
+interface SceOsmOfficeMapPoint {
+    id: string | number;
+    name: string;
+    latitude: number;
+    longitude: number;
+    approximate?: boolean;
+}
+/** React: google-maps/osm-offices-map.tsx */
+declare class SceOsmOfficesMapComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private readonly language;
+    mapRoot?: ElementRef<HTMLDivElement>;
+    private readonly translate;
+    readonly offices: _angular_core.InputSignal<SceOsmOfficeMapPoint[]>;
+    readonly selectedOfficeId: _angular_core.InputSignal<string | number | undefined>;
+    readonly showTooltip: _angular_core.InputSignal<boolean>;
+    readonly ariaLabelInput: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.Signal<any>;
+    readonly selectOffice: _angular_core.OutputEmitterRef<string | number>;
+    readonly ready: _angular_core.OutputEmitterRef<void>;
+    readonly mapError: _angular_core.OutputEmitterRef<void>;
+    private map;
+    private markers;
+    private markerByOfficeId;
+    private mapReady;
+    private disposed;
+    private icon;
+    private cancelLeafletResize;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private bootMap;
+    private syncMarkers;
+    private queueLeafletResize;
+    private focusSelectedOffice;
+    private clearMarkers;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOsmOfficesMapComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOsmOfficesMapComponent, "sce-osm-offices-map", never, { "offices": { "alias": "offices"; "required": false; "isSignal": true; }; "selectedOfficeId": { "alias": "selectedOfficeId"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; "isSignal": true; }; }, { "selectOffice": "selectOffice"; "ready": "ready"; "mapError": "mapError"; }, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+/** A position chosen in `sce-osm-location-picker`: coordinates plus the reverse-geocoded address when Nominatim returned one. */
+interface LocationPickerValue {
+    lat: number;
+    lng: number;
+    address?: string;
+}
+/** Location picker pairing an OSM Leaflet map with a Nominatim search box, which validates every clicked, dragged or searched position before placing a draggable pin and emitting it with its reverse-geocoded address. */
+declare class SceOsmLocationPickerComponent {
+    readonly initialLat: _angular_core.InputSignal<number>;
+    readonly initialLng: _angular_core.InputSignal<number>;
+    readonly zoom: _angular_core.InputSignal<number>;
+    readonly locale: _angular_core.InputSignal<"ar" | "en">;
+    readonly locationSelect: _angular_core.OutputEmitterRef<LocationPickerValue>;
+    private readonly nominatim;
+    private readonly mapValidation;
+    private readonly toast;
+    private readonly destroyRef;
+    protected searchQuery: string;
+    protected isSearching: _angular_core.WritableSignal<boolean>;
+    protected currentLat: _angular_core.WritableSignal<number>;
+    protected currentLng: _angular_core.WritableSignal<number>;
+    protected selectedLocation: _angular_core.WritableSignal<LocationPickerValue | null>;
+    protected readonly selectedCoordsLabel: _angular_core.Signal<string>;
+    protected currentMarkers: _angular_core.WritableSignal<OsmMapMarker[]>;
+    onMapClick(coords: {
+        lat: number;
+        lng: number;
+    }): void;
+    onMarkerDragEnd(event: {
+        lat: number;
+        lng: number;
+    }): void;
+    private validateAndPlacePin;
+    private placePin;
+    onSearch(): void;
+    private readonly bindHost;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOsmLocationPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOsmLocationPickerComponent, "sce-osm-location-picker", never, { "initialLat": { "alias": "initialLat"; "required": false; "isSignal": true; }; "initialLng": { "alias": "initialLng"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "locationSelect": "locationSelect"; }, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+/** Read-only map of an office's location: a Leaflet map with a marker when valid coordinates are given, a Google Maps embed built from the address when they are not, and a "not specified" fallback when neither is available. */
+declare class SceOfficeLocationMapComponent implements AfterViewInit, OnDestroy {
+    private readonly sanitizer;
+    readonly latitude: _angular_core.InputSignal<number | null | undefined>;
+    readonly longitude: _angular_core.InputSignal<number | null | undefined>;
+    readonly address: _angular_core.InputSignal<string | undefined>;
+    readonly emptyLabel: _angular_core.InputSignal<string | undefined>;
+    mapContainer?: ElementRef<HTMLDivElement>;
+    private map;
+    private cancelLeafletResize;
+    readonly hasCoords: _angular_core.Signal<boolean>;
+    readonly googleEmbedUrl: _angular_core.Signal<SafeResourceUrl | null>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private initLeaflet;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceOfficeLocationMapComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceOfficeLocationMapComponent, "sce-office-location-map", never, { "latitude": { "alias": "latitude"; "required": false; "isSignal": true; }; "longitude": { "alias": "longitude"; "required": false; "isSignal": true; }; "address": { "alias": "address"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+/** Titled card framing the OSM map of branch/office locations. */
+declare class SceStoreLocationsComponent {
+    readonly titleKey: _angular_core.InputSignal<string>;
+    readonly showHeader: _angular_core.InputSignal<boolean>;
+    readonly locations: _angular_core.InputSignal<SceOsmOfficeMapPoint[]>;
+    readonly selectedLocationId: _angular_core.InputSignal<string | number | undefined>;
+    /** Map viewport height, in px. */
+    readonly height: _angular_core.InputSignal<number>;
+    readonly locationSelect: _angular_core.OutputEmitterRef<string | number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceStoreLocationsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceStoreLocationsComponent, "sce-store-locations", never, { "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "locations": { "alias": "locations"; "required": false; "isSignal": true; }; "selectedLocationId": { "alias": "selectedLocationId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, { "locationSelect": "locationSelect"; }, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+interface SelectOption {
+    label: string;
+    value: string;
+}
+declare class SceBaladyMapSelectorComponent implements OnInit, OnDestroy {
+    readonly locale: _angular_core.InputSignal<"ar" | "en">;
+    readonly dir: _angular_core.InputSignal<"rtl" | "ltr">;
+    readonly initialPropertyData: _angular_core.InputSignal<BaladyPointDataResult | null>;
+    readonly propertySelected: _angular_core.OutputEmitterRef<BaladyPointDataResult>;
+    readonly mapClick: _angular_core.OutputEmitterRef<{
+        lat: number;
+        lng: number;
+    }>;
+    private readonly gisService;
+    private readonly toast;
+    private lastQueriedCoords;
+    /** Epoch ms until which point queries are held back after a 429 from the GIS proxy. */
+    private pointQueryBlockedUntil;
+    constructor();
+    private regionsSub?;
+    private citiesSub?;
+    private districtsSub?;
+    private pointDataSub?;
+    protected readonly regions: _angular_core.WritableSignal<BaladyRegionItem[]>;
+    protected readonly cities: _angular_core.WritableSignal<BaladyCityItem[]>;
+    protected readonly districts: _angular_core.WritableSignal<BaladyDistrictItem[]>;
+    protected readonly selectedRegionCode: _angular_core.WritableSignal<string>;
+    protected readonly selectedCityCode: _angular_core.WritableSignal<string>;
+    protected readonly selectedDistrictCode: _angular_core.WritableSignal<string>;
+    protected formatArea(area?: string): string;
+    protected readonly currentLat: _angular_core.WritableSignal<number>;
+    protected readonly currentLng: _angular_core.WritableSignal<number>;
+    protected readonly zoomLevel: _angular_core.WritableSignal<number>;
+    protected readonly currentMarkers: _angular_core.WritableSignal<OsmMapMarker[]>;
+    protected readonly isLoadingFilterData: _angular_core.WritableSignal<boolean>;
+    protected readonly isQueryingPointData: _angular_core.WritableSignal<boolean>;
+    protected readonly loadError: _angular_core.WritableSignal<boolean>;
+    protected readonly selectedPropertyData: _angular_core.WritableSignal<BaladyPointDataResult | null>;
+    protected readonly regionOptions: _angular_core.Signal<SelectOption[]>;
+    protected readonly cityOptions: _angular_core.Signal<SelectOption[]>;
+    protected readonly districtOptions: _angular_core.Signal<SelectOption[]>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected loadRegions(): void;
+    /** Filter -> Map Sync: User selects Region */
+    onRegionChange(code: string | null): void;
+    /** Filter -> Map Sync: User selects City */
+    onCityChange(code: string | null): void;
+    /** Filter -> Map Sync: User selects District */
+    onDistrictChange(code: string | null): void;
+    /** Query Balady GIS API for point data (x=lng, y=lat) */
+    protected queryPointData(lng: number, lat: number, options?: {
+        emit?: boolean;
+    }): void;
+    private showPointQueryError;
+    /** Map Click -> Query Balady & Sync Filter Dropdowns */
+    onMapClicked(coords: {
+        lat: number;
+        lng: number;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SceBaladyMapSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SceBaladyMapSelectorComponent, "sce-balady-map-selector", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "initialPropertyData": { "alias": "initialPropertyData"; "required": false; "isSignal": true; }; }, { "propertySelected": "propertySelected"; "mapClick": "mapClick"; }, never, never, true, [{ directive: typeof i1.SceVariantDirective; inputs: { "sceVariant": "sceVariant"; "sceDensity": "sceDensity"; }; outputs: {}; }]>;
+}
+
+export { SceBaladyMapSelectorComponent, SceOfficeLocationMapComponent, SceOsmLeafletMapComponent, SceOsmLocationPickerComponent, SceOsmOfficesMapComponent, SceStoreLocationsComponent };
+export type { LocationPickerValue, OsmMapMarker, SceOsmOfficeMapPoint };