@cas-smartdesign/token-selector 0.16.0 → 0.16.2

package/dist/token-selector.mjs

@@ -1,21 +1,21 @@
-import { LitElement as b, unsafeCSS as T, html as v, nothing as w } from "lit";
+import { LitElement as x, unsafeCSS as T, html as m, nothing as w } from "lit";
 import { property as a } from "lit/decorators/property.js";
 import "@cas-smartdesign/lit-input";
-import E from "@cas-smartdesign/field-validation-message";
-import { generator as S } from "@cas-smartdesign/list-item";
-import _ from "@cas-smartdesign/popover";
+import S from "@cas-smartdesign/field-validation-message";
+import { generator as _ } from "@cas-smartdesign/list-item";
+import C from "@cas-smartdesign/popover";
 import I from "@cas-smartdesign/list";
-import { KeyDownDelegator as C } from "@cas-smartdesign/element-utils";
-import { ifDefined as A } from "lit/directives/if-defined.js";
-import { unsafeSVG as P } from "lit/directives/unsafe-svg.js";
-import L from "@cas-smartdesign/image-tools";
-class D {
+import { KeyDownDelegator as A } from "@cas-smartdesign/element-utils";
+import { ifDefined as P } from "lit/directives/if-defined.js";
+import { unsafeSVG as L } from "lit/directives/unsafe-svg.js";
+import D from "@cas-smartdesign/image-tools";
+class O {
   constructor(e, t, i, s) {
-    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, r) => n ? r.filter((l) => l.disabled || l.deactivated ? !1 : l.caption && l.caption.toLowerCase().includes(n)) : r, I.ensureDefined(), this._tokenList = new I(), this._tokenList.style.minWidth = "250px", this._tokenList.addEventListener("selection", (n) => {
-      const r = n.detail.index, l = this._suggestItems[r];
-      i(l), this.hide();
-    }), new C(this._tokenList, (n, r, l) => {
-      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !l && !this.isOpened && this.show();
+    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, o) => n ? o.filter((d) => d.disabled || d.deactivated ? !1 : d.caption && d.caption.toLowerCase().includes(n)) : o, I.ensureDefined(), this._tokenList = new I(), this._tokenList.style.minWidth = "250px", this._tokenList.addEventListener("selection", (n) => {
+      const o = n.detail.index, d = this._suggestItems[o];
+      i(d), this.hide();
+    }), new A(this._tokenList, (n, o, d) => {
+      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !d && !this.isOpened && this.show();
     }).connect(e);
   }
   show() {
@@ -41,7 +41,7 @@ class D {
     return this._popover || (this._popover = this.createPopover(), this.initializeCallback(this)), this._popover;
   }
   createPopover() {
-    const e = new _();
+    const e = new C();
     return e.setAttribute("trigger-type", "manual"), e.setAttribute("placement", "bottom-start"), e.setAttribute("modal", ""), e.setAttribute("popover-for", "token-autosuggest-popover"), e.setAttribute("offset", "-2"), e.targetElement = this.inputElement, e.appendChild(this._tokenList), e;
   }
   get isOpened() {
@@ -51,25 +51,25 @@ class D {
     return this._suggestItems[this._tokenList.focusIndex];
   }
 }
-const O = ":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-border);box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}", M = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
+const M = ":host{flex-shrink:0;max-width:100%}.container{display:flex;height:28px;background-color:var(--token-background-color, #f3f3f3);border:var(--token-border);box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}", $ = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
   <path d="m3.5 12.5 9-9m-9 0 9 9" style="fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px"/>\r
 </svg>`;
-var $ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, g = (o, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? q(e, t) : e, n = o.length - 1, r; n >= 0; n--)
-    (r = o[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && $(e, t, s), s;
+var q = Object.defineProperty, G = Object.getOwnPropertyDescriptor, g = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? G(e, t) : e, n = r.length - 1, o; n >= 0; n--)
+    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && q(e, t, s), s;
 };
-const x = {
-  fromAttribute: (o) => o == "true",
-  toAttribute: (o) => o
+const y = {
+  fromAttribute: (r) => r == "true",
+  toAttribute: (r) => r
 };
 var u;
-const p = (u = class extends b {
+const p = (u = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
   static get styles() {
-    return T(O);
+    return T(M);
   }
   set checked(e) {
     const t = this._checked;
@@ -88,21 +88,21 @@ const p = (u = class extends b {
     });
   }
   render() {
-    return v`
+    return m`
             <div class="container">
                 <slot name="before-icon"></slot>
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? w : v` <div class="delete-button-wrapper">${P(M)}</div> `}
+                ${this.disabled ? w : m` <div class="delete-button-wrapper">${L($)}</div> `}
             </div>
         `;
   }
   renderIcon() {
     if (this.icon || this.iconPlaceholder) {
       const e = this.iconBackgroundColor != null ? `--token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
-      return v`
-                <div class="icon-wrapper" style="${A(e)}" role="img">
+      return m`
+                <div class="icon-wrapper" style="${P(e)}" role="img">
                     <div class="icon"></div>
                 </div>
             `;
@@ -110,7 +110,7 @@ const p = (u = class extends b {
     return w;
   }
   updated(e) {
-    super.updated(e), (e.has("icon") || e.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && L.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
+    super.updated(e), (e.has("icon") || e.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && D.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
   }
   setClickHandler(e) {
     this._tokenClickHandler = e;
@@ -137,22 +137,22 @@ g([
   a({ type: String })
 ], p.prototype, "iconBackgroundColor", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-disabled" })
+  a({ converter: y, reflect: !0, attribute: "aria-disabled" })
 ], p.prototype, "disabled", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-current" })
+  a({ converter: y, reflect: !0, attribute: "aria-current" })
 ], p.prototype, "current", 2);
 g([
-  a({ converter: x, reflect: !0, attribute: "aria-checked" })
+  a({ converter: y, reflect: !0, attribute: "aria-checked" })
 ], p.prototype, "checked", 1);
-let k = p;
-const G = (o, e) => {
-  const t = document.createElement(k.ID);
-  return o && (t.value = o.caption, t.type = o.type, t.icon = o.icon, t.iconPlaceholder = o.iconPlaceholder, t.iconBackgroundColor = o.iconBackgroundColor, t.disabled = o.disabled, t.index = e), t;
+let b = p;
+const B = (r, e) => {
+  const t = document.createElement(b.ID);
+  return r && (t.value = r.caption, t.type = r.type, t.icon = r.icon, t.iconPlaceholder = r.iconPlaceholder, t.iconBackgroundColor = r.iconBackgroundColor, t.disabled = r.disabled, t.index = e), t;
 };
-k.ensureDefined();
-const m = "web application/json";
-class B {
+b.ensureDefined();
+const k = "web application/json";
+class F {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
       t() || this.writeToClipboard(e);
@@ -171,10 +171,10 @@ class B {
       s && i.push(s.index);
     }
     if (i.length > 0) {
-      const s = JSON.stringify(i.map((r) => e.items[r])), n = new Blob([s], { type: m });
+      const s = JSON.stringify(i.map((o) => e.items[o])), n = new Blob([s], { type: k });
       navigator.clipboard.write([
         new ClipboardItem({
-          [m]: n
+          [k]: n
         })
       ]);
     }
@@ -182,37 +182,40 @@ class B {
   async readFromClipboard(e) {
     const t = await navigator.clipboard.read();
     for (const i of t)
-      if (i.types.includes(m)) {
-        const n = await (await i.getType(m)).text(), r = JSON.parse(n);
-        Array.isArray(r) && e(r);
+      if (i.types.includes(k)) {
+        const n = await (await i.getType(k)).text(), o = JSON.parse(n);
+        Array.isArray(o) && e(o);
       }
   }
 }
-const F = ":host{display:flex;align-items:flex-end}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";
-class H {
+const H = ":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";
+class N {
   constructor(e, t) {
     this.tokenSelector = e;
-    let i = [];
-    const s = (n) => {
-      const r = n.target;
-      e.contains(r) || e.removeTokens(i), i = [];
+    const i = /* @__PURE__ */ new Map(), s = (n) => {
+      const o = n.target;
+      if (!e.contains(o)) {
+        const d = n.addedIndexes;
+        d && e.removeTokens(d.map((v) => i.get(v)));
+      }
+      i.clear();
     };
     e.addEventListener("dragstart", (n) => {
-      const r = n.target;
-      if (r instanceof k) {
-        if (r.disabled) {
+      const o = n.target;
+      if (o instanceof b) {
+        if (o.disabled) {
           n.preventDefault();
           return;
         }
-        r.setAttribute("aria-checked", "true");
-        const l = e.querySelectorAll("[slot='items'][aria-checked='true']");
-        if (l.length > 0) {
-          const y = Array.from(l).filter((f) => !f.disabled).map((f) => (i.push(f.index), e.items[f.index]));
-          if (n.dataTransfer.setData("text/plain", JSON.stringify(y)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", l.length > 1) {
-            const f = this.createCustomDragImage(r, y.length);
+        o.setAttribute("aria-checked", "true");
+        const d = e.querySelectorAll("[slot='items'][aria-checked='true']");
+        if (d.length > 0) {
+          const v = Array.from(d).filter((f) => !f.disabled).map((f, E) => (i.set(E, f.index), e.items[f.index]));
+          if (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", d.length > 1) {
+            const f = this.createCustomDragImage(o, v.length);
             n.dataTransfer.setDragImage(f, -14, -14);
           }
-          window.addEventListener("drop", s, { capture: !0, once: !0 });
+          window.addEventListener("drop", s, { once: !0 });
         }
       }
     }), e.addEventListener("dragenter", (n) => {
@@ -221,15 +224,15 @@ class H {
       n.target == e && e.removeAttribute("drop");
     }), e.addEventListener("drop", (n) => {
       e.removeAttribute("drop");
-      const r = n.dataTransfer.getData("text/plain");
-      if (r)
+      const o = n.dataTransfer.getData("text/sd-token-selector");
+      if (o)
         try {
-          const l = JSON.parse(r);
-          Array.isArray(l) && (t(l), n.preventDefault());
+          const d = JSON.parse(o);
+          Array.isArray(d) && (n.addedIndexes = t(d), n.preventDefault());
         } catch {
         }
     }), e.addEventListener("dragend", () => {
-      window.removeEventListener("drop", s), i = [];
+      window.removeEventListener("drop", s), i.clear();
     });
   }
   createCustomDragImage(e, t) {
@@ -258,21 +261,21 @@ class H {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, c = (o, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, t) : e, n = o.length - 1, r; n >= 0; n--)
-    (r = o[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
-  return i && s && N(e, t, s), s;
+var j = Object.defineProperty, K = Object.getOwnPropertyDescriptor, c = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? K(e, t) : e, n = r.length - 1, o; n >= 0; n--)
+    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && j(e, t, s), s;
 };
-function K(o, e) {
+function R(r, e) {
   let t;
   return function(...i) {
-    t != null && clearTimeout(t), t = window.setTimeout(() => o(...i), e);
+    t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
   };
 }
-var R = /* @__PURE__ */ ((o) => (o.RemoveOnly = "remove-only", o.Multi = "multi", o))(R || {}), h;
-const d = (h = class extends b {
+var V = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(V || {}), h;
+const l = (h = class extends x {
   constructor() {
-    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = G, this._autoSuggestItemGenerator = S, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
+    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = B, this._autoSuggestItemGenerator = _, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
       if ((e.key === "Enter" || this.additionalTokenCommittingKeys.includes(e.key)) && t.value) {
         e.preventDefault(), e.stopPropagation(), this.commitTokenValue(t.value);
         return;
@@ -328,10 +331,10 @@ const d = (h = class extends b {
         if (s instanceof HTMLElement && (e.composedPath().indexOf(t) > -1 || s.getAttribute("popover-for") === "token-autosuggest-popover"))
           return !0;
       }) || this.commitTokenValue(t.value);
-    }, this.debouncedShowTokenSuggestPopover = K(this.showFilteredTokenSuggestions.bind(this), 200);
+    }, this.debouncedShowTokenSuggestPopover = R(this.showFilteredTokenSuggestions.bind(this), 200);
   }
   static get styles() {
-    return T(F);
+    return T(H);
   }
   get tokenGenerator() {
     return this._tokenGenerator;
@@ -355,14 +358,14 @@ const d = (h = class extends b {
     this.inputElement ? this.inputElement.focus() : this.shadowRoot.querySelector(".container").focus();
   }
   render() {
-    return this.selectionMode == "remove-only" ? v`<div class="container" tabindex="0">
+    return this.selectionMode == "remove-only" ? m`<div class="container" tabindex="0">
                       <slot name="items"
-                          >${this.placeholder ? v`<span part="remove-only-placeholder" class="placeholder"
+                          >${this.placeholder ? m`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
                                 >` : w}</slot
                       >
                   </div>
-                  <slot class="additonal-content" name="additional-content"></slot>` : v`
+                  <slot class="additonal-content" name="additional-content"></slot>` : m`
                   <sd-lit-input
                       class="input"
                       .extendedPrefix=${!0}
@@ -385,21 +388,21 @@ const d = (h = class extends b {
       !this.contains(i) && !this.shadowRoot.contains(i) && this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
         (s) => s.checked = !1
       );
-    }), new B(
+    }), new F(
       this,
       () => {
         var t;
         return (t = this.inputElement) == null ? void 0 : t.value;
       },
       (t) => this.addMatchingItems(t)
-    ), new H(this, (t) => this.addMatchingItems(t));
+    ), new N(this, (t) => this.addMatchingItems(t));
   }
   addMatchingItems(e) {
-    const t = e.map((i) => {
-      const s = i.caption == null ? -1 : this.findIndex(i);
-      return s != -1 && !this.items[s].disabled && !this.selectedIndexes.includes(s) ? s : -1;
-    }).filter((i) => i != -1);
-    t.length > 0 && this.handleTokenSelection(t);
+    const t = [], i = e.map((s, n) => {
+      const o = s.caption == null ? -1 : this.findIndex(s);
+      return o != -1 && !this.items[o].disabled && !this.selectedIndexes.includes(o) ? (t.push(n), o) : -1;
+    }).filter((s) => s != -1);
+    return i.length > 0 && this.handleTokenSelection(i), t;
   }
   removeSelectionOrActiveToken() {
     if (!this.disabled) {
@@ -457,7 +460,7 @@ const d = (h = class extends b {
     return !this.selectedIndexes.includes(e);
   }
   get tokenSuggestPopover() {
-    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new D(
+    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new O(
       this.inputElement,
       () => this.items.filter((e, t) => !e.disabled && this.isTokenNotSelected(t)),
       (e) => {
@@ -486,7 +489,7 @@ const d = (h = class extends b {
       const n = this.tokenGenerator(s, this.findIndex(s));
       n.slot = "items", t.appendChild(n), n.id || (n.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)), n.setClickHandler(() => this.onTokenClick(n, !0)), n.addEventListener("click", () => {
         document.activeElement != this && this.focus();
-      }), n.setDeleteHandler((r) => this.removeTokens([r]));
+      }), n.setDeleteHandler((o) => this.removeTokens([o]));
     }), this.appendChild(t), this._tokenSuggestPopover && this._tokenSuggestPopover.refreshItems();
   }
   removeTokens(e) {
@@ -573,58 +576,58 @@ const d = (h = class extends b {
     return !!((e = this.inputElement) != null && e.value);
   }
 }, h.ID = "sd-token-selector", h.ensureDefined = () => {
-  k.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
+  b.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
 }, h.shadowRootOptions = {
-  ...b.shadowRootOptions,
+  ...x.shadowRootOptions,
   delegatesFocus: !0
 }, h);
 c([
   a({ type: String, attribute: "selection-mode", reflect: !0 })
-], d.prototype, "selectionMode", 2);
+], l.prototype, "selectionMode", 2);
 c([
   a({ type: Array, attribute: !1 })
-], d.prototype, "items", 2);
+], l.prototype, "items", 2);
 c([
   a({ type: Array, attribute: !1 })
-], d.prototype, "selectedIndexes", 2);
+], l.prototype, "selectedIndexes", 2);
 c([
   a({ type: String, reflect: !0 })
-], d.prototype, "placeholder", 2);
+], l.prototype, "placeholder", 2);
 c([
   a({ type: String, reflect: !0, attribute: "suggest-list-class" })
-], d.prototype, "suggestListClass", 2);
+], l.prototype, "suggestListClass", 2);
 c([
   a({ type: String, reflect: !0, attribute: "input-label" })
-], d.prototype, "inputLabel", 2);
+], l.prototype, "inputLabel", 2);
 c([
   a({
     converter: {
-      fromAttribute: (o) => o == "true",
-      toAttribute: (o) => o
+      fromAttribute: (r) => r == "true",
+      toAttribute: (r) => r
     },
     reflect: !0,
     attribute: "aria-disabled"
   })
-], d.prototype, "disabled", 2);
+], l.prototype, "disabled", 2);
 c([
   a({ type: String, attribute: !0 })
-], d.prototype, "validationMessage", 2);
+], l.prototype, "validationMessage", 2);
 c([
   a({ type: String, attribute: !0 })
-], d.prototype, "validationIconSrc", 2);
+], l.prototype, "validationIconSrc", 2);
 c([
-  a({ converter: E.levelConverter, attribute: !0, reflect: !0 })
-], d.prototype, "validationLevel", 2);
+  a({ converter: S.levelConverter, attribute: !0, reflect: !0 })
+], l.prototype, "validationLevel", 2);
 c([
   a({ type: String, reflect: !0, attribute: "token-type" })
-], d.prototype, "tokenType", 2);
+], l.prototype, "tokenType", 2);
 c([
   a({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
-], d.prototype, "caseSensitive", 2);
-let ie = d;
+], l.prototype, "caseSensitive", 2);
+let se = l;
 export {
-  R as SelectionMode,
-  ie as default,
-  G as generator
+  V as SelectionMode,
+  se as default,
+  B as generator
 };
 //# sourceMappingURL=token-selector.mjs.map