@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.1

package/dist/src/modal-template.js

@@ -1,40 +1,40 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import '@internetarchive/ia-activity-indicator';
-import '@internetarchive/icon-close';
-import { ModalConfig } from './modal-config';
-import IALogoIcon from './assets/ia-logo-icon';
-import arrowLeftIcon from './assets/arrow-left-icon';
-let ModalTemplate = class ModalTemplate extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The ModalConfig that displayed the template
-         *
-         * @type {ModalConfig}
-         * @memberof ModalTemplate
-         */
-        this.config = new ModalConfig();
-    }
-    /** @inheritdoc */
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/icon-close';
+import { ModalConfig } from './modal-config';
+import IALogoIcon from './assets/ia-logo-icon';
+import arrowLeftIcon from './assets/arrow-left-icon';
+let ModalTemplate = class ModalTemplate extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The ModalConfig that displayed the template
+         *
+         * @type {ModalConfig}
+         * @memberof ModalTemplate
+         */
+        this.config = new ModalConfig();
+    }
+    /** @inheritdoc */
+    render() {
         return html `
       <div class="modal-wrapper">
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
-            ${this.config.showLeftNavButton
-            ? this.leftNavButtonTemplate
+            ${this.config.showLeftNavButton
+            ? this.leftNavButtonTemplate
             : nothing}
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
-            ${this.config.showHeaderLogo
-            ? html `<div class="logo-icon">${IALogoIcon}</div>`
+            ${this.config.showHeaderLogo
+            ? html `<div class="logo-icon">${IALogoIcon}</div>`
             : nothing}
-            ${this.config.title
-            ? html `<h1 class="title">${this.config.title}</h1>`
+            ${this.config.title
+            ? html `<h1 class="title">${this.config.title}</h1>`
             : ''}
-            ${this.config.subtitle
-            ? html `<h2 class="subtitle">${this.config.subtitle}</h2>`
+            ${this.config.subtitle
+            ? html `<h2 class="subtitle">${this.config.subtitle}</h2>`
             : ''}
           </header>
           <section
@@ -43,19 +43,19 @@ let ModalTemplate = class ModalTemplate extends LitElement {
           >
             <div class="content">
               <div
-                class="processing-logo ${this.config.showProcessingIndicator
-            ? ''
+                class="processing-logo ${this.config.showProcessingIndicator
+            ? ''
             : 'hidden'}"
               >
                 <ia-activity-indicator
                   .mode=${this.config.processingImageMode}
                 ></ia-activity-indicator>
               </div>
-              ${this.config.headline
-            ? html ` <h1 class="headline">${this.config.headline}</h1> `
+              ${this.config.headline
+            ? html ` <h1 class="headline">${this.config.headline}</h1> `
             : ''}
-              ${this.config.message
-            ? html ` <p class="message">${this.config.message}</p> `
+              ${this.config.message
+            ? html ` <p class="message">${this.config.message}</p> `
             : ''}
 
               <div class="slot-container">
@@ -65,49 +65,49 @@ let ModalTemplate = class ModalTemplate extends LitElement {
           </section>
         </div>
       </div>
-    `;
-    }
-    /**
-     * Dispatch the `closeButtonPressed` event to the consumer
-     *
-     * @private
-     * @memberof ModalTemplate
-     */
-    handleCloseButton(e) {
-        e.preventDefault();
-        if (e.type === 'keydown' &&
-            e.key !== ' ' &&
-            e.key !== 'Enter') {
-            return;
-        }
-        const event = new Event('closeButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Dispatch the `leftNavButtonPressed` event to the consumer
-     *
-     * @private
-     * @memberof ModalTemplate
-     */
-    handleLeftNavButtonPressed(e) {
-        e.preventDefault();
-        if (e.type === 'keydown' &&
-            e.key !== ' ' &&
-            e.key !== 'Enter') {
-            return;
-        }
-        const event = new Event('leftNavButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * The close button template
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof ModalTemplate
-     */
-    get closeButtonTemplate() {
+    `;
+    }
+    /**
+     * Dispatch the `closeButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    handleCloseButton(e) {
+        e.preventDefault();
+        if (e.type === 'keydown' &&
+            e.key !== ' ' &&
+            e.key !== 'Enter') {
+            return;
+        }
+        const event = new Event('closeButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Dispatch the `leftNavButtonPressed` event to the consumer
+     *
+     * @private
+     * @memberof ModalTemplate
+     */
+    handleLeftNavButtonPressed(e) {
+        e.preventDefault();
+        if (e.type === 'keydown' &&
+            e.key !== ' ' &&
+            e.key !== 'Enter') {
+            return;
+        }
+        const event = new Event('leftNavButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * The close button template
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof ModalTemplate
+     */
+    get closeButtonTemplate() {
         return html `
       <button
         type="button"
@@ -117,10 +117,10 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       >
         <ia-icon-close></ia-icon-close>
       </button>
-    `;
-    }
-    get leftNavButtonTemplate() {
-        var _a;
+    `;
+    }
+    get leftNavButtonTemplate() {
+        var _a;
         return html `<button
       type="button"
       class="back-button"
@@ -128,29 +128,29 @@ let ModalTemplate = class ModalTemplate extends LitElement {
       @keydown=${this.handleLeftNavButtonPressed}
     >
       ${arrowLeftIcon} ${(_a = this.config.leftNavButtonText) !== null && _a !== void 0 ? _a : ''}
-    </button> `;
-    }
-    /** @inheritdoc */
-    static get styles() {
-        const modalLogoSize = css `var(--modalLogoSize, 6.5rem)`;
-        const processingImageSize = css `var(--processingImageSize, 7.5rem)`;
-        const modalCornerRadius = css `var(--modalCornerRadius, 1rem)`;
-        const modalBorder = css `var(--modalBorder, 2px solid black)`;
-        // if the content of the modal is too big to fit on screen, this sets the bottom margin
-        // it's not exact, but a close estimation
-        const modalBottomMarginCss = css `var(--modalBottomMargin, 2.5rem)`;
-        const modalTopMarginCss = css `var(--modalTopMargin, 5rem)`;
-        const modalHeaderBottomPaddingCss = css `var(--modalHeaderBottomPadding, 0.5em)`;
-        const modalBottomPadding = css `var(--modalBottomPadding, 2rem)`;
-        const scrollOffset = css `var(--modalScrollOffset, 5px)`;
-        const titleFontSize = css `var(--modalTitleFontSize, 1.8rem)`;
-        const subtitleFontSize = css `var(--modalSubtitleFontSize, 1.4rem)`;
-        const headlineFontSize = css `var(--modalHeadlineFontSize, 1.6rem)`;
-        const messageFontSize = css `var(--modalMessageFontSize, 1.4rem)`;
-        const titleLineHeight = css `var(--modalTitleLineHeight, normal)`;
-        const subtitleLineHeight = css `var(--modalSubtitleLineHeight, normal)`;
-        const headlineLineHeight = css `var(--modalHeadlineLineHeight, normal)`;
-        const messageLineHeight = css `var(--modalMessageLineHeight, normal)`;
+    </button> `;
+    }
+    /** @inheritdoc */
+    static get styles() {
+        const modalLogoSize = css `var(--modalLogoSize, 6.5rem)`;
+        const processingImageSize = css `var(--processingImageSize, 7.5rem)`;
+        const modalCornerRadius = css `var(--modalCornerRadius, 1rem)`;
+        const modalBorder = css `var(--modalBorder, 2px solid black)`;
+        // if the content of the modal is too big to fit on screen, this sets the bottom margin
+        // it's not exact, but a close estimation
+        const modalBottomMarginCss = css `var(--modalBottomMargin, 2.5rem)`;
+        const modalTopMarginCss = css `var(--modalTopMargin, 5rem)`;
+        const modalHeaderBottomPaddingCss = css `var(--modalHeaderBottomPadding, 0.5em)`;
+        const modalBottomPadding = css `var(--modalBottomPadding, 2rem)`;
+        const scrollOffset = css `var(--modalScrollOffset, 5px)`;
+        const titleFontSize = css `var(--modalTitleFontSize, 1.8rem)`;
+        const subtitleFontSize = css `var(--modalSubtitleFontSize, 1.4rem)`;
+        const headlineFontSize = css `var(--modalHeadlineFontSize, 1.6rem)`;
+        const messageFontSize = css `var(--modalMessageFontSize, 1.4rem)`;
+        const titleLineHeight = css `var(--modalTitleLineHeight, normal)`;
+        const subtitleLineHeight = css `var(--modalSubtitleLineHeight, normal)`;
+        const headlineLineHeight = css `var(--modalHeadlineLineHeight, normal)`;
+        const messageLineHeight = css `var(--modalMessageLineHeight, normal)`;
         return css `
       .processing-logo {
         margin: auto;
@@ -323,14 +323,14 @@ let ModalTemplate = class ModalTemplate extends LitElement {
         clip: rect(0, 0, 0, 0);
         border: 0;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], ModalTemplate.prototype, "config", void 0);
-ModalTemplate = __decorate([
-    customElement('modal-template')
-], ModalTemplate);
-export { ModalTemplate };
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ModalTemplate.prototype, "config", void 0);
+ModalTemplate = __decorate([
+    customElement('modal-template')
+], ModalTemplate);
+export { ModalTemplate };
 //# sourceMappingURL=modal-template.js.map

package/dist/src/shoelace/active-elements.d.ts

@@ -1,15 +1,15 @@
-/**
- * Use a generator so we can iterate and possibly break early.
- * @example
- *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
- *   const allActiveElements = [...activeElements()]
- *
- *   // Early return
- *   for (const activeElement of activeElements()) {
- *     if (<cond>) {
- *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
- *     }
- *   }
- */
-export declare function activeElements(activeElement?: Element | null): Generator<Element>;
-export declare function getDeepestActiveElement(): Element | undefined;
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

package/dist/src/shoelace/active-elements.js

@@ -1,28 +1,28 @@
-/* istanbul ignore file */
-/**
- * Use a generator so we can iterate and possibly break early.
- * @example
- *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
- *   const allActiveElements = [...activeElements()]
- *
- *   // Early return
- *   for (const activeElement of activeElements()) {
- *     if (<cond>) {
- *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
- *     }
- *   }
- */
-export function* activeElements(activeElement = document.activeElement) {
-    if (activeElement === null || activeElement === undefined)
-        return;
-    yield activeElement;
-    if ('shadowRoot' in activeElement &&
-        activeElement.shadowRoot &&
-        activeElement.shadowRoot.mode !== 'closed') {
-        yield* activeElements(activeElement.shadowRoot.activeElement);
-    }
-}
-export function getDeepestActiveElement() {
-    return [...activeElements()].pop();
-}
+/* istanbul ignore file */
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export function* activeElements(activeElement = document.activeElement) {
+    if (activeElement === null || activeElement === undefined)
+        return;
+    yield activeElement;
+    if ('shadowRoot' in activeElement &&
+        activeElement.shadowRoot &&
+        activeElement.shadowRoot.mode !== 'closed') {
+        yield* activeElements(activeElement.shadowRoot.activeElement);
+    }
+}
+export function getDeepestActiveElement() {
+    return [...activeElements()].pop();
+}
 //# sourceMappingURL=active-elements.js.map

package/dist/src/shoelace/modal.d.ts

@@ -1,24 +1,24 @@
-export default class Modal {
-    element: HTMLElement;
-    isExternalActivated: boolean;
-    tabDirection: 'forward' | 'backward';
-    currentFocus: HTMLElement | null;
-    previousFocus: HTMLElement | null;
-    elementsWithTabbableControls: string[];
-    constructor(element: HTMLElement);
-    /** Activates focus trapping. */
-    activate(): void;
-    /** Deactivates focus trapping. */
-    deactivate(): void;
-    /** Determines if this modal element is currently active or not. */
-    isActive(): boolean;
-    /** Activates external modal behavior and temporarily disables focus trapping. */
-    activateExternal(): void;
-    /** Deactivates external modal behavior and re-enables focus trapping. */
-    deactivateExternal(): void;
-    private checkFocus;
-    private handleFocusIn;
-    private possiblyHasTabbableChildren;
-    private handleKeyDown;
-    private handleKeyUp;
-}
+export default class Modal {
+    element: HTMLElement;
+    isExternalActivated: boolean;
+    tabDirection: 'forward' | 'backward';
+    currentFocus: HTMLElement | null;
+    previousFocus: HTMLElement | null;
+    elementsWithTabbableControls: string[];
+    constructor(element: HTMLElement);
+    /** Activates focus trapping. */
+    activate(): void;
+    /** Deactivates focus trapping. */
+    deactivate(): void;
+    /** Determines if this modal element is currently active or not. */
+    isActive(): boolean;
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal(): void;
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
+}