@lrnwebcomponents/simple-modal/custom-elements.json

A simple modal that ensures accessibility and stack order context appropriately

{
  "version": 1,
  "tags": [
    {
      "name": "simple-modal-template",
      "description": "`simple-modal-template`\n`A simple modal that ensures accessibility and stack order context appropriately`\n\nEvents:\n\n  * `simple-modal-show` {`CustomEvent<{ id: string | null; elements: { header: any; content: any; buttons: any; custom: any; }; resize: any; invokedBy: any; modalClass: string | null; styles: {}; clone: boolean; mode: any; title: string | boolean; }>`} - \n\nAttributes:\n\n  * `mode` {`string`} - the modal title\n\n  * `title` {`string`} - the modal title\n\n  * `modal` - the simple-modal\n\nProperties:\n\n  * `mode` {`string`} - the modal title\n\n  * `title` {`string`} - the modal title\n\n  * `modal` - the simple-modal",
      "attributes": [
        {
          "name": "mode",
          "description": "`mode` {`string`} - the modal title\n\nProperty: mode"
        },
        {
          "name": "title",
          "description": "`title` {`string`} - the modal title\n\nProperty: title\n\nDefault: "
        },
        {
          "name": "modal",
          "description": "`modal` - the simple-modal\n\nProperty: modal"
        },
        {
          "name": "onsimple-modal-show",
          "description": "`simple-modal-show` {`CustomEvent<{ id: string | null; elements: { header: any; content: any; buttons: any; custom: any; }; resize: any; invokedBy: any; modalClass: string | null; styles: {}; clone: boolean; mode: any; title: string | boolean; }>`} - "
        }
      ]
    },
    {
      "name": "simple-modal",
      "description": "`simple-modal`\n`A simple modal that ensures accessibility and stack order context appropriately`\n\n### Styling\n`<simple-fields>` provides following custom properties\nfor styling:\n\nCustom property | Description | Default\n----------------|-------------|--------\n--simple-modal-resize | whether modal can be resized by user (see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/resize}) | unset\n--simple-modal-titlebar-color | height for modal's titlebar | #444\n--simple-modal-titlebar-background | background color for modal's titlebar | #ddd\n--simple-modal-titlebar-padding | padding for modal's titlebar | 0px 16px\n--simple-modal-titlebar-height | height for modal's titlebar | unset\n--simple-modal-titlebar-line-height | text's line height for modal's titlebar | unset\n--simple-modal-header-color | text color for modal's header | #222\n--simple-modal-header-background | background color for modal's header | #ccc\n--simple-modal-header-padding | padding for modal's header | 0px 16px\n--simple-modal-content-container-color | text color for modal's content | #222;\n--simple-modal-content-container-background | text color for modal's content | #fff \n--simple-modal-content-padding | text color for modal's content | 8px 16px\n--simple-modal-buttons-color | text color for modal's buttons | unset\n--simple-modal-buttons-background | background color for modal's buttons | unset\n--simple-modal-buttons-padding | padding for modal's buttons | 0\n--simple-modal-button-color | text color for modal's buttons | var(--simple-modal-buttons-color)\n--simple-modal-button-background | background color for modal's buttons | var(--simple-modal-buttons-background-color)\n--simple-modal-z-index | z-index for modal | 1000\n--simple-modal-width | width of modal | 75vw\n--simple-modal-height | height of modal | auto;\n--simple-modal-min-width | min-width of modal | unset\n--simple-modal-min-height | min-height of modal | unset\n--simple-modal-max-width | max-width of modal | unset\n--simple-modal-max-height | max-height of modal | unset\n\nEvents:\n\n  * `simple-toast-hide` {`CustomEvent<boolean>`} - \n\n  * `simple-modal-closed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - \n\n  * `simple-modal-dismissed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - \n\n  * `simple-modal-confirmed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - \n\n  * `simple-modal-opened` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - \n\nAttributes:\n\n  * `invokedBy` - The element that invoked this. This way we can track our way back accessibly\n\n  * `mode` {`string`} - can add a custom string to style modal based on what is calling it\n\n  * `title` {`string`} - heading / label of the modal\n\n  * `opened` {`boolean`} - open state\n\n  * `close-label` {`string`} - Close label\n\n  * `close-icon` {`string`} - Close icon\n\n  * `modal` {`boolean`} - support for modal flag\n\nProperties:\n\n  * `invokedBy` - The element that invoked this. This way we can track our way back accessibly\n\n  * `mode` {`string`} - can add a custom string to style modal based on what is calling it\n\n  * `windowControllers` - \n\n  * `title` {`string`} - heading / label of the modal\n\n  * `opened` {`boolean`} - open state\n\n  * `closeLabel` {`string`} - Close label\n\n  * `closeIcon` {`string`} - Close icon\n\n  * `modal` {`boolean`} - support for modal flag",
      "attributes": [
        {
          "name": "invokedBy",
          "description": "`invokedBy` - The element that invoked this. This way we can track our way back accessibly\n\nProperty: invokedBy"
        },
        {
          "name": "mode",
          "description": "`mode` {`string`} - can add a custom string to style modal based on what is calling it\n\nProperty: mode"
        },
        {
          "name": "title",
          "description": "`title` {`string`} - heading / label of the modal\n\nProperty: title\n\nDefault: "
        },
        {
          "name": "opened",
          "description": "`opened` {`boolean`} - open state\n\nProperty: opened\n\nDefault: false",
          "valueSet": "v"
        },
        {
          "name": "close-label",
          "description": "`close-label` {`string`} - Close label\n\nProperty: closeLabel\n\nDefault: Close"
        },
        {
          "name": "close-icon",
          "description": "`close-icon` {`string`} - Close icon\n\nProperty: closeIcon\n\nDefault: close"
        },
        {
          "name": "modal",
          "description": "`modal` {`boolean`} - support for modal flag\n\nProperty: modal\n\nDefault: false",
          "valueSet": "v"
        },
        {
          "name": "onsimple-toast-hide",
          "description": "`simple-toast-hide` {`CustomEvent<boolean>`} - "
        },
        {
          "name": "onsimple-modal-closed",
          "description": "`simple-modal-closed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - "
        },
        {
          "name": "onsimple-modal-dismissed",
          "description": "`simple-modal-dismissed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - "
        },
        {
          "name": "onsimple-modal-confirmed",
          "description": "`simple-modal-confirmed` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - "
        },
        {
          "name": "onsimple-modal-opened",
          "description": "`simple-modal-opened` {`CustomEvent<{ opened: boolean; invokedBy: any; }>`} - "
        }
      ]
    }
  ],
  "globalAttributes": [],
  "valueSets": []
}