@umbraco-ui/uui-modal/custom-elements.json

Umbraco UI modal component

{
  "version": "experimental",
  "tags": [
    {
      "name": "modal-example",
      "path": "./lib/modal-example.element.ts",
      "properties": [
        {
          "name": "styles",
          "type": "CSSResult",
          "default": "\"css`\\n    .sidebar-buttons {\\n      margin-top: auto;\\n      display: flex;\\n      align-items: center;\\n      justify-content: end;\\n      padding: 16px;\\n      background: var(--uui-color-surface);\\n      box-shadow: var(--uui-shadow-depth-4);\\n    }\\n  `\""
        }
      ]
    },
    {
      "name": "uui-modal-dialog",
      "path": "./lib/uui-modal-dialog.element.ts",
      "attributes": [
        {
          "name": "is-open",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "is-closing",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "unique-index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "transition-duration",
          "type": "number"
        }
      ],
      "properties": [
        {
          "name": "isOpen",
          "attribute": "is-open",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "isClosing",
          "attribute": "is-closing",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "index",
          "attribute": "index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "uniqueIndex",
          "attribute": "unique-index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "transitionDuration",
          "attribute": "transition-duration",
          "type": "number"
        },
        {
          "name": "open",
          "type": "(event?: Event | undefined) => void",
          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent(UUIModalOpenEvent, {\\n      cancelable: true,\\n    });\\n    // TODO: get rid of legacy 'open'-event sometime in the future. [NL]\\n    const legacyOpenEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    this.dispatchEvent(legacyOpenEvent);\\n    if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
        },
        {
          "name": "close",
          "type": "(event?: Event | undefined) => void",
          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this.forceClose();\\n  }\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null,null]"
        }
      ],
      "events": [
        {
          "name": "uui:modal-open"
        },
        {
          "name": "open"
        },
        {
          "name": "uui:modal-close"
        },
        {
          "name": "close-end"
        },
        {
          "name": "uui:modal-close-end"
        }
      ]
    },
    {
      "name": "uui-modal-sidebar",
      "path": "./lib/uui-modal-sidebar.element.ts",
      "attributes": [
        {
          "name": "size",
          "type": "UUIModalSidebarSize",
          "default": "\"full\""
        },
        {
          "name": "is-open",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "is-closing",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "unique-index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "transition-duration",
          "type": "number"
        }
      ],
      "properties": [
        {
          "name": "size",
          "attribute": "size",
          "type": "UUIModalSidebarSize",
          "default": "\"full\""
        },
        {
          "name": "isOpen",
          "attribute": "is-open",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "isClosing",
          "attribute": "is-closing",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "index",
          "attribute": "index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "uniqueIndex",
          "attribute": "unique-index",
          "type": "number",
          "default": "0"
        },
        {
          "name": "transitionDuration",
          "attribute": "transition-duration",
          "type": "number"
        },
        {
          "name": "open",
          "type": "(event?: Event | undefined) => void",
          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent(UUIModalOpenEvent, {\\n      cancelable: true,\\n    });\\n    // TODO: get rid of legacy 'open'-event sometime in the future. [NL]\\n    const legacyOpenEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    this.dispatchEvent(legacyOpenEvent);\\n    if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
        },
        {
          "name": "close",
          "type": "(event?: Event | undefined) => void",
          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this.forceClose();\\n  }\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null,null]"
        }
      ],
      "events": [
        {
          "name": "uui:modal-open"
        },
        {
          "name": "open"
        },
        {
          "name": "uui:modal-close"
        },
        {
          "name": "close-end"
        },
        {
          "name": "uui:modal-close-end"
        }
      ]
    }
  ]
}