@geoit/ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4067,9 +4067,48 @@ const GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326 = [107.2, 11.15, 108.75, 12.35];
4067
4067
  const GEO_MAP_TRAFFIC_LAYER_ID = '__geo_traffic';
4068
4068
  const GEO_MAP_ESRI_IMAGERY_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
4069
4069
  const GEO_MAP_ESRI_STREETS_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
4070
+ const GEO_MAP_ESRI_LIGHT_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';
4071
+ const GEO_MAP_ESRI_DARK_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}';
4072
+ const GEO_MAP_ESRI_TOPO_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}';
4070
4073
  const GEO_MAP_ESRI_TRANSPORT_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
4071
- /** Default basemap picker options (đường phố / vệ tinh). */
4074
+ /**
4075
+ * Default basemap picker options (vertical dropdown design).
4076
+ * Order matches design: vệ tinh → sáng → 3D → đường phố → địa hình.
4077
+ */
4072
4078
  const GEO_MAP_DEFAULT_BASEMAP_OPTIONS = [
4079
+ {
4080
+ id: 'satellite',
4081
+ label: 'Nền vệ tinh',
4082
+ basemap: {
4083
+ type: 'xyz',
4084
+ url: GEO_MAP_ESRI_IMAGERY_URL,
4085
+ attributions: 'Esri, Maxar, Earthstar Geographics',
4086
+ title: 'Ảnh vệ tinh',
4087
+ },
4088
+ previewUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/6/30/50',
4089
+ },
4090
+ {
4091
+ id: 'light',
4092
+ label: 'Bản đồ sáng',
4093
+ basemap: {
4094
+ type: 'xyz',
4095
+ url: GEO_MAP_ESRI_LIGHT_URL,
4096
+ attributions: 'Esri',
4097
+ title: 'Bản đồ sáng',
4098
+ },
4099
+ previewUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/6/30/50',
4100
+ },
4101
+ {
4102
+ id: 'dark',
4103
+ label: 'Bản đồ 3D',
4104
+ basemap: {
4105
+ type: 'xyz',
4106
+ url: GEO_MAP_ESRI_DARK_URL,
4107
+ attributions: 'Esri',
4108
+ title: 'Bản đồ tối',
4109
+ },
4110
+ previewUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/6/30/50',
4111
+ },
4073
4112
  {
4074
4113
  id: 'osm',
4075
4114
  label: 'Đường phố',
@@ -4077,15 +4116,15 @@ const GEO_MAP_DEFAULT_BASEMAP_OPTIONS = [
4077
4116
  previewUrl: 'https://tile.openstreetmap.org/6/50/30.png',
4078
4117
  },
4079
4118
  {
4080
- id: 'satellite',
4081
- label: 'Vệ tinh',
4119
+ id: 'terrain',
4120
+ label: 'Nền địa hình',
4082
4121
  basemap: {
4083
4122
  type: 'xyz',
4084
- url: GEO_MAP_ESRI_IMAGERY_URL,
4085
- attributions: 'Esri, Maxar, Earthstar Geographics',
4086
- title: 'Ảnh vệ tinh',
4123
+ url: GEO_MAP_ESRI_TOPO_URL,
4124
+ attributions: 'Esri',
4125
+ title: 'Địa hình',
4087
4126
  },
4088
- previewUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/6/30/50',
4127
+ previewUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/6/30/50',
4089
4128
  },
4090
4129
  ];
4091
4130
  /** Transportation reference overlay — toggle independently of basemap. */
@@ -6366,59 +6405,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
6366
6405
  }] });
6367
6406
 
6368
6407
  /**
6369
- * Thumbnail card toggling street satellite basemap.
6408
+ * Thumbnail trigger + vertical dropdown to pick the map basemap.
6370
6409
  *
6371
- * @summary Toggle street / satellite basemap.
6372
- * @whenToUse Right-side basemap toggle.
6410
+ * @summary Pick basemap from a vertical thumbnail dropdown.
6411
+ * @whenToUse Bottom-right basemap picker («Lớp bản đồ»).
6373
6412
  * @doNotUseWhen Full layer panel — use geo-map-layer-panel.
6374
6413
  */
6375
6414
  class GeoMapBasemapSwitcherComponent {
6376
- /** Exactly two options (street + satellite). Extra items are ignored. */
6377
6415
  options = input(GEO_MAP_DEFAULT_BASEMAP_OPTIONS);
6378
6416
  selectedId = model('osm');
6379
6417
  /** Caption on the thumbnail card (design: «Lớp bản đồ»). */
6380
6418
  label = input('Lớp bản đồ');
6381
6419
  tooltip = input('Đổi lớp bản đồ nền');
6382
6420
  basemapChange = output();
6383
- pair = computed(() => {
6384
- const list = this.options().slice(0, 2);
6385
- return list.length >= 2 ? list : GEO_MAP_DEFAULT_BASEMAP_OPTIONS;
6421
+ open = signal(false);
6422
+ list = computed(() => {
6423
+ const list = this.options();
6424
+ return list.length ? list : GEO_MAP_DEFAULT_BASEMAP_OPTIONS;
6386
6425
  });
6387
6426
  selected = computed(() => {
6388
6427
  const id = this.selectedId();
6389
- const list = this.pair();
6428
+ const list = this.list();
6390
6429
  return list.find((item) => item.id === id) ?? list[0] ?? null;
6391
6430
  });
6392
- /** Preview of the other basemap (what click will switch to). */
6393
- next = computed(() => {
6394
- const list = this.pair();
6395
- if (!list.length) {
6396
- return null;
6397
- }
6398
- const currentId = this.selected()?.id;
6399
- return list.find((item) => item.id !== currentId) ?? list[0] ?? null;
6400
- });
6401
- tooltipText = computed(() => {
6402
- const next = this.next();
6403
- if (!next) {
6404
- return this.tooltip();
6405
- }
6406
- return `Chuyển sang ${next.label}`;
6407
- });
6408
- toggle() {
6409
- const next = this.next();
6410
- if (!next) {
6431
+ onVisible(visible) {
6432
+ this.open.set(visible);
6433
+ }
6434
+ pick(option) {
6435
+ this.open.set(false);
6436
+ if (option.id === this.selectedId()) {
6411
6437
  return;
6412
6438
  }
6413
- this.selectedId.set(next.id);
6414
- this.basemapChange.emit(next.basemap);
6439
+ this.selectedId.set(option.id);
6440
+ this.basemapChange.emit(option.basemap);
6415
6441
  }
6416
6442
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapBasemapSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6417
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapBasemapSwitcherComponent, isStandalone: true, selector: "geo-map-basemap-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", basemapChange: "basemapChange" }, host: { classAttribute: "geo-map-basemap-switcher-host" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"geo-map-basemap-switcher__trigger\"\n [nz-tooltip]=\"tooltipText()\"\n nzTooltipPlacement=\"left\"\n [attr.aria-label]=\"tooltipText()\"\n (click)=\"toggle()\"\n>\n @if (next(); as option) {\n @if (option.previewUrl; as url) {\n <img class=\"geo-map-basemap-switcher__preview\" [src]=\"url\" alt=\"\" />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__veil\" aria-hidden=\"true\"></span>\n <span class=\"geo-map-basemap-switcher__content\">\n <span class=\"geo-map-basemap-switcher__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 4.2 3 8.7l9 4.5 9-4.5-9-4.5Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15.3 12 19.8l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"geo-map-basemap-switcher__caption\">{{ label() }}</span>\n </span>\n</button>\n", styles: [".geo-map-basemap-switcher-host{display:block}.geo-map-basemap-switcher__trigger{position:relative;display:block;width:90px;height:90px;padding:0;overflow:hidden;border:3px solid var(--geo-color-neutral-white, #fff);border-radius:var(--geo-radius-2xl);background:var(--geo-color-neutral-800);box-shadow:var(--geo-shadow-md);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.geo-map-basemap-switcher__trigger:hover{box-shadow:var(--geo-shadow-lg, var(--geo-shadow-md));transform:translateY(-1px)}.geo-map-basemap-switcher__trigger:focus-visible{outline:2px solid var(--geo-color-primary-default);outline-offset:2px}.geo-map-basemap-switcher__preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.geo-map-basemap-switcher__preview--empty{background:linear-gradient(145deg,var(--geo-color-neutral-600),var(--geo-color-neutral-800))}.geo-map-basemap-switcher__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--geo-color-neutral-900) 55%,transparent) 100%)}.geo-map-basemap-switcher__content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;padding:0 8px 8px;color:var(--geo-color-neutral-white, #fff);pointer-events:none}.geo-map-basemap-switcher__icon{display:inline-flex;width:20px;height:20px;color:inherit;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--geo-color-neutral-900) 45%,transparent))}.geo-map-basemap-switcher__icon svg{width:100%;height:100%}.geo-map-basemap-switcher__caption{max-width:100%;font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);line-height:1.2;text-align:left;white-space:nowrap;text-shadow:0 1px 2px color-mix(in srgb,var(--geo-color-neutral-900) 55%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i1$2.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6443
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GeoMapBasemapSwitcherComponent, isStandalone: true, selector: "geo-map-basemap-switcher", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", basemapChange: "basemapChange" }, host: { classAttribute: "geo-map-basemap-switcher-host" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"geo-map-basemap-switcher__trigger\"\n nz-dropdown\n nzTrigger=\"click\"\n nzPlacement=\"topCenter\"\n nzOverlayClassName=\"geo-map-basemap-switcher-overlay\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"open()\"\n (nzVisibleChange)=\"onVisible($event)\"\n [nz-tooltip]=\"open() ? '' : tooltip()\"\n nzTooltipPlacement=\"left\"\n [attr.aria-label]=\"tooltip()\"\n [attr.aria-expanded]=\"open()\"\n>\n @if (selected(); as option) {\n @if (option.previewUrl; as url) {\n <img class=\"geo-map-basemap-switcher__preview\" [src]=\"url\" alt=\"\" />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__bar\" aria-hidden=\"true\">\n <span class=\"geo-map-basemap-switcher__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 4.2 3 8.7l9 4.5 9-4.5-9-4.5Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15.3 12 19.8l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 12 12 16.5l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"geo-map-basemap-switcher__caption\">{{ label() }}</span>\n </span>\n</button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <div\n class=\"geo-map-basemap-switcher__panel\"\n role=\"listbox\"\n [attr.aria-label]=\"tooltip()\"\n >\n <ul class=\"geo-map-basemap-switcher__list\">\n @for (option of list(); track option.id) {\n <li>\n <button\n type=\"button\"\n role=\"option\"\n class=\"geo-map-basemap-switcher__option\"\n [class.geo-map-basemap-switcher__option--active]=\"option.id === selectedId()\"\n [attr.aria-selected]=\"option.id === selectedId()\"\n (click)=\"pick(option)\"\n >\n @if (option.previewUrl; as url) {\n <img\n class=\"geo-map-basemap-switcher__option-thumb\"\n [src]=\"url\"\n alt=\"\"\n />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__option-thumb geo-map-basemap-switcher__option-thumb--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__option-label\">{{ option.label }}</span>\n </button>\n </li>\n }\n </ul>\n </div>\n</nz-dropdown-menu>\n", styles: ["@charset \"UTF-8\";.geo-map-basemap-switcher-host{display:block;width:90px}.geo-map-basemap-switcher__trigger{position:relative;display:block;width:90px;height:90px;padding:0;overflow:hidden;border:3px solid var(--geo-color-neutral-white, #fff);border-radius:var(--geo-radius-2xl);background:var(--geo-color-neutral-800);box-shadow:var(--geo-shadow-md);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.geo-map-basemap-switcher__trigger:hover{box-shadow:var(--geo-shadow-lg, var(--geo-shadow-md));transform:translateY(-1px)}.geo-map-basemap-switcher__trigger:focus-visible{outline:2px solid var(--geo-color-info-default);outline-offset:2px}.geo-map-basemap-switcher__preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.geo-map-basemap-switcher__preview--empty{background:linear-gradient(145deg,var(--geo-color-neutral-600),var(--geo-color-neutral-800))}.geo-map-basemap-switcher__bar{position:absolute;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;gap:4px;min-height:28px;padding:4px 6px;color:var(--geo-color-neutral-white, #fff);background:color-mix(in srgb,var(--geo-color-neutral-900) 72%,transparent);pointer-events:none}.geo-map-basemap-switcher__icon{display:inline-flex;flex-shrink:0;width:14px;height:14px;color:inherit}.geo-map-basemap-switcher__icon svg{width:100%;height:100%}.geo-map-basemap-switcher__caption{min-width:0;overflow:hidden;font-size:var(--geo-font-size-tiny, 10px);font-weight:var(--geo-font-weight-semibold, 600);line-height:1.2;text-align:left;text-overflow:ellipsis;white-space:nowrap}.geo-map-basemap-switcher-overlay .ant-dropdown-menu{padding:0;margin-bottom:8px;border:0;background:transparent;box-shadow:none}.geo-map-basemap-switcher__panel{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:104px;min-width:104px;max-width:104px;padding:10px 8px;border-radius:var(--geo-radius-xl, 14px);background:var(--geo-color-neutral-white, #fff);box-shadow:var(--geo-shadow-md)}.geo-map-basemap-switcher__list{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0;list-style:none}.geo-map-basemap-switcher__option{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:0;border:0;background:transparent;color:var(--geo-color-neutral-900);font:inherit;cursor:pointer}.geo-map-basemap-switcher__option:hover .geo-map-basemap-switcher__option-thumb{box-shadow:0 0 0 2px color-mix(in srgb,var(--geo-color-info-default) 35%,transparent)}.geo-map-basemap-switcher__option:focus-visible .geo-map-basemap-switcher__option-thumb{outline:2px solid var(--geo-color-info-default);outline-offset:2px}.geo-map-basemap-switcher__option--active .geo-map-basemap-switcher__option-thumb{box-shadow:0 0 0 2px var(--geo-color-info-default)}.geo-map-basemap-switcher__option--active .geo-map-basemap-switcher__option-label{color:var(--geo-color-info-default);font-weight:var(--geo-font-weight-semibold, 600)}.geo-map-basemap-switcher__option-thumb{display:block;width:72px;height:72px;border-radius:var(--geo-radius-lg, 12px);object-fit:cover;background:var(--geo-color-neutral-200);transition:box-shadow .15s ease}.geo-map-basemap-switcher__option-thumb--empty{background:linear-gradient(145deg,var(--geo-color-neutral-500),var(--geo-color-neutral-700))}.geo-map-basemap-switcher__option-label{max-width:100%;padding:0 2px;overflow:hidden;color:inherit;font-size:var(--geo-font-size-tiny, 10px);font-weight:var(--geo-font-weight-medium, 500);line-height:1.25;text-align:center;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i1$2.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzDropDownModule }, { kind: "directive", type: i2$6.NzDropDownDirective, selector: "[nz-dropdown]", inputs: ["nzDropdownMenu", "nzTrigger", "nzMatchWidthElement", "nzBackdrop", "nzClickHide", "nzDisabled", "nzVisible", "nzOverlayClassName", "nzOverlayStyle", "nzPlacement"], outputs: ["nzVisibleChange"], exportAs: ["nzDropdown"] }, { kind: "component", type: i2$6.NzDropdownMenuComponent, selector: "nz-dropdown-menu", exportAs: ["nzDropdownMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
6418
6444
  }
6419
6445
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GeoMapBasemapSwitcherComponent, decorators: [{
6420
6446
  type: Component,
6421
- args: [{ selector: 'geo-map-basemap-switcher', standalone: true, imports: [NzToolTipModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-map-basemap-switcher-host' }, template: "<button\n type=\"button\"\n class=\"geo-map-basemap-switcher__trigger\"\n [nz-tooltip]=\"tooltipText()\"\n nzTooltipPlacement=\"left\"\n [attr.aria-label]=\"tooltipText()\"\n (click)=\"toggle()\"\n>\n @if (next(); as option) {\n @if (option.previewUrl; as url) {\n <img class=\"geo-map-basemap-switcher__preview\" [src]=\"url\" alt=\"\" />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__veil\" aria-hidden=\"true\"></span>\n <span class=\"geo-map-basemap-switcher__content\">\n <span class=\"geo-map-basemap-switcher__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 4.2 3 8.7l9 4.5 9-4.5-9-4.5Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15.3 12 19.8l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"geo-map-basemap-switcher__caption\">{{ label() }}</span>\n </span>\n</button>\n", styles: [".geo-map-basemap-switcher-host{display:block}.geo-map-basemap-switcher__trigger{position:relative;display:block;width:90px;height:90px;padding:0;overflow:hidden;border:3px solid var(--geo-color-neutral-white, #fff);border-radius:var(--geo-radius-2xl);background:var(--geo-color-neutral-800);box-shadow:var(--geo-shadow-md);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.geo-map-basemap-switcher__trigger:hover{box-shadow:var(--geo-shadow-lg, var(--geo-shadow-md));transform:translateY(-1px)}.geo-map-basemap-switcher__trigger:focus-visible{outline:2px solid var(--geo-color-primary-default);outline-offset:2px}.geo-map-basemap-switcher__preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.geo-map-basemap-switcher__preview--empty{background:linear-gradient(145deg,var(--geo-color-neutral-600),var(--geo-color-neutral-800))}.geo-map-basemap-switcher__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--geo-color-neutral-900) 55%,transparent) 100%)}.geo-map-basemap-switcher__content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;padding:0 8px 8px;color:var(--geo-color-neutral-white, #fff);pointer-events:none}.geo-map-basemap-switcher__icon{display:inline-flex;width:20px;height:20px;color:inherit;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--geo-color-neutral-900) 45%,transparent))}.geo-map-basemap-switcher__icon svg{width:100%;height:100%}.geo-map-basemap-switcher__caption{max-width:100%;font-size:var(--geo-font-size-caption);font-weight:var(--geo-font-weight-semibold);line-height:1.2;text-align:left;white-space:nowrap;text-shadow:0 1px 2px color-mix(in srgb,var(--geo-color-neutral-900) 55%,transparent)}\n"] }]
6447
+ args: [{ selector: 'geo-map-basemap-switcher', standalone: true, imports: [NzToolTipModule, NzDropDownModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'geo-map-basemap-switcher-host' }, template: "<button\n type=\"button\"\n class=\"geo-map-basemap-switcher__trigger\"\n nz-dropdown\n nzTrigger=\"click\"\n nzPlacement=\"topCenter\"\n nzOverlayClassName=\"geo-map-basemap-switcher-overlay\"\n [nzDropdownMenu]=\"menu\"\n [nzVisible]=\"open()\"\n (nzVisibleChange)=\"onVisible($event)\"\n [nz-tooltip]=\"open() ? '' : tooltip()\"\n nzTooltipPlacement=\"left\"\n [attr.aria-label]=\"tooltip()\"\n [attr.aria-expanded]=\"open()\"\n>\n @if (selected(); as option) {\n @if (option.previewUrl; as url) {\n <img class=\"geo-map-basemap-switcher__preview\" [src]=\"url\" alt=\"\" />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n } @else {\n <span\n class=\"geo-map-basemap-switcher__preview geo-map-basemap-switcher__preview--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__bar\" aria-hidden=\"true\">\n <span class=\"geo-map-basemap-switcher__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 4.2 3 8.7l9 4.5 9-4.5-9-4.5Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 15.3 12 19.8l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M3 12 12 16.5l9-4.5\"\n stroke=\"currentColor\"\n stroke-width=\"1.75\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"geo-map-basemap-switcher__caption\">{{ label() }}</span>\n </span>\n</button>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <div\n class=\"geo-map-basemap-switcher__panel\"\n role=\"listbox\"\n [attr.aria-label]=\"tooltip()\"\n >\n <ul class=\"geo-map-basemap-switcher__list\">\n @for (option of list(); track option.id) {\n <li>\n <button\n type=\"button\"\n role=\"option\"\n class=\"geo-map-basemap-switcher__option\"\n [class.geo-map-basemap-switcher__option--active]=\"option.id === selectedId()\"\n [attr.aria-selected]=\"option.id === selectedId()\"\n (click)=\"pick(option)\"\n >\n @if (option.previewUrl; as url) {\n <img\n class=\"geo-map-basemap-switcher__option-thumb\"\n [src]=\"url\"\n alt=\"\"\n />\n } @else {\n <span\n class=\"geo-map-basemap-switcher__option-thumb geo-map-basemap-switcher__option-thumb--empty\"\n aria-hidden=\"true\"\n ></span>\n }\n <span class=\"geo-map-basemap-switcher__option-label\">{{ option.label }}</span>\n </button>\n </li>\n }\n </ul>\n </div>\n</nz-dropdown-menu>\n", styles: ["@charset \"UTF-8\";.geo-map-basemap-switcher-host{display:block;width:90px}.geo-map-basemap-switcher__trigger{position:relative;display:block;width:90px;height:90px;padding:0;overflow:hidden;border:3px solid var(--geo-color-neutral-white, #fff);border-radius:var(--geo-radius-2xl);background:var(--geo-color-neutral-800);box-shadow:var(--geo-shadow-md);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.geo-map-basemap-switcher__trigger:hover{box-shadow:var(--geo-shadow-lg, var(--geo-shadow-md));transform:translateY(-1px)}.geo-map-basemap-switcher__trigger:focus-visible{outline:2px solid var(--geo-color-info-default);outline-offset:2px}.geo-map-basemap-switcher__preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.geo-map-basemap-switcher__preview--empty{background:linear-gradient(145deg,var(--geo-color-neutral-600),var(--geo-color-neutral-800))}.geo-map-basemap-switcher__bar{position:absolute;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;gap:4px;min-height:28px;padding:4px 6px;color:var(--geo-color-neutral-white, #fff);background:color-mix(in srgb,var(--geo-color-neutral-900) 72%,transparent);pointer-events:none}.geo-map-basemap-switcher__icon{display:inline-flex;flex-shrink:0;width:14px;height:14px;color:inherit}.geo-map-basemap-switcher__icon svg{width:100%;height:100%}.geo-map-basemap-switcher__caption{min-width:0;overflow:hidden;font-size:var(--geo-font-size-tiny, 10px);font-weight:var(--geo-font-weight-semibold, 600);line-height:1.2;text-align:left;text-overflow:ellipsis;white-space:nowrap}.geo-map-basemap-switcher-overlay .ant-dropdown-menu{padding:0;margin-bottom:8px;border:0;background:transparent;box-shadow:none}.geo-map-basemap-switcher__panel{border:1px solid var(--geo-color-border-default);border-radius:var(--geo-radius-lg);background:var(--geo-color-surface-elevated);box-shadow:var(--geo-shadow-sm);width:104px;min-width:104px;max-width:104px;padding:10px 8px;border-radius:var(--geo-radius-xl, 14px);background:var(--geo-color-neutral-white, #fff);box-shadow:var(--geo-shadow-md)}.geo-map-basemap-switcher__list{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0;list-style:none}.geo-map-basemap-switcher__option{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:0;border:0;background:transparent;color:var(--geo-color-neutral-900);font:inherit;cursor:pointer}.geo-map-basemap-switcher__option:hover .geo-map-basemap-switcher__option-thumb{box-shadow:0 0 0 2px color-mix(in srgb,var(--geo-color-info-default) 35%,transparent)}.geo-map-basemap-switcher__option:focus-visible .geo-map-basemap-switcher__option-thumb{outline:2px solid var(--geo-color-info-default);outline-offset:2px}.geo-map-basemap-switcher__option--active .geo-map-basemap-switcher__option-thumb{box-shadow:0 0 0 2px var(--geo-color-info-default)}.geo-map-basemap-switcher__option--active .geo-map-basemap-switcher__option-label{color:var(--geo-color-info-default);font-weight:var(--geo-font-weight-semibold, 600)}.geo-map-basemap-switcher__option-thumb{display:block;width:72px;height:72px;border-radius:var(--geo-radius-lg, 12px);object-fit:cover;background:var(--geo-color-neutral-200);transition:box-shadow .15s ease}.geo-map-basemap-switcher__option-thumb--empty{background:linear-gradient(145deg,var(--geo-color-neutral-500),var(--geo-color-neutral-700))}.geo-map-basemap-switcher__option-label{max-width:100%;padding:0 2px;overflow:hidden;color:inherit;font-size:var(--geo-font-size-tiny, 10px);font-weight:var(--geo-font-weight-medium, 500);line-height:1.25;text-align:center;text-overflow:ellipsis;white-space:nowrap}\n"] }]
6422
6448
  }] });
6423
6449
 
6424
6450
  /**
@@ -8196,5 +8222,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
8196
8222
  * Generated bundle index. Do not edit.
8197
8223
  */
8198
8224
 
8199
- export { DEFAULT_UI_ROW_ACTIONS, DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS, GEO_ICON_SIZE_MAP, GEO_LAYOUT_DEFAULT_NOTIFICATIONS, GEO_LAYOUT_DEFAULT_SUBSYSTEMS, GEO_LAYOUT_DEFAULT_USER, GEO_LAYOUT_DEFAULT_USER_MENU, GEO_MAP_BASEMAP_LAYER_ID, GEO_MAP_BUILTIN_PROJECTIONS, GEO_MAP_DEFAULT_BASEMAP_OPTIONS, GEO_MAP_DEFAULT_CENTER, GEO_MAP_DEFAULT_HEIGHT, GEO_MAP_DEFAULT_HELP_SECTIONS, GEO_MAP_DEFAULT_MAX_ZOOM, GEO_MAP_DEFAULT_MIN_ZOOM, GEO_MAP_DEFAULT_PLANNING_LAYERS, GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326, GEO_MAP_DEFAULT_TOOLBAR_ACTIONS, GEO_MAP_DEFAULT_VIEW_PROJECTION, GEO_MAP_DEFAULT_ZOOM, GEO_MAP_DEMO_ADMIN_NODES, GEO_MAP_DEMO_LEGEND_ITEMS, GEO_MAP_DEMO_PARCEL_DETAIL, GEO_MAP_DEMO_THEMATIC_LAYERS, GEO_MAP_ENV_PLACEHOLDERS, GEO_MAP_ESRI_IMAGERY_URL, GEO_MAP_ESRI_STREETS_URL, GEO_MAP_ESRI_TRANSPORT_URL, GEO_MAP_HIGHLIGHT_LAYER_ID, GEO_MAP_LOCATE_TOOLBAR_ACTION, GEO_MAP_MEASURE_LAYER_ID, GEO_MAP_SELECTION_LAYER_ID, GEO_MAP_TOOLBAR_ASSET_BASE, GEO_MAP_TOOLBAR_ICONS, GEO_MAP_TRAFFIC_LAYER_ID, GEO_MAP_TRAFFIC_OVERLAY, GEO_STATUS_COLOR_MAP, GEO_STATUS_LABELS, GEO_TOAST_DEFAULT_TITLES, GEO_TOAST_ICONS, GEO_TYPOGRAPHY_TAG, GEO_TYPOGRAPHY_VARIANTS, GeoAccordionComponent, GeoAccordionPanelDirective, GeoAlertComponent, GeoBackButtonComponent, GeoBreadcrumbComponent, GeoButtonComponent, GeoChartComponent, GeoCheckboxComponent, GeoColumnPickerComponent, GeoConfirmModalComponent, GeoDashboardComponent, GeoDatePickerComponent, GeoDateRangePickerComponent, GeoDetailViewComponent, GeoDetailViewItemDirective, GeoEmptyStateComponent, GeoFeedbackFormComponent, GeoFilePickerComponent, GeoForgotPasswordComponent, GeoFormModalComponent, GeoIconComponent, GeoInputComponent, GeoLayoutActionsDirective, GeoLayoutComponent, GeoLayoutFooterComponent, GeoLayoutHeaderActionsComponent, GeoLayoutHeaderComponent, GeoLayoutSidebarComponent, GeoListPageComponent, GeoLoginComponent, GeoMapAdminFilterComponent, GeoMapBasemapSwitcherComponent, GeoMapComponent, GeoMapController, GeoMapHelpComponent, GeoMapLayerCardComponent, GeoMapLayerPanelComponent, GeoMapLayerService, GeoMapLayersDrawerComponent, GeoMapLegendComponent, GeoMapLocateComponent, GeoMapLocationChipComponent, GeoMapMeasureComponent, GeoMapOpacityComponent, GeoMapParcelPopupComponent, GeoMapProjectionError, GeoMapProjectionService, GeoMapSearchComponent, GeoMapService, GeoMapShellComponent, GeoMapSnapshotComponent, GeoMapSwipeComponent, GeoMapToolbarComponent, GeoMapZoomComponent, GeoOverlapResultComponent, GeoPageHeaderComponent, GeoPageTitleComponent, GeoPaginationComponent, GeoRadioComponent, GeoRowActionsComponent, GeoSelectComponent, GeoSliderComponent, GeoStatCardComponent, GeoStatusTagComponent, GeoStepFormLayoutComponent, GeoStepperComponent, GeoSwitchComponent, GeoTabDirective, GeoTableComponent, GeoTableFilterComponent, GeoTablePaginationComponent, GeoTableToolbarComponent, GeoTabsComponent, GeoTextareaComponent, GeoToastComponent, GeoToastService, GeoTreeComponent, GeoTypographyComponent, GeoUploadComponent, NgZorroAntdModule, UI_ALERT_DEFAULT_TITLES, UI_STATUS_LABELS, UI_TABLE_MOBILE_BREAKPOINT, applyColumnPickerState, cssVar, geoColorCssVars, geoColorTokens, geoFormatBytes, geoFormatSpeed, geoRadiusCssVars, geoRadiusTokens, geoShadowTokens, geoTypographyTokens, geoUploadPercent, loadColumnPickerState, mergeColumnPickerItems, pickInlineRowActions, pickOverflowRowActions, saveColumnPickerState };
8225
+ export { DEFAULT_UI_ROW_ACTIONS, DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS, GEO_ICON_SIZE_MAP, GEO_LAYOUT_DEFAULT_NOTIFICATIONS, GEO_LAYOUT_DEFAULT_SUBSYSTEMS, GEO_LAYOUT_DEFAULT_USER, GEO_LAYOUT_DEFAULT_USER_MENU, GEO_MAP_BASEMAP_LAYER_ID, GEO_MAP_BUILTIN_PROJECTIONS, GEO_MAP_DEFAULT_BASEMAP_OPTIONS, GEO_MAP_DEFAULT_CENTER, GEO_MAP_DEFAULT_HEIGHT, GEO_MAP_DEFAULT_HELP_SECTIONS, GEO_MAP_DEFAULT_MAX_ZOOM, GEO_MAP_DEFAULT_MIN_ZOOM, GEO_MAP_DEFAULT_PLANNING_LAYERS, GEO_MAP_DEFAULT_PROVINCE_EXTENT_4326, GEO_MAP_DEFAULT_TOOLBAR_ACTIONS, GEO_MAP_DEFAULT_VIEW_PROJECTION, GEO_MAP_DEFAULT_ZOOM, GEO_MAP_DEMO_ADMIN_NODES, GEO_MAP_DEMO_LEGEND_ITEMS, GEO_MAP_DEMO_PARCEL_DETAIL, GEO_MAP_DEMO_THEMATIC_LAYERS, GEO_MAP_ENV_PLACEHOLDERS, GEO_MAP_ESRI_DARK_URL, GEO_MAP_ESRI_IMAGERY_URL, GEO_MAP_ESRI_LIGHT_URL, GEO_MAP_ESRI_STREETS_URL, GEO_MAP_ESRI_TOPO_URL, GEO_MAP_ESRI_TRANSPORT_URL, GEO_MAP_HIGHLIGHT_LAYER_ID, GEO_MAP_LOCATE_TOOLBAR_ACTION, GEO_MAP_MEASURE_LAYER_ID, GEO_MAP_SELECTION_LAYER_ID, GEO_MAP_TOOLBAR_ASSET_BASE, GEO_MAP_TOOLBAR_ICONS, GEO_MAP_TRAFFIC_LAYER_ID, GEO_MAP_TRAFFIC_OVERLAY, GEO_STATUS_COLOR_MAP, GEO_STATUS_LABELS, GEO_TOAST_DEFAULT_TITLES, GEO_TOAST_ICONS, GEO_TYPOGRAPHY_TAG, GEO_TYPOGRAPHY_VARIANTS, GeoAccordionComponent, GeoAccordionPanelDirective, GeoAlertComponent, GeoBackButtonComponent, GeoBreadcrumbComponent, GeoButtonComponent, GeoChartComponent, GeoCheckboxComponent, GeoColumnPickerComponent, GeoConfirmModalComponent, GeoDashboardComponent, GeoDatePickerComponent, GeoDateRangePickerComponent, GeoDetailViewComponent, GeoDetailViewItemDirective, GeoEmptyStateComponent, GeoFeedbackFormComponent, GeoFilePickerComponent, GeoForgotPasswordComponent, GeoFormModalComponent, GeoIconComponent, GeoInputComponent, GeoLayoutActionsDirective, GeoLayoutComponent, GeoLayoutFooterComponent, GeoLayoutHeaderActionsComponent, GeoLayoutHeaderComponent, GeoLayoutSidebarComponent, GeoListPageComponent, GeoLoginComponent, GeoMapAdminFilterComponent, GeoMapBasemapSwitcherComponent, GeoMapComponent, GeoMapController, GeoMapHelpComponent, GeoMapLayerCardComponent, GeoMapLayerPanelComponent, GeoMapLayerService, GeoMapLayersDrawerComponent, GeoMapLegendComponent, GeoMapLocateComponent, GeoMapLocationChipComponent, GeoMapMeasureComponent, GeoMapOpacityComponent, GeoMapParcelPopupComponent, GeoMapProjectionError, GeoMapProjectionService, GeoMapSearchComponent, GeoMapService, GeoMapShellComponent, GeoMapSnapshotComponent, GeoMapSwipeComponent, GeoMapToolbarComponent, GeoMapZoomComponent, GeoOverlapResultComponent, GeoPageHeaderComponent, GeoPageTitleComponent, GeoPaginationComponent, GeoRadioComponent, GeoRowActionsComponent, GeoSelectComponent, GeoSliderComponent, GeoStatCardComponent, GeoStatusTagComponent, GeoStepFormLayoutComponent, GeoStepperComponent, GeoSwitchComponent, GeoTabDirective, GeoTableComponent, GeoTableFilterComponent, GeoTablePaginationComponent, GeoTableToolbarComponent, GeoTabsComponent, GeoTextareaComponent, GeoToastComponent, GeoToastService, GeoTreeComponent, GeoTypographyComponent, GeoUploadComponent, NgZorroAntdModule, UI_ALERT_DEFAULT_TITLES, UI_STATUS_LABELS, UI_TABLE_MOBILE_BREAKPOINT, applyColumnPickerState, cssVar, geoColorCssVars, geoColorTokens, geoFormatBytes, geoFormatSpeed, geoRadiusCssVars, geoRadiusTokens, geoShadowTokens, geoTypographyTokens, geoUploadPercent, loadColumnPickerState, mergeColumnPickerItems, pickInlineRowActions, pickOverflowRowActions, saveColumnPickerState };
8200
8226
  //# sourceMappingURL=geoit-ui.mjs.map