@pitcher/canvas-ui 2026.1.20-135322 → 2026.1.20-135703

package/canvas-ui.css

@@ -2667,7 +2667,7 @@ to {
   padding: 0;
 }
 
-.data-accessor-input[data-v-dce6a881] .n-input__prefix {
+.data-accessor-input[data-v-1ab19780] .n-input__prefix {
   margin-right: 0;
 }
 .cb-dynamic-data-table-settings {

package/canvas-ui.js

@@ -138007,19 +138007,37 @@ function useComponentPermissions({
       isAnyTypeOfAdmin: false
     }))
   );
-  const { canvasContent } = useCanvas$1();
+  const launchDarkly = inject(
+    "launchDarkly",
+    computed(() => ({}))
+  );
+  const { canvasContent, activeCanvas } = useCanvas$1();
   return computed(() => {
-    if (!usedInSectionId.value) return calculateCanvasPermissions(id.value, !!pitcherInfo.value?.isAnyTypeOfAdmin);
-    const parent = findParentByNodeId(canvasContent.value, id.value);
-    const canRemove = !!when_used_in_section.value?.is_removable;
-    const canEdit = !!when_used_in_section.value?.is_editable;
-    const canDuplicate = parent ? !!parent.when_used_in_section?.is_editable : false;
-    return {
-      hasSomethingEditable: canEdit || canRemove || canDuplicate,
-      canRemove,
-      canEdit,
-      canDuplicate
-    };
+    if (usedInSectionId.value) {
+      const parent = findParentByNodeId(canvasContent.value, id.value);
+      const canRemove = !!when_used_in_section.value?.is_removable;
+      const canEdit = !!when_used_in_section.value?.is_editable;
+      const canDuplicate = parent ? !!parent.when_used_in_section?.is_editable : false;
+      return {
+        hasSomethingEditable: canEdit || canRemove || canDuplicate,
+        canRemove,
+        canEdit,
+        canDuplicate
+      };
+    }
+    const hasExplicitPermissions = when_used_in_section.value !== null && when_used_in_section.value !== void 0 && (when_used_in_section.value.is_editable !== void 0 || when_used_in_section.value.is_removable !== void 0);
+    if (activeCanvas.value?.template?.id && launchDarkly.value.enable_template_component_permissions && hasExplicitPermissions) {
+      const canRemove = !!when_used_in_section.value?.is_removable;
+      const canEdit = !!when_used_in_section.value?.is_editable;
+      const canDuplicate = canEdit;
+      return {
+        hasSomethingEditable: canEdit || canRemove || canDuplicate,
+        canRemove,
+        canEdit,
+        canDuplicate
+      };
+    }
+    return calculateCanvasPermissions(id.value, !!pitcherInfo.value?.isAnyTypeOfAdmin);
   });
 }
 
@@ -156996,7 +157014,9 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
     visible: {},
     allow_admins_to_overwrite: { type: Boolean },
     style: {},
-    printModeIdx: {}
+    printModeIdx: {},
+    when_used_in_section: {},
+    usedInSectionId: { default: "" }
   },
   emits: ["style"],
   setup(__props, { emit: __emit }) {
@@ -157011,12 +157031,42 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
       computed(() => [])
     );
     const { isCompletionWizardEnabled, retriggerWizard } = useCanvasCompletionWizard();
-    const isEditable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id) : true
-    );
-    const isRemovable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" : true
-    );
+    const {
+      isImpact,
+      mode,
+      isEditMode,
+      componentSelectedMode,
+      isViewOnlyMode,
+      componentEditMode,
+      componentNodesById,
+      activeCanvas,
+      saveCanvasContentWithContext,
+      removeComponentById,
+      setComponentSelectedMode,
+      setComponentSettingsMode,
+      updateNodeDataById,
+      canvasContent
+    } = useCanvas$1();
+    const { id, usedInSectionId, when_used_in_section } = toRefs(props);
+    const componentPermissions = useComponentPermissions({
+      id,
+      usedInSectionId,
+      when_used_in_section
+    });
+    const isEditable = computed(() => {
+      if (!componentPermissions.value.canEdit) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id);
+      }
+      return true;
+    });
+    const isRemovable = computed(() => {
+      if (!componentPermissions.value.canRemove) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free";
+      }
+      return true;
+    });
     const sectionSelectorAppSrc = computed(() => {
       if (!sectionSelectorApps.value?.length || !props.data.selection_app_name) return null;
       const relatedApp = sectionSelectorApps.value.find((app) => app.app_metadata?.name === props.data.selection_app_name);
@@ -157083,7 +157133,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           async (selectedData) => {
             console.info(`[SectionList]: Received done callback for ${props.id} with data`, selectedData);
             if (!selectedData) return;
-            const sections = (selectedData?.section_ids || []).map((id) => ({ id: typeof id === "string" ? id : id.id }));
+            const sections = (selectedData?.section_ids || []).map((id2) => ({ id: typeof id2 === "string" ? id2 : id2.id }));
             const updatedData = { ...props.data, sections };
             updateNodeDataById(props.id, updatedData);
             const currentContext = cloneDeep(activeCanvas.value?.context || {});
@@ -157109,22 +157159,6 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
         sectionListRef.value?.toggleSectionSelector();
       }
     }
-    const {
-      isImpact,
-      mode,
-      isEditMode,
-      componentSelectedMode,
-      isViewOnlyMode,
-      componentEditMode,
-      componentNodesById,
-      activeCanvas,
-      saveCanvasContentWithContext,
-      removeComponentById,
-      setComponentSelectedMode,
-      setComponentSettingsMode,
-      updateNodeDataById,
-      canvasContent
-    } = useCanvas$1();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         unref(shouldDisplayPlaceholderComponent)(unref(isEditMode), unref(mode), _ctx.visible) ? (openBlock(), createBlock(PlaceholderComponent, {
@@ -157132,25 +157166,25 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           name: _ctx.tracking_id
         }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) ? (openBlock(), createBlock(_sfc_main$34, {
           key: 1,
-          id: _ctx.id,
-          active: unref(componentEditMode) && unref(componentEditMode)?.id === _ctx.id,
+          id: unref(id),
+          active: unref(componentEditMode) && unref(componentEditMode)?.id === unref(id),
           class: normalizeClass({ "mt-12": sectionListName.value }),
           edit: isEditable.value,
           "exclude-stylables": [unref(ThemeComponentOptionEnum).COLOR_PICKER],
           remove: isRemovable.value,
-          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === _ctx.id,
+          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === unref(id),
           settings: "",
           stylable: "",
           style: normalizeStyle(unref(omit$1)(_ctx.style, "paddingBottom", "paddingLeft", "paddingTop", "paddingRight")),
           onEdit: handleEdit,
-          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(_ctx.id)),
-          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(_ctx.id)),
-          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(_ctx.id)),
+          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(unref(id))),
+          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(unref(id))),
+          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(unref(id))),
           onStyle: _cache[3] || (_cache[3] = ($event) => emit("style", $event))
         }, {
           default: withCtx(() => [
             createVNode(RawSectionList, mergeProps({
-              id: _ctx.id,
+              id: unref(id),
               ref_key: "sectionListRef",
               ref: sectionListRef,
               class: "pa-2",
@@ -157168,7 +157202,7 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["id", "active", "class", "edit", "exclude-stylables", "remove", "selected", "style"])) : (openBlock(), createBlock(RawSectionList, mergeProps({
           key: 2,
-          id: _ctx.id,
+          id: unref(id),
           data: _ctx.data
         }, unref(attrs), {
           "has-section-selector-app": !!sectionSelectorAppSrc.value,
@@ -159696,7 +159730,8 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
     autofill: {},
     linkable: {},
     autofill_content_types: {},
-    when_used_in_section: {}
+    when_used_in_section: {},
+    usedInSectionId: { default: "" }
   },
   emits: ["style"],
   setup(__props, { emit: __emit }) {
@@ -159711,12 +159746,42 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
       computed(() => ({}))
     );
     const { isCompletionWizardEnabled, retriggerWizard } = useCanvasCompletionWizard();
-    const isEditable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id) : true
-    );
-    const isRemovable = computed(
-      () => isImpact.value ? !props.data.selection_strategy || props.data.selection_strategy === "free" : true
-    );
+    const {
+      isImpact,
+      mode,
+      isEditMode,
+      componentSelectedMode,
+      isViewOnlyMode,
+      componentEditMode,
+      componentNodesById,
+      activeCanvas,
+      saveCanvasContentWithContext,
+      removeComponentById,
+      setComponentSelectedMode,
+      setComponentSettingsMode,
+      updateNodeDataById,
+      canvasContent
+    } = useCanvas$1();
+    const { id, usedInSectionId, when_used_in_section } = toRefs(props);
+    const componentPermissions = useComponentPermissions({
+      id,
+      usedInSectionId,
+      when_used_in_section
+    });
+    const isEditable = computed(() => {
+      if (!componentPermissions.value.canEdit) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free" || isCompletionWizardEnabled.value && wizardStepSectionListIds.value.includes(props.id);
+      }
+      return true;
+    });
+    const isRemovable = computed(() => {
+      if (!componentPermissions.value.canRemove) return false;
+      if (isImpact.value) {
+        return !props.data.selection_strategy || props.data.selection_strategy === "free";
+      }
+      return true;
+    });
     const sectionSelectorAppSrc = computed(() => {
       if (!sectionSelectorApps.value?.length || !props.data.selection_app_name) return null;
       const relatedApp = sectionSelectorApps.value.find((app) => app.app_metadata?.name === props.data.selection_app_name);
@@ -159783,7 +159848,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           async (selectedData) => {
             console.info(`[SectionList]: Received done callback for ${props.id} with data`, selectedData);
             if (!selectedData) return;
-            const sections = (selectedData?.section_ids || []).map((id) => ({ id: typeof id === "string" ? id : id.id }));
+            const sections = (selectedData?.section_ids || []).map((id2) => ({ id: typeof id2 === "string" ? id2 : id2.id }));
             const updatedData = { ...props.data, sections };
             updateNodeDataById(props.id, updatedData);
             const currentContext = cloneDeep(activeCanvas.value?.context || {});
@@ -159809,22 +159874,6 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
         contentListRef.value?.toggleSectionSelector();
       }
     }
-    const {
-      isImpact,
-      mode,
-      isEditMode,
-      componentSelectedMode,
-      isViewOnlyMode,
-      componentEditMode,
-      componentNodesById,
-      activeCanvas,
-      saveCanvasContentWithContext,
-      removeComponentById,
-      setComponentSelectedMode,
-      setComponentSettingsMode,
-      updateNodeDataById,
-      canvasContent
-    } = useCanvas$1();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         unref(shouldDisplayPlaceholderComponent)(unref(isEditMode), unref(mode), _ctx.visible) ? (openBlock(), createBlock(PlaceholderComponent, {
@@ -159832,25 +159881,25 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           name: _ctx.tracking_id
         }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) ? (openBlock(), createBlock(_sfc_main$34, {
           key: 1,
-          id: _ctx.id,
-          active: unref(componentEditMode) && unref(componentEditMode)?.id === _ctx.id,
+          id: unref(id),
+          active: unref(componentEditMode) && unref(componentEditMode)?.id === unref(id),
           class: normalizeClass({ "mt-12": componentName.value }),
           edit: isEditable.value,
           "exclude-stylables": [unref(ThemeComponentOptionEnum).COLOR_PICKER],
           remove: isRemovable.value,
-          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === _ctx.id,
+          selected: unref(componentSelectedMode) && unref(componentSelectedMode)?.id === unref(id),
           settings: "",
           stylable: "",
           style: normalizeStyle(unref(omit$1)(_ctx.style, "paddingBottom", "paddingLeft", "paddingTop", "paddingRight")),
           onEdit: handleEdit,
-          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(_ctx.id)),
-          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(_ctx.id)),
-          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(_ctx.id)),
+          onRemove: _cache[0] || (_cache[0] = ($event) => unref(removeComponentById)(unref(id))),
+          onSelect: _cache[1] || (_cache[1] = ($event) => unref(setComponentSelectedMode)(unref(id))),
+          onSettings: _cache[2] || (_cache[2] = ($event) => unref(setComponentSettingsMode)(unref(id))),
           onStyle: _cache[3] || (_cache[3] = ($event) => emit("style", $event))
         }, {
           default: withCtx(() => [
             createVNode(ContentListRaw, mergeProps({
-              id: _ctx.id,
+              id: unref(id),
               ref_key: "contentListRef",
               ref: contentListRef,
               class: ["pa-2", props.class],
@@ -159868,7 +159917,7 @@ const _sfc_main$1H = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["id", "active", "class", "edit", "exclude-stylables", "remove", "selected", "style"])) : (openBlock(), createBlock(ContentListRaw, mergeProps({
           key: 2,
-          id: _ctx.id,
+          id: unref(id),
           data: _ctx.data
         }, unref(attrs), {
           "has-section-selector-app": !!sectionSelectorAppSrc.value,
@@ -162780,7 +162829,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     );
     const areSectionsSystemControlled = computed(() => launchDarkly.value?.are_sections_system_controlled);
     const allowEditOrRemove = computed(
-      () => (selectedComponentType.value === ComponentTypes.Text || selectedComponentType.value === ComponentTypes.Carousel || selectedComponentType.value === ComponentTypes.Multimedia) && isAdmin.value && isSection.value
+      () => isAdmin.value && ((selectedComponentType.value === ComponentTypes.Text || selectedComponentType.value === ComponentTypes.Carousel || selectedComponentType.value === ComponentTypes.Multimedia) && isSection.value || launchDarkly.value.enable_template_component_permissions && isCanvasTemplate.value)
     );
     const canSelectSectionListStrategy = computed(
       () => isAdmin.value && isCanvasTemplate.value && isSectionOrContentList.value
@@ -162842,7 +162891,8 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
       formValues.contentGridDataAccessor = value || "";
     }
     function getEditOrRemoveOption() {
-      const map = activeSettingsNode.value?.when_used_in_section ?? cloneDeep(defaultWhenUsedInSection);
+      const defaultPermissions = isCanvasTemplate.value && launchDarkly.value.enable_template_component_permissions ? { is_editable: true, is_removable: true } : cloneDeep(defaultWhenUsedInSection);
+      const map = activeSettingsNode.value?.when_used_in_section ?? defaultPermissions;
       let value = "";
       value += map.is_editable ? "1" : "0";
       value += map.is_removable ? "1" : "0";
@@ -163343,7 +163393,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ComponentDrawerSettings = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-dce6a881"]]);
+const ComponentDrawerSettings = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-1ab19780"]]);
 
 function useConnectUpload() {
   async function uploadToConnect(formData) {