@moatamed-sce/ui-components 0.1.5 → 0.1.7

package/fesm2022/moatamed-sce-ui-components-maps.mjs

@@ -0,0 +1,1326 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, inject, computed, ViewChild, ViewEncapsulation, DestroyRef, signal } from '@angular/core';
+import * as i1 from '@moatamed-sce/core';
+import { fixLeafletDefaultIcon, scheduleLeafletResize, SceVariantDirective, MAP_CONFIG, LanguageService, createLeafletDefaultIcon, isGeoLookupRestricted, JEDDAH_MAP_CENTER, NominatimService, GeoMapPositionValidationService, ToastService, mapPositionValidationMessage, resolveInitialCenter, SCE_MIRROR_LABEL_AS_PLACEHOLDER, DIALOG_SELECT_OVERLAY_Z_INDEX, inferInputTextDirection, BaladyGisService, BaladyGisError } from '@moatamed-sce/core';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { Select } from 'primeng/select';
+import { HugeiconsIconComponent } from '@hugeicons/angular';
+import { ArrowDown01Icon, AlertCircleIcon, RefreshIcon } from '@hugeicons/core-free-icons';
+
+/** 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. */
+class SceOsmLeafletMapComponent {
+    latitude = input(24.7136, ...(ngDevMode ? [{ debugName: "latitude" }] : /* istanbul ignore next */ []));
+    longitude = input(46.6753, ...(ngDevMode ? [{ debugName: "longitude" }] : /* istanbul ignore next */ []));
+    zoom = input(6, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    markers = input([], ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
+    interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    mapClick = output();
+    markerDragEnd = output();
+    mapEl = viewChild('mapEl', ...(ngDevMode ? [{ debugName: "mapEl" }] : /* istanbul ignore next */ []));
+    map = null;
+    markerLayer = null;
+    L = null;
+    cancelLeafletResize = null;
+    async initMap() {
+        const el = this.mapEl()?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const leafletModule = await import('leaflet');
+        // CJS/ESM interop: in the esbuild bundle the Leaflet API lands on .default, in dev it may not.
+        const L = (leafletModule.default ??
+            leafletModule);
+        this.L = L;
+        fixLeafletDefaultIcon(L);
+        this.map = L.map(el, {
+            center: [this.latitude(), this.longitude()],
+            zoom: this.zoom(),
+            zoomControl: false,
+            dragging: this.interactive(),
+            scrollWheelZoom: false,
+            doubleClickZoom: this.interactive(),
+            touchZoom: this.interactive(),
+        });
+        if (this.interactive()) {
+            const isRtl = getComputedStyle(el).direction === 'rtl';
+            L.control.zoom({ position: isRtl ? 'bottomright' : 'bottomleft' }).addTo(this.map);
+        }
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+        }).addTo(this.map);
+        this.markerLayer = L.layerGroup().addTo(this.map);
+        if (this.interactive()) {
+            this.map.on('click', (e) => {
+                this.mapClick.emit({ lat: e.latlng.lat, lng: e.latlng.lng });
+            });
+            el.addEventListener('wheel', (e) => {
+                if (!this.map || !(e.ctrlKey || e.metaKey)) {
+                    return;
+                }
+                e.preventDefault();
+                if (e.deltaY < 0) {
+                    this.map.zoomIn();
+                }
+                else {
+                    this.map.zoomOut();
+                }
+            }, { passive: false });
+        }
+        this.cancelLeafletResize?.();
+        this.cancelLeafletResize = scheduleLeafletResize(this.map);
+        this.renderMarkers(this.markers());
+    }
+    renderMarkers(markers) {
+        if (!this.markerLayer || !this.L) {
+            return;
+        }
+        this.markerLayer.clearLayers();
+        for (let i = 0; i < markers.length; i++) {
+            const m = markers[i];
+            const marker = this.L.marker([m.lat, m.lng], {
+                draggable: m.draggable ?? false,
+            });
+            if (m.popupHtml) {
+                marker.bindPopup(m.popupHtml);
+            }
+            if (m.draggable) {
+                const index = i;
+                marker.on('dragend', () => {
+                    const pos = marker.getLatLng();
+                    this.markerDragEnd.emit({ lat: pos.lat, lng: pos.lng, index });
+                });
+            }
+            marker.addTo(this.markerLayer);
+        }
+    }
+    ngOnDestroy() {
+        this.cancelLeafletResize?.();
+        this.cancelLeafletResize = null;
+        this.map?.remove();
+        this.map = null;
+    }
+    bindHost = (() => {
+        afterNextRender(() => {
+            this.initMap();
+        });
+        effect(() => {
+            const mkrs = this.markers();
+            this.renderMarkers(mkrs);
+        });
+        effect(() => {
+            const lat = this.latitude();
+            const lng = this.longitude();
+            const zm = this.zoom();
+            if (this.map) {
+                this.map.setView([lat, lng], zm);
+            }
+        });
+    })();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmLeafletMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SceOsmLeafletMapComponent, isStandalone: true, selector: "sce-osm-leaflet-map", inputs: { latitude: { classPropertyName: "latitude", publicName: "latitude", isSignal: true, isRequired: false, transformFunction: null }, longitude: { classPropertyName: "longitude", publicName: "longitude", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mapClick: "mapClick", markerDragEnd: "markerDragEnd" }, host: { classAttribute: "sce-osm-leaflet-map" }, viewQueries: [{ propertyName: "mapEl", first: true, predicate: ["mapEl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div #mapEl class=\"mapRoot\"></div>\n", styles: ["@charset \"UTF-8\";:host.sce-osm-leaflet-map{display:block}.mapRoot{width:100%;height:100%;min-height:0;background:var(--color-neutral-200)}.mapRoot.mapRoot.leaflet-container{width:100%;height:100%;font-family:inherit}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmLeafletMapComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-osm-leaflet-map' }, selector: 'sce-osm-leaflet-map', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #mapEl class=\"mapRoot\"></div>\n", styles: ["@charset \"UTF-8\";:host.sce-osm-leaflet-map{display:block}.mapRoot{width:100%;height:100%;min-height:0;background:var(--color-neutral-200)}.mapRoot.mapRoot.leaflet-container{width:100%;height:100%;font-family:inherit}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}\n"] }]
+        }], propDecorators: { latitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "latitude", required: false }] }], longitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "longitude", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], mapClick: [{ type: i0.Output, args: ["mapClick"] }], markerDragEnd: [{ type: i0.Output, args: ["markerDragEnd"] }], mapEl: [{ type: i0.ViewChild, args: ['mapEl', { isSignal: true }] }] } });
+
+const TILE_URL$1 = MAP_CONFIG.tileUrl;
+const DEFAULT_CENTER = [24.7136, 46.6753];
+const DEFAULT_ZOOM = 6;
+const SINGLE_OFFICE_ZOOM = 12;
+function isPlottableOffice(office) {
+    return (Number.isFinite(office.latitude) &&
+        Number.isFinite(office.longitude) &&
+        Math.abs(office.latitude) <= 90 &&
+        Math.abs(office.longitude) <= 180);
+}
+function markerTooltipLabel(office, translate) {
+    if (!office.approximate) {
+        return office.name;
+    }
+    const suffix = translate?.instant('map.approximateLocation') ?? 'موقع تقريبي (مركز المدينة)';
+    return `${office.name}\n${suffix}`;
+}
+/** React: google-maps/osm-offices-map.tsx */
+class SceOsmOfficesMapComponent {
+    language = inject(LanguageService);
+    mapRoot;
+    translate = inject(TranslateService);
+    offices = input([], ...(ngDevMode ? [{ debugName: "offices" }] : /* istanbul ignore next */ []));
+    selectedOfficeId = input(...(ngDevMode ? [undefined, { debugName: "selectedOfficeId" }] : /* istanbul ignore next */ []));
+    showTooltip = input(true, ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    ariaLabelInput = input('', ...(ngDevMode ? [{ debugName: "ariaLabelInput" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        // Re-resolve the default label when the active locale changes.
+        this.language.translationsRevision();
+        return this.ariaLabelInput() || this.translate.instant('map.officesMap');
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    selectOffice = output();
+    ready = output();
+    mapError = output();
+    map = null;
+    markers = [];
+    markerByOfficeId = new Map();
+    mapReady = false;
+    disposed = false;
+    icon = null;
+    cancelLeafletResize = null;
+    ngAfterViewInit() {
+        void this.bootMap();
+    }
+    ngOnChanges(changes) {
+        if (changes['offices'] && this.mapReady) {
+            void this.syncMarkers();
+        }
+        if (changes['selectedOfficeId'] && this.mapReady && this.selectedOfficeId() != null) {
+            this.focusSelectedOffice(this.selectedOfficeId());
+        }
+    }
+    ngOnDestroy() {
+        this.disposed = true;
+        this.mapReady = false;
+        this.cancelLeafletResize?.();
+        this.cancelLeafletResize = null;
+        this.clearMarkers();
+        this.map?.remove();
+        this.map = null;
+        const el = this.mapRoot?.nativeElement;
+        if (el) {
+            delete el._leaflet_id;
+        }
+    }
+    async bootMap() {
+        const container = this.mapRoot?.nativeElement;
+        if (!container) {
+            return;
+        }
+        try {
+            const leafletModule = await import('leaflet');
+            // CJS/ESM interop: in the esbuild bundle the Leaflet API lands on .default, in dev it may not.
+            const L = (leafletModule.default ??
+                leafletModule);
+            if (this.disposed) {
+                return;
+            }
+            this.icon = createLeafletDefaultIcon(L);
+            const map = L.map(container, {
+                center: DEFAULT_CENTER,
+                zoom: DEFAULT_ZOOM,
+                scrollWheelZoom: true,
+                preferCanvas: false,
+                attributionControl: false,
+            });
+            L.tileLayer(TILE_URL$1, { attribution: '', maxZoom: MAP_CONFIG.maxZoom }).addTo(map);
+            this.map = map;
+            this.queueLeafletResize(map);
+            window.setTimeout(() => {
+                if (!this.disposed) {
+                    this.queueLeafletResize(map);
+                }
+            }, 400);
+            if (!this.disposed) {
+                this.mapReady = true;
+                this.ready.emit();
+                await this.syncMarkers();
+            }
+        }
+        catch {
+            if (!this.disposed) {
+                this.mapError.emit();
+            }
+        }
+    }
+    async syncMarkers() {
+        const map = this.map;
+        if (!map) {
+            return;
+        }
+        const leafletModule = await import('leaflet');
+        // CJS/ESM interop: in the esbuild bundle the Leaflet API lands on .default, in dev it may not.
+        const L = (leafletModule.default ??
+            leafletModule);
+        this.clearMarkers();
+        const plottable = this.offices().filter(isPlottableOffice);
+        if (plottable.length === 0) {
+            map.setView(DEFAULT_CENTER, DEFAULT_ZOOM);
+            this.queueLeafletResize(map);
+            return;
+        }
+        if (!this.icon) {
+            this.icon = createLeafletDefaultIcon(L);
+        }
+        const bounds = L.latLngBounds([]);
+        for (const office of plottable) {
+            const marker = L.marker([office.latitude, office.longitude], {
+                icon: this.icon || undefined,
+            }).addTo(map);
+            if (this.showTooltip()) {
+                marker.bindTooltip(markerTooltipLabel(office, this.translate), {
+                    direction: 'top',
+                    opacity: 0.95,
+                    sticky: true,
+                });
+            }
+            marker.on('click', () => this.selectOffice.emit(office.id));
+            this.markers.push(marker);
+            this.markerByOfficeId.set(office.id, marker);
+            bounds.extend([office.latitude, office.longitude]);
+        }
+        const focusMarker = () => {
+            if (!this.map || this.disposed) {
+                return;
+            }
+            if (plottable.length > 1) {
+                map.fitBounds(bounds, { padding: [48, 48], maxZoom: 12 });
+            }
+            else {
+                map.setView([plottable[0].latitude, plottable[0].longitude], SINGLE_OFFICE_ZOOM, {
+                    animate: false,
+                });
+                if (this.showTooltip()) {
+                    const marker = this.markerByOfficeId.get(plottable[0].id);
+                    marker?.openTooltip();
+                }
+            }
+            this.queueLeafletResize(map);
+        };
+        focusMarker();
+        window.setTimeout(() => {
+            if (!this.disposed) {
+                focusMarker();
+            }
+        }, 120);
+        window.setTimeout(() => {
+            if (!this.disposed) {
+                focusMarker();
+            }
+        }, 450);
+    }
+    queueLeafletResize(map) {
+        this.cancelLeafletResize?.();
+        this.cancelLeafletResize = scheduleLeafletResize(map);
+    }
+    focusSelectedOffice(officeId) {
+        const map = this.map;
+        if (!map) {
+            return;
+        }
+        const marker = this.markerByOfficeId.get(officeId);
+        if (!marker) {
+            return;
+        }
+        const latLng = marker.getLatLng();
+        map.setView(latLng, Math.max(map.getZoom(), SINGLE_OFFICE_ZOOM), { animate: true });
+        if (this.showTooltip()) {
+            marker.openTooltip();
+        }
+        this.queueLeafletResize(map);
+    }
+    clearMarkers() {
+        this.markers.forEach(marker => marker.remove());
+        this.markers = [];
+        this.markerByOfficeId.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmOfficesMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SceOsmOfficesMapComponent, isStandalone: true, selector: "sce-osm-offices-map", inputs: { offices: { classPropertyName: "offices", publicName: "offices", isSignal: true, isRequired: false, transformFunction: null }, selectedOfficeId: { classPropertyName: "selectedOfficeId", publicName: "selectedOfficeId", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelInput: { classPropertyName: "ariaLabelInput", publicName: "ariaLabelInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOffice: "selectOffice", ready: "ready", mapError: "mapError" }, host: { classAttribute: "sce-osm-offices-map" }, viewQueries: [{ propertyName: "mapRoot", first: true, predicate: ["mapRoot"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div #mapRoot class=\"mapRoot\" role=\"presentation\" [attr.aria-label]=\"ariaLabel()\"></div>\n", styles: ["@charset \"UTF-8\";.mapRoot{width:100%;height:100%;min-height:var(--size-600);z-index:0}.mapRoot.leaflet-container{width:100%;height:100%;min-height:var(--size-600);font-family:var(--font-family-arabic-primary),Arial,sans-serif}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}.popup{font-size:var(--font-size-md);font-weight:600;color:var(--text-text-primary-900);padding:var(--space-2) 0}.mapRoot .sce-map-popup{font-size:var(--font-size-md);font-weight:600;color:var(--text-text-primary-900);padding:var(--space-2) 0;font-family:var(--font-family-arabic-primary),Arial,sans-serif}.mapRoot .sce-map-popup-approx{margin-block-start:var(--space-4);font-size:var(--font-size-xs);font-weight:500;color:var(--text-text-secondary-700)}.mapRoot .leaflet-marker-pane{z-index:650}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmOfficesMapComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-osm-offices-map' }, selector: 'sce-osm-offices-map', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #mapRoot class=\"mapRoot\" role=\"presentation\" [attr.aria-label]=\"ariaLabel()\"></div>\n", styles: ["@charset \"UTF-8\";.mapRoot{width:100%;height:100%;min-height:var(--size-600);z-index:0}.mapRoot.leaflet-container{width:100%;height:100%;min-height:var(--size-600);font-family:var(--font-family-arabic-primary),Arial,sans-serif}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}.popup{font-size:var(--font-size-md);font-weight:600;color:var(--text-text-primary-900);padding:var(--space-2) 0}.mapRoot .sce-map-popup{font-size:var(--font-size-md);font-weight:600;color:var(--text-text-primary-900);padding:var(--space-2) 0;font-family:var(--font-family-arabic-primary),Arial,sans-serif}.mapRoot .sce-map-popup-approx{margin-block-start:var(--space-4);font-size:var(--font-size-xs);font-weight:500;color:var(--text-text-secondary-700)}.mapRoot .leaflet-marker-pane{z-index:650}\n"] }]
+        }], propDecorators: { mapRoot: [{
+                type: ViewChild,
+                args: ['mapRoot']
+            }], offices: [{ type: i0.Input, args: [{ isSignal: true, alias: "offices", required: false }] }], selectedOfficeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOfficeId", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelInput", required: false }] }], selectOffice: [{ type: i0.Output, args: ["selectOffice"] }], ready: [{ type: i0.Output, args: ["ready"] }], mapError: [{ type: i0.Output, args: ["mapError"] }] } });
+
+/** Loading placeholder in one of several shape variants, optionally repeated `count` times with a shortened last line. */
+class SceSkeleton {
+    /** Shape variant of the skeleton */
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Animation style */
+    animation = input('wave', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
+    /** Width -- accepts any CSS value (px, %, rem, etc.). Defaults to 100% for most variants. */
+    width = input('', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Height -- accepts any CSS value. Auto-calculated for text variant if not set. */
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Border radius -- override the variant's default radius */
+    borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    /** Number of skeleton lines to render (useful for paragraph placeholders) */
+    count = input(1, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Gap between repeated lines */
+    gap = input('12px', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Whether the last line in a multi-line skeleton should be shorter */
+    shrinkLastLine = input(true, ...(ngDevMode ? [{ debugName: "shrinkLastLine" }] : /* istanbul ignore next */ []));
+    /** Custom aspect ratio (e.g. '16/9', '1/1') -- sets height automatically via CSS */
+    aspectRatio = input('', ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** Whether this is a multi-line skeleton */
+    isMultiLine = computed(() => this.count() > 1, ...(ngDevMode ? [{ debugName: "isMultiLine" }] : /* istanbul ignore next */ []));
+    /** Lines derived from count, each carrying whether it is the shrinking last line */
+    lines = computed(() => {
+        const count = this.count();
+        const shrinksLast = this.shrinkLastLine() && this.isMultiLine();
+        return Array.from({ length: count }, (_, index) => ({
+            index,
+            isLast: shrinksLast && index === count - 1,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    /** Computed inline styles for the skeleton element */
+    skeletonStyles = computed(() => {
+        const styles = {};
+        const w = this.width();
+        const h = this.height();
+        const br = this.borderRadius();
+        const ar = this.aspectRatio();
+        if (w) {
+            styles['width'] = w;
+        }
+        if (h) {
+            styles['height'] = h;
+        }
+        if (br) {
+            styles['border-radius'] = br;
+        }
+        if (ar) {
+            styles['aspect-ratio'] = ar;
+            // Variants like `image`/`card` set a fixed height which would defeat the
+            // ratio — release it so the ratio drives the height unless one is given.
+            if (!h) {
+                styles['height'] = 'auto';
+            }
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "skeletonStyles" }] : /* istanbul ignore next */ []));
+    /** Computed container styles (gap for multi-line) */
+    containerStyles = computed(() => {
+        const styles = {};
+        if (this.isMultiLine()) {
+            styles['gap'] = this.gap();
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "containerStyles" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceSkeleton, isStandalone: true, selector: "sce-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, shrinkLastLine: { classPropertyName: "shrinkLastLine", publicName: "shrinkLastLine", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "sce-skeleton" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div\n  class=\"skeleton-container\"\n  [class.skeleton-container--multi]=\"isMultiLine()\"\n  [style]=\"containerStyles()\"\n  role=\"status\"\n  [attr.aria-label]=\"'ARIA.LOADING_CONTENT' | translate\"\n>\n  @for (line of lines(); track line.index) {\n    <span\n      class=\"skeleton\"\n      [class.skeleton--text]=\"variant() === 'text'\"\n      [class.skeleton--circular]=\"variant() === 'circular'\"\n      [class.skeleton--rectangular]=\"variant() === 'rectangular'\"\n      [class.skeleton--rounded]=\"variant() === 'rounded'\"\n      [class.skeleton--avatar]=\"variant() === 'avatar'\"\n      [class.skeleton--button]=\"variant() === 'button'\"\n      [class.skeleton--chip]=\"variant() === 'chip'\"\n      [class.skeleton--card]=\"variant() === 'card'\"\n      [class.skeleton--image]=\"variant() === 'image'\"\n      [class.skeleton--header]=\"variant() === 'header'\"\n      [class.skeleton--paragraph]=\"variant() === 'paragraph'\"\n      [class.skeleton--divider]=\"variant() === 'divider'\"\n      [class.skeleton--badge]=\"variant() === 'badge'\"\n      [class.skeleton--input]=\"variant() === 'input'\"\n      [class.skeleton--pulse]=\"animation() === 'pulse'\"\n      [class.skeleton--wave]=\"animation() === 'wave'\"\n      [class.skeleton--no-animation]=\"animation() === 'none'\"\n      [class.skeleton--last]=\"line.isLast\"\n      [style]=\"skeletonStyles()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <span class=\"sr-only\">{{ 'COMMON.LOADING' | translate }}</span>\n</div>\n", styles: [":host{display:block;--skeleton-bg: rgba(31, 42, 55, .08);--skeleton-wave-color-start: transparent;--skeleton-wave-color-mid-light: rgba(255, 255, 255, .35);--skeleton-wave-color-mid: rgba(255, 255, 255, .6);--skeleton-wave-color-mid-light-end: rgba(255, 255, 255, .35);--skeleton-wave-color-end: transparent;--skeleton-pulse-duration: 1.8s;--skeleton-pulse-opacity-min: .4;--skeleton-wave-duration: 2s;--skeleton-radius-xs: var(--radius-xs);--skeleton-radius-sm: var(--radius-sm);--skeleton-radius-md: var(--radius-sm);--skeleton-radius-lg: var(--radius-md);--skeleton-radius-full: 9999px;--skeleton-radius-circle: 50%;--skeleton-text-height: 1em;--skeleton-text-scale-y: .7;--skeleton-circular-size: 48px;--skeleton-rect-height: 120px;--skeleton-avatar-size: 40px;--skeleton-button-width: 120px;--skeleton-button-height: var(--space-40);--skeleton-chip-width: var(--space-72);--skeleton-chip-height: var(--space-28);--skeleton-card-height: 200px;--skeleton-image-height: 180px;--skeleton-header-width: 60%;--skeleton-header-height: 1.5em;--skeleton-paragraph-height: .9em;--skeleton-paragraph-scale-y: .8;--skeleton-divider-height: 1px;--skeleton-badge-width: var(--space-48);--skeleton-badge-height: var(--space-20);--skeleton-input-height: 44px;--skeleton-last-line-width: 65%}:host-context(html[data-theme=dark]){--skeleton-bg: rgba(255, 255, 255, .1);--skeleton-wave-color-mid-light: rgba(255, 255, 255, .06);--skeleton-wave-color-mid: rgba(255, 255, 255, .12);--skeleton-wave-color-mid-light-end: rgba(255, 255, 255, .06)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skeleton-container{display:contents}.skeleton-container--multi{display:flex;flex-direction:column}.skeleton{display:block;background-color:var(--skeleton-bg);overflow:hidden;position:relative}.skeleton--text{width:100%;height:var(--skeleton-text-height);border-radius:var(--skeleton-radius-xs);transform-origin:0 55%;transform:scaleY(var(--skeleton-text-scale-y))}.skeleton--circular{width:var(--skeleton-circular-size);height:var(--skeleton-circular-size);border-radius:var(--skeleton-radius-circle);flex-shrink:0}.skeleton--rectangular{width:100%;height:var(--skeleton-rect-height);border-radius:0}.skeleton--rounded{width:100%;height:var(--skeleton-rect-height);border-radius:var(--skeleton-radius-md)}.skeleton--avatar{width:var(--skeleton-avatar-size);height:var(--skeleton-avatar-size);border-radius:var(--skeleton-radius-circle);flex-shrink:0}.skeleton--button{width:var(--skeleton-button-width);height:var(--skeleton-button-height);border-radius:var(--skeleton-radius-sm);flex-shrink:0}.skeleton--chip{display:inline-block;width:var(--skeleton-chip-width);height:var(--skeleton-chip-height);border-radius:var(--skeleton-radius-full);flex-shrink:0}.skeleton--card{width:100%;height:var(--skeleton-card-height);border-radius:var(--skeleton-radius-lg)}.skeleton--image{width:100%;height:var(--skeleton-image-height);border-radius:var(--skeleton-radius-md)}.skeleton--header{width:var(--skeleton-header-width);height:var(--skeleton-header-height);border-radius:var(--skeleton-radius-xs)}.skeleton--paragraph{width:100%;height:var(--skeleton-paragraph-height);border-radius:var(--skeleton-radius-xs);transform-origin:0 55%;transform:scaleY(var(--skeleton-paragraph-scale-y))}.skeleton--divider{width:100%;height:var(--skeleton-divider-height);border-radius:0}.skeleton--badge{display:inline-block;width:var(--skeleton-badge-width);height:var(--skeleton-badge-height);border-radius:var(--skeleton-radius-xs);flex-shrink:0}.skeleton--input{width:100%;height:var(--skeleton-input-height);border-radius:var(--skeleton-radius-sm)}.skeleton--last{width:var(--skeleton-last-line-width)}.skeleton--pulse{animation:skeleton-pulse var(--skeleton-pulse-duration) ease-in-out infinite}.skeleton--wave:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,var(--skeleton-wave-color-start) 0%,var(--skeleton-wave-color-mid-light) 30%,var(--skeleton-wave-color-mid) 50%,var(--skeleton-wave-color-mid-light-end) 70%,var(--skeleton-wave-color-end) 100%);animation:skeleton-wave var(--skeleton-wave-duration) ease-in-out infinite}.skeleton--no-animation{animation:none}.skeleton--no-animation:after{display:none}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:var(--skeleton-pulse-opacity-min)}to{opacity:1}}@keyframes skeleton-wave{0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.skeleton--pulse{animation:none}.skeleton--wave:after{animation:none;display:none}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceSkeleton, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-skeleton' }, selector: 'sce-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslatePipe], template: "<div\n  class=\"skeleton-container\"\n  [class.skeleton-container--multi]=\"isMultiLine()\"\n  [style]=\"containerStyles()\"\n  role=\"status\"\n  [attr.aria-label]=\"'ARIA.LOADING_CONTENT' | translate\"\n>\n  @for (line of lines(); track line.index) {\n    <span\n      class=\"skeleton\"\n      [class.skeleton--text]=\"variant() === 'text'\"\n      [class.skeleton--circular]=\"variant() === 'circular'\"\n      [class.skeleton--rectangular]=\"variant() === 'rectangular'\"\n      [class.skeleton--rounded]=\"variant() === 'rounded'\"\n      [class.skeleton--avatar]=\"variant() === 'avatar'\"\n      [class.skeleton--button]=\"variant() === 'button'\"\n      [class.skeleton--chip]=\"variant() === 'chip'\"\n      [class.skeleton--card]=\"variant() === 'card'\"\n      [class.skeleton--image]=\"variant() === 'image'\"\n      [class.skeleton--header]=\"variant() === 'header'\"\n      [class.skeleton--paragraph]=\"variant() === 'paragraph'\"\n      [class.skeleton--divider]=\"variant() === 'divider'\"\n      [class.skeleton--badge]=\"variant() === 'badge'\"\n      [class.skeleton--input]=\"variant() === 'input'\"\n      [class.skeleton--pulse]=\"animation() === 'pulse'\"\n      [class.skeleton--wave]=\"animation() === 'wave'\"\n      [class.skeleton--no-animation]=\"animation() === 'none'\"\n      [class.skeleton--last]=\"line.isLast\"\n      [style]=\"skeletonStyles()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <span class=\"sr-only\">{{ 'COMMON.LOADING' | translate }}</span>\n</div>\n", styles: [":host{display:block;--skeleton-bg: rgba(31, 42, 55, .08);--skeleton-wave-color-start: transparent;--skeleton-wave-color-mid-light: rgba(255, 255, 255, .35);--skeleton-wave-color-mid: rgba(255, 255, 255, .6);--skeleton-wave-color-mid-light-end: rgba(255, 255, 255, .35);--skeleton-wave-color-end: transparent;--skeleton-pulse-duration: 1.8s;--skeleton-pulse-opacity-min: .4;--skeleton-wave-duration: 2s;--skeleton-radius-xs: var(--radius-xs);--skeleton-radius-sm: var(--radius-sm);--skeleton-radius-md: var(--radius-sm);--skeleton-radius-lg: var(--radius-md);--skeleton-radius-full: 9999px;--skeleton-radius-circle: 50%;--skeleton-text-height: 1em;--skeleton-text-scale-y: .7;--skeleton-circular-size: 48px;--skeleton-rect-height: 120px;--skeleton-avatar-size: 40px;--skeleton-button-width: 120px;--skeleton-button-height: var(--space-40);--skeleton-chip-width: var(--space-72);--skeleton-chip-height: var(--space-28);--skeleton-card-height: 200px;--skeleton-image-height: 180px;--skeleton-header-width: 60%;--skeleton-header-height: 1.5em;--skeleton-paragraph-height: .9em;--skeleton-paragraph-scale-y: .8;--skeleton-divider-height: 1px;--skeleton-badge-width: var(--space-48);--skeleton-badge-height: var(--space-20);--skeleton-input-height: 44px;--skeleton-last-line-width: 65%}:host-context(html[data-theme=dark]){--skeleton-bg: rgba(255, 255, 255, .1);--skeleton-wave-color-mid-light: rgba(255, 255, 255, .06);--skeleton-wave-color-mid: rgba(255, 255, 255, .12);--skeleton-wave-color-mid-light-end: rgba(255, 255, 255, .06)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skeleton-container{display:contents}.skeleton-container--multi{display:flex;flex-direction:column}.skeleton{display:block;background-color:var(--skeleton-bg);overflow:hidden;position:relative}.skeleton--text{width:100%;height:var(--skeleton-text-height);border-radius:var(--skeleton-radius-xs);transform-origin:0 55%;transform:scaleY(var(--skeleton-text-scale-y))}.skeleton--circular{width:var(--skeleton-circular-size);height:var(--skeleton-circular-size);border-radius:var(--skeleton-radius-circle);flex-shrink:0}.skeleton--rectangular{width:100%;height:var(--skeleton-rect-height);border-radius:0}.skeleton--rounded{width:100%;height:var(--skeleton-rect-height);border-radius:var(--skeleton-radius-md)}.skeleton--avatar{width:var(--skeleton-avatar-size);height:var(--skeleton-avatar-size);border-radius:var(--skeleton-radius-circle);flex-shrink:0}.skeleton--button{width:var(--skeleton-button-width);height:var(--skeleton-button-height);border-radius:var(--skeleton-radius-sm);flex-shrink:0}.skeleton--chip{display:inline-block;width:var(--skeleton-chip-width);height:var(--skeleton-chip-height);border-radius:var(--skeleton-radius-full);flex-shrink:0}.skeleton--card{width:100%;height:var(--skeleton-card-height);border-radius:var(--skeleton-radius-lg)}.skeleton--image{width:100%;height:var(--skeleton-image-height);border-radius:var(--skeleton-radius-md)}.skeleton--header{width:var(--skeleton-header-width);height:var(--skeleton-header-height);border-radius:var(--skeleton-radius-xs)}.skeleton--paragraph{width:100%;height:var(--skeleton-paragraph-height);border-radius:var(--skeleton-radius-xs);transform-origin:0 55%;transform:scaleY(var(--skeleton-paragraph-scale-y))}.skeleton--divider{width:100%;height:var(--skeleton-divider-height);border-radius:0}.skeleton--badge{display:inline-block;width:var(--skeleton-badge-width);height:var(--skeleton-badge-height);border-radius:var(--skeleton-radius-xs);flex-shrink:0}.skeleton--input{width:100%;height:var(--skeleton-input-height);border-radius:var(--skeleton-radius-sm)}.skeleton--last{width:var(--skeleton-last-line-width)}.skeleton--pulse{animation:skeleton-pulse var(--skeleton-pulse-duration) ease-in-out infinite}.skeleton--wave:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,var(--skeleton-wave-color-start) 0%,var(--skeleton-wave-color-mid-light) 30%,var(--skeleton-wave-color-mid) 50%,var(--skeleton-wave-color-mid-light-end) 70%,var(--skeleton-wave-color-end) 100%);animation:skeleton-wave var(--skeleton-wave-duration) ease-in-out infinite}.skeleton--no-animation{animation:none}.skeleton--no-animation:after{display:none}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:var(--skeleton-pulse-opacity-min)}to{opacity:1}}@keyframes skeleton-wave{0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.skeleton--pulse{animation:none}.skeleton--wave:after{animation:none;display:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], shrinkLastLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "shrinkLastLine", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
+
+/** 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. */
+class SceOsmLocationPickerComponent {
+    initialLat = input(isGeoLookupRestricted() ? JEDDAH_MAP_CENTER.lat : 24.7136, ...(ngDevMode ? [{ debugName: "initialLat" }] : /* istanbul ignore next */ []));
+    initialLng = input(isGeoLookupRestricted() ? JEDDAH_MAP_CENTER.lng : 46.6753, ...(ngDevMode ? [{ debugName: "initialLng" }] : /* istanbul ignore next */ []));
+    zoom = input(6, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    locale = input('ar', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locationSelect = output();
+    nominatim = inject(NominatimService);
+    mapValidation = inject(GeoMapPositionValidationService);
+    toast = inject(ToastService);
+    destroyRef = inject(DestroyRef);
+    searchQuery = '';
+    isSearching = signal(false, ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
+    currentLat = signal(isGeoLookupRestricted() ? JEDDAH_MAP_CENTER.lat : 24.7136, ...(ngDevMode ? [{ debugName: "currentLat" }] : /* istanbul ignore next */ []));
+    currentLng = signal(isGeoLookupRestricted() ? JEDDAH_MAP_CENTER.lng : 46.6753, ...(ngDevMode ? [{ debugName: "currentLng" }] : /* istanbul ignore next */ []));
+    selectedLocation = signal(null, ...(ngDevMode ? [{ debugName: "selectedLocation" }] : /* istanbul ignore next */ []));
+    selectedCoordsLabel = computed(() => {
+        const loc = this.selectedLocation();
+        return loc ? `${loc.lat.toFixed(6)}, ${loc.lng.toFixed(6)}` : '';
+    }, ...(ngDevMode ? [{ debugName: "selectedCoordsLabel" }] : /* istanbul ignore next */ []));
+    currentMarkers = signal([], ...(ngDevMode ? [{ debugName: "currentMarkers" }] : /* istanbul ignore next */ []));
+    onMapClick(coords) {
+        void this.validateAndPlacePin(coords.lat, coords.lng);
+    }
+    onMarkerDragEnd(event) {
+        void this.validateAndPlacePin(event.lat, event.lng);
+    }
+    async validateAndPlacePin(lat, lng) {
+        const validation = await this.mapValidation.validateMapPositionForGeoForms(lat, lng, this.locale());
+        if (!validation.ok) {
+            this.toast.warning('', mapPositionValidationMessage(this.locale(), validation.reason));
+            return false;
+        }
+        this.currentLat.set(lat);
+        this.currentLng.set(lng);
+        this.placePin(lat, lng);
+        return true;
+    }
+    placePin(lat, lng) {
+        const loc = { lat, lng };
+        this.selectedLocation.set(loc);
+        this.currentMarkers.set([{ lat, lng, draggable: true }]);
+        this.nominatim
+            .getDisplayAddress(lat, lng, this.locale())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: address => {
+                const updated = { lat, lng, address };
+                this.selectedLocation.set(updated);
+                this.locationSelect.emit(updated);
+            },
+            error: () => {
+                this.locationSelect.emit(loc);
+            },
+        });
+    }
+    onSearch() {
+        if (!this.searchQuery.trim()) {
+            return;
+        }
+        this.isSearching.set(true);
+        this.nominatim
+            .search(this.searchQuery, this.locale(), 1)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: results => {
+                if (results.length > 0) {
+                    const result = results[0];
+                    void this.validateAndPlacePin(result.lat, result.lng).finally(() => {
+                        this.isSearching.set(false);
+                    });
+                    return;
+                }
+                this.isSearching.set(false);
+            },
+            error: () => {
+                this.isSearching.set(false);
+            },
+        });
+    }
+    bindHost = (() => {
+        const center = resolveInitialCenter(String(this.initialLat()), String(this.initialLng()));
+        this.currentLat.set(center.lat);
+        this.currentLng.set(center.lng);
+    })();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmLocationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceOsmLocationPickerComponent, isStandalone: true, selector: "sce-osm-location-picker", inputs: { initialLat: { classPropertyName: "initialLat", publicName: "initialLat", isSignal: true, isRequired: false, transformFunction: null }, initialLng: { classPropertyName: "initialLng", publicName: "initialLng", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { locationSelect: "locationSelect" }, host: { classAttribute: "sce-osm-location-picker" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div>\n  <div class=\"searchRow\">\n    <input\n      class=\"searchInput\"\n      type=\"text\"\n      [placeholder]=\"'MAPS.SEARCH_PLACEHOLDER' | translate\"\n      [(ngModel)]=\"searchQuery\"\n      (keydown.enter)=\"onSearch()\"\n    />\n    <button type=\"button\" class=\"searchButton\" [disabled]=\"isSearching()\" (click)=\"onSearch()\">\n      @if (isSearching()) {\n        <sce-skeleton variant=\"rounded\" width=\"1.25rem\" height=\"1.25rem\" animation=\"wave\" aria-hidden=\"true\" />\n      } @else {\n        {{ 'MAPS.SEARCH' | translate }}\n      }\n    </button>\n  </div>\n  <p class=\"providerNote\">{{ 'MAPS.PROVIDER_NOTE' | translate }}</p>\n\n  <div style=\"height: 300px; margin-top: 0.75rem; border-radius: 0.75rem; overflow: hidden\">\n    <sce-osm-leaflet-map\n      [latitude]=\"currentLat()\"\n      [longitude]=\"currentLng()\"\n      [zoom]=\"zoom()\"\n      [markers]=\"currentMarkers()\"\n      [interactive]=\"true\"\n      (mapClick)=\"onMapClick($event)\"\n      (markerDragEnd)=\"onMarkerDragEnd($event)\"\n    />\n  </div>\n\n  @if (selectedLocation()) {\n    <p style=\"margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--color-text-secondary)\">\n      <span dir=\"ltr\">{{ selectedCoordsLabel() }}</span>\n      @if (selectedLocation()!.address) {\n        \u2014 {{ selectedLocation()!.address }}\n      }\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host.sce-osm-location-picker{display:block}.providerNote{margin:var(--space-4) 0 0;font-size:var(--font-size-xs);color:var(--color-neutral-500)}.searchRow{display:flex;gap:var(--space-8);align-items:stretch}.searchRow .searchInput{flex:1;min-width:0}.searchButton{flex-shrink:0;min-height:var(--space-44, var(--size-44));padding:0 1rem;border:0;border-radius:var(--radius-sm);background:var(--button-background-primary-bg-primary);color:var(--color-base-white);font-size:.9rem;font-weight:600;cursor:pointer}.searchButton:disabled{opacity:.55;cursor:not-allowed}.searchFeedback{margin:0;font-size:.8rem;color:var(--color-neutral-600)}.searchResults{margin:0;padding:0;list-style:none;max-height:var(--size-160);overflow:auto;border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm)}.searchResultButton{width:100%;padding:.65rem .85rem;border:0;border-block-end:1px solid var(--color-neutral-100);background:var(--color-base-white);text-align:start;font-size:.85rem;color:var(--text-text-primary-900);cursor:pointer}.searchResultButton:hover{background:var(--color-neutral-50)}.searchResults li:last-child .searchResultButton{border-block-end:0}.mapWrapper{position:relative;width:100%;height:var(--size-360);border-radius:var(--radius-lg);overflow:hidden}.inlineMapWrapper{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-neutral-200);background:var(--color-neutral-200)}.mapHost{position:absolute;inset:0;z-index:1}.mapHost .leaflet-container{width:100%;height:100%;font-family:inherit;background:var(--color-neutral-200)}.mapHost .leaflet-container img.leaflet-tile.leaflet-tile,.mapHost .leaflet-container img.leaflet-marker-icon.leaflet-marker-icon,.mapHost .leaflet-container img.leaflet-marker-shadow.leaflet-marker-shadow{max-width:none;max-height:none;width:auto;height:auto}.mapHost .leaflet-pane,.mapHost .leaflet-tile-pane,.mapHost .leaflet-overlay-pane{z-index:auto}.mapLoadingOverlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-300) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:mapLoadingShimmer 1.2s ease-in-out infinite}.inlineMapShell{position:relative;width:100%}.fullscreenButton{position:absolute;top:.65rem;inset-inline-start:.65rem;z-index:1001;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:2.25rem;height:2.25rem;padding:0 .55rem;border:0;border-radius:var(--radius-sm);background:#fffffff2;color:var(--text-text-primary-900);box-shadow:0 2px 10px #0000002e;cursor:pointer;pointer-events:auto}.fullscreenButton:hover{background:var(--color-base-white)}.fullscreenButton:focus-visible{outline:2px solid var(--button-background-primary-bg-primary);outline-offset:2px}.fullscreenButtonLabel{font-size:var(--font-size-xs);font-weight:600;line-height:1}.expandedMapWrapper{position:relative;width:100%;height:min(70vb,var(--size-520));border-radius:var(--radius-lg);overflow:hidden}@keyframes mapLoadingShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SceSkeleton, selector: "sce-skeleton", inputs: ["variant", "animation", "width", "height", "borderRadius", "count", "gap", "shrinkLastLine", "aspectRatio"] }, { kind: "component", type: SceOsmLeafletMapComponent, selector: "sce-osm-leaflet-map", inputs: ["latitude", "longitude", "zoom", "markers", "interactive"], outputs: ["mapClick", "markerDragEnd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOsmLocationPickerComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-osm-location-picker' }, selector: 'sce-osm-location-picker', standalone: true, imports: [FormsModule, TranslatePipe, SceSkeleton, SceOsmLeafletMapComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"searchRow\">\n    <input\n      class=\"searchInput\"\n      type=\"text\"\n      [placeholder]=\"'MAPS.SEARCH_PLACEHOLDER' | translate\"\n      [(ngModel)]=\"searchQuery\"\n      (keydown.enter)=\"onSearch()\"\n    />\n    <button type=\"button\" class=\"searchButton\" [disabled]=\"isSearching()\" (click)=\"onSearch()\">\n      @if (isSearching()) {\n        <sce-skeleton variant=\"rounded\" width=\"1.25rem\" height=\"1.25rem\" animation=\"wave\" aria-hidden=\"true\" />\n      } @else {\n        {{ 'MAPS.SEARCH' | translate }}\n      }\n    </button>\n  </div>\n  <p class=\"providerNote\">{{ 'MAPS.PROVIDER_NOTE' | translate }}</p>\n\n  <div style=\"height: 300px; margin-top: 0.75rem; border-radius: 0.75rem; overflow: hidden\">\n    <sce-osm-leaflet-map\n      [latitude]=\"currentLat()\"\n      [longitude]=\"currentLng()\"\n      [zoom]=\"zoom()\"\n      [markers]=\"currentMarkers()\"\n      [interactive]=\"true\"\n      (mapClick)=\"onMapClick($event)\"\n      (markerDragEnd)=\"onMarkerDragEnd($event)\"\n    />\n  </div>\n\n  @if (selectedLocation()) {\n    <p style=\"margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--color-text-secondary)\">\n      <span dir=\"ltr\">{{ selectedCoordsLabel() }}</span>\n      @if (selectedLocation()!.address) {\n        \u2014 {{ selectedLocation()!.address }}\n      }\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host.sce-osm-location-picker{display:block}.providerNote{margin:var(--space-4) 0 0;font-size:var(--font-size-xs);color:var(--color-neutral-500)}.searchRow{display:flex;gap:var(--space-8);align-items:stretch}.searchRow .searchInput{flex:1;min-width:0}.searchButton{flex-shrink:0;min-height:var(--space-44, var(--size-44));padding:0 1rem;border:0;border-radius:var(--radius-sm);background:var(--button-background-primary-bg-primary);color:var(--color-base-white);font-size:.9rem;font-weight:600;cursor:pointer}.searchButton:disabled{opacity:.55;cursor:not-allowed}.searchFeedback{margin:0;font-size:.8rem;color:var(--color-neutral-600)}.searchResults{margin:0;padding:0;list-style:none;max-height:var(--size-160);overflow:auto;border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm)}.searchResultButton{width:100%;padding:.65rem .85rem;border:0;border-block-end:1px solid var(--color-neutral-100);background:var(--color-base-white);text-align:start;font-size:.85rem;color:var(--text-text-primary-900);cursor:pointer}.searchResultButton:hover{background:var(--color-neutral-50)}.searchResults li:last-child .searchResultButton{border-block-end:0}.mapWrapper{position:relative;width:100%;height:var(--size-360);border-radius:var(--radius-lg);overflow:hidden}.inlineMapWrapper{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-neutral-200);background:var(--color-neutral-200)}.mapHost{position:absolute;inset:0;z-index:1}.mapHost .leaflet-container{width:100%;height:100%;font-family:inherit;background:var(--color-neutral-200)}.mapHost .leaflet-container img.leaflet-tile.leaflet-tile,.mapHost .leaflet-container img.leaflet-marker-icon.leaflet-marker-icon,.mapHost .leaflet-container img.leaflet-marker-shadow.leaflet-marker-shadow{max-width:none;max-height:none;width:auto;height:auto}.mapHost .leaflet-pane,.mapHost .leaflet-tile-pane,.mapHost .leaflet-overlay-pane{z-index:auto}.mapLoadingOverlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-300) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:mapLoadingShimmer 1.2s ease-in-out infinite}.inlineMapShell{position:relative;width:100%}.fullscreenButton{position:absolute;top:.65rem;inset-inline-start:.65rem;z-index:1001;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:2.25rem;height:2.25rem;padding:0 .55rem;border:0;border-radius:var(--radius-sm);background:#fffffff2;color:var(--text-text-primary-900);box-shadow:0 2px 10px #0000002e;cursor:pointer;pointer-events:auto}.fullscreenButton:hover{background:var(--color-base-white)}.fullscreenButton:focus-visible{outline:2px solid var(--button-background-primary-bg-primary);outline-offset:2px}.fullscreenButtonLabel{font-size:var(--font-size-xs);font-weight:600;line-height:1}.expandedMapWrapper{position:relative;width:100%;height:min(70vb,var(--size-520));border-radius:var(--radius-lg);overflow:hidden}@keyframes mapLoadingShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+        }], propDecorators: { initialLat: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLat", required: false }] }], initialLng: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLng", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], locationSelect: [{ type: i0.Output, args: ["locationSelect"] }] } });
+
+const TILE_URL = MAP_CONFIG.tileUrl;
+function hasValidCoordinates(lat, lng) {
+    return (typeof lat === 'number' &&
+        typeof lng === 'number' &&
+        Number.isFinite(lat) &&
+        Number.isFinite(lng) &&
+        Math.abs(lat) <= 90 &&
+        Math.abs(lng) <= 180 &&
+        !(lat === 0 && lng === 0));
+}
+function buildGoogleEmbedUrl(lat, lng, address) {
+    if (hasValidCoordinates(lat, lng)) {
+        return `https://www.google.com/maps?q=${lat},${lng}&z=15&output=embed`;
+    }
+    const query = address?.trim();
+    if (query) {
+        return `https://www.google.com/maps?q=${encodeURIComponent(query)}&z=14&output=embed`;
+    }
+    return null;
+}
+/** 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. */
+class SceOfficeLocationMapComponent {
+    sanitizer = inject(DomSanitizer);
+    latitude = input(...(ngDevMode ? [undefined, { debugName: "latitude" }] : /* istanbul ignore next */ []));
+    longitude = input(...(ngDevMode ? [undefined, { debugName: "longitude" }] : /* istanbul ignore next */ []));
+    address = input(...(ngDevMode ? [undefined, { debugName: "address" }] : /* istanbul ignore next */ []));
+    emptyLabel = input(...(ngDevMode ? [undefined, { debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    mapContainer;
+    map = null;
+    cancelLeafletResize = null;
+    hasCoords = computed(() => hasValidCoordinates(this.latitude(), this.longitude()), ...(ngDevMode ? [{ debugName: "hasCoords" }] : /* istanbul ignore next */ []));
+    googleEmbedUrl = computed(() => {
+        const url = buildGoogleEmbedUrl(this.latitude(), this.longitude(), this.address());
+        return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : null;
+    }, ...(ngDevMode ? [{ debugName: "googleEmbedUrl" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        if (this.hasCoords() && this.mapContainer) {
+            void this.initLeaflet();
+        }
+    }
+    ngOnDestroy() {
+        this.cancelLeafletResize?.();
+        this.cancelLeafletResize = null;
+        if (this.map && typeof this.map.remove === 'function') {
+            this.map.remove();
+        }
+    }
+    async initLeaflet() {
+        const container = this.mapContainer?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const leafletModule = await import('leaflet');
+        // CJS/ESM interop: in the esbuild bundle the Leaflet API lands on .default, in dev it may not.
+        const L = (leafletModule.default ??
+            leafletModule);
+        if (!this.latitude() || !this.longitude()) {
+            return;
+        }
+        const lat = this.latitude();
+        const lng = this.longitude();
+        const map = L.map(container, {
+            center: [lat, lng],
+            zoom: 14,
+            scrollWheelZoom: false,
+            dragging: true,
+            zoomControl: true,
+            attributionControl: false,
+        });
+        L.tileLayer(TILE_URL, { attribution: '', maxZoom: MAP_CONFIG.maxZoom }).addTo(map);
+        L.marker([lat, lng], { icon: createLeafletDefaultIcon(L) }).addTo(map);
+        this.map = map;
+        this.cancelLeafletResize = scheduleLeafletResize(map);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOfficeLocationMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceOfficeLocationMapComponent, isStandalone: true, selector: "sce-office-location-map", inputs: { latitude: { classPropertyName: "latitude", publicName: "latitude", isSignal: true, isRequired: false, transformFunction: null }, longitude: { classPropertyName: "longitude", publicName: "longitude", isSignal: true, isRequired: false, transformFunction: null }, address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "sce-office-location-map" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "@if (hasCoords()) {\n  <div class=\"mapShell\">\n    <div #mapContainer class=\"mapRoot\" role=\"presentation\"></div>\n  </div>\n} @else if (googleEmbedUrl()) {\n  <div class=\"mapShell\">\n    <iframe\n      [title]=\"address()?.trim() || ('map.officeLocation' | translate)\"\n      [src]=\"googleEmbedUrl()\"\n      class=\"mapFrame\"\n      loading=\"lazy\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n      allowfullscreen\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"mapShell mapFallback\">\n    {{ emptyLabel() || ('common.notSpecified' | translate) }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.mapShell{width:100%;overflow:hidden;border-radius:var(--radius-lg);background:var(--color-neutral-200)}.mapFrame{display:block;width:100%;height:var(--size-220);border:0}.mapRoot{width:100%;height:var(--size-220);min-height:var(--size-220);background:var(--color-neutral-200)}.mapRoot.mapRoot.leaflet-container{width:100%;height:var(--size-220);font-family:inherit}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}.mapFallback{display:flex;align-items:center;justify-content:center;min-height:var(--size-220);padding:var(--space-16);text-align:center;font-family:var(--font-family-arabic-primary);font-size:var(--font-size-md);color:var(--text-text-secondary-700)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceOfficeLocationMapComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-office-location-map' }, selector: 'sce-office-location-map', standalone: true, imports: [TranslatePipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasCoords()) {\n  <div class=\"mapShell\">\n    <div #mapContainer class=\"mapRoot\" role=\"presentation\"></div>\n  </div>\n} @else if (googleEmbedUrl()) {\n  <div class=\"mapShell\">\n    <iframe\n      [title]=\"address()?.trim() || ('map.officeLocation' | translate)\"\n      [src]=\"googleEmbedUrl()\"\n      class=\"mapFrame\"\n      loading=\"lazy\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n      allowfullscreen\n    ></iframe>\n  </div>\n} @else {\n  <div class=\"mapShell mapFallback\">\n    {{ emptyLabel() || ('common.notSpecified' | translate) }}\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.mapShell{width:100%;overflow:hidden;border-radius:var(--radius-lg);background:var(--color-neutral-200)}.mapFrame{display:block;width:100%;height:var(--size-220);border:0}.mapRoot{width:100%;height:var(--size-220);min-height:var(--size-220);background:var(--color-neutral-200)}.mapRoot.mapRoot.leaflet-container{width:100%;height:var(--size-220);font-family:inherit}.mapRoot.mapRoot img.leaflet-tile,.mapRoot.mapRoot img.leaflet-marker-icon,.mapRoot.mapRoot img.leaflet-marker-shadow{max-width:none;max-height:none}.mapRoot.mapRoot .leaflet-control-attribution,.mapRoot.mapRoot .leaflet-control-container.leaflet-bottom{display:none}.mapRoot .leaflet-pane,.mapRoot .leaflet-map-pane,.mapRoot .leaflet-tile-pane{width:100%;height:100%}.mapFallback{display:flex;align-items:center;justify-content:center;min-height:var(--size-220);padding:var(--space-16);text-align:center;font-family:var(--font-family-arabic-primary);font-size:var(--font-size-md);color:var(--text-text-secondary-700)}\n"] }]
+        }], propDecorators: { latitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "latitude", required: false }] }], longitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "longitude", required: false }] }], address: [{ type: i0.Input, args: [{ isSignal: true, alias: "address", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer']
+            }] } });
+
+/** Titled card framing the OSM map of branch/office locations. */
+class SceStoreLocationsComponent {
+    titleKey = input('storeLocations.title', ...(ngDevMode ? [{ debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    locations = input([], ...(ngDevMode ? [{ debugName: "locations" }] : /* istanbul ignore next */ []));
+    selectedLocationId = input(...(ngDevMode ? [undefined, { debugName: "selectedLocationId" }] : /* istanbul ignore next */ []));
+    /** Map viewport height, in px. */
+    height = input(400, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    locationSelect = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceStoreLocationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceStoreLocationsComponent, isStandalone: true, selector: "sce-store-locations", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, locations: { classPropertyName: "locations", publicName: "locations", isSignal: true, isRequired: false, transformFunction: null }, selectedLocationId: { classPropertyName: "selectedLocationId", publicName: "selectedLocationId", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { locationSelect: "locationSelect" }, host: { classAttribute: "sce-store-locations" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "@if (showHeader()) {\n  <header class=\"sce-store-locations__header\">\n    <h3 class=\"sce-store-locations__title\">{{ titleKey() | translate }}</h3>\n  </header>\n}\n\n<div class=\"sce-store-locations__map\" [style.block-size.px]=\"height()\">\n  <sce-osm-offices-map\n    [offices]=\"locations()\"\n    [selectedOfficeId]=\"selectedLocationId()\"\n    [ariaLabelInput]=\"titleKey() | translate\"\n    (selectOffice)=\"locationSelect.emit($event)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;border:var(--border-width-1) solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-surface-primary)}.sce-store-locations__header{padding:var(--space-16) var(--space-20);border-block-end:var(--border-width-1) solid var(--color-border-light)}.sce-store-locations__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--color-text-primary);text-align:start}.sce-store-locations__map{position:relative;inline-size:100%}.sce-store-locations__map sce-osm-offices-map{display:block;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "component", type: SceOsmOfficesMapComponent, selector: "sce-osm-offices-map", inputs: ["offices", "selectedOfficeId", "showTooltip", "ariaLabelInput"], outputs: ["selectOffice", "ready", "mapError"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceStoreLocationsComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], selector: 'sce-store-locations', standalone: true, imports: [TranslatePipe, SceOsmOfficesMapComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'sce-store-locations' }, template: "@if (showHeader()) {\n  <header class=\"sce-store-locations__header\">\n    <h3 class=\"sce-store-locations__title\">{{ titleKey() | translate }}</h3>\n  </header>\n}\n\n<div class=\"sce-store-locations__map\" [style.block-size.px]=\"height()\">\n  <sce-osm-offices-map\n    [offices]=\"locations()\"\n    [selectedOfficeId]=\"selectedLocationId()\"\n    [ariaLabelInput]=\"titleKey() | translate\"\n    (selectOffice)=\"locationSelect.emit($event)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;border:var(--border-width-1) solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-surface-primary)}.sce-store-locations__header{padding:var(--space-16) var(--space-20);border-block-end:var(--border-width-1) solid var(--color-border-light)}.sce-store-locations__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--color-text-primary);text-align:start}.sce-store-locations__map{position:relative;inline-size:100%}.sce-store-locations__map sce-osm-offices-map{display:block;inline-size:100%;block-size:100%}\n"] }]
+        }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], locations: [{ type: i0.Input, args: [{ isSignal: true, alias: "locations", required: false }] }], selectedLocationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLocationId", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locationSelect: [{ type: i0.Output, args: ["locationSelect"] }] } });
+
+/** Shared form-field wrapper that renders the label, required marker, projected control, help text and error message for the other sce field components; `id` and `label` are required. */
+class SceFieldComponent {
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Hides the label visually while leaving it in the accessibility tree, for controls whose
+     * surroundings already name them — a chat composer, a cell inside a labelled table column, or a
+     * field sitting under its own section heading. It is never a licence to ship an unnamed control:
+     * `label` stays required precisely so the accessible name cannot be dropped.
+     */
+    hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    helpText = input(...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    labelClassName = input(...(ngDevMode ? [undefined, { debugName: "labelClassName" }] : /* istanbul ignore next */ []));
+    fieldClassName = input(...(ngDevMode ? [undefined, { debugName: "fieldClassName" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => {
+        const classes = ['sce-field'];
+        if (this.fieldClassName()) {
+            classes.push(this.fieldClassName());
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => {
+        const classes = ['sce-field__label'];
+        if (this.error()) {
+            classes.push('sce-field__label--invalid');
+        }
+        if (this.hideLabel()) {
+            classes.push('sce-field__label--hidden');
+        }
+        if (this.labelClassName()) {
+            classes.push(this.labelClassName());
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceFieldComponent, isStandalone: true, selector: "sce-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, labelClassName: { classPropertyName: "labelClassName", publicName: "labelClassName", isSignal: true, isRequired: false, transformFunction: null }, fieldClassName: { classPropertyName: "fieldClassName", publicName: "fieldClassName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "sce-field-host" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <label [attr.id]=\"id() + '-label'\" [attr.for]=\"id()\" [class]=\"labelClasses()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"sce-field__asterisk\" aria-hidden=\"true\"> *</span>\n    }\n  </label>\n  <ng-content />\n  @if (error()) {\n    <!-- id lets the paired control reference this text via aria-describedby. -->\n    <div role=\"alert\" class=\"sce-field__error\" [attr.id]=\"id() + '-error'\">{{ error() }}</div>\n  }\n  @if (helpText()) {\n    <div class=\"sce-field__help\">{{ helpText() }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.sce-field,sce-field{display:flex;flex-direction:column;gap:var(--space-xs, var(--space-8));min-width:0;width:100%}.sce-field__label{display:flex;align-items:baseline;gap:var(--space-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--Form-field-text-label, var(--color-text-default))}.sce-field__label--invalid{color:var(--text-text-error-primary)}.sce-field__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.sce-field__asterisk{color:var(--text-text-error-primary)}.sce-field__error{font-size:var(--font-size-xs);color:var(--text-text-error-primary);overflow-wrap:anywhere}.sce-field__help{font-size:var(--font-size-2xs);color:var(--color-muted)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceFieldComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], selector: 'sce-field', standalone: true, host: { class: 'sce-field-host' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses()\">\n  <label [attr.id]=\"id() + '-label'\" [attr.for]=\"id()\" [class]=\"labelClasses()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"sce-field__asterisk\" aria-hidden=\"true\"> *</span>\n    }\n  </label>\n  <ng-content />\n  @if (error()) {\n    <!-- id lets the paired control reference this text via aria-describedby. -->\n    <div role=\"alert\" class=\"sce-field__error\" [attr.id]=\"id() + '-error'\">{{ error() }}</div>\n  }\n  @if (helpText()) {\n    <div class=\"sce-field__help\">{{ helpText() }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.sce-field,sce-field{display:flex;flex-direction:column;gap:var(--space-xs, var(--space-8));min-width:0;width:100%}.sce-field__label{display:flex;align-items:baseline;gap:var(--space-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--Form-field-text-label, var(--color-text-default))}.sce-field__label--invalid{color:var(--text-text-error-primary)}.sce-field__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.sce-field__asterisk{color:var(--text-text-error-primary)}.sce-field__error{font-size:var(--font-size-xs);color:var(--text-text-error-primary);overflow-wrap:anywhere}.sce-field__help{font-size:var(--font-size-2xs);color:var(--color-muted)}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], labelClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClassName", required: false }] }], fieldClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClassName", required: false }] }] } });
+
+/**
+ * Thin, project-native wrapper around Hugeicons' `hugeicons-icon`.
+ *
+ * Renders an inline SVG synchronously from icon data imported out of
+ * `@hugeicons/core-free-icons` — no HTTP fetch, SSR-safe, and tree-shakeable
+ * (import only the icons you use, e.g. `import { Search01Icon } from '@hugeicons/core-free-icons'`).
+ *
+ * Prefer this wrapper over `hugeicons-icon` directly so project defaults
+ * (stroke width, `currentColor`, accessibility, RTL mirroring) stay consistent.
+ *
+ * @example
+ * ```html
+ * <!-- decorative -->
+ * <sce-hugeicon [icon]="Search01Icon" [size]="20" />
+ *
+ * <!-- meaningful (icon-only button) -->
+ * <button type="button" [attr.aria-label]="'COMMON.DELETE' | translate">
+ *   <sce-hugeicon [icon]="Delete02Icon" [label]="'COMMON.DELETE' | translate" />
+ * </button>
+ *
+ * <!-- directional glyph mirrored in Arabic -->
+ * <sce-hugeicon [icon]="ArrowRight01Icon" [flipRtl]="true" />
+ * ```
+ */
+class SceHugeicon {
+    /** Icon data to render. Import the constant from `@hugeicons/core-free-icons` (e.g. `Search01Icon`). */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Alternate icon revealed when `showAlt` is true — swap without remounting to keep sizing stable. */
+    altIcon = input(null, ...(ngDevMode ? [{ debugName: "altIcon" }] : /* istanbul ignore next */ []));
+    /** Show `altIcon` instead of `icon` (e.g. filled/active state, theme toggles). */
+    showAlt = input(false, ...(ngDevMode ? [{ debugName: "showAlt" }] : /* istanbul ignore next */ []));
+    /** Square size in pixels. */
+    size = input(24, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Any CSS colour. Defaults to `currentColor` so the glyph inherits the surrounding text colour. */
+    color = input('currentColor', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Stroke thickness for outline glyphs. Keep consistent across a surface. */
+    strokeWidth = input(1.5, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Keep the stroke visually constant when the icon is scaled up/down, instead of scaling with it
+     * (mirrors Hugeicons' `absoluteStrokeWidth`). Useful for very large or very small glyphs.
+     */
+    absoluteStrokeWidth = input(false, ...(ngDevMode ? [{ debugName: "absoluteStrokeWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Continuously rotate the glyph — for spinner/loading affordances. Honours
+     * `prefers-reduced-motion` (the animation is disabled when the user asks for reduced motion).
+     */
+    spin = input(false, ...(ngDevMode ? [{ debugName: "spin" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name. Set for a *meaningful* icon (renders `role="img"` + `aria-label`);
+     * leave unset for a *decorative* icon (rendered `aria-hidden`, so screen readers skip it).
+     */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Mirror horizontally under RTL. Use only for directional glyphs (arrows, chevrons, carets). */
+    flipRtl = input(false, ...(ngDevMode ? [{ debugName: "flipRtl" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceHugeicon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SceHugeicon, isStandalone: true, selector: "sce-hugeicon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, altIcon: { classPropertyName: "altIcon", publicName: "altIcon", isSignal: true, isRequired: false, transformFunction: null }, showAlt: { classPropertyName: "showAlt", publicName: "showAlt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, absoluteStrokeWidth: { classPropertyName: "absoluteStrokeWidth", publicName: "absoluteStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, flipRtl: { classPropertyName: "flipRtl", publicName: "flipRtl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sce-hugeicon--flip-rtl": "flipRtl()", "class.sce-hugeicon--spin": "spin()", "attr.role": "label() ? 'img' : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : \"true\"" }, classAttribute: "sce-hugeicon" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<span class=\"sce-hugeicon__glyph\" [class.sce-hugeicon__glyph--flip]=\"flipRtl()\">\n  <hugeicons-icon\n    [icon]=\"icon()\"\n    [altIcon]=\"altIcon() ?? icon()\"\n    [showAlt]=\"showAlt()\"\n    [size]=\"size()\"\n    [color]=\"color()\"\n    [strokeWidth]=\"strokeWidth()\"\n    [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n  />\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit}.sce-hugeicon__glyph{display:inline-flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .sce-hugeicon__glyph--flip{transform:scaleX(-1)}@keyframes sce-hugeicon-spin{to{transform:rotate(360deg)}}:host(.sce-hugeicon--spin) .sce-hugeicon__glyph{animation:sce-hugeicon-spin 1s linear infinite}@media(prefers-reduced-motion:reduce){:host(.sce-hugeicon--spin) .sce-hugeicon__glyph{animation:none}}\n"], dependencies: [{ kind: "component", type: HugeiconsIconComponent, selector: "hugeicons-icon", inputs: ["size", "strokeWidth", "absoluteStrokeWidth", "icon", "altIcon", "color", "class", "showAlt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceHugeicon, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], selector: 'sce-hugeicon', standalone: true, imports: [HugeiconsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'sce-hugeicon',
+                        '[class.sce-hugeicon--flip-rtl]': 'flipRtl()',
+                        '[class.sce-hugeicon--spin]': 'spin()',
+                        '[attr.role]': "label() ? 'img' : null",
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': 'label() ? null : "true"',
+                    }, template: "<span class=\"sce-hugeicon__glyph\" [class.sce-hugeicon__glyph--flip]=\"flipRtl()\">\n  <hugeicons-icon\n    [icon]=\"icon()\"\n    [altIcon]=\"altIcon() ?? icon()\"\n    [showAlt]=\"showAlt()\"\n    [size]=\"size()\"\n    [color]=\"color()\"\n    [strokeWidth]=\"strokeWidth()\"\n    [absoluteStrokeWidth]=\"absoluteStrokeWidth()\"\n  />\n</span>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit}.sce-hugeicon__glyph{display:inline-flex;align-items:center;justify-content:center}:host-context([dir=rtl]) .sce-hugeicon__glyph--flip{transform:scaleX(-1)}@keyframes sce-hugeicon-spin{to{transform:rotate(360deg)}}:host(.sce-hugeicon--spin) .sce-hugeicon__glyph{animation:sce-hugeicon-spin 1s linear infinite}@media(prefers-reduced-motion:reduce){:host(.sce-hugeicon--spin) .sce-hugeicon__glyph{animation:none}}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], altIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "altIcon", required: false }] }], showAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], absoluteStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "absoluteStrokeWidth", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], flipRtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipRtl", required: false }] }] } });
+
+/** Every `SceSelectFieldVariant`, in gallery order. */
+const SCE_SELECT_FIELD_VARIANTS = [
+    'default',
+    'outlined',
+    'filled',
+    'underline',
+    'soft',
+    'bordered',
+    'elevated',
+    'compact',
+    'minimal',
+    'pill',
+    'addon',
+];
+class SceSelectFieldComponent {
+    dropdownIcon = ArrowDown01Icon;
+    /** Visual treatment. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    mirrorLabelAsPlaceholder = inject(SCE_MIRROR_LABEL_AS_PLACEHOLDER, {
+        optional: true,
+    });
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    group = input(false, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    optionGroupLabel = input('label', ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
+    optionGroupChildren = input('items', ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    helpText = input(...(ngDevMode ? [undefined, { debugName: "helpText" }] : /* istanbul ignore next */ []));
+    error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /**
+     * Caps characters in the dropdown filter/search box (PrimeNG has no built-in
+     * `maxlength` on that input). Applied when the overlay opens.
+     */
+    filterMaxLength = input(...(ngDevMode ? [undefined, { debugName: "filterMaxLength" }] : /* istanbul ignore next */ []));
+    showClear = input(false, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit text direction. Default `null` infers from the content/document
+     * locale — a hardcoded `'rtl'` default rendered every unbound select RTL on
+     * English pages (and flipped direction when a disabled select became enabled).
+     */
+    dir = input(null, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    validationMode = input('onBlur', ...(ngDevMode ? [{ debugName: "validationMode" }] : /* istanbul ignore next */ []));
+    validate = input(...(ngDevMode ? [undefined, { debugName: "validate" }] : /* istanbul ignore next */ []));
+    validationMessages = input({}, ...(ngDevMode ? [{ debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    fieldClassName = input('', ...(ngDevMode ? [{ debugName: "fieldClassName" }] : /* istanbul ignore next */ []));
+    labelClassName = input('', ...(ngDevMode ? [{ debugName: "labelClassName" }] : /* istanbul ignore next */ []));
+    inputClassName = input('', ...(ngDevMode ? [{ debugName: "inputClassName" }] : /* istanbul ignore next */ []));
+    panelClassName = input('', ...(ngDevMode ? [{ debugName: "panelClassName" }] : /* istanbul ignore next */ []));
+    /** When true, hides the trigger border. Default false so `.p-select` keeps a visible border. */
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
+    filterPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    showError = input(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    /** Optional wrapper class. Do not use `root` — file-upload and other None-encap components leak a global `.root`. */
+    containerClassName = input('', ...(ngDevMode ? [{ debugName: "containerClassName" }] : /* istanbul ignore next */ []));
+    /**
+     * Change this value to clear the field's interaction state (touched / blurred).
+     * Bump it when a parent form resets programmatically, so a cleared required
+     * field doesn't instantly show its "required" error next to a success banner.
+     */
+    resetToken = input(undefined, ...(ngDevMode ? [{ debugName: "resetToken" }] : /* istanbul ignore next */ []));
+    /** True after any user value change. Prevents required errors on open-and-close. */
+    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** True after any interaction (change or blur). Drives `'onTouched'` / `'touched'` mode. */
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    /** True only after the first blur. Drives the pure `'onBlur'` mode. */
+    blurredOnce = signal(false, ...(ngDevMode ? [{ debugName: "blurredOnce" }] : /* istanbul ignore next */ []));
+    clearInteractionOnReset = effect(() => {
+        this.resetToken();
+        this.dirty.set(false);
+        this.touched.set(false);
+        this.blurredOnce.set(false);
+    }, ...(ngDevMode ? [{ debugName: "clearInteractionOnReset" }] : /* istanbul ignore next */ []));
+    requiredMessage = computed(() => this.validationMessages()['required'] ?? (this.dir() === 'rtl' ? 'هذا الحقل مطلوب' : 'This field is required'), ...(ngDevMode ? [{ debugName: "requiredMessage" }] : /* istanbul ignore next */ []));
+    validationError = computed(() => {
+        const externalError = this.error();
+        if (externalError) {
+            return externalError;
+        }
+        const mode = this.validationMode();
+        if (mode === 'never') {
+            return null;
+        }
+        if (mode === 'onBlur' && (!this.blurredOnce() || !this.dirty())) {
+            return null;
+        }
+        if ((mode === 'onTouched' || mode === 'touched') && (!this.touched() || !this.dirty())) {
+            return null;
+        }
+        const value = this.boundValue();
+        if (this.required() && value == null) {
+            return this.requiredMessage();
+        }
+        const validateFn = this.validate();
+        if (validateFn) {
+            return validateFn(value);
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []));
+    displayError = computed(() => (this.showError() ? this.validationError() : null), ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => {
+        const explicit = this.placeholder();
+        if (explicit) {
+            return explicit;
+        }
+        if (this.mirrorLabelAsPlaceholder === false) {
+            return '';
+        }
+        return this.label();
+    }, ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Local mirror so clear updates the UI immediately (before the parent round-trips).
+     * Empty/`undefined` stay `null` — PrimeNG keeps the clear icon when value is `''`.
+     */
+    boundValue = signal(null, ...(ngDevMode ? [{ debugName: "boundValue" }] : /* istanbul ignore next */ []));
+    syncBoundValueFromInput = effect(() => {
+        this.boundValue.set(this.normalizeValue(this.value()));
+    }, ...(ngDevMode ? [{ debugName: "syncBoundValueFromInput" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const current = this.boundValue();
+        if (current == null) {
+            return '';
+        }
+        return this.options().find(option => String(option.value) === String(current))?.label ?? '';
+    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    /** Clear only when there is a real, matched selection — never for placeholder/orphan ids. */
+    clearVisible = computed(() => {
+        if (!this.showClear()) {
+            return false;
+        }
+        const current = this.boundValue();
+        if (current == null) {
+            return false;
+        }
+        return this.options().some(option => String(option.value) === String(current));
+    }, ...(ngDevMode ? [{ debugName: "clearVisible" }] : /* istanbul ignore next */ []));
+    selectRef = viewChild(Select, ...(ngDevMode ? [{ debugName: "selectRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Body-portaled option panels must sit above `sce-popup` / `sce-dialog-shell`
+     * (`--z-modal` 2100). `OVERLAY_BASE_Z_INDEX` (1200) paints the menu under the mask.
+     */
+    overlayOptions = {
+        autoZIndex: true,
+        baseZIndex: DIALOG_SELECT_OVERLAY_Z_INDEX,
+    };
+    resolvedDir = computed(() => {
+        const explicit = this.dir();
+        if (this.disabled() || explicit === null) {
+            return inferInputTextDirection(this.selectedLabel(), { placeholder: this.resolvedPlaceholder() }, { preferDocumentLocale: true });
+        }
+        return explicit;
+    }, ...(ngDevMode ? [{ debugName: "resolvedDir" }] : /* istanbul ignore next */ []));
+    onBlur() {
+        this.touched.set(true);
+        this.blurredOnce.set(true);
+    }
+    /** PrimeNG Select filter input has no maxlength input — set it on open. */
+    onOverlayShow() {
+        const max = this.filterMaxLength();
+        if (max == null || max <= 0) {
+            return;
+        }
+        const filterEl = this.selectRef()?.filterViewChild?.nativeElement;
+        if (filterEl) {
+            filterEl.setAttribute('maxlength', String(max));
+        }
+    }
+    onValueChange(next) {
+        const normalized = this.normalizeValue(next);
+        this.boundValue.set(normalized);
+        this.dirty.set(true);
+        if (!this.touched()) {
+            this.touched.set(true);
+        }
+        this.valueChange.emit(normalized);
+    }
+    /** PrimeNG clear path — force null even if ngModelChange is skipped/racy. */
+    onClear() {
+        this.boundValue.set(null);
+        this.dirty.set(true);
+        if (!this.touched()) {
+            this.touched.set(true);
+        }
+        this.valueChange.emit(null);
+    }
+    normalizeValue(value) {
+        return value === '' || value === undefined || value === null ? null : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SceSelectFieldComponent, isStandalone: true, selector: "sce-select-field", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterMaxLength: { classPropertyName: "filterMaxLength", publicName: "filterMaxLength", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, validationMode: { classPropertyName: "validationMode", publicName: "validationMode", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, fieldClassName: { classPropertyName: "fieldClassName", publicName: "fieldClassName", isSignal: true, isRequired: false, transformFunction: null }, labelClassName: { classPropertyName: "labelClassName", publicName: "labelClassName", isSignal: true, isRequired: false, transformFunction: null }, inputClassName: { classPropertyName: "inputClassName", publicName: "inputClassName", isSignal: true, isRequired: false, transformFunction: null }, panelClassName: { classPropertyName: "panelClassName", publicName: "panelClassName", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, containerClassName: { classPropertyName: "containerClassName", publicName: "containerClassName", isSignal: true, isRequired: false, transformFunction: null }, resetToken: { classPropertyName: "resetToken", publicName: "resetToken", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.sce-select-field--default": "variant() === \"default\"", "class.sce-select-field--outlined": "variant() === \"outlined\"", "class.sce-select-field--filled": "variant() === \"filled\"", "class.sce-select-field--underline": "variant() === \"underline\"", "class.sce-select-field--soft": "variant() === \"soft\"", "class.sce-select-field--bordered": "variant() === \"bordered\"", "class.sce-select-field--elevated": "variant() === \"elevated\"", "class.sce-select-field--compact": "variant() === \"compact\"", "class.sce-select-field--minimal": "variant() === \"minimal\"", "class.sce-select-field--pill": "variant() === \"pill\"", "class.sce-select-field--addon": "variant() === \"addon\"", "class.sce-select-field--locked": "disabled()" }, classAttribute: "sce-select-field" }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: Select, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div class=\"sce-select-field__wrap\" [class]=\"containerClassName() || null\" [attr.dir]=\"resolvedDir()\">\n  <sce-field\n    [id]=\"id()\"\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [helpText]=\"helpText()\"\n    [error]=\"displayError()\"\n    [labelClassName]=\"labelClassName()\"\n    [fieldClassName]=\"fieldClassName()\"\n  >\n    <p-select\n      [inputId]=\"id()\"\n      [ariaLabel]=\"label() || resolvedPlaceholder()\"\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionDisabled=\"disabled\"\n      [group]=\"group()\"\n      [optionGroupLabel]=\"optionGroupLabel()\"\n      [optionGroupChildren]=\"optionGroupChildren()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [filter]=\"filter()\"\n      [filterPlaceholder]=\"filterPlaceholder() ?? ''\"\n      [showClear]=\"clearVisible()\"\n      [ngModel]=\"boundValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onClear)=\"onClear()\"\n      (onBlur)=\"onBlur()\"\n      (onShow)=\"onOverlayShow()\"\n      [class.p-invalid]=\"displayError()\"\n      [class.sce-select--borderless]=\"borderless()\"\n      [styleClass]=\"'w-full ' + inputClassName()\"\n      [panelStyleClass]=\"panelClassName()\"\n      dropdownIcon=\"pi pi-chevron-down\"\n      [overlayOptions]=\"overlayOptions\"\n      appendTo=\"body\"\n    >\n      <ng-template #dropdownicon>\n        <sce-hugeicon [icon]=\"dropdownIcon\" [size]=\"16\" />\n      </ng-template>\n    </p-select>\n  </sce-field>\n</div>\n", styles: ["@charset \"UTF-8\";.sce-select-field .p-select{position:relative;width:100%;height:var(--size-40);min-height:var(--size-40);max-height:var(--size-40);border-radius:var(--radius-lg);border:1px solid var(--color-input-border, var(--color-neutral-200));box-sizing:border-box;transition:border-color .15s ease;display:flex;align-items:center}.sce-select-field .p-select:after{content:\"\";position:absolute;inset-block-end:0;inset-inline:50%;z-index:1;height:2px;background:var(--color-neutral-950);border-end-start-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm);pointer-events:none;transition:inset-inline .15s ease}.sce-select-field .p-select:focus-within:not(:has(:disabled)):not(:has([readonly])):not(.p-disabled):not(.disabled):not(.readonly):after,.sce-select-field .p-select:active:not(:has(:disabled)):not(:has([readonly])):not(.p-disabled):not(.disabled):not(.readonly):after{inset-inline:0}.sce-select-field .p-select.p-focus:not(.p-disabled):after{inset-inline:0}.sce-select-field .p-select:not(.sce-select--borderless){border:1px solid var(--color-input-border, var(--color-neutral-200))}.sce-select-field .p-select:not(.p-disabled):hover{border-color:var(--field-border-hovered)}.sce-select-field .p-select.sce-select--borderless:not(.p-invalid){border-color:transparent;border-radius:var(--radius-sm)}.sce-select-field .p-select.p-select.p-invalid{border-color:var(--color-input-border, var(--color-neutral-200))}.sce-select-field .p-select.p-select.p-invalid:not(.p-disabled).p-focus{border-color:var(--color-input-border, var(--color-neutral-200));box-shadow:none}.sce-select-field .p-select .p-select-dropdown{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;align-self:stretch;flex-shrink:0;width:var(--space-40);margin:0;background:transparent;border:none;color:var(--form-field-icon-color, var(--form-field-text-placeholder))}.sce-select-field .p-select .p-select-dropdown-icon,.sce-select-field .p-select .p-select-dropdown .pi{font-size:var(--font-size-xs);line-height:1;display:inline-flex;align-items:center;justify-content:center}.sce-select-field .p-select .p-select-clear-icon{position:relative;inset:auto;flex-shrink:0;align-self:center;margin-inline-start:0;margin-inline-end:var(--space-4);color:var(--form-field-icon-color, var(--form-field-text-placeholder))}.sce-select-field .p-select .p-select-label{display:flex;align-items:center;flex:1 1 auto;min-width:0;direction:inherit;text-align:start;justify-content:flex-start;width:auto;margin:0;font-family:var(--font-family-arabic-primary);font-size:var(--font-size-md);color:var(--details-value-color);padding-block:0;padding-inline:var(--space-14)}.sce-select-field .sce-select-field__wrap[dir=rtl] .p-select .p-select-label,.sce-select-field .sce-select-field__wrap[dir=rtl] .p-select .p-select-label.p-placeholder{direction:rtl;text-align:start}.sce-select-field .sce-select-field__wrap[dir=ltr] .p-select .p-select-label,.sce-select-field .sce-select-field__wrap[dir=ltr] .p-select .p-select-label.p-placeholder{direction:ltr;text-align:start}.sce-select-field .p-select .p-select-label.p-placeholder{color:var(--form-input-placeholder-color);opacity:1}sce-select-field.sce-select-field--locked .sce-select-field__wrap .p-select.p-disabled{opacity:1;background-color:var(--form-input-disabled-bg, var(--pdf-field-bg-alt))}sce-select-field.sce-select-field--locked .sce-select-field__wrap .p-select.p-disabled .p-select-label:not(.p-placeholder){color:var(--form-input-disabled-text, var(--text-text-disabled))}sce-select-field.sce-select-field--locked .sce-select-field__wrap[dir=rtl] .p-select.p-disabled .p-select-label:not(.p-placeholder){direction:rtl;text-align:start;justify-content:flex-start}sce-select-field.sce-select-field--locked .sce-select-field__wrap[dir=ltr] .p-select.p-disabled .p-select-label:not(.p-placeholder){direction:ltr;text-align:start;justify-content:flex-start}.sce-select-field .p-select-overlay,.p-select-overlay{z-index:var(--z-select-overlay);border-radius:var(--radius-sm);overflow:hidden;background:var(--dropdown-panel-bg);box-shadow:var(--dropdown-panel-shadow);color:var(--details-value-color)}.p-select-overlay .p-select-list .p-select-option{transition:background-color .12s ease;text-align:start}.p-select-overlay .p-select-list .p-select-option-group{font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);color:var(--color-text-secondary);background-color:var(--color-surface-muted, var(--color-neutral-50));padding-block:var(--space-6);padding-inline:var(--space-12);-webkit-user-select:none;user-select:none;cursor:default;border-block-end:1px solid var(--color-border-light, var(--color-neutral-100))}.p-select-overlay .p-select-header .p-select-filter.p-select-filter{margin-inline-end:unset}.sce-select-field--outlined{border:1px solid var(--color-border-light);background:transparent}.sce-select-field--filled{background:var(--color-surface-muted)}.sce-select-field--underline{border:0;border-block-end:1px solid var(--color-border-light);border-radius:0}.sce-select-field--soft{background:var(--color-brand-primary-25)}.sce-select-field--bordered{border-inline-start:var(--space-3) solid var(--color-brand-primary-600)}.sce-select-field--elevated{border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card-soft-subtle)}.sce-select-field--compact{padding-block:var(--space-4);font-size:var(--font-size-sm)}.sce-select-field--minimal{background:transparent;border:0;box-shadow:none}.sce-select-field--pill{border-radius:var(--radius-full)}.sce-select-field--addon .p-select{overflow:hidden}.sce-select-field--addon .p-select .p-select-dropdown{width:var(--size-53);isolation:isolate}.sce-select-field--addon .p-select .p-select-dropdown:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--color-neutral-100)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: SceFieldComponent, selector: "sce-field", inputs: ["id", "label", "required", "hideLabel", "helpText", "error", "labelClassName", "fieldClassName"] }, { kind: "component", type: SceHugeicon, selector: "sce-hugeicon", inputs: ["icon", "altIcon", "showAlt", "size", "color", "strokeWidth", "absoluteStrokeWidth", "spin", "label", "flipRtl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], selector: 'sce-select-field', standalone: true, imports: [FormsModule, Select, SceFieldComponent, SceHugeicon], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'sce-select-field',
+                        '[class.sce-select-field--default]': 'variant() === "default"',
+                        '[class.sce-select-field--outlined]': 'variant() === "outlined"',
+                        '[class.sce-select-field--filled]': 'variant() === "filled"',
+                        '[class.sce-select-field--underline]': 'variant() === "underline"',
+                        '[class.sce-select-field--soft]': 'variant() === "soft"',
+                        '[class.sce-select-field--bordered]': 'variant() === "bordered"',
+                        '[class.sce-select-field--elevated]': 'variant() === "elevated"',
+                        '[class.sce-select-field--compact]': 'variant() === "compact"',
+                        '[class.sce-select-field--minimal]': 'variant() === "minimal"',
+                        '[class.sce-select-field--pill]': 'variant() === "pill"',
+                        '[class.sce-select-field--addon]': 'variant() === "addon"',
+                        '[class.sce-select-field--locked]': 'disabled()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sce-select-field__wrap\" [class]=\"containerClassName() || null\" [attr.dir]=\"resolvedDir()\">\n  <sce-field\n    [id]=\"id()\"\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [helpText]=\"helpText()\"\n    [error]=\"displayError()\"\n    [labelClassName]=\"labelClassName()\"\n    [fieldClassName]=\"fieldClassName()\"\n  >\n    <p-select\n      [inputId]=\"id()\"\n      [ariaLabel]=\"label() || resolvedPlaceholder()\"\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      optionDisabled=\"disabled\"\n      [group]=\"group()\"\n      [optionGroupLabel]=\"optionGroupLabel()\"\n      [optionGroupChildren]=\"optionGroupChildren()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [filter]=\"filter()\"\n      [filterPlaceholder]=\"filterPlaceholder() ?? ''\"\n      [showClear]=\"clearVisible()\"\n      [ngModel]=\"boundValue()\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onClear)=\"onClear()\"\n      (onBlur)=\"onBlur()\"\n      (onShow)=\"onOverlayShow()\"\n      [class.p-invalid]=\"displayError()\"\n      [class.sce-select--borderless]=\"borderless()\"\n      [styleClass]=\"'w-full ' + inputClassName()\"\n      [panelStyleClass]=\"panelClassName()\"\n      dropdownIcon=\"pi pi-chevron-down\"\n      [overlayOptions]=\"overlayOptions\"\n      appendTo=\"body\"\n    >\n      <ng-template #dropdownicon>\n        <sce-hugeicon [icon]=\"dropdownIcon\" [size]=\"16\" />\n      </ng-template>\n    </p-select>\n  </sce-field>\n</div>\n", styles: ["@charset \"UTF-8\";.sce-select-field .p-select{position:relative;width:100%;height:var(--size-40);min-height:var(--size-40);max-height:var(--size-40);border-radius:var(--radius-lg);border:1px solid var(--color-input-border, var(--color-neutral-200));box-sizing:border-box;transition:border-color .15s ease;display:flex;align-items:center}.sce-select-field .p-select:after{content:\"\";position:absolute;inset-block-end:0;inset-inline:50%;z-index:1;height:2px;background:var(--color-neutral-950);border-end-start-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm);pointer-events:none;transition:inset-inline .15s ease}.sce-select-field .p-select:focus-within:not(:has(:disabled)):not(:has([readonly])):not(.p-disabled):not(.disabled):not(.readonly):after,.sce-select-field .p-select:active:not(:has(:disabled)):not(:has([readonly])):not(.p-disabled):not(.disabled):not(.readonly):after{inset-inline:0}.sce-select-field .p-select.p-focus:not(.p-disabled):after{inset-inline:0}.sce-select-field .p-select:not(.sce-select--borderless){border:1px solid var(--color-input-border, var(--color-neutral-200))}.sce-select-field .p-select:not(.p-disabled):hover{border-color:var(--field-border-hovered)}.sce-select-field .p-select.sce-select--borderless:not(.p-invalid){border-color:transparent;border-radius:var(--radius-sm)}.sce-select-field .p-select.p-select.p-invalid{border-color:var(--color-input-border, var(--color-neutral-200))}.sce-select-field .p-select.p-select.p-invalid:not(.p-disabled).p-focus{border-color:var(--color-input-border, var(--color-neutral-200));box-shadow:none}.sce-select-field .p-select .p-select-dropdown{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;align-self:stretch;flex-shrink:0;width:var(--space-40);margin:0;background:transparent;border:none;color:var(--form-field-icon-color, var(--form-field-text-placeholder))}.sce-select-field .p-select .p-select-dropdown-icon,.sce-select-field .p-select .p-select-dropdown .pi{font-size:var(--font-size-xs);line-height:1;display:inline-flex;align-items:center;justify-content:center}.sce-select-field .p-select .p-select-clear-icon{position:relative;inset:auto;flex-shrink:0;align-self:center;margin-inline-start:0;margin-inline-end:var(--space-4);color:var(--form-field-icon-color, var(--form-field-text-placeholder))}.sce-select-field .p-select .p-select-label{display:flex;align-items:center;flex:1 1 auto;min-width:0;direction:inherit;text-align:start;justify-content:flex-start;width:auto;margin:0;font-family:var(--font-family-arabic-primary);font-size:var(--font-size-md);color:var(--details-value-color);padding-block:0;padding-inline:var(--space-14)}.sce-select-field .sce-select-field__wrap[dir=rtl] .p-select .p-select-label,.sce-select-field .sce-select-field__wrap[dir=rtl] .p-select .p-select-label.p-placeholder{direction:rtl;text-align:start}.sce-select-field .sce-select-field__wrap[dir=ltr] .p-select .p-select-label,.sce-select-field .sce-select-field__wrap[dir=ltr] .p-select .p-select-label.p-placeholder{direction:ltr;text-align:start}.sce-select-field .p-select .p-select-label.p-placeholder{color:var(--form-input-placeholder-color);opacity:1}sce-select-field.sce-select-field--locked .sce-select-field__wrap .p-select.p-disabled{opacity:1;background-color:var(--form-input-disabled-bg, var(--pdf-field-bg-alt))}sce-select-field.sce-select-field--locked .sce-select-field__wrap .p-select.p-disabled .p-select-label:not(.p-placeholder){color:var(--form-input-disabled-text, var(--text-text-disabled))}sce-select-field.sce-select-field--locked .sce-select-field__wrap[dir=rtl] .p-select.p-disabled .p-select-label:not(.p-placeholder){direction:rtl;text-align:start;justify-content:flex-start}sce-select-field.sce-select-field--locked .sce-select-field__wrap[dir=ltr] .p-select.p-disabled .p-select-label:not(.p-placeholder){direction:ltr;text-align:start;justify-content:flex-start}.sce-select-field .p-select-overlay,.p-select-overlay{z-index:var(--z-select-overlay);border-radius:var(--radius-sm);overflow:hidden;background:var(--dropdown-panel-bg);box-shadow:var(--dropdown-panel-shadow);color:var(--details-value-color)}.p-select-overlay .p-select-list .p-select-option{transition:background-color .12s ease;text-align:start}.p-select-overlay .p-select-list .p-select-option-group{font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);color:var(--color-text-secondary);background-color:var(--color-surface-muted, var(--color-neutral-50));padding-block:var(--space-6);padding-inline:var(--space-12);-webkit-user-select:none;user-select:none;cursor:default;border-block-end:1px solid var(--color-border-light, var(--color-neutral-100))}.p-select-overlay .p-select-header .p-select-filter.p-select-filter{margin-inline-end:unset}.sce-select-field--outlined{border:1px solid var(--color-border-light);background:transparent}.sce-select-field--filled{background:var(--color-surface-muted)}.sce-select-field--underline{border:0;border-block-end:1px solid var(--color-border-light);border-radius:0}.sce-select-field--soft{background:var(--color-brand-primary-25)}.sce-select-field--bordered{border-inline-start:var(--space-3) solid var(--color-brand-primary-600)}.sce-select-field--elevated{border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card-soft-subtle)}.sce-select-field--compact{padding-block:var(--space-4);font-size:var(--font-size-sm)}.sce-select-field--minimal{background:transparent;border:0;box-shadow:none}.sce-select-field--pill{border-radius:var(--radius-full)}.sce-select-field--addon .p-select{overflow:hidden}.sce-select-field--addon .p-select .p-select-dropdown{width:var(--size-53);isolation:isolate}.sce-select-field--addon .p-select .p-select-dropdown:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--color-neutral-100)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMaxLength", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], validationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMode", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], fieldClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldClassName", required: false }] }], labelClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClassName", required: false }] }], inputClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClassName", required: false }] }], panelClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClassName", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], containerClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClassName", required: false }] }], resetToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetToken", required: false }] }], selectRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Select), { isSignal: true }] }] } });
+
+/**
+ * React source: feedback/inline-api-error.tsx
+ */
+/** Inline error banner for an already-resolved `message`, showing a retry button only when `retryable` is opted into (it defaults to false so a failed save cannot re-trigger a load). */
+class SceInlineApiErrorComponent {
+    errorIcon = AlertCircleIcon;
+    retryIcon = RefreshIcon;
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows a retry button. Opt in only where the banner reports a *load* failure — on a form
+     * page the same banner reports a failed save, where re-running the load would discard input.
+     */
+    retryable = input(false, ...(ngDevMode ? [{ debugName: "retryable" }] : /* istanbul ignore next */ []));
+    /** The host re-runs the request that failed. */
+    retry = output();
+    rootClass = computed(() => {
+        const cls = this.className();
+        return cls ? `inlineApiErrorRoot ${cls}` : 'inlineApiErrorRoot';
+    }, ...(ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []));
+    onRetry() {
+        this.retry.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceInlineApiErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceInlineApiErrorComponent, isStandalone: true, selector: "sce-inline-api-error", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { classAttribute: "sce-inline-api-error" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "@if (message()) {\n  <!-- role=alert already implies an assertive live region; adding aria-live=polite contradicts it -->\n  <div [class]=\"rootClass()\" role=\"alert\">\n    <sce-hugeicon class=\"inlineApiErrorIcon\" [icon]=\"errorIcon\" [size]=\"20\" />\n    <p class=\"inlineApiErrorMessage\">{{ message() }}</p>\n    @if (retryable()) {\n      <button type=\"button\" class=\"inlineApiErrorRetry\" (click)=\"onRetry()\">\n        <sce-hugeicon [icon]=\"retryIcon\" [size]=\"16\" />\n        {{ 'STATUS_PAGES.RETRY' | translate }}\n      </button>\n    }\n  </div>\n}\n", styles: [".inlineApiErrorRoot{display:flex;align-items:center;gap:var(--space-12);margin-block-start:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-sm);border:var(--border-width-1) solid var(--feedback-inline-error-border);border-inline-start-width:var(--border-width-2);border-inline-start-color:var(--feedback-inline-error-text);background:var(--feedback-inline-error-bg);color:var(--feedback-inline-error-text);min-width:0;max-width:100%;box-shadow:var(--shadow-sm)}.inlineApiErrorIcon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--space-32);height:var(--space-32);border-radius:var(--radius-full);background:var(--color-attention-200);font-size:var(--font-size-md);line-height:var(--line-height-none)}.inlineApiErrorMessage{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);min-width:0;max-width:100%;overflow-wrap:anywhere;overflow-wrap:break-word;flex:1 1 auto}.inlineApiErrorRetry{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);flex-shrink:0;min-height:var(--space-32);padding-block:var(--space-4);padding-inline:var(--space-12);border:var(--border-width-1) solid currentcolor;border-radius:var(--radius-sm);background:var(--app-surface);color:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-base),box-shadow var(--transition-base)}.inlineApiErrorRetry:hover{background:var(--feedback-inline-error-border);box-shadow:var(--shadow-sm)}.inlineApiErrorRetry:focus-visible{outline:var(--border-width-2) solid currentcolor;outline-offset:var(--space-2)}@media(max-width:480px){.inlineApiErrorRoot{flex-wrap:wrap}.inlineApiErrorRetry{inline-size:100%}}@media(prefers-reduced-motion:reduce){.inlineApiErrorRetry{transition:none}}\n"], dependencies: [{ kind: "component", type: SceHugeicon, selector: "sce-hugeicon", inputs: ["icon", "altIcon", "showAlt", "size", "color", "strokeWidth", "absoluteStrokeWidth", "spin", "label", "flipRtl"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceInlineApiErrorComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-inline-api-error' }, selector: 'sce-inline-api-error', standalone: true, imports: [TranslatePipe, SceHugeicon], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (message()) {\n  <!-- role=alert already implies an assertive live region; adding aria-live=polite contradicts it -->\n  <div [class]=\"rootClass()\" role=\"alert\">\n    <sce-hugeicon class=\"inlineApiErrorIcon\" [icon]=\"errorIcon\" [size]=\"20\" />\n    <p class=\"inlineApiErrorMessage\">{{ message() }}</p>\n    @if (retryable()) {\n      <button type=\"button\" class=\"inlineApiErrorRetry\" (click)=\"onRetry()\">\n        <sce-hugeicon [icon]=\"retryIcon\" [size]=\"16\" />\n        {{ 'STATUS_PAGES.RETRY' | translate }}\n      </button>\n    }\n  </div>\n}\n", styles: [".inlineApiErrorRoot{display:flex;align-items:center;gap:var(--space-12);margin-block-start:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-sm);border:var(--border-width-1) solid var(--feedback-inline-error-border);border-inline-start-width:var(--border-width-2);border-inline-start-color:var(--feedback-inline-error-text);background:var(--feedback-inline-error-bg);color:var(--feedback-inline-error-text);min-width:0;max-width:100%;box-shadow:var(--shadow-sm)}.inlineApiErrorIcon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--space-32);height:var(--space-32);border-radius:var(--radius-full);background:var(--color-attention-200);font-size:var(--font-size-md);line-height:var(--line-height-none)}.inlineApiErrorMessage{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);min-width:0;max-width:100%;overflow-wrap:anywhere;overflow-wrap:break-word;flex:1 1 auto}.inlineApiErrorRetry{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);flex-shrink:0;min-height:var(--space-32);padding-block:var(--space-4);padding-inline:var(--space-12);border:var(--border-width-1) solid currentcolor;border-radius:var(--radius-sm);background:var(--app-surface);color:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background-color var(--transition-base),box-shadow var(--transition-base)}.inlineApiErrorRetry:hover{background:var(--feedback-inline-error-border);box-shadow:var(--shadow-sm)}.inlineApiErrorRetry:focus-visible{outline:var(--border-width-2) solid currentcolor;outline-offset:var(--space-2)}@media(max-width:480px){.inlineApiErrorRoot{flex-wrap:wrap}.inlineApiErrorRetry{inline-size:100%}}@media(prefers-reduced-motion:reduce){.inlineApiErrorRetry{transition:none}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], retryable: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryable", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+const PARCEL_NOT_FOUND_MESSAGE = 'لم يتم العثور على أرض محددة في هذه النقطة. يرجى اختيار موقع أرض داخل مخطط.';
+const RATE_LIMITED_MESSAGE = 'تم تجاوز عدد الطلبات المسموح به. يرجى الانتظار قليلًا ثم المحاولة مرة أخرى.';
+/** Hold-off after a 429 that carried no `Retry-After`. */
+const DEFAULT_RATE_LIMIT_BACKOFF_SECONDS = 5;
+/** Fallback center coordinates for Saudi Arabia regions */
+const SAUDI_REGION_CENTERS = {
+    '001': { lat: 24.7136, lng: 46.6753, zoom: 8 }, // Riyadh
+    '002': { lat: 21.3891, lng: 39.8579, zoom: 8 }, // Makkah
+    '003': { lat: 24.5247, lng: 39.5692, zoom: 8 }, // Madinah
+    '004': { lat: 26.326, lng: 43.975, zoom: 8 }, // Al Qassim
+    '005': { lat: 26.4207, lng: 50.0888, zoom: 7 }, // Eastern
+    '006': { lat: 18.2164, lng: 42.5053, zoom: 8 }, // Asir
+    '007': { lat: 28.3835, lng: 36.5662, zoom: 8 }, // Tabuk
+    '008': { lat: 27.5236, lng: 41.6961, zoom: 8 }, // Hail
+    '009': { lat: 30.9753, lng: 41.0381, zoom: 8 }, // Northern Borders
+    '010': { lat: 16.8894, lng: 42.5511, zoom: 9 }, // Jazan
+    '011': { lat: 17.4924, lng: 44.1277, zoom: 8 }, // Najran
+    '012': { lat: 20.0129, lng: 41.4676, zoom: 9 }, // Al Baha
+    '013': { lat: 29.9697, lng: 40.1963, zoom: 8 }, // Al Jouf
+};
+function calculateRingsCenter(rings) {
+    if (!rings || !rings.length || !rings[0].length) {
+        return null;
+    }
+    const points = rings[0];
+    let sumLng = 0;
+    let sumLat = 0;
+    let count = 0;
+    for (const pt of points) {
+        if (Array.isArray(pt) && pt.length >= 2) {
+            sumLng += pt[0];
+            sumLat += pt[1];
+            count++;
+        }
+    }
+    if (count === 0) {
+        return null;
+    }
+    return { lat: sumLat / count, lng: sumLng / count };
+}
+class SceBaladyMapSelectorComponent {
+    locale = input('ar', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    dir = input('rtl', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    initialPropertyData = input(null, ...(ngDevMode ? [{ debugName: "initialPropertyData" }] : /* istanbul ignore next */ []));
+    propertySelected = output();
+    mapClick = output();
+    gisService = inject(BaladyGisService);
+    toast = inject(ToastService);
+    lastQueriedCoords = null;
+    /** Epoch ms until which point queries are held back after a 429 from the GIS proxy. */
+    pointQueryBlockedUntil = 0;
+    constructor() {
+        effect(() => {
+            const initData = this.initialPropertyData();
+            if (initData && (initData.x != null || initData.y != null || initData.parcelLatitude != null)) {
+                const lat = Number(initData.y ?? initData.parcelLatitude ?? initData.lat);
+                const lng = Number(initData.x ?? initData.parcelLongitude ?? initData.lng);
+                if (!isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0) {
+                    this.currentLat.set(lat);
+                    this.currentLng.set(lng);
+                    this.zoomLevel.set(18);
+                    if (!this.selectedPropertyData()) {
+                        this.selectedPropertyData.set(initData);
+                    }
+                    const popupHtml = `
+            <div style="font-family: inherit; font-size: 13px; line-height: 1.5; padding: 4px;">
+              <strong>رقم القطعة:</strong> ${initData.parcelNo ?? '-'}<br/>
+              <strong>رقم المخطط:</strong> ${initData.planNO ?? '-'}<br/>
+              <strong>الاستخدام:</strong> ${initData.landuse ?? '-'}<br/>
+              <strong>المساحة:</strong> ${this.formatArea(initData.area)}
+            </div>
+          `;
+                    this.currentMarkers.set([
+                        {
+                            draggable: false,
+                            lat,
+                            lng,
+                            popupHtml,
+                        },
+                    ]);
+                    this.queryPointData(lng, lat, { emit: false });
+                }
+            }
+        });
+    }
+    // In-flight API Subscriptions for cancellation
+    regionsSub;
+    citiesSub;
+    districtsSub;
+    pointDataSub;
+    // Filter Signals
+    regions = signal([], ...(ngDevMode ? [{ debugName: "regions" }] : /* istanbul ignore next */ []));
+    cities = signal([], ...(ngDevMode ? [{ debugName: "cities" }] : /* istanbul ignore next */ []));
+    districts = signal([], ...(ngDevMode ? [{ debugName: "districts" }] : /* istanbul ignore next */ []));
+    selectedRegionCode = signal('', ...(ngDevMode ? [{ debugName: "selectedRegionCode" }] : /* istanbul ignore next */ []));
+    selectedCityCode = signal('', ...(ngDevMode ? [{ debugName: "selectedCityCode" }] : /* istanbul ignore next */ []));
+    selectedDistrictCode = signal('', ...(ngDevMode ? [{ debugName: "selectedDistrictCode" }] : /* istanbul ignore next */ []));
+    formatArea(area) {
+        if (!area) {
+            return '-';
+        }
+        const num = parseFloat(area);
+        if (isNaN(num)) {
+            return area;
+        }
+        return `${num.toFixed(2)} م²`;
+    }
+    // Map Signals
+    currentLat = signal(24.7136, ...(ngDevMode ? [{ debugName: "currentLat" }] : /* istanbul ignore next */ []));
+    currentLng = signal(46.6753, ...(ngDevMode ? [{ debugName: "currentLng" }] : /* istanbul ignore next */ []));
+    zoomLevel = signal(6, ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+    currentMarkers = signal([], ...(ngDevMode ? [{ debugName: "currentMarkers" }] : /* istanbul ignore next */ []));
+    // State Signals
+    isLoadingFilterData = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingFilterData" }] : /* istanbul ignore next */ []));
+    isQueryingPointData = signal(false, ...(ngDevMode ? [{ debugName: "isQueryingPointData" }] : /* istanbul ignore next */ []));
+    loadError = signal(false, ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+    selectedPropertyData = signal(null, ...(ngDevMode ? [{ debugName: "selectedPropertyData" }] : /* istanbul ignore next */ []));
+    // Options for Dropdowns
+    regionOptions = computed(() => this.regions().map(r => ({
+        label: r.regionName,
+        value: r.regionCode,
+    })), ...(ngDevMode ? [{ debugName: "regionOptions" }] : /* istanbul ignore next */ []));
+    cityOptions = computed(() => this.cities().map(c => ({
+        label: c.name,
+        value: c.code,
+    })), ...(ngDevMode ? [{ debugName: "cityOptions" }] : /* istanbul ignore next */ []));
+    districtOptions = computed(() => this.districts().map(d => ({
+        label: d.districtName,
+        value: d.districtCode,
+    })), ...(ngDevMode ? [{ debugName: "districtOptions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.loadRegions();
+    }
+    ngOnDestroy() {
+        this.regionsSub?.unsubscribe();
+        this.citiesSub?.unsubscribe();
+        this.districtsSub?.unsubscribe();
+        this.pointDataSub?.unsubscribe();
+    }
+    loadRegions() {
+        this.regionsSub?.unsubscribe();
+        this.isLoadingFilterData.set(true);
+        this.loadError.set(false);
+        this.regionsSub = this.gisService.getRegions().subscribe({
+            next: data => {
+                this.regions.set(data);
+                this.isLoadingFilterData.set(false);
+            },
+            error: () => {
+                this.isLoadingFilterData.set(false);
+                this.loadError.set(true);
+            },
+        });
+    }
+    /** Filter -> Map Sync: User selects Region */
+    onRegionChange(code) {
+        // Cancel in-flight cities and districts requests
+        this.citiesSub?.unsubscribe();
+        this.districtsSub?.unsubscribe();
+        const validCode = code ?? '';
+        this.selectedRegionCode.set(validCode);
+        this.selectedCityCode.set('');
+        this.selectedDistrictCode.set('');
+        this.cities.set([]);
+        this.districts.set([]);
+        if (!validCode) {
+            this.isLoadingFilterData.set(false);
+            return;
+        }
+        // Move map to region center
+        const regionCenter = SAUDI_REGION_CENTERS[validCode];
+        if (regionCenter) {
+            this.currentLat.set(regionCenter.lat);
+            this.currentLng.set(regionCenter.lng);
+            this.zoomLevel.set(regionCenter.zoom);
+        }
+        this.isLoadingFilterData.set(true);
+        this.citiesSub = this.gisService.getCities(validCode).subscribe({
+            next: data => {
+                this.cities.set(data);
+                this.isLoadingFilterData.set(false);
+            },
+            error: () => {
+                this.isLoadingFilterData.set(false);
+            },
+        });
+    }
+    /** Filter -> Map Sync: User selects City */
+    onCityChange(code) {
+        // Cancel in-flight districts request
+        this.districtsSub?.unsubscribe();
+        const validCode = code ?? '';
+        this.selectedCityCode.set(validCode);
+        this.selectedDistrictCode.set('');
+        this.districts.set([]);
+        if (!validCode) {
+            this.isLoadingFilterData.set(false);
+            return;
+        }
+        // Move map to city center if rings exist
+        const selectedCity = this.cities().find(c => c.code === validCode);
+        if (selectedCity?.rings) {
+            const center = calculateRingsCenter(selectedCity.rings);
+            if (center) {
+                this.currentLat.set(center.lat);
+                this.currentLng.set(center.lng);
+                this.zoomLevel.set(12);
+            }
+        }
+        const regionCode = this.selectedRegionCode();
+        this.isLoadingFilterData.set(true);
+        this.districtsSub = this.gisService.getDistricts(regionCode, validCode).subscribe({
+            next: data => {
+                this.districts.set(data);
+                this.isLoadingFilterData.set(false);
+            },
+            error: () => {
+                this.isLoadingFilterData.set(false);
+            },
+        });
+    }
+    /** Filter -> Map Sync: User selects District */
+    onDistrictChange(code) {
+        const validCode = code ?? '';
+        this.selectedDistrictCode.set(validCode);
+        if (!validCode) {
+            return;
+        }
+        // Move map to district center if rings exist
+        const selectedDistrict = this.districts().find(d => d.districtCode === validCode);
+        if (selectedDistrict?.rings) {
+            const center = calculateRingsCenter(selectedDistrict.rings);
+            if (center) {
+                this.currentLat.set(center.lat);
+                this.currentLng.set(center.lng);
+                this.zoomLevel.set(14);
+            }
+        }
+        else {
+            this.zoomLevel.set(14);
+        }
+    }
+    /** Query Balady GIS API for point data (x=lng, y=lat) */
+    queryPointData(lng, lat, options = {}) {
+        const emit = options.emit ?? true;
+        if (this.lastQueriedCoords && this.lastQueriedCoords.lat === lat && this.lastQueriedCoords.lng === lng) {
+            return;
+        }
+        if (Date.now() < this.pointQueryBlockedUntil) {
+            if (emit) {
+                this.toast.warning('', RATE_LIMITED_MESSAGE);
+            }
+            return;
+        }
+        this.lastQueriedCoords = { lat, lng };
+        // Cancel any in-flight requests before querying new point
+        this.pointDataSub?.unsubscribe();
+        this.citiesSub?.unsubscribe();
+        this.districtsSub?.unsubscribe();
+        this.currentLat.set(lat);
+        this.currentLng.set(lng);
+        this.zoomLevel.set(18);
+        this.isQueryingPointData.set(true);
+        this.pointDataSub = this.gisService.getPointData(lng, lat).subscribe({
+            next: result => {
+                this.isQueryingPointData.set(false);
+                const hasPointDetails = Boolean(result?.parcelNo || result?.planNO || result?.region || result?.city);
+                if (result && hasPointDetails) {
+                    // The saved coordinates are the clicked point — never a vertex of the parcel rings.
+                    result.x = lng;
+                    result.y = lat;
+                    this.zoomLevel.set(18);
+                    this.selectedPropertyData.set(result);
+                    if (emit) {
+                        this.propertySelected.emit(result);
+                    }
+                    // Update Map Marker
+                    const popupHtml = `
+            <div style="font-family: inherit; font-size: 13px; line-height: 1.5; padding: 4px;">
+              <strong>رقم القطعة:</strong> ${result.parcelNo ?? '-'}<br/>
+              <strong>رقم المخطط:</strong> ${result.planNO ?? '-'}<br/>
+              <strong>الاستخدام:</strong> ${result.landuse ?? '-'}<br/>
+              <strong>المساحة:</strong> ${this.formatArea(result.area)}
+            </div>
+          `;
+                    this.currentMarkers.set([
+                        {
+                            draggable: false,
+                            lat,
+                            lng,
+                            popupHtml,
+                        },
+                    ]);
+                }
+                else {
+                    if (emit) {
+                        this.toast.info('', PARCEL_NOT_FOUND_MESSAGE);
+                    }
+                }
+            },
+            error: (err) => {
+                this.isQueryingPointData.set(false);
+                // Let the user retry the same point once the failure is resolved.
+                this.lastQueriedCoords = null;
+                const kind = err instanceof BaladyGisError ? err.kind : 'unknown';
+                if (kind === 'rateLimited') {
+                    const retryAfter = err.retryAfterSeconds ?? DEFAULT_RATE_LIMIT_BACKOFF_SECONDS;
+                    this.pointQueryBlockedUntil = Date.now() + retryAfter * 1000;
+                }
+                if (emit) {
+                    this.showPointQueryError(kind);
+                }
+            },
+        });
+    }
+    showPointQueryError(kind) {
+        switch (kind) {
+            case 'notFound':
+            case 'invalid':
+                this.toast.info('', PARCEL_NOT_FOUND_MESSAGE);
+                return;
+            case 'rateLimited':
+                this.toast.warning('', RATE_LIMITED_MESSAGE);
+                return;
+            case 'unavailable':
+                this.toast.error('', 'خدمة بلدي غير متاحة حاليًا. يرجى المحاولة لاحقًا.');
+                return;
+            default:
+                this.toast.error('', 'تعذر الاستعلام عن بيانات العقار. يرجى المحاولة مرة أخرى.');
+        }
+    }
+    /** Map Click -> Query Balady & Sync Filter Dropdowns */
+    onMapClicked(coords) {
+        // Leaflet reports longitudes past ±180 once the map is panned across the antimeridian.
+        const lng = ((((coords.lng + 180) % 360) + 360) % 360) - 180;
+        this.mapClick.emit({ lat: coords.lat, lng });
+        this.queryPointData(lng, coords.lat, { emit: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceBaladyMapSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SceBaladyMapSelectorComponent, isStandalone: true, selector: "sce-balady-map-selector", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, initialPropertyData: { classPropertyName: "initialPropertyData", publicName: "initialPropertyData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { propertySelected: "propertySelected", mapClick: "mapClick" }, host: { classAttribute: "sce-balady-map-selector" }, hostDirectives: [{ directive: i1.SceVariantDirective, inputs: ["sceVariant", "sceVariant", "sceDensity", "sceDensity"] }], ngImport: i0, template: "<div class=\"baladyMapSelector\">\n  <div class=\"baladyMapSelector__filterHeader\">\n    <div class=\"baladyMapSelector__filterTitle\">\n      <h4>{{ '\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0639\u0642\u0627\u0631 \u0645\u0646 \u0627\u0644\u062E\u0631\u064A\u0637\u0629 \u0627\u0644\u062A\u0641\u0627\u0639\u0644\u064A\u0629' }}</h4>\n    </div>\n    <p class=\"baladyMapSelector__filterSubtitle\">\n      \u0627\u062E\u062A\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0645\u062F\u064A\u0646\u0629 \u0648\u0627\u0644\u062D\u064A \u0644\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0646\u0637\u0627\u0642\u060C \u062B\u0645 \u0627\u0636\u063A\u0637 \u0639\u0644\u0649 \u0645\u0648\u0642\u0639 \u0627\u0644\u0623\u0631\u0636 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064A \u0627\u0644\u062E\u0631\u064A\u0637\u0629 \u0644\u0627\u0633\u062A\u062E\u0631\u0627\u062C \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0645\u062E\u0637\u0637 \u0648\u0627\u0644\u0642\u0637\u0639\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u062D\u0629 \u0648\u0627\u0644\u062D\u062F\u0648\u062F.\n    </p>\n\n    @if (loadError()) {\n      <sce-inline-api-error [message]=\"'\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0645\u0646\u0627\u0637\u0642'\" [retryable]=\"true\" (retry)=\"loadRegions()\" />\n    }\n  </div>\n\n  <div class=\"baladyMapSelector__mapContainer\">\n    <!-- Floating Filters Bar over Map -->\n    <div class=\"baladyMapSelector__floatingFilters\">\n      @if (isLoadingFilterData()) {\n        <div class=\"baladyMapSelector__filterLoader\" role=\"status\" aria-label=\"\u062C\u0627\u0631\u064A \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A\">\n          <div class=\"baladyMapSelector__miniSpinner\"></div>\n          <span>\u062C\u0627\u0631\u064A \u062C\u0644\u0628 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u062A\u0635\u0641\u064A\u0629...</span>\n        </div>\n      }\n\n      <div class=\"baladyMapSelector__grid\">\n        <sce-select-field\n          id=\"balady-filter-region\"\n          [label]=\"'\u0627\u0644\u0645\u0646\u0637\u0642\u0629'\"\n          [options]=\"regionOptions()\"\n          [value]=\"selectedRegionCode()\"\n          [disabled]=\"isLoadingFilterData()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onRegionChange($event)\"\n        />\n        <sce-select-field\n          id=\"balady-filter-city\"\n          [label]=\"'\u0627\u0644\u0645\u062F\u064A\u0646\u0629'\"\n          [options]=\"cityOptions()\"\n          [value]=\"selectedCityCode()\"\n          [disabled]=\"isLoadingFilterData() || !selectedRegionCode()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onCityChange($event)\"\n        />\n        <sce-select-field\n          id=\"balady-filter-district\"\n          [label]=\"'\u0627\u0644\u062D\u064A'\"\n          [options]=\"districtOptions()\"\n          [value]=\"selectedDistrictCode()\"\n          [disabled]=\"isLoadingFilterData() || !selectedCityCode()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onDistrictChange($event)\"\n        />\n      </div>\n    </div>\n\n    @if (isQueryingPointData()) {\n      <div class=\"baladyMapSelector__overlay\" role=\"status\" aria-label=\"\u062C\u0627\u0631\u064A \u0627\u0644\u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0639\u0646 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0623\u0631\u0636\">\n        <div class=\"baladyMapSelector__spinner\"></div>\n        <span>\u062C\u0627\u0631\u064A \u0627\u0644\u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0639\u0646 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0639\u0642\u0627\u0631 \u0648\u0627\u0644\u0642\u0637\u0639\u0629...</span>\n      </div>\n    }\n\n    <sce-osm-leaflet-map\n      [latitude]=\"currentLat()\"\n      [longitude]=\"currentLng()\"\n      [zoom]=\"zoomLevel()\"\n      [markers]=\"currentMarkers()\"\n      [interactive]=\"true\"\n      (mapClick)=\"onMapClicked($event)\"\n    />\n  </div>\n\n  @if (selectedPropertyData(); as prop) {\n    <div class=\"baladyMapSelector__summaryCard\" role=\"region\" aria-label=\"\u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0639\u0642\u0627\u0631 \u0627\u0644\u0645Selected\">\n      <div class=\"baladyMapSelector__summaryHeader\">\n        <span class=\"baladyMapSelector__statusIcon\">\u2713</span>\n        <strong>\u062A\u0645 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0639\u0642\u0627\u0631 \u0628\u0646\u062C\u0627\u062D</strong>\n      </div>\n      <div class=\"baladyMapSelector__summaryGrid\">\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0645\u062F\u064A\u0646\u0629:</span>\n          <span class=\"val\">{{ prop.region }} - {{ prop.city }} ({{ prop.districtName }})</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0631\u0642\u0645 \u0627\u0644\u0645\u062E\u0637\u0637:</span>\n          <span class=\"val\">{{ prop.planNO ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0631\u0642\u0645 \u0627\u0644\u0642\u0637\u0639\u0629:</span>\n          <span class=\"val\">{{ prop.parcelNo ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0627\u0644\u0623\u0631\u0636:</span>\n          <span class=\"val\">{{ prop.landuse ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0644\u0645\u0633\u0627\u062D\u0629:</span>\n          <span class=\"val\">{{ formatArea(prop.area) }}</span>\n        </div>\n        @if (prop.directionParcel && prop.directionParcel.length) {\n          <!-- Track by index: a parcel can face the same direction twice, and duplicate keys throw NG0955. -->\n          @for (dir of prop.directionParcel; track $index) {\n            <div class=\"baladyMapSelector__infoItem\">\n              <span class=\"label\">\u062D\u062F\u0648\u062F \u0627\u0644\u0639\u0642\u0627\u0631 ({{ dir.direction }}):</span>\n              <span class=\"val\">{{ dir.length }} \u0645</span>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host.sce-balady-map-selector{display:block;width:100%}.baladyMapSelector{display:flex;flex-direction:column;gap:1rem;background-color:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-lg, 12px);padding:1.25rem}.baladyMapSelector__filterHeader{display:flex;flex-direction:column;gap:.75rem}.baladyMapSelector__filterTitle{display:flex;align-items:center;gap:.5rem}.baladyMapSelector__filterTitle h4{margin:0;font-size:1.05rem;font-weight:700;color:var(--color-neutral-900)}.baladyMapSelector__badge{display:inline-flex;align-items:center;padding:.2rem .6rem;font-size:.75rem;font-weight:700;border-radius:9999px;background-color:#10b9811a;color:#059669}.baladyMapSelector__filterSubtitle{margin:0;font-size:.875rem;color:var(--color-neutral-600);line-height:1.5}.baladyMapSelector__filterLoader{display:flex;align-items:center;gap:.6rem;padding:.5rem .875rem;border-radius:var(--border-radius-md, 8px);background-color:#10b98114;border:1px solid rgba(16,185,129,.2);color:#047857;font-size:.8125rem;font-weight:600;animation:baladyFadeIn .25s ease-in-out}.baladyMapSelector__miniSpinner{width:16px;height:16px;border:2px solid rgba(16,185,129,.25);border-block-start-color:#059669;border-radius:50%;animation:baladySpin .7s linear infinite}.baladyMapSelector__grid{display:grid;grid-template-columns:repeat(1,1fr);gap:.75rem}@media(min-width:768px){.baladyMapSelector__grid{grid-template-columns:repeat(3,1fr)}}.baladyMapSelector__floatingFilters{position:absolute;top:.75rem;inset-inline-start:.75rem;inset-inline-end:.75rem;z-index:500;display:flex;flex-direction:column;gap:.5rem;background-color:#fffffff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-md, 8px);padding:.75rem;box-shadow:0 4px 16px #00000014}.dark-theme .baladyMapSelector__floatingFilters{background-color:#0f172af0;border-color:var(--color-neutral-700)}.baladyMapSelector__mapContainer{position:relative;width:100%;height:480px;border-radius:var(--border-radius-md, 8px);overflow:hidden;border:1px solid var(--color-neutral-200)}.baladyMapSelector__mapContainer sce-osm-leaflet-map{width:100%;height:100%;display:block}.baladyMapSelector__overlay{position:absolute;inset:0;z-index:1000;background-color:#ffffffd9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--color-neutral-900);font-size:.9rem;font-weight:600}.dark-theme .baladyMapSelector__overlay{background-color:#0f172ad9;color:var(--color-neutral-100)}.baladyMapSelector__spinner{width:32px;height:32px;border:3px solid rgba(16,185,129,.2);border-block-start-color:#059669;border-radius:50%;animation:baladySpin .8s linear infinite}.baladyMapSelector__summaryCard{background-color:#10b9810d;border:1px solid rgba(16,185,129,.2);border-radius:var(--border-radius-md, 8px);padding:.875rem 1rem;display:flex;flex-direction:column;gap:.5rem}.baladyMapSelector__summaryHeader{display:flex;align-items:center;gap:.5rem;color:#047857;font-size:.95rem}.baladyMapSelector__summaryHeader strong{font-weight:700}.baladyMapSelector__statusIcon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background-color:#059669;color:#fff;font-size:.75rem;font-weight:700}.baladyMapSelector__summaryGrid{display:grid;grid-template-columns:repeat(1,1fr);gap:.5rem}@media(min-width:640px){.baladyMapSelector__summaryGrid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.baladyMapSelector__summaryGrid{grid-template-columns:repeat(3,1fr)}}.baladyMapSelector__infoItem{display:flex;flex-direction:column}.baladyMapSelector__infoItem .label{font-size:.75rem;color:var(--color-neutral-600)}.baladyMapSelector__infoItem .val{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}@keyframes baladySpin{to{transform:rotate(360deg)}}@keyframes baladyFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SceSelectFieldComponent, selector: "sce-select-field", inputs: ["variant", "id", "label", "options", "group", "optionGroupLabel", "optionGroupChildren", "value", "placeholder", "required", "disabled", "helpText", "error", "filter", "filterMaxLength", "showClear", "dir", "validationMode", "validate", "validationMessages", "fieldClassName", "labelClassName", "inputClassName", "panelClassName", "borderless", "filterPlaceholder", "showError", "containerClassName", "resetToken"], outputs: ["valueChange"] }, { kind: "component", type: SceInlineApiErrorComponent, selector: "sce-inline-api-error", inputs: ["message", "className", "retryable"], outputs: ["retry"] }, { kind: "component", type: SceOsmLeafletMapComponent, selector: "sce-osm-leaflet-map", inputs: ["latitude", "longitude", "zoom", "markers", "interactive"], outputs: ["mapClick", "markerDragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SceBaladyMapSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ hostDirectives: [{ directive: SceVariantDirective, inputs: ['sceVariant', 'sceDensity'] }], host: { class: 'sce-balady-map-selector' }, selector: 'sce-balady-map-selector', standalone: true, imports: [CommonModule, SceSelectFieldComponent, SceInlineApiErrorComponent, SceOsmLeafletMapComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"baladyMapSelector\">\n  <div class=\"baladyMapSelector__filterHeader\">\n    <div class=\"baladyMapSelector__filterTitle\">\n      <h4>{{ '\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0639\u0642\u0627\u0631 \u0645\u0646 \u0627\u0644\u062E\u0631\u064A\u0637\u0629 \u0627\u0644\u062A\u0641\u0627\u0639\u0644\u064A\u0629' }}</h4>\n    </div>\n    <p class=\"baladyMapSelector__filterSubtitle\">\n      \u0627\u062E\u062A\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0645\u062F\u064A\u0646\u0629 \u0648\u0627\u0644\u062D\u064A \u0644\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0646\u0637\u0627\u0642\u060C \u062B\u0645 \u0627\u0636\u063A\u0637 \u0639\u0644\u0649 \u0645\u0648\u0642\u0639 \u0627\u0644\u0623\u0631\u0636 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064A \u0627\u0644\u062E\u0631\u064A\u0637\u0629 \u0644\u0627\u0633\u062A\u062E\u0631\u0627\u062C \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0645\u062E\u0637\u0637 \u0648\u0627\u0644\u0642\u0637\u0639\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u062D\u0629 \u0648\u0627\u0644\u062D\u062F\u0648\u062F.\n    </p>\n\n    @if (loadError()) {\n      <sce-inline-api-error [message]=\"'\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0645\u0646\u0627\u0637\u0642'\" [retryable]=\"true\" (retry)=\"loadRegions()\" />\n    }\n  </div>\n\n  <div class=\"baladyMapSelector__mapContainer\">\n    <!-- Floating Filters Bar over Map -->\n    <div class=\"baladyMapSelector__floatingFilters\">\n      @if (isLoadingFilterData()) {\n        <div class=\"baladyMapSelector__filterLoader\" role=\"status\" aria-label=\"\u062C\u0627\u0631\u064A \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0628\u064A\u0627\u0646\u0627\u062A\">\n          <div class=\"baladyMapSelector__miniSpinner\"></div>\n          <span>\u062C\u0627\u0631\u064A \u062C\u0644\u0628 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u062A\u0635\u0641\u064A\u0629...</span>\n        </div>\n      }\n\n      <div class=\"baladyMapSelector__grid\">\n        <sce-select-field\n          id=\"balady-filter-region\"\n          [label]=\"'\u0627\u0644\u0645\u0646\u0637\u0642\u0629'\"\n          [options]=\"regionOptions()\"\n          [value]=\"selectedRegionCode()\"\n          [disabled]=\"isLoadingFilterData()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onRegionChange($event)\"\n        />\n        <sce-select-field\n          id=\"balady-filter-city\"\n          [label]=\"'\u0627\u0644\u0645\u062F\u064A\u0646\u0629'\"\n          [options]=\"cityOptions()\"\n          [value]=\"selectedCityCode()\"\n          [disabled]=\"isLoadingFilterData() || !selectedRegionCode()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onCityChange($event)\"\n        />\n        <sce-select-field\n          id=\"balady-filter-district\"\n          [label]=\"'\u0627\u0644\u062D\u064A'\"\n          [options]=\"districtOptions()\"\n          [value]=\"selectedDistrictCode()\"\n          [disabled]=\"isLoadingFilterData() || !selectedCityCode()\"\n          [dir]=\"dir()\"\n          [showClear]=\"true\"\n          (valueChange)=\"onDistrictChange($event)\"\n        />\n      </div>\n    </div>\n\n    @if (isQueryingPointData()) {\n      <div class=\"baladyMapSelector__overlay\" role=\"status\" aria-label=\"\u062C\u0627\u0631\u064A \u0627\u0644\u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0639\u0646 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0623\u0631\u0636\">\n        <div class=\"baladyMapSelector__spinner\"></div>\n        <span>\u062C\u0627\u0631\u064A \u0627\u0644\u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0639\u0646 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0639\u0642\u0627\u0631 \u0648\u0627\u0644\u0642\u0637\u0639\u0629...</span>\n      </div>\n    }\n\n    <sce-osm-leaflet-map\n      [latitude]=\"currentLat()\"\n      [longitude]=\"currentLng()\"\n      [zoom]=\"zoomLevel()\"\n      [markers]=\"currentMarkers()\"\n      [interactive]=\"true\"\n      (mapClick)=\"onMapClicked($event)\"\n    />\n  </div>\n\n  @if (selectedPropertyData(); as prop) {\n    <div class=\"baladyMapSelector__summaryCard\" role=\"region\" aria-label=\"\u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0639\u0642\u0627\u0631 \u0627\u0644\u0645Selected\">\n      <div class=\"baladyMapSelector__summaryHeader\">\n        <span class=\"baladyMapSelector__statusIcon\">\u2713</span>\n        <strong>\u062A\u0645 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0639\u0642\u0627\u0631 \u0628\u0646\u062C\u0627\u062D</strong>\n      </div>\n      <div class=\"baladyMapSelector__summaryGrid\">\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0648\u0627\u0644\u0645\u062F\u064A\u0646\u0629:</span>\n          <span class=\"val\">{{ prop.region }} - {{ prop.city }} ({{ prop.districtName }})</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0631\u0642\u0645 \u0627\u0644\u0645\u062E\u0637\u0637:</span>\n          <span class=\"val\">{{ prop.planNO ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0631\u0642\u0645 \u0627\u0644\u0642\u0637\u0639\u0629:</span>\n          <span class=\"val\">{{ prop.parcelNo ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0627\u0644\u0623\u0631\u0636:</span>\n          <span class=\"val\">{{ prop.landuse ?? '-' }}</span>\n        </div>\n        <div class=\"baladyMapSelector__infoItem\">\n          <span class=\"label\">\u0627\u0644\u0645\u0633\u0627\u062D\u0629:</span>\n          <span class=\"val\">{{ formatArea(prop.area) }}</span>\n        </div>\n        @if (prop.directionParcel && prop.directionParcel.length) {\n          <!-- Track by index: a parcel can face the same direction twice, and duplicate keys throw NG0955. -->\n          @for (dir of prop.directionParcel; track $index) {\n            <div class=\"baladyMapSelector__infoItem\">\n              <span class=\"label\">\u062D\u062F\u0648\u062F \u0627\u0644\u0639\u0642\u0627\u0631 ({{ dir.direction }}):</span>\n              <span class=\"val\">{{ dir.length }} \u0645</span>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host.sce-balady-map-selector{display:block;width:100%}.baladyMapSelector{display:flex;flex-direction:column;gap:1rem;background-color:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-lg, 12px);padding:1.25rem}.baladyMapSelector__filterHeader{display:flex;flex-direction:column;gap:.75rem}.baladyMapSelector__filterTitle{display:flex;align-items:center;gap:.5rem}.baladyMapSelector__filterTitle h4{margin:0;font-size:1.05rem;font-weight:700;color:var(--color-neutral-900)}.baladyMapSelector__badge{display:inline-flex;align-items:center;padding:.2rem .6rem;font-size:.75rem;font-weight:700;border-radius:9999px;background-color:#10b9811a;color:#059669}.baladyMapSelector__filterSubtitle{margin:0;font-size:.875rem;color:var(--color-neutral-600);line-height:1.5}.baladyMapSelector__filterLoader{display:flex;align-items:center;gap:.6rem;padding:.5rem .875rem;border-radius:var(--border-radius-md, 8px);background-color:#10b98114;border:1px solid rgba(16,185,129,.2);color:#047857;font-size:.8125rem;font-weight:600;animation:baladyFadeIn .25s ease-in-out}.baladyMapSelector__miniSpinner{width:16px;height:16px;border:2px solid rgba(16,185,129,.25);border-block-start-color:#059669;border-radius:50%;animation:baladySpin .7s linear infinite}.baladyMapSelector__grid{display:grid;grid-template-columns:repeat(1,1fr);gap:.75rem}@media(min-width:768px){.baladyMapSelector__grid{grid-template-columns:repeat(3,1fr)}}.baladyMapSelector__floatingFilters{position:absolute;top:.75rem;inset-inline-start:.75rem;inset-inline-end:.75rem;z-index:500;display:flex;flex-direction:column;gap:.5rem;background-color:#fffffff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-md, 8px);padding:.75rem;box-shadow:0 4px 16px #00000014}.dark-theme .baladyMapSelector__floatingFilters{background-color:#0f172af0;border-color:var(--color-neutral-700)}.baladyMapSelector__mapContainer{position:relative;width:100%;height:480px;border-radius:var(--border-radius-md, 8px);overflow:hidden;border:1px solid var(--color-neutral-200)}.baladyMapSelector__mapContainer sce-osm-leaflet-map{width:100%;height:100%;display:block}.baladyMapSelector__overlay{position:absolute;inset:0;z-index:1000;background-color:#ffffffd9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--color-neutral-900);font-size:.9rem;font-weight:600}.dark-theme .baladyMapSelector__overlay{background-color:#0f172ad9;color:var(--color-neutral-100)}.baladyMapSelector__spinner{width:32px;height:32px;border:3px solid rgba(16,185,129,.2);border-block-start-color:#059669;border-radius:50%;animation:baladySpin .8s linear infinite}.baladyMapSelector__summaryCard{background-color:#10b9810d;border:1px solid rgba(16,185,129,.2);border-radius:var(--border-radius-md, 8px);padding:.875rem 1rem;display:flex;flex-direction:column;gap:.5rem}.baladyMapSelector__summaryHeader{display:flex;align-items:center;gap:.5rem;color:#047857;font-size:.95rem}.baladyMapSelector__summaryHeader strong{font-weight:700}.baladyMapSelector__statusIcon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background-color:#059669;color:#fff;font-size:.75rem;font-weight:700}.baladyMapSelector__summaryGrid{display:grid;grid-template-columns:repeat(1,1fr);gap:.5rem}@media(min-width:640px){.baladyMapSelector__summaryGrid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.baladyMapSelector__summaryGrid{grid-template-columns:repeat(3,1fr)}}.baladyMapSelector__infoItem{display:flex;flex-direction:column}.baladyMapSelector__infoItem .label{font-size:.75rem;color:var(--color-neutral-600)}.baladyMapSelector__infoItem .val{font-size:.875rem;font-weight:600;color:var(--color-neutral-900)}@keyframes baladySpin{to{transform:rotate(360deg)}}@keyframes baladyFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], initialPropertyData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialPropertyData", required: false }] }], propertySelected: [{ type: i0.Output, args: ["propertySelected"] }], mapClick: [{ type: i0.Output, args: ["mapClick"] }] } });
+
+/**
+ * `@moatamed-sce/ui-components/maps` — OSM / Leaflet map organisms.
+ *
+ * Kept off the main ui-components barrel so portal shells that import chrome
+ * (sidebar, layout, notifications) do not pull map/Leaflet code into the
+ * initial shared chunk. Marketplace / contracts / miyar import from here.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SceBaladyMapSelectorComponent, SceOfficeLocationMapComponent, SceOsmLeafletMapComponent, SceOsmLocationPickerComponent, SceOsmOfficesMapComponent, SceStoreLocationsComponent };
+//# sourceMappingURL=moatamed-sce-ui-components-maps.mjs.map