@internetarchive/modal-manager 0.2.8 → 0.2.9-alpha.2

package/README.md

@@ -1,139 +1,139 @@
-![Build Status](https://github.com/internetarchive/iaux-modal-manager/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-modal-manager/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-modal-manager)
-
-# Modal Manager Component
-
-A modal manager built on LitElement with support for custom content and light DOM elements.
-
-![Modal Manager](./assets/modal-screenshot.jpg "Modal Manager Demo")
-
-## Installation
-```bash
-npm install --save @internetarchive/modal-manager
-```
-
-## Usage
-```html
-<!-- index.html -->
-<script type="module">
-  import '@internetarchive/modal-manager';
-  import { ModalConfig } from '@internetarchive/modal-manager';
-</script>
-
-<style>
-  /* add the following styles to ensure proper modal visibility */
-  body.modal-manager-open {
-    overflow: hidden;
-  }
-
-  modal-manager {
-    display: none;
-  }
-
-  modal-manager[mode='open'] {
-    display: block;
-  }
-</style>
-
-<modal-manager></modal-manager>
-
-<script>
-  // show a simple modal
-  const manager = document.querySelector('modal-manager');
-  const config = new ModalConfig();
-  config.headline = 'Hi, Everybody!';
-  config.message = 'Hi, Doctor Nick!';
-  manager.showModal(config)
-
-  // to hide the modal call `closeModal()`:
-  manager.closeModal();
-</script>
-```
-
-## Advanced Usage
-
-### Markup Content
-
-You can pass in custom HTML into the `ModalConfig`:
-
-```html
-<script type="module">
-  import { html } from 'lit-html';
-</script>
-
-<modal-manager></modal-manager>
-
-<script>
-  const manager = document.querySelector('modal-manager');
-  const config = new ModalConfig();
-  config.title = 'Internet Archive';
-  config.subtitle = '';
-  config.headline = 'Thanks for your Support!';
-  config.message = html`
-    <p>Thanks for your donation!</p>
-    <p>Please click <a href="">here</a> to complete!</p>
-  `;
-  config.headerColor = '#36A483';
-  manager.showModal(config);
-</script>
-```
-
-### Custom Content
-
-Display completely custom content in the modal body, including light DOM content like a PayPal button.
-
-```html
-<modal-manager></modal-manager>
-
-<script>
-  const manager = document.querySelector('modal-manager');
-  const config = new ModalConfig();
-  const customContent = html`
-    Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
-    <div style="text-align: center">
-      <div class="sr-only">Visible for screen-readers only</div>
-      <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
-      <img src="100x100.jpg" @click=${showBillAlert} />
-    </div>
-  `;
-
-  // customContent used to render as slotted content, it can also use .sr-only class
-  modalManager.showModal(config, customContent);
-</script>
-```
-
-### Config Options
-
-All of the config options:
-
-```javascript
-const config = new ModalConfig();
-config.title = 'Internet Archive';
-config.subtitle = '';
-config.headline = '<div class="sr-only">Visible for screen-readers only</div>Thanks for your Support!';
-config.message = 'Thank you for supporting the Internet Archive!';
-config.headerColor = '#36A483';
-config.showProcessingIndicator = false;
-config.processingImageMode = 'processing'; // or `complete`
-```
-
-# Development
-
-## Prerequisite
-```bash
-npm install
-```
-
-## Start Development Server
-```bash
-npm start
-```
-
-## Testing
-```bash
-npm test
-```
-
-## Linting
-```bash
-npm lint
-```
+![Build Status](https://github.com/internetarchive/iaux-modal-manager/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-modal-manager/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-modal-manager)
+
+# Modal Manager Component
+
+A modal manager built on LitElement with support for custom content and light DOM elements.
+
+![Modal Manager](./assets/modal-screenshot.jpg "Modal Manager Demo")
+
+## Installation
+```bash
+npm install --save @internetarchive/modal-manager
+```
+
+## Usage
+```html
+<!-- index.html -->
+<script type="module">
+  import '@internetarchive/modal-manager';
+  import { ModalConfig } from '@internetarchive/modal-manager';
+</script>
+
+<style>
+  /* add the following styles to ensure proper modal visibility */
+  body.modal-manager-open {
+    overflow: hidden;
+  }
+
+  modal-manager {
+    display: none;
+  }
+
+  modal-manager[mode='open'] {
+    display: block;
+  }
+</style>
+
+<modal-manager></modal-manager>
+
+<script>
+  // show a simple modal
+  const manager = document.querySelector('modal-manager');
+  const config = new ModalConfig();
+  config.headline = 'Hi, Everybody!';
+  config.message = 'Hi, Doctor Nick!';
+  manager.showModal(config)
+
+  // to hide the modal call `closeModal()`:
+  manager.closeModal();
+</script>
+```
+
+## Advanced Usage
+
+### Markup Content
+
+You can pass in custom HTML into the `ModalConfig`:
+
+```html
+<script type="module">
+  import { html } from 'lit-html';
+</script>
+
+<modal-manager></modal-manager>
+
+<script>
+  const manager = document.querySelector('modal-manager');
+  const config = new ModalConfig();
+  config.title = 'Internet Archive';
+  config.subtitle = '';
+  config.headline = 'Thanks for your Support!';
+  config.message = html`
+    <p>Thanks for your donation!</p>
+    <p>Please click <a href="">here</a> to complete!</p>
+  `;
+  config.headerColor = '#36A483';
+  manager.showModal(config);
+</script>
+```
+
+### Custom Content
+
+Display completely custom content in the modal body, including light DOM content like a PayPal button.
+
+```html
+<modal-manager></modal-manager>
+
+<script>
+  const manager = document.querySelector('modal-manager');
+  const config = new ModalConfig();
+  const customContent = html`
+    Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
+    <div style="text-align: center">
+      <div class="sr-only">Visible for screen-readers only</div>
+      <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
+      <img src="100x100.jpg" @click=${showBillAlert} />
+    </div>
+  `;
+
+  // customContent used to render as slotted content, it can also use .sr-only class
+  modalManager.showModal(config, customContent);
+</script>
+```
+
+### Config Options
+
+All of the config options:
+
+```javascript
+const config = new ModalConfig();
+config.title = 'Internet Archive';
+config.subtitle = '';
+config.headline = '<div class="sr-only">Visible for screen-readers only</div>Thanks for your Support!';
+config.message = 'Thank you for supporting the Internet Archive!';
+config.headerColor = '#36A483';
+config.showProcessingIndicator = false;
+config.processingImageMode = 'processing'; // or `complete`
+```
+
+# Development
+
+## Prerequisite
+```bash
+npm install
+```
+
+## Start Development Server
+```bash
+npm start
+```
+
+## Testing
+```bash
+npm test
+```
+
+## Linting
+```bash
+npm lint
+```

package/custom-elements.json

@@ -1,170 +1,170 @@
-{
-  "version": 2,
-  "tags": [
-    {
-      "name": "modal-manager",
-      "description": "A LitElement modal manager",
-      "properties": [
-        {
-          "name": "mode",
-          "type": "ModalManagerMode",
-          "description": "The current mode of the modal manager (open/closed)",
-          "default": "ModalManagerMode.Closed"
-        },
-        {
-          "name": "customModalContent",
-          "type": "TemplateResult",
-          "description": "Custom content to be displayed in the modal content slot",
-          "default": "undefined"
-        },
-        {
-          "name": "hostBridge",
-          "type": "ModalManagerHostBridgeInterface",
-          "description": "A handler for host-specific functionality like CSS modifications",
-          "default": "default ModalManagerHostBridge"
-        }
-      ],
-      "events": [
-        {
-          "name": "modeChanged",
-          "description": "Dispatched when the modal opens or closes"
-        }
-      ],
-      "slots": [],
-      "cssProperties": [
-        {
-          "name": "--modalBackdropColor",
-          "description": "Backdrop color",
-          "type": "String",
-          "default": "rgba(10, 10, 10, 0.9)"
-        },
-        {
-          "name": "--modalBackdropZindex",
-          "description": "Backdrop z-index",
-          "type": "Number",
-          "default": "1000"
-        },
-        {
-          "name": "--modalWidth",
-          "description": "Modal width",
-          "type": "String",
-          "default": "32rem"
-        },
-        {
-          "name": "--modalMaxWidth",
-          "description": "Modal maximum width",
-          "type": "String",
-          "default": "95%"
-        },
-        {
-          "name": "--modalZindex",
-          "description": "Modal z-index",
-          "type": "Number",
-          "default": "2000"
-        },
-        {
-          "name": "--modalLogoSize",
-          "description": "The modal logo size",
-          "type": "String",
-          "default": "6.5rem"
-        },
-        {
-          "name": "--processingImageSize",
-          "description": "The processing image size",
-          "type": "String",
-          "default": "7.5rem"
-        },
-        {
-          "name": "--modalCornerRadius",
-          "description": "Modal corner radius",
-          "type": "String",
-          "default": "2.5rem"
-        },
-        {
-          "name": "--modalBorder",
-          "description": "The modal border",
-          "type": "String",
-          "default": "2px solid black"
-        },
-        {
-          "name": "--modalBottomMargin",
-          "description": "The space between the bottom of the screen and the bottom of the modal",
-          "type": "String",
-          "default": "2.5rem"
-        },
-        {
-          "name": "--modalTopMargin",
-          "description": "The space between the top of the screen and the top of the modal",
-          "type": "String",
-          "default": "2.5rem"
-        },
-        {
-          "name": "--modalHeaderBottomPadding",
-          "description": "The padding on the bottom of the modal header",
-          "type": "String",
-          "default": "0.5rem"
-        },
-        {
-          "name": "--modalBottomPadding",
-          "description": "The padding on the bottom of the modal",
-          "type": "String",
-          "default": "20px"
-        },
-        {
-          "name": "--modalScrollOffset",
-          "description": "Adds a bit of extra padding to the scrollable area so the scrollbar doesn't always show",
-          "type": "String",
-          "default": "5px"
-        },
-        {
-          "name": "--modalTitleFontSize",
-          "description": "Modal title font size",
-          "type": "String",
-          "default": "1.8rem"
-        },
-        {
-          "name": "--modalSubtitleFontSize",
-          "description": "Modal subtitle font size",
-          "type": "String",
-          "default": "1.4rem"
-        },
-        {
-          "name": "--modalHeadlineFontSize",
-          "description": "Modal headline font size",
-          "type": "String",
-          "default": "1.6rem"
-        },
-        {
-          "name": "--modalMessageFontSize",
-          "description": "Modal message font size",
-          "type": "String",
-          "default": "1.4rem"
-        },
-        {
-          "name": "--modalTitleLineHeight",
-          "description": "Modal title line height",
-          "type": "String",
-          "default": "normal"
-        },
-        {
-          "name": "--modalSubtitleLineHeight",
-          "description": "Modal subtitle line height",
-          "type": "String",
-          "default": "normal"
-        },
-        {
-          "name": "--modalHeadlineLineHeight",
-          "description": "Modal headline line height",
-          "type": "String",
-          "default": "normal"
-        },
-        {
-          "name": "--modalMessageLineHeight",
-          "description": "Modal message line height",
-          "type": "String",
-          "default": "normal"
-        }
-      ]
-    }
-  ]
-}
+{
+  "version": 2,
+  "tags": [
+    {
+      "name": "modal-manager",
+      "description": "A LitElement modal manager",
+      "properties": [
+        {
+          "name": "mode",
+          "type": "ModalManagerMode",
+          "description": "The current mode of the modal manager (open/closed)",
+          "default": "ModalManagerMode.Closed"
+        },
+        {
+          "name": "customModalContent",
+          "type": "TemplateResult",
+          "description": "Custom content to be displayed in the modal content slot",
+          "default": "undefined"
+        },
+        {
+          "name": "hostBridge",
+          "type": "ModalManagerHostBridgeInterface",
+          "description": "A handler for host-specific functionality like CSS modifications",
+          "default": "default ModalManagerHostBridge"
+        }
+      ],
+      "events": [
+        {
+          "name": "modeChanged",
+          "description": "Dispatched when the modal opens or closes"
+        }
+      ],
+      "slots": [],
+      "cssProperties": [
+        {
+          "name": "--modalBackdropColor",
+          "description": "Backdrop color",
+          "type": "String",
+          "default": "rgba(10, 10, 10, 0.9)"
+        },
+        {
+          "name": "--modalBackdropZindex",
+          "description": "Backdrop z-index",
+          "type": "Number",
+          "default": "1000"
+        },
+        {
+          "name": "--modalWidth",
+          "description": "Modal width",
+          "type": "String",
+          "default": "32rem"
+        },
+        {
+          "name": "--modalMaxWidth",
+          "description": "Modal maximum width",
+          "type": "String",
+          "default": "95%"
+        },
+        {
+          "name": "--modalZindex",
+          "description": "Modal z-index",
+          "type": "Number",
+          "default": "2000"
+        },
+        {
+          "name": "--modalLogoSize",
+          "description": "The modal logo size",
+          "type": "String",
+          "default": "6.5rem"
+        },
+        {
+          "name": "--processingImageSize",
+          "description": "The processing image size",
+          "type": "String",
+          "default": "7.5rem"
+        },
+        {
+          "name": "--modalCornerRadius",
+          "description": "Modal corner radius",
+          "type": "String",
+          "default": "2.5rem"
+        },
+        {
+          "name": "--modalBorder",
+          "description": "The modal border",
+          "type": "String",
+          "default": "2px solid black"
+        },
+        {
+          "name": "--modalBottomMargin",
+          "description": "The space between the bottom of the screen and the bottom of the modal",
+          "type": "String",
+          "default": "2.5rem"
+        },
+        {
+          "name": "--modalTopMargin",
+          "description": "The space between the top of the screen and the top of the modal",
+          "type": "String",
+          "default": "2.5rem"
+        },
+        {
+          "name": "--modalHeaderBottomPadding",
+          "description": "The padding on the bottom of the modal header",
+          "type": "String",
+          "default": "0.5rem"
+        },
+        {
+          "name": "--modalBottomPadding",
+          "description": "The padding on the bottom of the modal",
+          "type": "String",
+          "default": "20px"
+        },
+        {
+          "name": "--modalScrollOffset",
+          "description": "Adds a bit of extra padding to the scrollable area so the scrollbar doesn't always show",
+          "type": "String",
+          "default": "5px"
+        },
+        {
+          "name": "--modalTitleFontSize",
+          "description": "Modal title font size",
+          "type": "String",
+          "default": "1.8rem"
+        },
+        {
+          "name": "--modalSubtitleFontSize",
+          "description": "Modal subtitle font size",
+          "type": "String",
+          "default": "1.4rem"
+        },
+        {
+          "name": "--modalHeadlineFontSize",
+          "description": "Modal headline font size",
+          "type": "String",
+          "default": "1.6rem"
+        },
+        {
+          "name": "--modalMessageFontSize",
+          "description": "Modal message font size",
+          "type": "String",
+          "default": "1.4rem"
+        },
+        {
+          "name": "--modalTitleLineHeight",
+          "description": "Modal title line height",
+          "type": "String",
+          "default": "normal"
+        },
+        {
+          "name": "--modalSubtitleLineHeight",
+          "description": "Modal subtitle line height",
+          "type": "String",
+          "default": "normal"
+        },
+        {
+          "name": "--modalHeadlineLineHeight",
+          "description": "Modal headline line height",
+          "type": "String",
+          "default": "normal"
+        },
+        {
+          "name": "--modalMessageLineHeight",
+          "description": "Modal message line height",
+          "type": "String",
+          "default": "normal"
+        }
+      ]
+    }
+  ]
+}