@lrnwebcomponents/simple-modal
Version:
A simple modal that ensures accessibility and stack order context appropriately
142 lines (141 loc) • 12.6 kB
JSON
{
"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 * `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; }>`} - "
}
]
},
{
"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 * `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": []
}