@arcgis/map-components
Version:
ArcGIS Map Components
141 lines (140 loc) • 5.64 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as b } from "../../chunks/runtime.js";
import { css as h, html as p } from "lit";
import { renderingSanitizer as c } from "@arcgis/core/applications/Components/sanitizerUtils.js";
import { LitElement as f } from "@arcgis/lumina";
import { addLtrMark as u } from "@arcgis/toolkit/string";
import { h as v, j as $, k as w } from "../../chunks/feature-utils.js";
import { replace as m } from "@arcgis/core/applications/Components/stringUtils.js";
const I = [
{
pattern: /^\s*(https?:\/\/([^\s]+))\s*$/iu,
target: "_blank",
label: "{messages.view}"
},
{
pattern: /^\s*(tel:([^\s]+))\s*$/iu,
label: "{hierPart}"
},
{
pattern: /^\s*(mailto:([^\s]+))\s*$/iu,
label: "{hierPart}"
},
// ArcGIS Apps
{
pattern: /^\s*(arcgis-appstudio-player:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "App Studio Player"
},
{
pattern: /^\s*(arcgis-collector:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Collector"
},
{
pattern: /^\s*(arcgis-explorer:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Explorer"
},
{
pattern: /^\s*(arcgis-navigator:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Navigator"
},
{
pattern: /^\s*(arcgis-survey123:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Survey123"
},
{
pattern: /^\s*(arcgis-trek2there:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Trek2There"
},
{
pattern: /^\s*(arcgis-workforce:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Workforce"
},
// Third-Party Apps
{
pattern: /^\s*(iform:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "iForm"
},
{
pattern: /^\s*(flow:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "FlowFinity"
},
{
pattern: /^\s*(lfmobile:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Laserfische"
},
{
pattern: /^\s*(mspbi:\/\/([^\s]+))\s*$/iu,
label: "{messages.openInApp}",
appName: "Microsoft Power Bi"
}
];
function F(d, t) {
const e = I.find((l) => l.pattern.test(t));
if (!e)
return t;
const i = t.match(e.pattern)?.[2], a = m(
m(e.label, {
messages: d,
hierPart: i
}),
{
appName: e.appName
}
), o = e.target ? ` target="${e.target}"` : "", r = e.target === "_blank" ? ' rel="noreferrer"' : "";
return c.sanitizeUrl(new URL(t, window.location.origin === "null" ? void 0 : window.location.origin).toString()).replace(e.pattern, `<a${o} href="$1"${r}>${a}</a>`);
}
const k = h`.table{border:none;width:100%;border-collapse:collapse;color:var(--calcite-color-text-2)}.table caption{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.table tr{background-color:var(--arcgis-table-row-background-color, var(--calcite-color-foreground-1))}.table tr:nth-child(odd){background-color:var(--arcgis-table-row-alt-background-color, var(--calcite-color-foreground-2))}.table tr a{color:var(--calcite-color-text-link)}.table tr a:hover,.table tr a:focus{color:var(--calcite-color-brand-hover)}.table tr td,.table tr th{padding:var(--calcite-spacing-xs) var(--calcite-spacing-sm);vertical-align:top;word-break:break-word;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-normal)}.table tr th{border-inline-end:var(--calcite-border-width-md) solid var(--calcite-color-border-3);width:50%;text-align:start}.table tr td{width:50%}`;
class N extends f {
constructor() {
super(...arguments), this.headingLevel = 2;
}
static {
this.properties = { values: 0, description: 1, expressionInfos: 0, fieldInfos: 0, heading: 1, isContentFieldInfos: 5, graphic: 0, layer: 0, headingLevel: 9, messages: 0 };
}
static {
this.styles = k;
}
get formattedFieldInfos() {
const { expressionInfos: t, fieldInfos: e, layer: s, graphic: i, isContentFieldInfos: a } = this, o = [];
return e?.forEach((r) => {
if (!("visible" in r ? r.visible : !0))
return;
const n = r.clone();
n.label = v({ fieldInfo: n, expressionInfos: t, layer: s, graphic: i, isContentFieldInfos: a });
const g = $({ fieldInfo: r, graphic: i, layer: s });
g && (n.fieldFormat = w({
configurableFieldsContainer: g,
fieldInfo: n,
isContentFieldInfos: a
})), o.push(n);
}), o;
}
render() {
return p`<div class="root"><arcgis-feature-element-info .heading=${this.heading} .description=${this.description} .headingLevel=${this.headingLevel}></arcgis-feature-element-info>${this._renderFields()}</div>`;
}
_renderFieldInfo(t) {
const { values: e } = this, s = t.fieldName || "", i = t.label || s, a = e ? e[s] == null ? "" : e[s] : "", o = t?.fieldFormat?.type === "date-time", r = {
openInApp: this.messages?.openInApp ?? "",
view: this.messages?.view ?? ""
}, l = typeof a == "number" && !o ? u(`${a}`) : typeof a == "string" ? F(r, a) : `${a}`;
return p`<tr><th .innerHTML=${c.sanitize(i) ?? ""}></th><td .innerHTML=${c.sanitize(l) ?? ""}></td></tr>`;
}
_renderFields() {
const { formattedFieldInfos: t } = this;
return t?.length ? p`<table class="table"><caption>${this.messages?.fieldsSummary}</caption><tbody>${t.map((e) => this._renderFieldInfo(e))}</tbody></table>` : null;
}
}
b("arcgis-feature-fields", N);
export {
N as ArcgisFeatureFields
};