@umbraco-cms/backoffice 14.0.0--preview007-2aa9121f → 14.0.0--preview007-bcd459cf

package/dist-cms/custom-elements.json

@@ -2876,6 +2876,104 @@
         }
       ]
     },
+    {
+      "name": "umb-split-panel",
+      "path": "./../src/packages/core/components/split-panel/split-panel.element.ts",
+      "description": "Custom element for a split panel with adjustable divider.",
+      "attributes": [
+        {
+          "name": "snap",
+          "description": "Snap points for the divider position.\nPixel or percent space-separated values: e.g., \"100px 50% -75% -200px\".\nNegative values are relative to the end of the container.",
+          "type": "string | undefined"
+        },
+        {
+          "name": "lock",
+          "description": "Locking mode for the split panel.\nPossible values: \"start\", \"end\", \"none\" (default).",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "position",
+          "description": "Initial position of the divider.\nPixel or percent value: e.g., \"100px\" or \"25%\".\nDefaults to a CSS variable if not set: \"var(--umb-split-panel-initial-position) which defaults to 50%\".",
+          "type": "string",
+          "default": "\"var(--umb-split-panel-initial-position)\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "mainElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "dividerTouchAreaElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "dividerElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "snap",
+          "attribute": "snap",
+          "description": "Snap points for the divider position.\nPixel or percent space-separated values: e.g., \"100px 50% -75% -200px\".\nNegative values are relative to the end of the container.",
+          "type": "string | undefined"
+        },
+        {
+          "name": "lock",
+          "attribute": "lock",
+          "description": "Locking mode for the split panel.\nPossible values: \"start\", \"end\", \"none\" (default).",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "Initial position of the divider.\nPixel or percent value: e.g., \"100px\" or \"25%\".\nDefaults to a CSS variable if not set: \"var(--umb-split-panel-initial-position) which defaults to 50%\".",
+          "type": "string",
+          "default": "\"var(--umb-split-panel-initial-position)\""
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "start",
+          "description": "Content for the start panel."
+        },
+        {
+          "name": "end",
+          "description": "Content for the end panel."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--umb-split-panel-initial-position",
+          "description": "Initial position of the divider."
+        },
+        {
+          "name": "--umb-split-panel-start-min-width",
+          "description": "Minimum width of the start panel."
+        },
+        {
+          "name": "--umb-split-panel-end-min-width",
+          "description": "Minimum width of the end panel."
+        },
+        {
+          "name": "--umb-split-panel-divider-touch-area-width",
+          "description": "Width of the divider touch area."
+        },
+        {
+          "name": "--umb-split-panel-divider-width",
+          "description": "Width of the divider."
+        },
+        {
+          "name": "--umb-split-panel-divider-color",
+          "description": "Color of the divider."
+        }
+      ]
+    },
     {
       "name": "umb-table",
       "path": "./../src/packages/core/components/table/table.element.ts",