@aceshooting/lyra-ui 11.2.0 → 12.0.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.
- package/CHANGELOG.md +388 -0
- package/README.md +11 -8
- package/custom-elements.json +1 -1
- package/dist/all.d.ts +1 -0
- package/dist/all.js +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +13 -1
- package/dist/components/data/funnel/funnel.class.d.ts +92 -0
- package/dist/components/data/funnel/funnel.class.js +25 -0
- package/dist/components/data/funnel/funnel.d.ts +1 -0
- package/dist/components/data/funnel/funnel.js +1 -0
- package/dist/components/data/funnel/funnel.styles.d.ts +1 -0
- package/dist/components/data/funnel/funnel.styles.js +127 -0
- package/dist/components/data/heatmap/heatmap.class.d.ts +195 -13
- package/dist/components/data/heatmap/heatmap.class.js +30 -22
- package/dist/components/data/heatmap/heatmap.styles.js +36 -0
- package/dist/components/data/index.d.ts +1 -0
- package/dist/components/data/index.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +23 -0
- package/dist/components/forms/date-picker/date-input.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail-item.class.d.ts +16 -0
- package/dist/components/layout/app-rail/app-rail-item.class.js +4 -4
- package/dist/components/layout/filter-bar/filter-bar.class.d.ts +32 -3
- package/dist/components/layout/filter-bar/filter-bar.class.js +2 -1
- package/dist/components/layout/widget/widget.class.d.ts +16 -0
- package/dist/components/layout/widget/widget.class.js +2 -2
- package/dist/components/lr-funnel.d.ts +1 -0
- package/dist/components/lr-funnel.js +1 -0
- package/dist/components/media/flag/flag-peer-bulk-standard.d.ts +25 -0
- package/dist/components/media/flag/flag-peer-bulk-standard.js +1 -0
- package/dist/components/media/flag/flag.class.d.ts +8 -0
- package/dist/components/media/flag/flag.class.js +1 -1
- package/dist/components/media/map/map.class.d.ts +196 -15
- package/dist/components/media/map/map.class.js +1 -1
- package/dist/components/overlays/chip/chip-group.class.d.ts +16 -0
- package/dist/components/overlays/chip/chip-group.class.js +10 -3
- package/dist/custom-elements-jsx.d.ts +12 -4
- package/dist/internal/autoloader-manifest.js +1 -1
- package/dist/internal/autoloader-tags.d.ts +1 -1
- package/dist/internal/autoloader-tags.js +1 -1
- package/dist/internal/lyra-element.d.ts +7 -1
- package/dist/internal/lyra-element.js +1 -1
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/root-registration-allowlist.d.ts +1 -1
- package/dist/internal/root-registration-allowlist.js +1 -1
- package/dist/lyra.d.ts +4 -2
- package/dist/lyra.js +1 -1
- package/dist/ssr/all.d.ts +1 -0
- package/dist/ssr/all.js +1 -1
- package/dist/ssr.d.ts +4 -4
- package/dist/styles/tokens-root.css +488 -0
- package/dist/svelte.d.ts +13 -4
- package/dist/vue.d.ts +12 -4
- package/llms/components/lr-app-rail-item.md +8 -1
- package/llms/components/lr-app-rail.md +6 -0
- package/llms/components/lr-chip-group.md +7 -0
- package/llms/components/lr-chip.md +7 -0
- package/llms/components/lr-date-input.md +19 -1
- package/llms/components/lr-date-picker.md +19 -1
- package/llms/components/lr-filter-bar.md +50 -1
- package/llms/components/lr-flag.md +14 -0
- package/llms/components/lr-funnel.md +122 -0
- package/llms/components/lr-heatmap.md +51 -7
- package/llms/components/lr-map.md +65 -8
- package/llms/components/lr-widget.md +7 -1
- package/llms/index.md +3 -2
- package/llms/peers.md +1 -1
- package/llms/shared.md +110 -1
- package/llms-full.txt +468 -18
- package/llms.txt +1 -1
- package/package.json +25 -6
- package/vscode-css-data.json +42 -0
- package/vscode-html-data.json +96 -17
- package/web-types.json +32714 -317
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,alpha3ToAlpha2,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_flagLoadError,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function resolverFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.flagUrl;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="function")return fallback;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.flagUrl;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}async function loadFlagUrl(importFlags){try{const resolver=resolverFromModule(await importFlags());if(resolver)return resolver;throw new TypeError("The flag peer does not expose a callable flagUrl capability.")}catch{return console.warn("<lr-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render flag images \u2014 install it with `pnpm add @aceshooting/lyra-flags`."),null}}function resolverFactoryFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.createFlagUrlResolver;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.createFlagUrlResolver;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}async function loadBulkFlagUrl(importFlags){try{const factory=resolverFactoryFromModule(await importFlags());if(factory)return factory();throw new TypeError("The flag peer does not expose a callable createFlagUrlResolver capability.")}catch{return console.warn("<lr-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render flag images \u2014 install it with `pnpm add @aceshooting/lyra-flags`."),null}}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}let flagUrlResolver,flagResolverGeneration=0;const flagResolverSubscribers=new Set;let warnedMissingFlagResolver=!1;function warnMissingFlagResolver(code){warnedMissingFlagResolver||(warnedMissingFlagResolver=!0,console.warn(`<lr-flag> could not resolve the code "${code}" because no flag resolver is registered. Import the optional peer entry once at startup -- import '@aceshooting/lyra-ui/components/media/flag/flag-peer.js' -- and install '@aceshooting/lyra-flags', or pass an already-resolved URL through 'src' instead.`))}function setFlagUrlResolver(value){flagUrlResolver=value===null?Promise.resolve(null):Promise.resolve(value),warnedMissingFlagResolver=!1,flagResolverGeneration++;for(const subscriber of[...flagResolverSubscribers])subscriber(flagResolverGeneration)}function loadFlagUrlResolver(){return flagUrlResolver||(flagUrlResolver=Promise.resolve(null)),flagUrlResolver}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=flagResolverGeneration,this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():alpha3ToAlpha2(this.country);if(this.language)return languageToCountry(this.language)}get unresolved(){return this.src||!this.country&&!this.language?!1:this.code===void 0}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,flagResolverSubscribers.add(this.onResolverGeneration),this.syncErrorAnnouncementSink(),this.resolverGeneration!==flagResolverGeneration&&(this.resolverGeneration=flagResolverGeneration),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,flagResolverSubscribers.delete(this.onResolverGeneration),this.releaseErrorAnnouncementSink(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink(),this.requestUpdate()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}announceLoadError(){this.errorAnnouncementSink?.announce(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.toggleAttribute("data-unresolved",this.unresolved),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if(directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){warnMissingFlagResolver(code),this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(console.warn(`<lr-flag> failed to resolve a flag URL for "${code}":`,err),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading")),this.toggleAttribute("data-unresolved",this.unresolved)}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(this.unresolved)return html`<slot name="fallback"
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,alpha3ToAlpha2,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_flagLoadError,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function resolverFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.flagUrl;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="function")return fallback;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.flagUrl;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}function warnFlagPeerMissing(){console.warn("<lr-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render flag images \u2014 install it with `pnpm add @aceshooting/lyra-flags`.")}function warnFlagPeerIncapable(capability){console.warn(`<lr-flag> loaded '@aceshooting/lyra-flags' but it does not expose \`${capability}\`. The package is installed, so this is a version mismatch rather than a missing dependency: upgrade it to a release that provides that capability, and check the peer range in <lr-flag>'s own package metadata for the floor it expects.`)}async function loadFlagUrl(importFlags){let peerModule;try{peerModule=await importFlags()}catch{return warnFlagPeerMissing(),null}try{const resolver=resolverFromModule(peerModule);if(resolver)return resolver}catch{}return warnFlagPeerIncapable("flagUrl"),null}function resolverFactoryFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.createFlagUrlResolver;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.createFlagUrlResolver;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}async function loadBulkFlagUrl(importFlags){let peerModule;try{peerModule=await importFlags()}catch{return warnFlagPeerMissing(),null}const factory=resolverFactoryFromModule(peerModule);if(!factory)return warnFlagPeerIncapable("createFlagUrlResolver"),null;try{return factory()}catch{return warnFlagPeerIncapable("createFlagUrlResolver"),null}}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}let flagUrlResolver,flagResolverGeneration=0;const flagResolverSubscribers=new Set;let warnedMissingFlagResolver=!1;function warnMissingFlagResolver(code){warnedMissingFlagResolver||(warnedMissingFlagResolver=!0,console.warn(`<lr-flag> could not resolve the code "${code}" because no flag resolver is registered. Import the optional peer entry once at startup -- import '@aceshooting/lyra-ui/components/media/flag/flag-peer.js' -- and install '@aceshooting/lyra-flags', or pass an already-resolved URL through 'src' instead.`))}function setFlagUrlResolver(value){flagUrlResolver=value===null?Promise.resolve(null):Promise.resolve(value),warnedMissingFlagResolver=!1,flagResolverGeneration++;for(const subscriber of[...flagResolverSubscribers])subscriber(flagResolverGeneration)}function loadFlagUrlResolver(){return flagUrlResolver||(flagUrlResolver=Promise.resolve(null)),flagUrlResolver}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=flagResolverGeneration,this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():alpha3ToAlpha2(this.country);if(this.language)return languageToCountry(this.language)}get unresolved(){return this.src||!this.country&&!this.language?!1:this.code===void 0}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,flagResolverSubscribers.add(this.onResolverGeneration),this.syncErrorAnnouncementSink(),this.resolverGeneration!==flagResolverGeneration&&(this.resolverGeneration=flagResolverGeneration),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,flagResolverSubscribers.delete(this.onResolverGeneration),this.releaseErrorAnnouncementSink(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink(),this.requestUpdate()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}announceLoadError(){this.errorAnnouncementSink?.announce(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.toggleAttribute("data-unresolved",this.unresolved),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if(directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){warnMissingFlagResolver(code),this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(console.warn(`<lr-flag> failed to resolve a flag URL for "${code}":`,err),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading")),this.toggleAttribute("data-unresolved",this.unresolved)}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(this.unresolved)return html`<slot name="fallback"
|
|
2
2
|
>${this.fallback?html`<img part="fallback-image" src=${this.fallback} alt=${this.label??""} />`:nothing}</slot
|
|
3
3
|
>`;if(state2.status==="error")return html`<span part="error">${this.localize(FLAG_LOAD_ERROR_KEY)}</span>`;const url=state2.status==="loading"||state2.status==="loaded"?state2.url:void 0;if(!url&&state2.status!=="loading")return html``;const code=this.code,alt=hostAriaLabel(this)??this.label??(code?displayNameFor(code,this.effectiveLocale):"");return html`
|
|
4
4
|
${state2.status==="loading"?html`
|
|
@@ -75,9 +75,83 @@ export interface LyraMapChoroplethLayer {
|
|
|
75
75
|
* gradient legend) but could not express this one.
|
|
76
76
|
*/
|
|
77
77
|
export type LyraMapChoroplethInterpolation = 'linear' | 'logarithmic' | 'step';
|
|
78
|
+
/**
|
|
79
|
+
* What a `dataLayers` entry renders.
|
|
80
|
+
*
|
|
81
|
+
* `'auto'` (the default, and the only previous behavior) splits the source by geometry into the
|
|
82
|
+
* fill/line/circle layers below. `'heatmap'` replaces that split with MapLibre's own first-class
|
|
83
|
+
* `heatmap` layer — a density surface, which the geometry split cannot express at all: thousands of
|
|
84
|
+
* overlapping circles read as one opaque blob, not as where the data is concentrated.
|
|
85
|
+
*/
|
|
86
|
+
export type LyraMapDataLayerKind = 'auto' | 'heatmap';
|
|
87
|
+
/**
|
|
88
|
+
* Native MapLibre marker clustering for one `dataLayers` entry.
|
|
89
|
+
*
|
|
90
|
+
* Clustering is a *source* option plus layers, not new rendering machinery: setting this adds
|
|
91
|
+
* `cluster`/`clusterRadius`/`clusterMaxZoom` to the entry's GeoJSON source and swaps its geometry
|
|
92
|
+
* split for a `${sourceId}-cluster` circle, a `${sourceId}-cluster-count` label, and a
|
|
93
|
+
* `${sourceId}-circle` layer for the points that stayed unclustered. It is the answer to a
|
|
94
|
+
* thousands-of-pins map, which `markers` cannot be: `markers` mints one real DOM element per entry,
|
|
95
|
+
* which is correct for tens of pins and unreadable (and expensive) for thousands.
|
|
96
|
+
*
|
|
97
|
+
* A clustered source carries points only — MapLibre drops non-point geometry when clustering — so no
|
|
98
|
+
* fill/line layer is created for a clustered entry.
|
|
99
|
+
*/
|
|
100
|
+
export interface LyraMapClusterOptions {
|
|
101
|
+
/** Cluster radius in pixels at each zoom level. Defaults to 50, MapLibre's own default. */
|
|
102
|
+
readonly radius?: number;
|
|
103
|
+
/** Zoom past which points stop being clustered. Defaults to 14. */
|
|
104
|
+
readonly maxZoom?: number;
|
|
105
|
+
/**
|
|
106
|
+
* `[pointCount, radiusPx]` breaks for the cluster circle, in the same ascending `[value, output]`
|
|
107
|
+
* shape as `choropleth.stops` and with the same `['step', …]` semantics: the first entry's output
|
|
108
|
+
* is also the base, so counts below the first threshold use it.
|
|
109
|
+
*/
|
|
110
|
+
readonly radiusSteps?: readonly (readonly [number, number])[];
|
|
111
|
+
/**
|
|
112
|
+
* `[pointCount, color]` breaks for the cluster circle. Same vocabulary as `choropleth.stops`,
|
|
113
|
+
* including color resolution: a `var(--lr-…)` reference is resolved against the host before it
|
|
114
|
+
* reaches MapLibre, which paints to a WebGL canvas and never sees the CSS cascade.
|
|
115
|
+
*/
|
|
116
|
+
readonly colorSteps?: readonly (readonly [number, string])[];
|
|
117
|
+
/**
|
|
118
|
+
* Font stack for the cluster count label, which must exist in the style's own glyph source.
|
|
119
|
+
* Defaults to MapLibre's spec default; supply the names your style actually ships when that
|
|
120
|
+
* default is absent. The count label is skipped entirely when the style declares no `glyphs`,
|
|
121
|
+
* since a text layer without one paints nothing and only emits peer errors.
|
|
122
|
+
*/
|
|
123
|
+
readonly countFont?: readonly string[];
|
|
124
|
+
}
|
|
125
|
+
/** Paint configuration for a `kind: 'heatmap'` data layer. */
|
|
126
|
+
export interface LyraMapHeatmapOptions {
|
|
127
|
+
/** Feature property weighting each point. Omitted, every point weighs 1 (MapLibre's default). */
|
|
128
|
+
readonly weightField?: string;
|
|
129
|
+
/**
|
|
130
|
+
* `[min, max]` of `weightField` in the data's own units, mapped onto MapLibre's 0–1 weight. Without
|
|
131
|
+
* it the raw property value is used, which saturates the surface for any quantity above ~1.
|
|
132
|
+
*/
|
|
133
|
+
readonly weightRange?: readonly [number, number];
|
|
134
|
+
/**
|
|
135
|
+
* `[density, color]` ramp stops, density in `[0, 1]` — the same `[value, color]` vocabulary
|
|
136
|
+
* `choropleth.stops` and `legendGradient` already share, `var(--lr-…)` references included. A ramp
|
|
137
|
+
* that does not start at density 0 gets a fully transparent stop prepended, because a colored zero
|
|
138
|
+
* tints the entire map.
|
|
139
|
+
*
|
|
140
|
+
* One stop is therefore enough, as long as it sits above density 0: `[[1, hot]]` is spelled
|
|
141
|
+
* exactly the way it reads, transparent to hot. The only ramp that cannot be honored is a lone
|
|
142
|
+
* stop AT density 0, which is a flat color rather than a gradient; that one falls back to the
|
|
143
|
+
* default ramp.
|
|
144
|
+
*/
|
|
145
|
+
readonly stops?: readonly (readonly [number, string])[];
|
|
146
|
+
/** Kernel radius in pixels. Defaults to 30, MapLibre's own default. */
|
|
147
|
+
readonly radius?: number;
|
|
148
|
+
/** Global intensity multiplier. Defaults to 1, MapLibre's own default. */
|
|
149
|
+
readonly intensity?: number;
|
|
150
|
+
}
|
|
78
151
|
/** One GeoJSON source rendered as three layers (`${sourceId}-fill` for polygons, `${sourceId}-line`
|
|
79
|
-
* for lines/outlines, `${sourceId}-circle` for points)
|
|
80
|
-
*
|
|
152
|
+
* for lines/outlines, `${sourceId}-circle` for points), or — under `cluster`/`kind` — as the
|
|
153
|
+
* cluster or heatmap layers those describe. Colors resolve from `--lr-*` tokens at apply time,
|
|
154
|
+
* defaulting to `accent`. */
|
|
81
155
|
export interface LyraMapGeoJsonDataLayer {
|
|
82
156
|
/** Trimmed nonempty business identity. A collection retains the first occurrence and ignores
|
|
83
157
|
* blank or later duplicate `sourceId` records. */
|
|
@@ -102,6 +176,20 @@ export interface LyraMapGeoJsonDataLayer {
|
|
|
102
176
|
* to `color`, then to `tone`. See `color` for why these are separable.
|
|
103
177
|
*/
|
|
104
178
|
readonly strokeColor?: string;
|
|
179
|
+
/** What this entry renders. Defaults to `'auto'` — today's geometry split, unchanged. */
|
|
180
|
+
readonly kind?: LyraMapDataLayerKind;
|
|
181
|
+
/**
|
|
182
|
+
* Paint configuration for `kind: 'heatmap'`. Ignored under any other kind, so it can be carried
|
|
183
|
+
* beside an `'auto'` entry without effect.
|
|
184
|
+
*/
|
|
185
|
+
readonly heatmap?: LyraMapHeatmapOptions;
|
|
186
|
+
/**
|
|
187
|
+
* Enables native MapLibre clustering for this entry. `cluster: {}` accepts every default.
|
|
188
|
+
*
|
|
189
|
+
* Ignored when `kind` is `'heatmap'`: a heatmap already aggregates density, and clustering its
|
|
190
|
+
* input would feed it one weighted point per cluster instead of the real distribution.
|
|
191
|
+
*/
|
|
192
|
+
readonly cluster?: LyraMapClusterOptions;
|
|
105
193
|
}
|
|
106
194
|
export interface LyraMapMarker {
|
|
107
195
|
/** Optional explicit business identity. Explicit IDs are trimmed and must be nonempty; the
|
|
@@ -189,8 +277,10 @@ export interface LyraMapEventMap {
|
|
|
189
277
|
readonly lngLat: readonly [number, number];
|
|
190
278
|
readonly feature: Feature | undefined;
|
|
191
279
|
/** Which layer `feature` was hit on, so a click is attributable when both a choropleth and
|
|
192
|
-
* `dataLayers` are painted. `
|
|
193
|
-
|
|
280
|
+
* `dataLayers` are painted. `'cluster'` marks a hit on a clustered entry's aggregate circle,
|
|
281
|
+
* whose `point_count`/`cluster_id` properties describe the group rather than one feature.
|
|
282
|
+
* `undefined` whenever `feature` is. */
|
|
283
|
+
readonly origin: 'choropleth' | 'data-layer' | 'cluster' | undefined;
|
|
194
284
|
/** The authored `dataLayers[].sourceId` the hit belongs to; `undefined` for a choropleth hit
|
|
195
285
|
* (which has only one possible source) and when nothing was hit. */
|
|
196
286
|
readonly sourceId: string | undefined;
|
|
@@ -199,7 +289,8 @@ export interface LyraMapEventMap {
|
|
|
199
289
|
/**
|
|
200
290
|
* `<lr-map>` — a maplibre-gl wrapper with a declarative legend, choropleth
|
|
201
291
|
* GeoJSON layer, markers, and additive `dataLayers` GeoJSON overlays
|
|
202
|
-
* (arbitrary shapes rendered as a source plus fill/line/circle layers,
|
|
292
|
+
* (arbitrary shapes rendered as a source plus fill/line/circle layers, or — opting in per entry —
|
|
293
|
+
* as a natively clustered point set or a `heatmap` density surface,
|
|
203
294
|
* independent of `choropleth`'s field/stops color-interpolation), plus a peer-neutral
|
|
204
295
|
* `map` getter for common imperative operations. Its runtime value is the underlying MapLibre
|
|
205
296
|
* map, while its declaration stays independent of the optional peer. Requires `maplibre-gl`
|
|
@@ -228,8 +319,11 @@ export interface LyraMapEventMap {
|
|
|
228
319
|
* @customElement lr-map
|
|
229
320
|
* @event lr-map-load - Fired once the underlying maplibregl.Map loads.
|
|
230
321
|
* @event lr-map-click - `detail: { lngLat, feature?, origin?, sourceId? }`. `feature` resolves
|
|
231
|
-
* against the choropleth fill *and* every applied `dataLayers` fill/line/circle layer,
|
|
232
|
-
* first; `origin`/`sourceId` name where it came from.
|
|
322
|
+
* against the choropleth fill *and* every applied `dataLayers` fill/line/circle/cluster layer,
|
|
323
|
+
* topmost first; `origin`/`sourceId` name where it came from. A hit on a clustered entry's
|
|
324
|
+
* aggregate circle reports `origin: 'cluster'` and carries MapLibre's `point_count`/`cluster_id`
|
|
325
|
+
* properties; a `kind: 'heatmap'` layer is never hit-tested, because MapLibre returns no features
|
|
326
|
+
* for a density surface.
|
|
233
327
|
* @csspart base - The non-semantic map wrapper. It exposes `aria-busy="true"` while the optional
|
|
234
328
|
* map library loads and contains ordinary, non-live localized loading text.
|
|
235
329
|
* @csspart container - The MapLibre container. Its generated canvas is the actual focusable map
|
|
@@ -349,9 +443,17 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
|
|
|
349
443
|
* marker is instead identified by its coordinate occurrence, so colocated idless markers remain
|
|
350
444
|
* separate. */
|
|
351
445
|
markers: readonly LyraMapMarker[];
|
|
352
|
-
/**
|
|
446
|
+
/**
|
|
447
|
+
* Additive GeoJSON layers rendered alongside the choropleth/markers -- each entry becomes a
|
|
353
448
|
* source plus fill/line/circle layers. `sourceId` values are trimmed, must be nonempty, and retain
|
|
354
|
-
* only their first occurrence. Defaults empty (zero behavior change).
|
|
449
|
+
* only their first occurrence. Defaults empty (zero behavior change).
|
|
450
|
+
*
|
|
451
|
+
* An entry opts into either of two other renderings, both strictly additive: `cluster` turns its
|
|
452
|
+
* source into a natively clustered one (aggregate circle, count label, unclustered points), which
|
|
453
|
+
* is what thousands of points need and what `markers` -- one real DOM element per entry -- cannot
|
|
454
|
+
* be; `kind: 'heatmap'` replaces the geometry split with MapLibre's own `heatmap` layer. Neither
|
|
455
|
+
* changes an entry that sets neither.
|
|
456
|
+
*/
|
|
355
457
|
dataLayers: readonly LyraMapGeoJsonDataLayer[];
|
|
356
458
|
/** Accessible name for MapLibre's focusable canvas. A nonempty host `aria-label` remains the
|
|
357
459
|
* overall component name and is not cloned onto the nested focus owner; the canvas uses this
|
|
@@ -373,6 +475,16 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
|
|
|
373
475
|
private _appliedChoroplethSourceId?;
|
|
374
476
|
private _appliedFillLayerId?;
|
|
375
477
|
private _appliedDataLayerIds;
|
|
478
|
+
/**
|
|
479
|
+
* The rendering shape (`'auto'`, a cluster signature, `'heatmap'`) each applied data layer was
|
|
480
|
+
* built with, keyed identically to `_appliedDataLayerIds`.
|
|
481
|
+
*
|
|
482
|
+
* MapLibre bakes `cluster`/`clusterRadius`/`clusterMaxZoom` into a GeoJSON source at `addSource()`
|
|
483
|
+
* time and exposes no setter for them, and a kind change swaps the layer set entirely. Neither
|
|
484
|
+
* can be updated in place, so a shape that no longer matches forces a full teardown and rebuild
|
|
485
|
+
* of that one entry instead of a silently stale source.
|
|
486
|
+
*/
|
|
487
|
+
private _appliedDataLayerShapes;
|
|
376
488
|
/** Last GeoJSON applied per resolved source id, so an update can be diffed against it rather
|
|
377
489
|
* than replacing the whole source. Holds a reference, not a copy -- it is only ever compared. */
|
|
378
490
|
private _appliedGeoJson;
|
|
@@ -403,12 +515,22 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
|
|
|
403
515
|
/**
|
|
404
516
|
* Applies `maxBounds`, then verifies the peer's camera survived it.
|
|
405
517
|
*
|
|
406
|
-
* maplibre-gl constrains the camera when bounds are set, and that constrain pass can
|
|
407
|
-
*
|
|
408
|
-
*
|
|
409
|
-
*
|
|
410
|
-
*
|
|
411
|
-
*
|
|
518
|
+
* maplibre-gl constrains the camera when bounds are set, and that constrain pass can fail in two
|
|
519
|
+
* different ways at the same conditions -- sub-1 fractional zooms in wide containers:
|
|
520
|
+
*
|
|
521
|
+
* * It can leave the transform in a state where `getZoom()` returns a non-number. There is no
|
|
522
|
+
* exception at the call site, so the only reliable signal is to read the camera back
|
|
523
|
+
* afterwards.
|
|
524
|
+
* * It can THROW synchronously out of `setMaxBounds()` itself (maplibre-gl 6.x raises
|
|
525
|
+
* `TypeError: Cannot read properties of null (reading '0')` at a full-world box). That
|
|
526
|
+
* happens *before* the readback line, so the readback guard alone never ran in the case it
|
|
527
|
+
* was written for -- and with no `try`/`catch` the exception escaped `updated()` into the
|
|
528
|
+
* consumer's render cycle, degenerating into repeated throws from the peer's own matrix math
|
|
529
|
+
* on every later `resize`/`setZoom` and a canvas that never paints again.
|
|
530
|
+
*
|
|
531
|
+
* Either way the answer is the same: drop the constraint and restore the camera -- an
|
|
532
|
+
* unconstrained map is a far smaller defect than a blank one -- and say so once, naming the
|
|
533
|
+
* property. Both failures therefore share one revert path.
|
|
412
534
|
*/
|
|
413
535
|
private applyMaxBounds;
|
|
414
536
|
/** `zoom` normalized to a finite value clamped into `[0, 22]` -- maplibre-gl's own default
|
|
@@ -456,6 +578,65 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
|
|
|
456
578
|
* `applyChoropleth()`'s add-or-update-in-place pattern above.
|
|
457
579
|
*/
|
|
458
580
|
private applyDataLayers;
|
|
581
|
+
/**
|
|
582
|
+
* Adds (or repaints, when already present) the layers one entry's kind calls for. Kept separate
|
|
583
|
+
* from source management above so a theme change can re-run exactly the paint half of it without
|
|
584
|
+
* touching sources, data, or map geometry.
|
|
585
|
+
*/
|
|
586
|
+
private applyDataLayerRendering;
|
|
587
|
+
/**
|
|
588
|
+
* Rewrites only the token-derived paint of an already-applied entry, for the kind it was applied
|
|
589
|
+
* with. Split from the add-or-update path above because a theme repaint must never query or
|
|
590
|
+
* mutate map structure -- no `getLayer`, no `addLayer`, no source touch -- so that a retheme
|
|
591
|
+
* cannot re-tile data or resurrect a layer a later reconciliation removed.
|
|
592
|
+
*/
|
|
593
|
+
private paintDataLayer;
|
|
594
|
+
/** The pre-existing geometry split: polygons filled, lines/outlines stroked, points circled. */
|
|
595
|
+
private applyGeometryLayers;
|
|
596
|
+
/** Paint-only half of `applyGeometryLayers`. See `paintDataLayer` for why the halves are split. */
|
|
597
|
+
private paintGeometryLayers;
|
|
598
|
+
/**
|
|
599
|
+
* `['step', ['get', 'point_count'], …]` over the authored cluster color breaks, or the layer's
|
|
600
|
+
* own flat color when none were supplied.
|
|
601
|
+
*
|
|
602
|
+
* Every break resolves through `resolvedLayerColor()` for the same reason `layer.color` does: the
|
|
603
|
+
* breaks speak the `choropleth.stops` vocabulary, so a consumer writes `var(--lr-color-brand)` in
|
|
604
|
+
* one and reasonably expects it in the other -- and MapLibre paints to a WebGL canvas that never
|
|
605
|
+
* sees the CSS cascade, so an unresolved `var()` is not a wrong color but no paint at all.
|
|
606
|
+
*
|
|
607
|
+
* Shared by both halves of the apply/paint split so the two can never resolve differently.
|
|
608
|
+
*/
|
|
609
|
+
private clusterColorExpression;
|
|
610
|
+
/**
|
|
611
|
+
* The three layers native MapLibre clustering needs: an aggregate circle over the clustered
|
|
612
|
+
* points, its count label, and the points that stayed unclustered.
|
|
613
|
+
*
|
|
614
|
+
* No fill/line layer is created here — MapLibre's clustering keeps point features only, so those
|
|
615
|
+
* two would be permanently empty while still occupying ids the click hit-test walks.
|
|
616
|
+
*/
|
|
617
|
+
private applyClusterLayers;
|
|
618
|
+
/** Paint-only half of `applyClusterLayers`. */
|
|
619
|
+
private paintClusterLayers;
|
|
620
|
+
/** The single `heatmap` layer `kind: 'heatmap'` renders, in place of the geometry split. */
|
|
621
|
+
private applyHeatmapLayer;
|
|
622
|
+
/** Paint-only half of `applyHeatmapLayer`. */
|
|
623
|
+
private paintHeatmapLayer;
|
|
624
|
+
/**
|
|
625
|
+
* `['interpolate', ['linear'], ['heatmap-density'], …]` over the authored ramp, or the shared
|
|
626
|
+
* token ramp when none is usable. Colors resolve through the host first, since MapLibre paints to
|
|
627
|
+
* a WebGL canvas and never sees a `var()`.
|
|
628
|
+
*
|
|
629
|
+
* One authored stop is enough, as long as it sits above density 0: the transparent floor this
|
|
630
|
+
* prepends anyway makes it a real two-stop ramp, and `[[1, hot]]` is the most natural way to spell
|
|
631
|
+
* "transparent to hot". The token ramp takes over only when the result still cannot interpolate --
|
|
632
|
+
* a lone stop AT density 0, which describes a flat colour rather than a gradient.
|
|
633
|
+
*/
|
|
634
|
+
private heatmapColorExpression;
|
|
635
|
+
/**
|
|
636
|
+
* Whether the active style can render text at all. Prefers the live style (a `mapStyle` URL's
|
|
637
|
+
* glyph source is only knowable once loaded) and falls back to the declarative specification.
|
|
638
|
+
*/
|
|
639
|
+
private styleProvidesGlyphs;
|
|
459
640
|
/** Allocates a private source/layer namespace that cannot overwrite base-style resources. */
|
|
460
641
|
private resolveDataLayerSourceId;
|
|
461
642
|
/** Removes one previously-applied `dataLayers` entry's source/layers, if present. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapWebglUnavailable,LYRA_DEFAULT_paginationSummary}from"../../../internal/default-strings.generated.js";function supportsWebGL2(host){try{return host.ownerDocument.createElement("canvas").getContext("webgl2")!==null}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const MAX_MAP_LEGEND_GRADIENT_STOPS=64;function normalizeMapLegendGradient(value){if(!Array.isArray(value))return[];const usable=[],scanCount=Math.min(value.length,MAX_MAP_LEGEND_GRADIENT_STOPS);for(let index=0;index<scanCount;index+=1){const stop=value[index];if(!Array.isArray(stop)||stop.length<2)continue;const[rawValue,rawColor]=stop;if(typeof rawValue!="number"||!Number.isFinite(rawValue)||typeof rawColor!="string")continue;const color=sanitizeCssColor(rawColor);color&&usable.push([rawValue,color])}return usable.length<2?[]:Object.freeze([...usable].sort((a,b)=>a[0]-b[0]))}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}\u2026`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length,entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection}}function addPartToken(element,token){const tokens=new Set((element.getAttribute("part")??"").split(/\s+/).filter(Boolean));tokens.add(token),element.setAttribute("part",[...tokens].join(" "))}const CHOROPLETH_LOG_INTERPOLATION_BASE=.25,MAX_MAP_MARKERS=2e3;function popupText(host,markup){const template=host.ownerDocument.createElement("template");template.innerHTML=markup;for(const hidden of template.content.querySelectorAll('script, style, template, [hidden], [aria-hidden="true"]'))hidden.remove();return(template.content.textContent??"").replace(/\s+/gu," ").trim()}const MAX_MAP_DATA_LAYERS=100;function normalizedDataLayers(value){if(!Array.isArray(value))return[];const output=[],seenSourceIds=new Set,scanCount=Math.min(value.length,MAX_MAP_DATA_LAYERS);for(let index=0;index<scanCount;index++){const candidate=value[index];try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))continue;const rawSourceId=candidate.sourceId;if(typeof rawSourceId!="string")continue;const sourceId=rawSourceId.trim();if(sourceId.length===0||seenSourceIds.has(sourceId))continue;seenSourceIds.add(sourceId),output.push(rawSourceId===sourceId?candidate:{...candidate,sourceId})}catch{}}return output}const FALLBACK_FILL_OPACITY=.75;function ownerWindow(host){return host.ownerDocument?.defaultView??null}function choroplethFillOpacity(host){const raw=ownerWindow(host)?.getComputedStyle(host).getPropertyValue("--lr-map-choropleth-fill-opacity").trim()??"",parsed=Number.parseFloat(raw);return Number.isFinite(parsed)?parsed:FALLBACK_FILL_OPACITY}const TONE_TOKEN={accent:"--lr-color-brand",success:"--lr-color-success",warning:"--lr-color-warning",danger:"--lr-color-danger",neutral:"--lr-color-text-quiet"};function dataLayerColor(host,tone){const token=TONE_TOKEN[tone??"accent"];return(ownerWindow(host)?.getComputedStyle(host).getPropertyValue(token).trim()??"")||"#0969da"}function resolvedLayerColor(host,explicit,tone){const candidate=typeof explicit=="string"?explicit.trim():"";if(!candidate)return dataLayerColor(host,tone);const reference=/^var\(\s*(--[\w-]+)/.exec(candidate);return reference?ownerWindow(host)?.getComputedStyle(host).getPropertyValue(reference[1]).trim()||dataLayerColor(host,tone):candidate}const UNTILEABLE_SCAN_FEATURE_LIMIT=1e4;function warnOnUntileableProperties(geojson,sourceLabel){const features=geojson?.features;if(!Array.isArray(features))return;const limit=Math.min(features.length,UNTILEABLE_SCAN_FEATURE_LIMIT);for(let index=0;index<limit;index+=1){const feature=features[index],properties=feature?.properties;if(!(!properties||typeof properties!="object"))for(const[key,value]of Object.entries(properties)){if(typeof value!="number"||!Number.isFinite(value)||Math.abs(value)<=Number.MAX_SAFE_INTEGER)continue;const identity=feature?.id??`index ${index}`;devWarnOnce(`lyra-map-untileable-property:${sourceLabel}:${key}`,`<lr-map>: feature ${String(identity)} in "${sourceLabel}" carries ${key}=${value}, which is too large to survive maplibre-gl's vector-tile encoding. Tiling happens in a worker, so the failure would reach you only as an opaque "Given varint doesn't fit into 10 bytes" error while the rest of the layer still paints. Carry a reduced figure in the feature and keep the exact value in your own data.`)}}}const GEOJSON_DIFF_FEATURE_LIMIT=1e4;function buildGeoJsonPropertyDiff(previous,next){const previousFeatures=previous?.features,nextFeatures=next?.features;if(!Array.isArray(previousFeatures)||!Array.isArray(nextFeatures)||previousFeatures.length!==nextFeatures.length||nextFeatures.length>GEOJSON_DIFF_FEATURE_LIMIT)return null;const update=[];for(let index=0;index<nextFeatures.length;index+=1){const before=previousFeatures[index],after=nextFeatures[index];if(!before||!after)return null;const id=after.id;if(typeof id!="string"&&typeof id!="number"||before.id!==id||before.geometry!==after.geometry)return null;const beforeProperties=before.properties??{},afterProperties=after.properties??{},addOrUpdateProperties=[];for(const[key,value]of Object.entries(afterProperties))Object.is(beforeProperties[key],value)||addOrUpdateProperties.push({key,value});const removeProperties=Object.keys(beforeProperties).filter(key=>!(key in afterProperties));addOrUpdateProperties.length===0&&removeProperties.length===0||update.push({id,addOrUpdateProperties,removeProperties})}return{update}}class LyraMap extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,items:LYRA_DEFAULT_items,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,mapInitializationFailed:LYRA_DEFAULT_mapInitializationFailed,mapLegend:LYRA_DEFAULT_mapLegend,mapMissingLibrary:LYRA_DEFAULT_mapMissingLibrary,mapStyleRequired:LYRA_DEFAULT_mapStyleRequired,mapWebglUnavailable:LYRA_DEFAULT_mapWebglUnavailable,paginationSummary:LYRA_DEFAULT_paginationSummary}}static{this.immutableEventDetails=Object.freeze(["lr-map-click"])}static{this.identityEventDetailProperties=Object.freeze({"lr-map-click":Object.freeze(["feature"])})}static{this.ownedCollectionProperties=Object.freeze(["center","mapStyle","choropleth","markers","dataLayers"])}static{this.styles=[LyraElement.styles,styles,srOnly]}static preload(){return loadMaplibre().then(module=>module!==null)}constructor(){super(),this.center=[0,0],this.zoom=2,this.maxBounds=null,this._legend=EMPTY_MAP_LEGEND,this._legendProjection=EMPTY_MAP_LEGEND_PROJECTION,this.hasLegendSlot=!1,this._legendGradient=Object.freeze([]),this.legendGradientLoLabel=null,this.legendGradientHiLabel=null,this.markers=[],this.dataLayers=[],this.label="",this.loading=!0,this.loadLibrary=loadMaplibre,this.visible=ownerWindow(this)?.IntersectionObserver===void 0,this._styleLoaded=!1,this._appliedDataLayerIds=new Map,this._appliedGeoJson=new Map,this._nextDataLayerId=0,this._webglReady=!1,this._markerInstances=new Map,this._markerLabels=new Map,this._markerPopupIds=new Map,this._configuredPopups=new WeakSet,this._nextPopupId=0,this._markerColors=new Map,this._connectGeneration=0,this.configuredMarkerElements=new WeakSet,this.onLegendSlotChange=event=>{const slot=event.target;this.hasLegendSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType===Node.ELEMENT_NODE||(node.textContent??"").trim().length>0)},new ThemeWatcher(this,()=>this.refreshThemePaint())}get legend(){return this._legend}set legend(value){const previous=this._legend,normalized=normalizeMapLegend(value);this._legend=normalized.entries,this._legendProjection=normalized.projection,this.requestUpdate("legend",previous)}probeLegendSlot(){for(const child of Array.from(this.children))if(child.getAttribute("slot")==="legend")return!0;return!1}get legendGradient(){return this._legendGradient}set legendGradient(value){const previous=this._legendGradient;this._legendGradient=normalizeMapLegendGradient(value),this.requestUpdate("legendGradient",previous)}get legendProjection(){return this._legendProjection}get map(){return this._map}pushGeoJson(source,resolvedSourceId,geojson){const previous=this._appliedGeoJson.get(resolvedSourceId),diff=typeof source.updateData=="function"&&previous!==void 0?buildGeoJsonPropertyDiff(previous,geojson):null;diff===null||typeof source.updateData!="function"?source.setData(geojson):diff.update.length>0&&source.updateData(diff),this._appliedGeoJson.set(resolvedSourceId,geojson)}get safeMaxBounds(){const bounds=this.maxBounds;if(!Array.isArray(bounds)||bounds.length!==2)return null;const[southWest,northEast]=bounds;if(!Array.isArray(southWest)||!Array.isArray(northEast))return null;const[west,south]=southWest,[east,north]=northEast,values=[west,south,east,north].map(Number);if(!values.every(value=>Number.isFinite(value)))return null;const[w,s,e,n]=values;return w>=e||s>=n||w<-180||e>180||s<-90||n>90?null:[[w,s],[e,n]]}applyMaxBounds(){const map=this._map;if(!map||typeof map.setMaxBounds!="function")return;const bounds=this.safeMaxBounds,zoomBefore=map.getZoom(),centerBefore=map.getCenter();map.setMaxBounds(bounds),bounds!==null&&(Number.isFinite(map.getZoom())||(map.setMaxBounds(null),Number.isFinite(zoomBefore)&&map.setZoom(zoomBefore),centerBefore&&map.setCenter([centerBefore.lng,centerBefore.lat]),devWarnOnce("lyra-map-max-bounds-rejected","<lr-map>: maxBounds left maplibre-gl without a usable zoom, so it was dropped and the camera restored. This is a peer limitation, not a bad value -- it shows up at sub-1 fractional zooms in wide containers. Raise the zoom, narrow the box, or leave maxBounds unset.")))}get safeZoom(){return finiteRange(this.zoom,2,0,22)}get safeCenter(){const center=Array.isArray(this.center)?this.center:[];return[finiteRange(Number(center[0]),0,-180,180),finiteRange(Number(center[1]),0,-90,90)]}connectedCallback(){super.connectedCallback(),this.syncErrorAnnouncementSink();const generation=++this._connectGeneration,IntersectionObserverCtor=ownerWindow(this)?.IntersectionObserver;if(this.visible=IntersectionObserverCtor===void 0,this.failure=void 0,this.loading=!0,this._webglReady=!1,IntersectionObserverCtor){const observer=new IntersectionObserverCtor(entries=>{entries[0]?.isIntersecting&&(this.visible=!0)});this.intersectionObserver=observer,observer.observe(this)}(async()=>{let mod;try{mod=await this.loadLibrary()}catch{generation===this._connectGeneration&&this.isConnected&&this.failInitialization("missing-peer");return}if(!(generation!==this._connectGeneration||!this.isConnected)){if(this.loading=!1,!mod){this.failInitialization("missing-peer");return}if(this._maplibreModule=mod,!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}if(!supportsWebGL2(this)){this.failInitialization("webgl-unavailable");return}this._webglReady=!0,await this.updateComplete,!(generation!==this._connectGeneration||!this.containerEl||!this.isConnected)&&this.tryConstructMap()}})()}disconnectedCallback(){this.releaseErrorAnnouncementSink(),super.disconnectedCallback(),this.disposeMap(),this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;for(const marker of this._markerInstances.values())marker.remove();this._markerInstances.clear(),this._markerColors.clear(),this._markerLabels.clear(),this._markerPopupIds.clear()}failureMessage(reason=this.failure??"initialization-failed"){switch(reason){case"missing-peer":return this.localize("mapMissingLibrary");case"style-required":return this.localize("mapStyleRequired");case"webgl-unavailable":return this.localize("mapWebglUnavailable");case"initialization-failed":return this.localize("mapInitializationFailed")}}failInitialization(reason,partialMap){try{partialMap?.remove()}catch{}this.disposeMap(),this.loading=!1,this.failure=reason,this.errorAnnouncementSink?.announce(this.failureMessage(reason))}disposeMap(){this.stopObservingPeerChrome();try{this._map?.remove()}catch{}this._map=void 0,this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0,this._appliedDataLayerIds.clear(),this._appliedGeoJson.clear()}adoptedCallback(){super.adoptedCallback(),this.stopObservingPeerChrome(),this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}tryConstructMap(){if(this._map||!this._maplibreModule||!this._webglReady||!this.containerEl||!this.visible||!this.isConnected)return;if(!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}const mod=this._maplibreModule;let candidate;try{candidate=new mod.Map({container:this.containerEl,style:this.mapStyle,center:this.safeCenter,zoom:this.safeZoom,locale:{"Map.Title":this.effectiveMapLabel,"Marker.Title":this.localize("map"),"Popup.Close":this.localize("close")}}),candidate.on("error",event=>{if(this._map===candidate&&!this._styleLoaded){this.failInitialization("initialization-failed");return}console.error("lr-map:",event.error??event)}),candidate.on("load",()=>{if(this._map===candidate)try{this._styleLoaded=!0,this.applyChoropleth(),this.applyMarkers(),this.applyDataLayers(),this.emit("lr-map-load")}catch{this.failInitialization("initialization-failed")}}),candidate.on("click",event=>{if(this._map!==candidate)return;const fillLayerId=this._appliedFillLayerId,layerIds=[];fillLayerId&&candidate.getLayer(fillLayerId)&&layerIds.push(fillLayerId);for(const resolvedSourceId of this._appliedDataLayerIds.values())for(const suffix of["-fill","-line","-circle"]){const layerId=`${resolvedSourceId}${suffix}`;candidate.getLayer(layerId)&&layerIds.push(layerId)}const hit=(layerIds.length?candidate.queryRenderedFeatures(event.point,{layers:layerIds}):[])[0],hitLayerId=hit?.layer?.id;let origin,sourceId;if(hitLayerId!==void 0){if(hitLayerId===fillLayerId)origin="choropleth";else for(const[publicSourceId,resolvedSourceId]of this._appliedDataLayerIds)if(hitLayerId.startsWith(`${resolvedSourceId}-`)){origin="data-layer",sourceId=publicSourceId;break}}this.emit("lr-map-click",{lngLat:[event.lngLat.lng,event.lngLat.lat],feature:hit,origin,sourceId})});const canvas=candidate.getCanvas?.();canvas&¬ifyMapCanvasReady(this,canvas),this._map=candidate,this.observePeerChrome(),this.failure=void 0}catch{this.failInitialization("initialization-failed",candidate)}}updated(changed){if(super.updated(changed),this.setAttribute("aria-busy",String(this.loading)),changed.has("visible")&&this.visible&&this.tryConstructMap(),changed.has("mapStyle")&&!hasMapStyle(this.mapStyle)&&this._maplibreModule)this.failInitialization("style-required");else if(changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle))this.tryConstructMap();else if(changed.has("mapStyle")&&this._map){this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0;const map=this._map;try{map.once("style.load",()=>{if(this._map===map)try{this._styleLoaded=!0,this._appliedDataLayerIds.clear(),this._appliedGeoJson.clear(),this.applyChoropleth(),this.applyDataLayers()}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}),map.setStyle(this.mapStyle)}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}else if(this._styleLoaded&&(changed.has("dataLayers")||changed.has("choropleth"))){const nextChoroplethSourceId=this.choropleth?this.resolveChoroplethSourceId(this.choropleth.sourceId):void 0;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==nextChoroplethSourceId&&this.removeChoropleth(),changed.has("dataLayers")&&this.applyDataLayers(),this.applyChoropleth()}changed.has("center")&&this._map&&this._map.setCenter(this.safeCenter),changed.has("zoom")&&this._map&&this._map.setZoom(this.safeZoom),changed.has("maxBounds")&&this._map&&this.applyMaxBounds(),changed.has("markers")&&this._map&&this.applyMarkers(),this.syncMapSemantics()}willUpdate(changed){super.willUpdate(changed),changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle)&&(this._webglReady||(this._webglReady=supportsWebGL2(this)),this.failure=this._webglReady?void 0:"webgl-unavailable",this._webglReady||(this.loading=!1,this.errorAnnouncementSink?.announce(this.failureMessage("webgl-unavailable"))))}refreshThemePaint(){if(!this._map||!this._styleLoaded)return;const fillOpacity=choroplethFillOpacity(this);this._appliedFillLayerId&&this._map.setPaintProperty(this._appliedFillLayerId,"fill-opacity",fillOpacity);const dataLayersBySourceId=new Map(normalizedDataLayers(this.dataLayers).map(layer=>[layer.sourceId,layer]));for(const[publicSourceId,sourceId]of this._appliedDataLayerIds){const dataLayer=dataLayersBySourceId.get(publicSourceId);if(!dataLayer)continue;const color=resolvedLayerColor(this,dataLayer.color,dataLayer.tone),stroke=resolvedLayerColor(this,dataLayer.strokeColor??dataLayer.color,dataLayer.tone);this._map.setPaintProperty(`${sourceId}-fill`,"fill-color",color),this._map.setPaintProperty(`${sourceId}-fill`,"fill-opacity",fillOpacity),this._map.setPaintProperty(`${sourceId}-line`,"line-color",stroke),this._map.setPaintProperty(`${sourceId}-circle`,"circle-color",stroke)}}applyChoropleth(){if(!this._map)return;if(!this.choropleth){this.removeChoropleth();return}const{geojson,field,stops}=this.choropleth,sourceId=this.resolveChoroplethSourceId(this.choropleth.sourceId),fillLayerId=`${sourceId}-fill`;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==sourceId&&this.removeChoropleth(),warnOnUntileableProperties(geojson,"choropleth");const existingSource=this._map.getSource(sourceId);if(existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedGeoJson.set(sourceId,geojson)),this._appliedChoroplethSourceId=sourceId,stops.length===0)return;let colorExpr;if(this.choropleth.interpolation==="step"){const base=typeof this.choropleth.stepBaseColor=="string"&&this.choropleth.stepBaseColor.trim()?this.choropleth.stepBaseColor.trim():stops[0][1];colorExpr=["step",["get",field],base];for(const[value,color]of stops)colorExpr.push(value,color)}else{colorExpr=["interpolate",this.choropleth.interpolation==="logarithmic"?["exponential",CHOROPLETH_LOG_INTERPOLATION_BASE]:["linear"],["get",field]];for(const[value,color]of stops)colorExpr.push(value,color)}this._map.getLayer(fillLayerId)?(this._map.setPaintProperty(fillLayerId,"fill-color",colorExpr),this._map.setPaintProperty(fillLayerId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillLayerId,type:"fill",source:sourceId,paint:{"fill-color":colorExpr,"fill-opacity":choroplethFillOpacity(this)}}),this._appliedFillLayerId=fillLayerId}resolveChoroplethSourceId(sourceId){const dataSourceIds=new Set(normalizedDataLayers(this.dataLayers).map(layer=>layer.sourceId));let resolved=sourceId;for(;dataSourceIds.has(resolved);)resolved=`lr-choropleth-${resolved}`;return resolved}removeChoropleth(){!this._map||!this._appliedChoroplethSourceId||(this._appliedFillLayerId&&this._map.getLayer(this._appliedFillLayerId)&&this._map.removeLayer(this._appliedFillLayerId),this._map.getSource(this._appliedChoroplethSourceId)&&this._map.removeSource(this._appliedChoroplethSourceId),this._appliedGeoJson.delete(this._appliedChoroplethSourceId),this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0)}applyDataLayers(){if(!this._map)return;const layers=normalizedDataLayers(this.dataLayers),nextIds=new Set(layers.map(layer=>layer.sourceId));for(const publicSourceId of this._appliedDataLayerIds.keys())nextIds.has(publicSourceId)||this.removeDataLayer(publicSourceId);for(const layer of layers){const{sourceId:publicSourceId,geojson,tone}=layer,sourceId=this.resolveDataLayerSourceId(publicSourceId);warnOnUntileableProperties(geojson,publicSourceId);const existingSource=this._map.getSource(sourceId);existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedGeoJson.set(sourceId,geojson));const color=resolvedLayerColor(this,layer.color,tone),stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone),fillId=`${sourceId}-fill`,lineId=`${sourceId}-line`,circleId=`${sourceId}-circle`;this._map.getLayer(fillId)?(this._map.setPaintProperty(fillId,"fill-color",color),this._map.setPaintProperty(fillId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillId,type:"fill",source:sourceId,filter:["==",["geometry-type"],"Polygon"],paint:{"fill-color":color,"fill-opacity":choroplethFillOpacity(this)}}),this._map.getLayer(lineId)?this._map.setPaintProperty(lineId,"line-color",stroke):this._map.addLayer({id:lineId,type:"line",source:sourceId,filter:["in",["geometry-type"],["literal",["LineString","Polygon"]]],paint:{"line-color":stroke,"line-width":2}}),this._map.getLayer(circleId)?this._map.setPaintProperty(circleId,"circle-color",stroke):this._map.addLayer({id:circleId,type:"circle",source:sourceId,filter:["==",["geometry-type"],"Point"],paint:{"circle-color":stroke,"circle-radius":5}}),this._appliedDataLayerIds.set(publicSourceId,sourceId)}}resolveDataLayerSourceId(publicSourceId){const applied=this._appliedDataLayerIds.get(publicSourceId);if(applied)return applied;let sourceId;do sourceId=`lr-data-layer-${this._nextDataLayerId++}`;while(this._map?.getSource(sourceId)||this._map?.getLayer(`${sourceId}-fill`)||this._map?.getLayer(`${sourceId}-line`)||this._map?.getLayer(`${sourceId}-circle`));return sourceId}removeDataLayer(publicSourceId){if(!this._map)return;const sourceId=this._appliedDataLayerIds.get(publicSourceId);if(sourceId){for(const layerId of[`${sourceId}-fill`,`${sourceId}-line`,`${sourceId}-circle`])this._map.getLayer(layerId)&&this._map.removeLayer(layerId);this._map.getSource(sourceId)&&this._map.removeSource(sourceId),this._appliedDataLayerIds.delete(publicSourceId),this._appliedGeoJson.delete(sourceId)}}applyMarkers(){const map=this._map,mod=this._maplibreModule;if(!map||!mod)return;const visible=new Set,coordCounts=new Map,explicitIds=new Set,markers=Array.isArray(this.markers)?this.markers.slice(0,MAX_MAP_MARKERS):[];for(const candidate of markers){const lngLat=this.validMarkerLngLat(candidate);if(!lngLat)continue;const m=candidate,rawId=m.id;let key;if(rawId!==void 0){if(typeof rawId!="string")continue;const id=rawId.trim();if(id.length===0||explicitIds.has(id))continue;explicitIds.add(id),key=`id:${id}`}else{const coordKey=`${lngLat[0]},${lngLat[1]}`,occurrence=coordCounts.get(coordKey)??0;coordCounts.set(coordKey,occurrence+1),key=`coordinate:${coordKey}#${occurrence}`}visible.add(key);let existing=this._markerInstances.get(key);const markerColor=sanitizeCssColor(m.color);if(existing&&this._markerColors.get(key)!==markerColor&&(existing.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),existing=void 0),existing){existing.setLngLat(lngLat);const popup=existing.getPopup();if(m.unsafeHtml)if(popup)popup.setHTML(m.unsafeHtml);else{const nextPopup=new mod.Popup({offset:12}).setHTML(m.unsafeHtml);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else if(m.label)if(popup)popup.setText(m.label);else{const nextPopup=new mod.Popup({offset:12}).setText(m.label);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else popup&&existing.setPopup(void 0)}else{const marker=new mod.Marker(markerColor?{color:markerColor}:void 0).setLngLat(lngLat);if(m.unsafeHtml||m.label){const popup=new mod.Popup({offset:12});m.unsafeHtml?popup.setHTML(m.unsafeHtml):m.label&&popup.setText(m.label),marker.setPopup(popup),this.configurePopupSemantics(key,marker,popup)}marker.addTo(map),this._markerInstances.set(key,marker),this._markerColors.set(key,markerColor)}const markerLabel=m.label?.trim()||(m.unsafeHtml?popupText(this,m.unsafeHtml):"");this._markerLabels.set(key,markerLabel||void 0);const markerElement=this._markerInstances.get(key)?.getElement?.();if(markerElement){addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",markerLabel||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const currentMarker=this._markerInstances.get(key),popup=currentMarker?.getPopup();popup&¤tMarker?(this.configurePopupSemantics(key,currentMarker,popup),this.syncPopupSemantics(key,currentMarker,popup),this.configureMarkerKeyboard(markerElement,currentMarker)):(markerElement.removeAttribute("aria-controls"),markerElement.removeAttribute("aria-expanded"))}}for(const[key,marker]of this._markerInstances)visible.has(key)||(marker.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),this._markerLabels.delete(key),this._markerPopupIds.delete(key))}configureMarkerKeyboard(markerElement,marker){this.configuredMarkerElements.has(markerElement)||(this.configuredMarkerElements.add(markerElement),markerElement.addEventListener("keydown",event=>{event.key!==" "||!marker.getPopup?.()||event.defaultPrevented||event.preventDefault()},{capture:!0}))}get effectiveMapLabel(){return this.getAttribute("aria-label")===""?"":this.label||this.localize("map")}validMarkerLngLat(candidate){if(!candidate||typeof candidate!="object")return null;const lngLat=candidate.lngLat;if(!Array.isArray(lngLat)||lngLat.length<2)return null;const[lng,lat]=lngLat;return typeof lng!="number"||typeof lat!="number"||!Number.isFinite(lng)||!Number.isFinite(lat)||lat<-90||lat>90?null:[lng,lat]}popupId(key){let id=this._markerPopupIds.get(key);return id||(id=`map-popup-${this._connectGeneration}-${++this._nextPopupId}`,this._markerPopupIds.set(key,id)),id}configurePopupSemantics(key,marker,popup){!popup||typeof popup!="object"||this._configuredPopups.has(popup)||(this._configuredPopups.add(popup),popup.on?.("open",()=>this.syncPopupSemantics(key,marker,popup)),popup.on?.("close",()=>{marker.getElement?.()?.setAttribute("aria-expanded","false")}))}stopObservingPeerChrome(){this.peerChromeObserver?.disconnect(),this.peerChromeObserver=void 0,this.observedPeerContainer=void 0}syncPeerChromeParts(root=this.containerEl??this.renderRoot){const selectors=[[".maplibregl-marker","marker"],[".maplibregl-popup","popup"],[".maplibregl-popup-content","popup-content"],[".maplibregl-popup-close-button","popup-close-button"],[".maplibregl-ctrl-attrib","attribution"],[".maplibregl-ctrl-attrib-button","attribution-toggle"]];for(const[selector,part]of selectors){const candidate=root;candidate.matches?.(selector)&&addPartToken(candidate,part);for(const element of root.querySelectorAll(selector))addPartToken(element,part)}}observePeerChrome(){const container=this.containerEl;if(!container||(this.syncPeerChromeParts(container),this.observedPeerContainer===container&&this.peerChromeObserver))return;this.stopObservingPeerChrome();const MutationObserverCtor=container.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.observedPeerContainer=container,this.peerChromeObserver=new MutationObserverCtor(records=>{if(!(!this.isConnected||this.containerEl!==container))for(const record of records)for(const node of record.addedNodes)node.nodeType===Node.ELEMENT_NODE&&this.syncPeerChromeParts(node)}),this.peerChromeObserver.observe(container,{childList:!0,subtree:!0}))}syncPopupSemantics(key,marker,popup){const markerElement=marker?.getElement?.();if(!markerElement)return;const id=this.popupId(key);markerElement.setAttribute("aria-controls",id),markerElement.setAttribute("aria-expanded",popup?.isOpen?.()?"true":"false");const popupElement=popup?.getElement?.();if(!popupElement)return;addPartToken(markerElement,"marker"),addPartToken(popupElement,"popup"),popupElement.id=id,popupElement.setAttribute("role","dialog"),popupElement.setAttribute("lang",this.effectiveLocale),popupElement.setAttribute("aria-label",this._markerLabels.get(key)||this.effectiveMapLabel);const popupContent=popupElement.querySelector(".maplibregl-popup-content");popupContent&&addPartToken(popupContent,"popup-content");const closeButton=popupElement.querySelector(".maplibregl-popup-close-button");closeButton&&addPartToken(closeButton,"popup-close-button"),closeButton?.setAttribute("aria-label",this.localize("close"))}syncMapSemantics(){const canvas=this._map?.getCanvas?.();canvas&&(canvas.setAttribute("aria-label",this.effectiveMapLabel),canvas.setAttribute("lang",this.effectiveLocale),this.legend.length||this.legendProjection.truncated?canvas.setAttribute("aria-describedby","map-legend"):canvas.removeAttribute("aria-describedby"));for(const[key,marker]of this._markerInstances){const markerElement=marker.getElement?.();if(!markerElement)continue;addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",this._markerLabels.get(key)||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const popup=marker.getPopup?.();popup&&this.syncPopupSemantics(key,marker,popup)}this.syncPeerChromeParts()}formatCount(value){return getNumberFormat(this.effectiveLocale).format(value)}legendLimitText(){return this.localize("paginationSummary",void 0,{start:this.formatCount(this.legend.length===0?0:1),end:this.formatCount(this.legend.length),total:this.formatCount(this.legendProjection.inputCount),itemLabel:this.localize("items")})}renderLegendGradient(){const stops=this.legendGradient;if(stops.length<2)return nothing;const lo=stops[0],hi=stops[stops.length-1],span=hi[0]-lo[0],image=stops.map(([value,color],index)=>{const percent=span>0?(value-lo[0])/span*100:index/(stops.length-1)*100;return`${color} ${percent}%`}).join(", ");return html`<div class="legend-gradient">
|
|
1
|
+
var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapWebglUnavailable,LYRA_DEFAULT_paginationSummary}from"../../../internal/default-strings.generated.js";function supportsWebGL2(host){try{return host.ownerDocument.createElement("canvas").getContext("webgl2")!==null}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const MAX_MAP_LEGEND_GRADIENT_STOPS=64;function normalizeMapLegendGradient(value){if(!Array.isArray(value))return[];const usable=[],scanCount=Math.min(value.length,MAX_MAP_LEGEND_GRADIENT_STOPS);for(let index=0;index<scanCount;index+=1){const stop=value[index];if(!Array.isArray(stop)||stop.length<2)continue;const[rawValue,rawColor]=stop;if(typeof rawValue!="number"||!Number.isFinite(rawValue)||typeof rawColor!="string")continue;const color=sanitizeCssColor(rawColor);color&&usable.push([rawValue,color])}return usable.length<2?[]:Object.freeze([...usable].sort((a,b)=>a[0]-b[0]))}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}\u2026`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length,entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection}}function addPartToken(element,token){const tokens=new Set((element.getAttribute("part")??"").split(/\s+/).filter(Boolean));tokens.add(token),element.setAttribute("part",[...tokens].join(" "))}const CHOROPLETH_LOG_INTERPOLATION_BASE=.25,MAX_MAP_MARKERS=2e3;function popupText(host,markup){const template=host.ownerDocument.createElement("template");template.innerHTML=markup;for(const hidden of template.content.querySelectorAll('script, style, template, [hidden], [aria-hidden="true"]'))hidden.remove();return(template.content.textContent??"").replace(/\s+/gu," ").trim()}const MAX_MAP_DATA_LAYERS=100;function normalizedDataLayers(value){if(!Array.isArray(value))return[];const output=[],seenSourceIds=new Set,scanCount=Math.min(value.length,MAX_MAP_DATA_LAYERS);for(let index=0;index<scanCount;index++){const candidate=value[index];try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))continue;const rawSourceId=candidate.sourceId;if(typeof rawSourceId!="string")continue;const sourceId=rawSourceId.trim();if(sourceId.length===0||seenSourceIds.has(sourceId))continue;seenSourceIds.add(sourceId),output.push(rawSourceId===sourceId?candidate:{...candidate,sourceId})}catch{}}return output}const DATA_LAYER_SUFFIXES=["-fill","-line","-circle","-cluster","-cluster-count","-heatmap"],QUERYABLE_DATA_LAYER_SUFFIXES=["-fill","-line","-circle","-cluster"],MAX_MAP_STEP_STOPS=32;function normalizedSteps(value,isOutput,clampThreshold=threshold=>threshold){if(!Array.isArray(value))return[];const usable=[],scanCount=Math.min(value.length,MAX_MAP_STEP_STOPS);for(let index=0;index<scanCount;index+=1){const stop=value[index];if(!Array.isArray(stop)||stop.length<2)continue;const[rawThreshold,rawOutput]=stop;typeof rawThreshold!="number"||!Number.isFinite(rawThreshold)||isOutput(rawOutput)&&usable.push([clampThreshold(rawThreshold),rawOutput])}return usable.sort((a,b)=>a[0]-b[0]),usable.filter((stop,index)=>index===0||stop[0]>usable[index-1][0])}const isFiniteOutput=candidate=>typeof candidate=="number"&&Number.isFinite(candidate),isColorOutput=candidate=>typeof candidate=="string"&&candidate.trim().length>0;function stepExpression(input,stops){const expression=["step",input,stops[0][1]];for(const[threshold,output]of stops)expression.push(threshold,output);return expression}const DEFAULT_CLUSTER_RADIUS=50,DEFAULT_CLUSTER_MAX_ZOOM=14,DEFAULT_CLUSTER_RADIUS_STEPS=Object.freeze([[0,14],[10,18],[50,24]]),DEFAULT_HEATMAP_RADIUS=30,DEFAULT_HEATMAP_INTENSITY=1,HEATMAP_TRANSPARENT="rgba(0, 0, 0, 0)";function withTransparentFloor(stops){return stops.length&&stops[0][0]>0?[[0,HEATMAP_TRANSPARENT],...stops]:stops}const MAX_CLUSTER_COUNT_FONTS=8;function normalizedClusterOptions(value){if(value===null||typeof value!="object"||Array.isArray(value))return;const options=value,radiusSteps=normalizedSteps(options.radiusSteps,isFiniteOutput),fonts=Array.isArray(options.countFont)?options.countFont.filter(font=>typeof font=="string"&&font.trim().length>0).slice(0,MAX_CLUSTER_COUNT_FONTS):[];return{radius:finiteRange(Number(options.radius),DEFAULT_CLUSTER_RADIUS,1,1e3),maxZoom:finiteRange(Number(options.maxZoom),DEFAULT_CLUSTER_MAX_ZOOM,0,24),radiusSteps:radiusSteps.length?radiusSteps:DEFAULT_CLUSTER_RADIUS_STEPS,colorSteps:normalizedSteps(options.colorSteps,isColorOutput),countFont:fonts.length?fonts:void 0}}function dataLayerShape(layer){if(layer.kind==="heatmap")return"heatmap";const cluster=normalizedClusterOptions(layer.cluster);return cluster?`cluster:${cluster.radius}:${cluster.maxZoom}:${cluster.countFont?.join(",")??""}`:"auto"}function heatmapWeightExpression(options){const field=typeof options?.weightField=="string"?options.weightField.trim():"";if(!field)return;const range=options?.weightRange,min=Array.isArray(range)?Number(range[0]):Number.NaN,max=Array.isArray(range)?Number(range[1]):Number.NaN;return!Number.isFinite(min)||!Number.isFinite(max)||min>=max?["get",field]:["interpolate",["linear"],["get",field],min,0,max,1]}const FALLBACK_FILL_OPACITY=.75;function ownerWindow(host){return host.ownerDocument?.defaultView??null}function choroplethFillOpacity(host){const raw=ownerWindow(host)?.getComputedStyle(host).getPropertyValue("--lr-map-choropleth-fill-opacity").trim()??"",parsed=Number.parseFloat(raw);return Number.isFinite(parsed)?parsed:FALLBACK_FILL_OPACITY}const TONE_TOKEN={accent:"--lr-color-brand",success:"--lr-color-success",warning:"--lr-color-warning",danger:"--lr-color-danger",neutral:"--lr-color-text-quiet"},ON_TONE_TOKEN={accent:"--lr-color-on-brand",success:"--lr-color-on-success",warning:"--lr-color-on-warning",danger:"--lr-color-on-danger",neutral:"--lr-color-on-neutral"},HEATMAP_RAMP_TOKENS=Object.freeze([[.25,"--lr-color-brand"],[.5,"--lr-color-success"],[.75,"--lr-color-warning"],[1,"--lr-color-danger"]]);function dataLayerColor(host,tone){const token=TONE_TOKEN[tone??"accent"];return(ownerWindow(host)?.getComputedStyle(host).getPropertyValue(token).trim()??"")||"#0969da"}function resolvedLayerColor(host,explicit,tone){const candidate=typeof explicit=="string"?explicit.trim():"";if(!candidate)return dataLayerColor(host,tone);const reference=/^var\(\s*(--[\w-]+)/.exec(candidate);return reference?ownerWindow(host)?.getComputedStyle(host).getPropertyValue(reference[1]).trim()||dataLayerColor(host,tone):candidate}const UNTILEABLE_SCAN_FEATURE_LIMIT=1e4;function warnOnUntileableProperties(geojson,sourceLabel){const features=geojson?.features;if(!Array.isArray(features))return;const limit=Math.min(features.length,UNTILEABLE_SCAN_FEATURE_LIMIT);for(let index=0;index<limit;index+=1){const feature=features[index],properties=feature?.properties;if(!(!properties||typeof properties!="object"))for(const[key,value]of Object.entries(properties)){if(typeof value!="number"||!Number.isFinite(value)||Math.abs(value)<=Number.MAX_SAFE_INTEGER)continue;const identity=feature?.id??`index ${index}`;devWarnOnce(`lyra-map-untileable-property:${sourceLabel}:${key}`,`<lr-map>: feature ${String(identity)} in "${sourceLabel}" carries ${key}=${value}, which is too large to survive maplibre-gl's vector-tile encoding. Tiling happens in a worker, so the failure would reach you only as an opaque "Given varint doesn't fit into 10 bytes" error while the rest of the layer still paints. Carry a reduced figure in the feature and keep the exact value in your own data.`)}}}const GEOJSON_DIFF_FEATURE_LIMIT=1e4;function buildGeoJsonPropertyDiff(previous,next){const previousFeatures=previous?.features,nextFeatures=next?.features;if(!Array.isArray(previousFeatures)||!Array.isArray(nextFeatures)||previousFeatures.length!==nextFeatures.length||nextFeatures.length>GEOJSON_DIFF_FEATURE_LIMIT)return null;const update=[];for(let index=0;index<nextFeatures.length;index+=1){const before=previousFeatures[index],after=nextFeatures[index];if(!before||!after)return null;const id=after.id;if(typeof id!="string"&&typeof id!="number"||before.id!==id||before.geometry!==after.geometry)return null;const beforeProperties=before.properties??{},afterProperties=after.properties??{},addOrUpdateProperties=[];for(const[key,value]of Object.entries(afterProperties))Object.is(beforeProperties[key],value)||addOrUpdateProperties.push({key,value});const removeProperties=Object.keys(beforeProperties).filter(key=>!(key in afterProperties));addOrUpdateProperties.length===0&&removeProperties.length===0||update.push({id,addOrUpdateProperties,removeProperties})}return{update}}class LyraMap extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,items:LYRA_DEFAULT_items,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,mapInitializationFailed:LYRA_DEFAULT_mapInitializationFailed,mapLegend:LYRA_DEFAULT_mapLegend,mapMissingLibrary:LYRA_DEFAULT_mapMissingLibrary,mapStyleRequired:LYRA_DEFAULT_mapStyleRequired,mapWebglUnavailable:LYRA_DEFAULT_mapWebglUnavailable,paginationSummary:LYRA_DEFAULT_paginationSummary}}static{this.immutableEventDetails=Object.freeze(["lr-map-click"])}static{this.identityEventDetailProperties=Object.freeze({"lr-map-click":Object.freeze(["feature"])})}static{this.ownedCollectionProperties=Object.freeze(["center","mapStyle","choropleth","markers","dataLayers"])}static{this.styles=[LyraElement.styles,styles,srOnly]}static preload(){return loadMaplibre().then(module=>module!==null)}constructor(){super(),this.center=[0,0],this.zoom=2,this.maxBounds=null,this._legend=EMPTY_MAP_LEGEND,this._legendProjection=EMPTY_MAP_LEGEND_PROJECTION,this.hasLegendSlot=!1,this._legendGradient=Object.freeze([]),this.legendGradientLoLabel=null,this.legendGradientHiLabel=null,this.markers=[],this.dataLayers=[],this.label="",this.loading=!0,this.loadLibrary=loadMaplibre,this.visible=ownerWindow(this)?.IntersectionObserver===void 0,this._styleLoaded=!1,this._appliedDataLayerIds=new Map,this._appliedDataLayerShapes=new Map,this._appliedGeoJson=new Map,this._nextDataLayerId=0,this._webglReady=!1,this._markerInstances=new Map,this._markerLabels=new Map,this._markerPopupIds=new Map,this._configuredPopups=new WeakSet,this._nextPopupId=0,this._markerColors=new Map,this._connectGeneration=0,this.configuredMarkerElements=new WeakSet,this.onLegendSlotChange=event=>{const slot=event.target;this.hasLegendSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType===Node.ELEMENT_NODE||(node.textContent??"").trim().length>0)},new ThemeWatcher(this,()=>this.refreshThemePaint())}get legend(){return this._legend}set legend(value){const previous=this._legend,normalized=normalizeMapLegend(value);this._legend=normalized.entries,this._legendProjection=normalized.projection,this.requestUpdate("legend",previous)}probeLegendSlot(){for(const child of Array.from(this.children))if(child.getAttribute("slot")==="legend")return!0;return!1}get legendGradient(){return this._legendGradient}set legendGradient(value){const previous=this._legendGradient;this._legendGradient=normalizeMapLegendGradient(value),this.requestUpdate("legendGradient",previous)}get legendProjection(){return this._legendProjection}get map(){return this._map}pushGeoJson(source,resolvedSourceId,geojson){const previous=this._appliedGeoJson.get(resolvedSourceId),diff=typeof source.updateData=="function"&&previous!==void 0?buildGeoJsonPropertyDiff(previous,geojson):null;diff===null||typeof source.updateData!="function"?source.setData(geojson):diff.update.length>0&&source.updateData(diff),this._appliedGeoJson.set(resolvedSourceId,geojson)}get safeMaxBounds(){const bounds=this.maxBounds;if(!Array.isArray(bounds)||bounds.length!==2)return null;const[southWest,northEast]=bounds;if(!Array.isArray(southWest)||!Array.isArray(northEast))return null;const[west,south]=southWest,[east,north]=northEast,values=[west,south,east,north].map(Number);if(!values.every(value=>Number.isFinite(value)))return null;const[w,s,e,n]=values;return w>=e||s>=n||w<-180||e>180||s<-90||n>90?null:[[w,s],[e,n]]}applyMaxBounds(){const map=this._map;if(!map||typeof map.setMaxBounds!="function")return;const bounds=this.safeMaxBounds,zoomBefore=map.getZoom(),centerBefore=map.getCenter();try{if(map.setMaxBounds(bounds),bounds===null||Number.isFinite(map.getZoom()))return}catch{}try{map.setMaxBounds(null)}catch{}Number.isFinite(zoomBefore)&&map.setZoom(zoomBefore),centerBefore&&map.setCenter([centerBefore.lng,centerBefore.lat]),devWarnOnce("lyra-map-max-bounds-rejected","<lr-map>: maxBounds left maplibre-gl without a usable camera, so it was dropped and the camera restored. This is a peer limitation, not a bad value -- it shows up at sub-1 fractional zooms in wide containers. Raise the zoom, narrow the box, or leave maxBounds unset.")}get safeZoom(){return finiteRange(this.zoom,2,0,22)}get safeCenter(){const center=Array.isArray(this.center)?this.center:[];return[finiteRange(Number(center[0]),0,-180,180),finiteRange(Number(center[1]),0,-90,90)]}connectedCallback(){super.connectedCallback(),this.syncErrorAnnouncementSink();const generation=++this._connectGeneration,IntersectionObserverCtor=ownerWindow(this)?.IntersectionObserver;if(this.visible=IntersectionObserverCtor===void 0,this.failure=void 0,this.loading=!0,this._webglReady=!1,IntersectionObserverCtor){const observer=new IntersectionObserverCtor(entries=>{entries[0]?.isIntersecting&&(this.visible=!0)});this.intersectionObserver=observer,observer.observe(this)}(async()=>{let mod;try{mod=await this.loadLibrary()}catch{generation===this._connectGeneration&&this.isConnected&&this.failInitialization("missing-peer");return}if(!(generation!==this._connectGeneration||!this.isConnected)){if(this.loading=!1,!mod){this.failInitialization("missing-peer");return}if(this._maplibreModule=mod,!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}if(!supportsWebGL2(this)){this.failInitialization("webgl-unavailable");return}this._webglReady=!0,await this.updateComplete,!(generation!==this._connectGeneration||!this.containerEl||!this.isConnected)&&this.tryConstructMap()}})()}disconnectedCallback(){this.releaseErrorAnnouncementSink(),super.disconnectedCallback(),this.disposeMap(),this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;for(const marker of this._markerInstances.values())marker.remove();this._markerInstances.clear(),this._markerColors.clear(),this._markerLabels.clear(),this._markerPopupIds.clear()}failureMessage(reason=this.failure??"initialization-failed"){switch(reason){case"missing-peer":return this.localize("mapMissingLibrary");case"style-required":return this.localize("mapStyleRequired");case"webgl-unavailable":return this.localize("mapWebglUnavailable");case"initialization-failed":return this.localize("mapInitializationFailed")}}failInitialization(reason,partialMap){try{partialMap?.remove()}catch{}this.disposeMap(),this.loading=!1,this.failure=reason,this.errorAnnouncementSink?.announce(this.failureMessage(reason))}disposeMap(){this.stopObservingPeerChrome();try{this._map?.remove()}catch{}this._map=void 0,this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0,this._appliedDataLayerIds.clear(),this._appliedDataLayerShapes.clear(),this._appliedGeoJson.clear()}adoptedCallback(){super.adoptedCallback(),this.stopObservingPeerChrome(),this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}tryConstructMap(){if(this._map||!this._maplibreModule||!this._webglReady||!this.containerEl||!this.visible||!this.isConnected)return;if(!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}const mod=this._maplibreModule;let candidate;try{candidate=new mod.Map({container:this.containerEl,style:this.mapStyle,center:this.safeCenter,zoom:this.safeZoom,locale:{"Map.Title":this.effectiveMapLabel,"Marker.Title":this.localize("map"),"Popup.Close":this.localize("close")}}),candidate.on("error",event=>{if(this._map===candidate&&!this._styleLoaded){this.failInitialization("initialization-failed");return}console.error("lr-map:",event.error??event)}),candidate.on("load",()=>{if(this._map===candidate)try{this._styleLoaded=!0,this.applyChoropleth(),this.applyMarkers(),this.applyDataLayers(),this.emit("lr-map-load")}catch{this.failInitialization("initialization-failed")}}),candidate.on("click",event=>{if(this._map!==candidate)return;const fillLayerId=this._appliedFillLayerId,layerIds=[];fillLayerId&&candidate.getLayer(fillLayerId)&&layerIds.push(fillLayerId);for(const resolvedSourceId of this._appliedDataLayerIds.values())for(const suffix of QUERYABLE_DATA_LAYER_SUFFIXES){const layerId=`${resolvedSourceId}${suffix}`;candidate.getLayer(layerId)&&layerIds.push(layerId)}const hit=(layerIds.length?candidate.queryRenderedFeatures(event.point,{layers:layerIds}):[])[0],hitLayerId=hit?.layer?.id;let origin,sourceId;if(hitLayerId!==void 0){if(hitLayerId===fillLayerId)origin="choropleth";else for(const[publicSourceId,resolvedSourceId]of this._appliedDataLayerIds)if(hitLayerId.startsWith(`${resolvedSourceId}-`)){origin=hitLayerId===`${resolvedSourceId}-cluster`?"cluster":"data-layer",sourceId=publicSourceId;break}}this.emit("lr-map-click",{lngLat:[event.lngLat.lng,event.lngLat.lat],feature:hit,origin,sourceId})});const canvas=candidate.getCanvas?.();canvas&¬ifyMapCanvasReady(this,canvas),this._map=candidate,this.observePeerChrome(),this.failure=void 0}catch{this.failInitialization("initialization-failed",candidate);return}this.applyMaxBounds()}updated(changed){if(super.updated(changed),this.setAttribute("aria-busy",String(this.loading)),changed.has("visible")&&this.visible&&this.tryConstructMap(),changed.has("mapStyle")&&!hasMapStyle(this.mapStyle)&&this._maplibreModule)this.failInitialization("style-required");else if(changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle))this.tryConstructMap();else if(changed.has("mapStyle")&&this._map){this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0;const map=this._map;try{map.once("style.load",()=>{if(this._map===map)try{this._styleLoaded=!0,this._appliedDataLayerIds.clear(),this._appliedDataLayerShapes.clear(),this._appliedGeoJson.clear(),this.applyChoropleth(),this.applyDataLayers()}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}),map.setStyle(this.mapStyle)}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}else if(this._styleLoaded&&(changed.has("dataLayers")||changed.has("choropleth"))){const nextChoroplethSourceId=this.choropleth?this.resolveChoroplethSourceId(this.choropleth.sourceId):void 0;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==nextChoroplethSourceId&&this.removeChoropleth(),changed.has("dataLayers")&&this.applyDataLayers(),this.applyChoropleth()}changed.has("center")&&this._map&&this._map.setCenter(this.safeCenter),changed.has("zoom")&&this._map&&this._map.setZoom(this.safeZoom),changed.has("maxBounds")&&this._map&&this.applyMaxBounds(),changed.has("markers")&&this._map&&this.applyMarkers(),this.syncMapSemantics()}willUpdate(changed){super.willUpdate(changed),changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle)&&(this._webglReady||(this._webglReady=supportsWebGL2(this)),this.failure=this._webglReady?void 0:"webgl-unavailable",this._webglReady||(this.loading=!1,this.errorAnnouncementSink?.announce(this.failureMessage("webgl-unavailable"))))}refreshThemePaint(){if(!this._map||!this._styleLoaded)return;const fillOpacity=choroplethFillOpacity(this);this._appliedFillLayerId&&this._map.setPaintProperty(this._appliedFillLayerId,"fill-opacity",fillOpacity);const dataLayersBySourceId=new Map(normalizedDataLayers(this.dataLayers).map(layer=>[layer.sourceId,layer]));for(const[publicSourceId,sourceId]of this._appliedDataLayerIds){const dataLayer=dataLayersBySourceId.get(publicSourceId);dataLayer&&this.paintDataLayer(sourceId,dataLayer)}}applyChoropleth(){if(!this._map)return;if(!this.choropleth){this.removeChoropleth();return}const{geojson,field,stops}=this.choropleth,sourceId=this.resolveChoroplethSourceId(this.choropleth.sourceId),fillLayerId=`${sourceId}-fill`;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==sourceId&&this.removeChoropleth(),warnOnUntileableProperties(geojson,"choropleth");const existingSource=this._map.getSource(sourceId);if(existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedGeoJson.set(sourceId,geojson)),this._appliedChoroplethSourceId=sourceId,stops.length===0)return;let colorExpr;if(this.choropleth.interpolation==="step"){const base=typeof this.choropleth.stepBaseColor=="string"&&this.choropleth.stepBaseColor.trim()?this.choropleth.stepBaseColor.trim():stops[0][1];colorExpr=["step",["get",field],base];for(const[value,color]of stops)colorExpr.push(value,color)}else{colorExpr=["interpolate",this.choropleth.interpolation==="logarithmic"?["exponential",CHOROPLETH_LOG_INTERPOLATION_BASE]:["linear"],["get",field]];for(const[value,color]of stops)colorExpr.push(value,color)}this._map.getLayer(fillLayerId)?(this._map.setPaintProperty(fillLayerId,"fill-color",colorExpr),this._map.setPaintProperty(fillLayerId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillLayerId,type:"fill",source:sourceId,paint:{"fill-color":colorExpr,"fill-opacity":choroplethFillOpacity(this)}}),this._appliedFillLayerId=fillLayerId}resolveChoroplethSourceId(sourceId){const dataSourceIds=new Set(normalizedDataLayers(this.dataLayers).map(layer=>layer.sourceId));let resolved=sourceId;for(;dataSourceIds.has(resolved);)resolved=`lr-choropleth-${resolved}`;return resolved}removeChoropleth(){!this._map||!this._appliedChoroplethSourceId||(this._appliedFillLayerId&&this._map.getLayer(this._appliedFillLayerId)&&this._map.removeLayer(this._appliedFillLayerId),this._map.getSource(this._appliedChoroplethSourceId)&&this._map.removeSource(this._appliedChoroplethSourceId),this._appliedGeoJson.delete(this._appliedChoroplethSourceId),this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0)}applyDataLayers(){if(!this._map)return;const layers=normalizedDataLayers(this.dataLayers),nextIds=new Set(layers.map(layer=>layer.sourceId));for(const publicSourceId of this._appliedDataLayerIds.keys())nextIds.has(publicSourceId)||this.removeDataLayer(publicSourceId);for(const layer of layers){const{sourceId:publicSourceId,geojson}=layer,shape=dataLayerShape(layer),appliedShape=this._appliedDataLayerShapes.get(publicSourceId);appliedShape!==void 0&&appliedShape!==shape&&this.removeDataLayer(publicSourceId);const sourceId=this.resolveDataLayerSourceId(publicSourceId);warnOnUntileableProperties(geojson,publicSourceId);const cluster=layer.kind==="heatmap"?void 0:normalizedClusterOptions(layer.cluster),existingSource=this._map.getSource(sourceId);existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson,...cluster?{cluster:!0,clusterRadius:cluster.radius,clusterMaxZoom:cluster.maxZoom}:{}}),this._appliedGeoJson.set(sourceId,geojson)),this.applyDataLayerRendering(sourceId,layer),this._appliedDataLayerIds.set(publicSourceId,sourceId),this._appliedDataLayerShapes.set(publicSourceId,shape)}}applyDataLayerRendering(sourceId,layer){if(layer.kind==="heatmap"){this.applyHeatmapLayer(sourceId,layer);return}const cluster=normalizedClusterOptions(layer.cluster);if(cluster){this.applyClusterLayers(sourceId,layer,cluster);return}this.applyGeometryLayers(sourceId,layer)}paintDataLayer(sourceId,layer){if(layer.kind==="heatmap"){this.paintHeatmapLayer(sourceId,layer);return}const cluster=normalizedClusterOptions(layer.cluster);if(cluster){this.paintClusterLayers(sourceId,layer,cluster);return}this.paintGeometryLayers(sourceId,layer)}applyGeometryLayers(sourceId,layer){if(!this._map)return;const tone=layer.tone,color=resolvedLayerColor(this,layer.color,tone),stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone),fillId=`${sourceId}-fill`,lineId=`${sourceId}-line`,circleId=`${sourceId}-circle`;this._map.getLayer(fillId)||this._map.addLayer({id:fillId,type:"fill",source:sourceId,filter:["==",["geometry-type"],"Polygon"],paint:{"fill-color":color,"fill-opacity":choroplethFillOpacity(this)}}),this._map.getLayer(lineId)||this._map.addLayer({id:lineId,type:"line",source:sourceId,filter:["in",["geometry-type"],["literal",["LineString","Polygon"]]],paint:{"line-color":stroke,"line-width":2}}),this._map.getLayer(circleId)||this._map.addLayer({id:circleId,type:"circle",source:sourceId,filter:["==",["geometry-type"],"Point"],paint:{"circle-color":stroke,"circle-radius":5}}),this.paintGeometryLayers(sourceId,layer)}paintGeometryLayers(sourceId,layer){if(!this._map)return;const tone=layer.tone,color=resolvedLayerColor(this,layer.color,tone),stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone);this._map.setPaintProperty(`${sourceId}-fill`,"fill-color",color),this._map.setPaintProperty(`${sourceId}-fill`,"fill-opacity",choroplethFillOpacity(this)),this._map.setPaintProperty(`${sourceId}-line`,"line-color",stroke),this._map.setPaintProperty(`${sourceId}-circle`,"circle-color",stroke)}clusterColorExpression(layer,cluster){const tone=layer.tone;return cluster.colorSteps.length?stepExpression(["get","point_count"],cluster.colorSteps.map(([count,stepColor])=>[count,resolvedLayerColor(this,stepColor,tone)])):resolvedLayerColor(this,layer.color,tone)}applyClusterLayers(sourceId,layer,cluster){if(!this._map)return;const tone=layer.tone,stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone),clusterId=`${sourceId}-cluster`,countId=`${sourceId}-cluster-count`,circleId=`${sourceId}-circle`,clusterColor=this.clusterColorExpression(layer,cluster),clusterRadius=stepExpression(["get","point_count"],cluster.radiusSteps),countColor=resolvedLayerColor(this,`var(${ON_TONE_TOKEN[tone??"accent"]})`,tone);this._map.getLayer(clusterId)||this._map.addLayer({id:clusterId,type:"circle",source:sourceId,filter:["has","point_count"],paint:{"circle-color":clusterColor,"circle-radius":clusterRadius,"circle-stroke-width":1,"circle-stroke-color":stroke}}),this.styleProvidesGlyphs()&&!this._map.getLayer(countId)&&this._map.addLayer({id:countId,type:"symbol",source:sourceId,filter:["has","point_count"],layout:{"text-field":["get","point_count_abbreviated"],"text-size":12,...cluster.countFont?{"text-font":[...cluster.countFont]}:{}},paint:{"text-color":countColor}}),this._map.getLayer(circleId)||this._map.addLayer({id:circleId,type:"circle",source:sourceId,filter:["all",["==",["geometry-type"],"Point"],["!",["has","point_count"]]],paint:{"circle-color":stroke,"circle-radius":5}}),this.paintClusterLayers(sourceId,layer,cluster)}paintClusterLayers(sourceId,layer,cluster){if(!this._map)return;const tone=layer.tone,stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone),clusterId=`${sourceId}-cluster`;this._map.setPaintProperty(clusterId,"circle-color",this.clusterColorExpression(layer,cluster)),this._map.setPaintProperty(clusterId,"circle-radius",stepExpression(["get","point_count"],cluster.radiusSteps)),this._map.setPaintProperty(clusterId,"circle-stroke-color",stroke),this.styleProvidesGlyphs()&&this._map.setPaintProperty(`${sourceId}-cluster-count`,"text-color",resolvedLayerColor(this,`var(${ON_TONE_TOKEN[tone??"accent"]})`,tone)),this._map.setPaintProperty(`${sourceId}-circle`,"circle-color",stroke)}applyHeatmapLayer(sourceId,layer){if(!this._map)return;const heatmapId=`${sourceId}-heatmap`,options=layer.heatmap,weight=heatmapWeightExpression(options),color=this.heatmapColorExpression(layer),radius=finiteRange(Number(options?.radius),DEFAULT_HEATMAP_RADIUS,1,200),intensity=finiteRange(Number(options?.intensity),DEFAULT_HEATMAP_INTENSITY,0,100);if(!this._map.getLayer(heatmapId)){this._map.addLayer({id:heatmapId,type:"heatmap",source:sourceId,paint:{...weight?{"heatmap-weight":weight}:{},"heatmap-intensity":intensity,"heatmap-color":color,"heatmap-radius":radius}});return}this.paintHeatmapLayer(sourceId,layer)}paintHeatmapLayer(sourceId,layer){if(!this._map)return;const heatmapId=`${sourceId}-heatmap`;this._map.setPaintProperty(heatmapId,"heatmap-weight",heatmapWeightExpression(layer.heatmap)??1),this._map.setPaintProperty(heatmapId,"heatmap-intensity",finiteRange(Number(layer.heatmap?.intensity),DEFAULT_HEATMAP_INTENSITY,0,100)),this._map.setPaintProperty(heatmapId,"heatmap-color",this.heatmapColorExpression(layer)),this._map.setPaintProperty(heatmapId,"heatmap-radius",finiteRange(Number(layer.heatmap?.radius),DEFAULT_HEATMAP_RADIUS,1,200))}heatmapColorExpression(layer){const tone=layer.tone,authored=normalizedSteps(layer.heatmap?.stops,isColorOutput,threshold=>finiteRange(threshold,0,0,1)).map(([density,color])=>[density,resolvedLayerColor(this,color,tone)]),authoredRamp=withTransparentFloor(authored),ramp=authoredRamp.length>=2?authoredRamp:withTransparentFloor(HEATMAP_RAMP_TOKENS.map(([density,token])=>[density,resolvedLayerColor(this,`var(${token})`,tone)])),expression=["interpolate",["linear"],["heatmap-density"]];for(const[density,color]of ramp)expression.push(density,color);return expression}styleProvidesGlyphs(){try{const liveGlyphs=this._map?.getStyle?.()?.glyphs;if(typeof liveGlyphs=="string"&&liveGlyphs.trim().length>0)return!0}catch{}const declared=this.mapStyle,declaredGlyphs=declared&&typeof declared=="object"?declared.glyphs:void 0;return typeof declaredGlyphs=="string"&&declaredGlyphs.trim().length>0}resolveDataLayerSourceId(publicSourceId){const applied=this._appliedDataLayerIds.get(publicSourceId);if(applied)return applied;let sourceId;do sourceId=`lr-data-layer-${this._nextDataLayerId++}`;while(this._map?.getSource(sourceId)||DATA_LAYER_SUFFIXES.some(suffix=>this._map?.getLayer(`${sourceId}${suffix}`)));return sourceId}removeDataLayer(publicSourceId){if(!this._map)return;const sourceId=this._appliedDataLayerIds.get(publicSourceId);if(sourceId){for(const suffix of DATA_LAYER_SUFFIXES){const layerId=`${sourceId}${suffix}`;this._map.getLayer(layerId)&&this._map.removeLayer(layerId)}this._map.getSource(sourceId)&&this._map.removeSource(sourceId),this._appliedDataLayerIds.delete(publicSourceId),this._appliedDataLayerShapes.delete(publicSourceId),this._appliedGeoJson.delete(sourceId)}}applyMarkers(){const map=this._map,mod=this._maplibreModule;if(!map||!mod)return;const visible=new Set,coordCounts=new Map,explicitIds=new Set,markers=Array.isArray(this.markers)?this.markers.slice(0,MAX_MAP_MARKERS):[];for(const candidate of markers){const lngLat=this.validMarkerLngLat(candidate);if(!lngLat)continue;const m=candidate,rawId=m.id;let key;if(rawId!==void 0){if(typeof rawId!="string")continue;const id=rawId.trim();if(id.length===0||explicitIds.has(id))continue;explicitIds.add(id),key=`id:${id}`}else{const coordKey=`${lngLat[0]},${lngLat[1]}`,occurrence=coordCounts.get(coordKey)??0;coordCounts.set(coordKey,occurrence+1),key=`coordinate:${coordKey}#${occurrence}`}visible.add(key);let existing=this._markerInstances.get(key);const markerColor=sanitizeCssColor(m.color);if(existing&&this._markerColors.get(key)!==markerColor&&(existing.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),existing=void 0),existing){existing.setLngLat(lngLat);const popup=existing.getPopup();if(m.unsafeHtml)if(popup)popup.setHTML(m.unsafeHtml);else{const nextPopup=new mod.Popup({offset:12}).setHTML(m.unsafeHtml);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else if(m.label)if(popup)popup.setText(m.label);else{const nextPopup=new mod.Popup({offset:12}).setText(m.label);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else popup&&existing.setPopup(void 0)}else{const marker=new mod.Marker(markerColor?{color:markerColor}:void 0).setLngLat(lngLat);if(m.unsafeHtml||m.label){const popup=new mod.Popup({offset:12});m.unsafeHtml?popup.setHTML(m.unsafeHtml):m.label&&popup.setText(m.label),marker.setPopup(popup),this.configurePopupSemantics(key,marker,popup)}marker.addTo(map),this._markerInstances.set(key,marker),this._markerColors.set(key,markerColor)}const markerLabel=m.label?.trim()||(m.unsafeHtml?popupText(this,m.unsafeHtml):"");this._markerLabels.set(key,markerLabel||void 0);const markerElement=this._markerInstances.get(key)?.getElement?.();if(markerElement){addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",markerLabel||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const currentMarker=this._markerInstances.get(key),popup=currentMarker?.getPopup();popup&¤tMarker?(this.configurePopupSemantics(key,currentMarker,popup),this.syncPopupSemantics(key,currentMarker,popup),this.configureMarkerKeyboard(markerElement,currentMarker)):(markerElement.removeAttribute("aria-controls"),markerElement.removeAttribute("aria-expanded"))}}for(const[key,marker]of this._markerInstances)visible.has(key)||(marker.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),this._markerLabels.delete(key),this._markerPopupIds.delete(key))}configureMarkerKeyboard(markerElement,marker){this.configuredMarkerElements.has(markerElement)||(this.configuredMarkerElements.add(markerElement),markerElement.addEventListener("keydown",event=>{event.key!==" "||!marker.getPopup?.()||event.defaultPrevented||event.preventDefault()},{capture:!0}))}get effectiveMapLabel(){return this.getAttribute("aria-label")===""?"":this.label||this.localize("map")}validMarkerLngLat(candidate){if(!candidate||typeof candidate!="object")return null;const lngLat=candidate.lngLat;if(!Array.isArray(lngLat)||lngLat.length<2)return null;const[lng,lat]=lngLat;return typeof lng!="number"||typeof lat!="number"||!Number.isFinite(lng)||!Number.isFinite(lat)||lat<-90||lat>90?null:[lng,lat]}popupId(key){let id=this._markerPopupIds.get(key);return id||(id=`map-popup-${this._connectGeneration}-${++this._nextPopupId}`,this._markerPopupIds.set(key,id)),id}configurePopupSemantics(key,marker,popup){!popup||typeof popup!="object"||this._configuredPopups.has(popup)||(this._configuredPopups.add(popup),popup.on?.("open",()=>this.syncPopupSemantics(key,marker,popup)),popup.on?.("close",()=>{marker.getElement?.()?.setAttribute("aria-expanded","false")}))}stopObservingPeerChrome(){this.peerChromeObserver?.disconnect(),this.peerChromeObserver=void 0,this.observedPeerContainer=void 0}syncPeerChromeParts(root=this.containerEl??this.renderRoot){const selectors=[[".maplibregl-marker","marker"],[".maplibregl-popup","popup"],[".maplibregl-popup-content","popup-content"],[".maplibregl-popup-close-button","popup-close-button"],[".maplibregl-ctrl-attrib","attribution"],[".maplibregl-ctrl-attrib-button","attribution-toggle"]];for(const[selector,part]of selectors){const candidate=root;candidate.matches?.(selector)&&addPartToken(candidate,part);for(const element of root.querySelectorAll(selector))addPartToken(element,part)}}observePeerChrome(){const container=this.containerEl;if(!container||(this.syncPeerChromeParts(container),this.observedPeerContainer===container&&this.peerChromeObserver))return;this.stopObservingPeerChrome();const MutationObserverCtor=container.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.observedPeerContainer=container,this.peerChromeObserver=new MutationObserverCtor(records=>{if(!(!this.isConnected||this.containerEl!==container))for(const record of records)for(const node of record.addedNodes)node.nodeType===Node.ELEMENT_NODE&&this.syncPeerChromeParts(node)}),this.peerChromeObserver.observe(container,{childList:!0,subtree:!0}))}syncPopupSemantics(key,marker,popup){const markerElement=marker?.getElement?.();if(!markerElement)return;const id=this.popupId(key);markerElement.setAttribute("aria-controls",id),markerElement.setAttribute("aria-expanded",popup?.isOpen?.()?"true":"false");const popupElement=popup?.getElement?.();if(!popupElement)return;addPartToken(markerElement,"marker"),addPartToken(popupElement,"popup"),popupElement.id=id,popupElement.setAttribute("role","dialog"),popupElement.setAttribute("lang",this.effectiveLocale),popupElement.setAttribute("aria-label",this._markerLabels.get(key)||this.effectiveMapLabel);const popupContent=popupElement.querySelector(".maplibregl-popup-content");popupContent&&addPartToken(popupContent,"popup-content");const closeButton=popupElement.querySelector(".maplibregl-popup-close-button");closeButton&&addPartToken(closeButton,"popup-close-button"),closeButton?.setAttribute("aria-label",this.localize("close"))}syncMapSemantics(){const canvas=this._map?.getCanvas?.();canvas&&(canvas.setAttribute("aria-label",this.effectiveMapLabel),canvas.setAttribute("lang",this.effectiveLocale),this.legend.length||this.legendProjection.truncated?canvas.setAttribute("aria-describedby","map-legend"):canvas.removeAttribute("aria-describedby"));for(const[key,marker]of this._markerInstances){const markerElement=marker.getElement?.();if(!markerElement)continue;addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",this._markerLabels.get(key)||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const popup=marker.getPopup?.();popup&&this.syncPopupSemantics(key,marker,popup)}this.syncPeerChromeParts()}formatCount(value){return getNumberFormat(this.effectiveLocale).format(value)}legendLimitText(){return this.localize("paginationSummary",void 0,{start:this.formatCount(this.legend.length===0?0:1),end:this.formatCount(this.legend.length),total:this.formatCount(this.legendProjection.inputCount),itemLabel:this.localize("items")})}renderLegendGradient(){const stops=this.legendGradient;if(stops.length<2)return nothing;const lo=stops[0],hi=stops[stops.length-1],span=hi[0]-lo[0],image=stops.map(([value,color],index)=>{const percent=span>0?(value-lo[0])/span*100:index/(stops.length-1)*100;return`${color} ${percent}%`}).join(", ");return html`<div class="legend-gradient">
|
|
2
2
|
<span part="legend-lo">${this.legendGradientLoLabel??this.formatCount(lo[0])}</span>
|
|
3
3
|
<span
|
|
4
4
|
part="legend-gradient"
|
|
@@ -35,6 +35,7 @@ export interface LyraChipGroupEventMap {
|
|
|
35
35
|
* @event lr-overflow-toggle - The overflow indicator was activated,
|
|
36
36
|
* revealing or re-collapsing the excess children. `detail: { expanded }`.
|
|
37
37
|
* @csspart base - The flex-wrap container (holds both the slot and the overflow indicator).
|
|
38
|
+
* Carries `role="group"` and the accessible name when one is supplied -- see `accessibleLabel`.
|
|
38
39
|
* @csspart overflow-indicator - The "+N" / "Show less" toggle button. Only rendered while `max-visible` is actively causing an overflow.
|
|
39
40
|
* @cssprop [--lr-chip-group-overflow-expanded-color=var(--lr-color-text)] - Text color of
|
|
40
41
|
* `[part="overflow-indicator"]` while expanded (`aria-expanded="true"`).
|
|
@@ -57,6 +58,21 @@ export declare class LyraChipGroup extends LyraElement<LyraChipGroupEventMap> {
|
|
|
57
58
|
* must never reach them. */
|
|
58
59
|
get maxVisible(): number | undefined;
|
|
59
60
|
set maxVisible(next: number | undefined | null);
|
|
61
|
+
/**
|
|
62
|
+
* Accessible name for the group, forwarded to `[part="base"]`.
|
|
63
|
+
*
|
|
64
|
+
* A chip group IS a group, and every peer grouping primitive here already says so --
|
|
65
|
+
* `<lr-radio-group>` renders `role="radiogroup"`, `<lr-segmented>` the same, each forwarding a
|
|
66
|
+
* host `aria-label` inward. This component rendered a roleless container and read no name, and
|
|
67
|
+
* because a host `aria-label` does not cross a shadow boundary, a consumer labelling the host
|
|
68
|
+
* named nothing at all. Supplying a name here (as the `aria-label` attribute or this property)
|
|
69
|
+
* is what makes the group real to assistive technology.
|
|
70
|
+
*
|
|
71
|
+
* The `role="group"` is applied only WITH a name, deliberately: an unnamed group role adds
|
|
72
|
+
* verbosity without adding information, and applying it unconditionally would change the
|
|
73
|
+
* accessibility tree of every decorative chip row already shipped.
|
|
74
|
+
*/
|
|
75
|
+
accessibleLabel: string;
|
|
60
76
|
private childCount;
|
|
61
77
|
/** Whether the excess (beyond `max-visible`) children are currently
|
|
62
78
|
* revealed. Meaningless (and never rendered) while there's no overflow. */
|