@activecollab/components 2.0.408 → 2.0.409

package/dist/cjs/presentation/whiteboard/inspector.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sameColor = exports.elementTraits = exports.colorName = exports.TYPE_LABEL = exports.TRANSPARENT_OPTION = exports.StyledSegmented = exports.StyledPropRow = exports.StyledPropGroups = exports.StyledPropGroup = exports.StyledInspectorSidebar = exports.StyledInspectorResizer = exports.StyledInspectorHeader = exports.StyledInspectorEmpty = exports.StyledInspectorBody = exports.StyledFieldGrid = exports.StyledControl = exports.StyledCheckboxRow = exports.StyledBody = exports.StyledAutoField = exports.RightInspector = exports.OptionSelect = exports.NumberField = exports.ColorPickerField = exports.AutoField = void 0;
+exports.sameColor = exports.elementTraits = exports.colorName = exports.TYPE_LABEL = exports.TRANSPARENT_OPTION = exports.StyledSegmented = exports.StyledPropRow = exports.StyledPropGroups = exports.StyledPropGroup = exports.StyledInspectorSidebar = exports.StyledInspectorResizer = exports.StyledInspectorHeader = exports.StyledInspectorEmpty = exports.StyledInspectorBody = exports.StyledFieldGrid = exports.StyledControl = exports.StyledCheckboxRow = exports.StyledBody = exports.StyledAutoField = exports.RightInspector = exports.ReadOnlyField = exports.PROJECT_ELEMENT_TRAITS = exports.OptionSelect = exports.NumberField = exports.LIMITED_ELEMENT_TRAITS = exports.ColorPickerField = exports.AutoField = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _elements = require("./elements");
 var _fileElement = require("./fileElement");
 var _outline = require("./outline");
+var _projectElements = require("./projectElements");
 var _Checkbox = require("../../components/Checkbox");
 var _ChooseV = require("../../components/ChooseV2");
 var _Dot = require("../../components/Dot");
@@ -23,17 +24,17 @@ var _Tooltip = require("../../components/Tooltip");
 var _Typography = require("../../components/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* ------------------------------------------------------------------ */
 /* Right Inspector — selected-element properties panel                 */
 /* ------------------------------------------------------------------ */
@@ -65,6 +66,42 @@ var elementTraits = exports.elementTraits = function elementTraits(def) {
     text: true
   };
 };
+
+/**
+ * A project / task card's traits. It is the most constrained element on the
+ * board, and every "false" here is a fact about the card rather than a feature
+ * that has not been built yet:
+ *
+ *   fill / stroke / text   the card's appearance is the design system's, not
+ *                          the board's — recolouring it would make a task look
+ *                          like something it is not on another person's screen.
+ *   autoHeight             the card is content-sized; only its width is given.
+ *   renamable              the title belongs to the task / project record.
+ *
+ * Rotation is absent for the same reason it is absent on link and file cards:
+ * the Geometry group for a card simply does not render one.
+ */
+var PROJECT_ELEMENT_TRAITS = exports.PROJECT_ELEMENT_TRAITS = {
+  geometry: true,
+  fill: false,
+  stroke: false,
+  text: false,
+  autoHeight: true,
+  renamable: false
+};
+
+/**
+ * A LIMITED-ACCESS card's traits: the project card's, with everything the
+ * viewer could have changed taken away.
+ *
+ * The panel is not empty, and that is deliberate — geometry still renders, so
+ * the viewer can see that the thing has a position and a size, which is
+ * precisely the amount that Workload's limited cell exposes (its data shape is
+ * a quantity and an offset). It simply cannot be edited.
+ */
+var LIMITED_ELEMENT_TRAITS = exports.LIMITED_ELEMENT_TRAITS = _objectSpread(_objectSpread({}, PROJECT_ELEMENT_TRAITS), {}, {
+  readOnly: true
+});
 var TYPE_LABEL = exports.TYPE_LABEL = {
   rectangle: "Rectangle",
   roundedRectangle: "Rounded Rectangle",
@@ -104,7 +141,7 @@ var StyledPropGroups = exports.StyledPropGroups = _styledComponents.default.div.
 var StyledInspectorHeader = exports.StyledInspectorHeader = _styledComponents.default.div.withConfig({
   displayName: "inspector__StyledInspectorHeader",
   componentId: "sc-do334k-4"
-})(["display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;box-sizing:border-box;flex-shrink:0;.inspector-type-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--color-theme-700);}.inspector-type-icon svg{width:20px;height:20px;}.inspector-name{flex:1;min-width:0;}"]);
+})(["display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;box-sizing:border-box;flex-shrink:0;.inspector-type-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--color-theme-700);}.inspector-type-icon svg{width:20px;height:20px;}.inspector-name{flex:1;min-width:0;}.inspector-name-static{padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]);
 
 /* Empty state — same muted treatment the outline uses for unnamed rows. */
 var StyledInspectorEmpty = exports.StyledInspectorEmpty = _styledComponents.default.div.withConfig({
@@ -193,11 +230,24 @@ var AutoField = exports.AutoField = function AutoField(_ref2) {
     weight: "regular"
   }, label), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, "Auto"));
 };
-var OptionSelect = exports.OptionSelect = function OptionSelect(_ref3) {
-  var options = _ref3.options,
-    value = _ref3.value,
-    triggerLabel = _ref3.triggerLabel,
-    _onChange = _ref3.onChange;
+
+/* A geometry value the viewer may READ but not change — the same field
+   `AutoField` and the file card's Size already use, with a real value in it.
+   Showing the number greyed out is the point: a limited card still has a
+   position and a size, and those are the only facts about it there are. */
+var ReadOnlyField = exports.ReadOnlyField = function ReadOnlyField(_ref3) {
+  var label = _ref3.label,
+    value = _ref3.value;
+  return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, value));
+};
+var OptionSelect = exports.OptionSelect = function OptionSelect(_ref4) {
+  var options = _ref4.options,
+    value = _ref4.value,
+    triggerLabel = _ref4.triggerLabel,
+    _onChange = _ref4.onChange;
   return /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Select.Select, {
     type: "single",
     disableSearch: true,
@@ -232,11 +282,11 @@ var colorName = exports.colorName = function colorName(hex) {
 /* The regular design-system named-colour picker (the one in the label dialogs):
    a Select whose trigger is a Dot + colour name, and whose menu is the standard
    dot-and-radio list. Custom colours are deferred. */
-var ColorPickerField = exports.ColorPickerField = function ColorPickerField(_ref4) {
-  var value = _ref4.value,
-    disabled = _ref4.disabled,
-    includeTransparent = _ref4.includeTransparent,
-    onSelect = _ref4.onSelect;
+var ColorPickerField = exports.ColorPickerField = function ColorPickerField(_ref5) {
+  var value = _ref5.value,
+    disabled = _ref5.disabled,
+    includeTransparent = _ref5.includeTransparent,
+    onSelect = _ref5.onSelect;
   var options = includeTransparent ? [TRANSPARENT_OPTION, ..._elements.COLOR_OPTIONS] : _elements.COLOR_OPTIONS;
   var isTransparent = !value || sameColor(value, "transparent");
   return /*#__PURE__*/_react.default.createElement(StyledControl, {
@@ -265,26 +315,28 @@ var ColorPickerField = exports.ColorPickerField = function ColorPickerField(_ref
     }), colorName(value)))
   }));
 };
-var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
+var RightInspector = exports.RightInspector = function RightInspector(_ref6) {
   var _sizes$def$id, _positions$def$id, _rotations$def$id, _names$def$id, _shape$align, _BORDER_STYLE_OPTIONS, _BORDER_STYLE_OPTIONS2;
-  var selectedId = _ref5.selectedId,
-    positions = _ref5.positions,
-    setPositions = _ref5.setPositions,
-    sizes = _ref5.sizes,
-    setSizes = _ref5.setSizes,
-    rotations = _ref5.rotations,
-    setRotations = _ref5.setRotations,
-    shapes = _ref5.shapes,
-    setShapes = _ref5.setShapes,
-    stickyStyle = _ref5.stickyStyle,
-    setStickyStyle = _ref5.setStickyStyle,
-    links = _ref5.links,
-    setLinks = _ref5.setLinks,
-    files = _ref5.files,
-    setFiles = _ref5.setFiles,
-    createdShapes = _ref5.createdShapes,
-    locks = _ref5.locks,
-    setLocks = _ref5.setLocks;
+  var selectedId = _ref6.selectedId,
+    positions = _ref6.positions,
+    setPositions = _ref6.setPositions,
+    sizes = _ref6.sizes,
+    setSizes = _ref6.setSizes,
+    rotations = _ref6.rotations,
+    setRotations = _ref6.setRotations,
+    shapes = _ref6.shapes,
+    setShapes = _ref6.setShapes,
+    stickyStyle = _ref6.stickyStyle,
+    setStickyStyle = _ref6.setStickyStyle,
+    links = _ref6.links,
+    setLinks = _ref6.setLinks,
+    files = _ref6.files,
+    setFiles = _ref6.setFiles,
+    createdShapes = _ref6.createdShapes,
+    projectElements = _ref6.projectElements,
+    setProjectElements = _ref6.setProjectElements,
+    locks = _ref6.locks,
+    setLocks = _ref6.setLocks;
   var _useState = (0, _react.useState)(_outline.OUTLINE_WIDTH),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -340,6 +392,9 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
   var fileDef = selectedId ? files.find(function (file) {
     return file.id === selectedId;
   }) : undefined;
+  var projectDef = selectedId ? projectElements.find(function (entry) {
+    return entry.id === selectedId;
+  }) : undefined;
   var shell = function shell(content) {
     return /*#__PURE__*/_react.default.createElement(StyledInspectorSidebar, {
       style: {
@@ -375,11 +430,17 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
 
   /* The Locked checkbox — shown for every element kind, toggling a design lock
      flag keyed by element id. */
+  /* `forced` is the limited-access case: the element is locked FOR THIS VIEWER
+     and the checkbox is the honest place to say so — ticked, and disabled so it
+     reads as a statement about the element rather than a switch that was left
+     on. */
   var renderLocked = function renderLocked(id) {
     var _locks$id;
+    var forced = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/_react.default.createElement(StyledCheckboxRow, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
       id: "wb-lock-".concat(id),
-      checked: (_locks$id = locks[id]) !== null && _locks$id !== void 0 ? _locks$id : false,
+      checked: forced || ((_locks$id = locks[id]) !== null && _locks$id !== void 0 ? _locks$id : false),
+      disabled: forced,
       onChange: function onChange() {
         return setLocks(function (current) {
           var _current$id;
@@ -395,11 +456,15 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
     }, "Locked"));
   };
 
-  /* Geometry for a card (link / file): X/Y from the shared positions map, an
-     editable width and an auto height (cards are content-sized). Cards cannot
-     be rotated, so there is no Rotation field. */
+  /* Geometry for a card (link / file / project / task): X/Y from the shared
+     positions map, an editable width and an auto height (cards are
+     content-sized). Cards cannot be rotated, so there is no Rotation field.
+     `readOnly` keeps the same three values in the same three places and swaps
+     the inputs for read-only fields — a limited card's geometry is information,
+     not a control. */
   var renderCardGeometry = function renderCardGeometry(id, cardWidth, onWidth) {
     var _positions$id;
+    var readOnly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var cardPosition = (_positions$id = positions[id]) !== null && _positions$id !== void 0 ? _positions$id : {
       x: 0,
       y: 0
@@ -407,7 +472,10 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
     return /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
       weight: "bold",
       className: "group-title"
-    }, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+    }, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
+      label: "X",
+      value: "".concat(cardPosition.x, " px")
+    }) : /*#__PURE__*/_react.default.createElement(NumberField, {
       label: "X",
       unit: "px",
       value: cardPosition.x,
@@ -424,7 +492,10 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
           });
         });
       }
-    }), /*#__PURE__*/_react.default.createElement(NumberField, {
+    }), readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
+      label: "Y",
+      value: "".concat(cardPosition.y, " px")
+    }) : /*#__PURE__*/_react.default.createElement(NumberField, {
       label: "Y",
       unit: "px",
       value: cardPosition.y,
@@ -441,7 +512,10 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
           });
         });
       }
-    })), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+    })), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
+      label: "Width",
+      value: "".concat(cardWidth, " px")
+    }) : /*#__PURE__*/_react.default.createElement(NumberField, {
       label: "Width",
       unit: "px",
       value: cardWidth,
@@ -453,13 +527,15 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
   };
 
   /* Header + panel switch + body, shared by every element kind — only the
-     groups inside differ. */
+     groups inside differ. `renamable` false swaps the live EditableText for
+     read-only text, for elements whose name is not the board's to change. */
   var renderInspectorBody = function renderInspectorBody(icon, headerName, id, groups) {
+    var renamable = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
     return /*#__PURE__*/_react.default.createElement(StyledInspectorBody, null, /*#__PURE__*/_react.default.createElement(StyledInspectorHeader, null, /*#__PURE__*/_react.default.createElement("span", {
       className: "inspector-type-icon"
     }, icon), /*#__PURE__*/_react.default.createElement("span", {
       className: "inspector-name"
-    }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+    }, renamable ? /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
       value: headerName,
       variant: "Header 3",
       weight: "bold",
@@ -473,7 +549,10 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
       inputProps: {
         maxLength: 120
       }
-    }))), /*#__PURE__*/_react.default.createElement(_outline.StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(_outline.StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
+    }) : /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
+      className: "inspector-name-static",
+      title: headerName
+    }, headerName))), /*#__PURE__*/_react.default.createElement(_outline.StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(_outline.StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
       required: true,
       options: [{
         id: "properties",
@@ -490,10 +569,33 @@ var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
   };
 
   /* Nothing selected. */
-  if (!def && !linkDef && !fileDef) {
+  if (!def && !linkDef && !fileDef && !projectDef) {
     return shell(/*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Select an element to see its properties.")));
   }
 
+  /* Project / task card — the most constrained element here. Its look is not
+     the board's to change (no Fill, Stroke or Text), and its title belongs to
+     the record it shows, so the header is read-only. What is left is what the
+     board really does own: where the card sits, how wide it is, and whether it
+     is locked. */
+  if (projectDef) {
+    var limited = projectDef.limited === true;
+    var cardTraits = limited ? LIMITED_ELEMENT_TRAITS : PROJECT_ELEMENT_TRAITS;
+    return shell(renderInspectorBody(
+    /* A limited card gets a NEUTRAL icon. The task and project glyphs would
+       each say which kind of record is behind the card, and the kind is
+       part of what the viewer is not entitled to. */
+    limited ? /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, null) : projectDef.kind === "project" ? /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null) : /*#__PURE__*/_react.default.createElement(_Icons.TaskIcon, null), (0, _projectElements.projectElementTitle)(projectDef), projectDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderLocked(projectDef.id, cardTraits.readOnly)), cardTraits.geometry ? renderCardGeometry(projectDef.id, projectDef.width, function (width) {
+      return setProjectElements(function (current) {
+        return current.map(function (entry) {
+          return entry.id === projectDef.id ? _objectSpread(_objectSpread({}, entry), {}, {
+            width
+          }) : entry;
+        });
+      });
+    }, cardTraits.readOnly) : null), cardTraits.renamable));
+  }
+
   /* Link card — its URL plus the shared Locked flag. */
   if (linkDef) {
     var _names$linkDef$id, _linkDef$url;