@internetarchive/modal-manager 1.0.3-alpha.1 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +7 -3
- package/dist/src/modal-config.d.ts +2 -2
- package/dist/src/modal-config.js.map +1 -1
- package/dist/src/modal-template.d.ts +1 -1
- package/dist/src/modal-template.js +1 -1
- package/dist/src/modal-template.js.map +1 -1
- package/package.json +2 -2
- package/src/modal-config.ts +2 -2
- package/src/modal-template.ts +1 -1
package/.github/workflows/ci.yml
CHANGED
|
@@ -14,7 +14,7 @@ jobs:
|
|
|
14
14
|
- uses: actions/checkout@v4
|
|
15
15
|
- uses: actions/setup-node@v4
|
|
16
16
|
with:
|
|
17
|
-
node-version:
|
|
17
|
+
node-version: latest
|
|
18
18
|
|
|
19
19
|
- name: Install dependencies
|
|
20
20
|
run: npm install
|
|
@@ -22,5 +22,9 @@ jobs:
|
|
|
22
22
|
- name: Run tests
|
|
23
23
|
run: npm run test
|
|
24
24
|
|
|
25
|
-
- name: Upload reports
|
|
26
|
-
|
|
25
|
+
- name: Upload Codecov reports
|
|
26
|
+
uses: codecov/codecov-action@main
|
|
27
|
+
with:
|
|
28
|
+
fail_ci_if_error: true
|
|
29
|
+
token: ${{ secrets.CODECOV_TOKEN }}
|
|
30
|
+
verbose: true
|
|
@@ -57,7 +57,7 @@ export declare class ModalConfig {
|
|
|
57
57
|
*
|
|
58
58
|
* @memberof ModalConfig
|
|
59
59
|
*/
|
|
60
|
-
processingImageMode:
|
|
60
|
+
processingImageMode: 'processing' | 'complete';
|
|
61
61
|
/**
|
|
62
62
|
* Show the close button
|
|
63
63
|
*
|
|
@@ -84,7 +84,7 @@ export declare class ModalConfig {
|
|
|
84
84
|
headerColor?: string;
|
|
85
85
|
bodyColor?: string;
|
|
86
86
|
showProcessingIndicator?: boolean;
|
|
87
|
-
processingImageMode?:
|
|
87
|
+
processingImageMode?: 'processing' | 'complete';
|
|
88
88
|
showCloseButton?: boolean;
|
|
89
89
|
showHeaderLogo?: boolean;
|
|
90
90
|
closeOnBackdropClick?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IAkFtB,YAAY,OAYX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode, currently `processing` or `complete`\n *\n * @memberof ModalConfig\n */\n processingImageMode:
|
|
1
|
+
{"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IAkFtB,YAAY,OAYX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,cAAc,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode, currently `processing` or `complete`\n *\n * @memberof ModalConfig\n */\n processingImageMode: 'processing' | 'complete';\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showHeaderLogo: boolean;\n\n /**\n * Close the modal if the user taps on the background\n *\n * @memberof ModalConfig\n */\n closeOnBackdropClick: boolean;\n\n constructor(options?: {\n title?: TemplateResult;\n subtitle?: TemplateResult;\n headline?: TemplateResult;\n message?: TemplateResult;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: 'processing' | 'complete';\n showCloseButton?: boolean;\n showHeaderLogo?: boolean;\n closeOnBackdropClick?: boolean;\n }) {\n this.title = options?.title;\n this.subtitle = options?.subtitle;\n this.headline = options?.headline;\n this.message = options?.message;\n\n this.headerColor = options?.headerColor ?? '#55A183';\n this.bodyColor = options?.bodyColor ?? '#f5f5f7';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement, CSSResult, TemplateResult } from 'lit';
|
|
2
|
-
import '@internetarchive/ia-activity-indicator
|
|
2
|
+
import '@internetarchive/ia-activity-indicator';
|
|
3
3
|
import '@internetarchive/icon-close';
|
|
4
4
|
import { ModalConfig } from './modal-config';
|
|
5
5
|
export declare class ModalTemplate extends LitElement {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, html, css, nothing } from 'lit';
|
|
3
3
|
import { property, customElement } from 'lit/decorators.js';
|
|
4
|
-
import '@internetarchive/ia-activity-indicator
|
|
4
|
+
import '@internetarchive/ia-activity-indicator';
|
|
5
5
|
import '@internetarchive/icon-close';
|
|
6
6
|
import { ModalConfig } from './modal-config';
|
|
7
7
|
import IALogoIcon from './assets/ia-logo-icon';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /**\n * The ModalConfig that displayed the template\n *\n * @type {ModalConfig}\n * @memberof ModalTemplate\n */\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /**\n * Dispatch the `closeButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleCloseButton(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * The close button template\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ModalTemplate\n */\n private get closeButtonTemplate(): TemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n @click=${this.handleCloseButton}\n @keydown=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #f5f5f7;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} * 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n /**\n * The ModalConfig that displayed the template\n *\n * @type {ModalConfig}\n * @memberof ModalTemplate\n */\n @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"modal-wrapper\">\n <div class=\"modal-container\">\n <header style=\"background-color: ${this.config.headerColor}\">\n ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n : nothing}\n ${this.config.title\n ? html`<h1 class=\"title\">${this.config.title}</h1>`\n : ''}\n ${this.config.subtitle\n ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n : ''}\n </header>\n <section\n class=\"modal-body\"\n style=\"background-color: ${this.config.bodyColor}\"\n >\n <div class=\"content\">\n <div\n class=\"processing-logo ${this.config.showProcessingIndicator\n ? ''\n : 'hidden'}\"\n >\n <ia-activity-indicator\n .mode=${this.config.processingImageMode}\n ></ia-activity-indicator>\n </div>\n ${this.config.headline\n ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n : ''}\n ${this.config.message\n ? html` <p class=\"message\">${this.config.message}</p> `\n : ''}\n\n <div class=\"slot-container\">\n <slot> </slot>\n </div>\n </div>\n </section>\n </div>\n </div>\n `;\n }\n\n /**\n * Dispatch the `closeButtonPressed` event to the consumer\n *\n * @private\n * @memberof ModalTemplate\n */\n private handleCloseButton(e: Event): void {\n e.preventDefault();\n if (\n e.type === 'keydown' &&\n (e as KeyboardEvent).key !== ' ' &&\n (e as KeyboardEvent).key !== 'Enter'\n ) {\n return;\n }\n const event = new Event('closeButtonPressed');\n this.dispatchEvent(event);\n }\n\n /**\n * The close button template\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ModalTemplate\n */\n private get closeButtonTemplate(): TemplateResult {\n return html`\n <button\n type=\"button\"\n class=\"close-button\"\n @click=${this.handleCloseButton}\n @keydown=${this.handleCloseButton}\n >\n <ia-icon-close></ia-icon-close>\n </button>\n `;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n const modalBorder = css`var(--modalBorder, 2px solid black)`;\n // if the content of the modal is too big to fit on screen, this sets the bottom margin\n // it's not exact, but a close estimation\n const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n return css`\n .processing-logo {\n margin: auto;\n width: ${processingImageSize};\n height: ${processingImageSize};\n }\n\n .processing-logo.hidden {\n height: 1rem;\n }\n\n .processing-logo.hidden ia-activity-indicator {\n display: none;\n }\n\n .modal-wrapper {\n outline: none;\n }\n\n .modal-container {\n border-radius: ${modalCornerRadius};\n width: 100%;\n margin-top: ${modalTopMarginCss};\n }\n\n header {\n position: relative;\n background-color: #36a483;\n color: white;\n border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n border: ${modalBorder};\n border-bottom: 0;\n text-align: center;\n padding-bottom: ${modalHeaderBottomPaddingCss};\n }\n\n .title {\n margin: 0;\n padding: 0;\n font-size: ${titleFontSize};\n font-weight: bold;\n line-height: ${titleLineHeight};\n }\n\n .subtitle {\n margin: 0;\n padding: 0;\n font-weight: normal;\n padding-top: 0;\n font-size: ${subtitleFontSize};\n line-height: ${subtitleLineHeight};\n }\n\n .modal-body {\n background-color: #f5f5f7;\n border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n border: ${modalBorder};\n border-top: 0;\n padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n color: #333;\n margin-bottom: 2.5rem;\n min-height: 5rem;\n }\n\n .content {\n overflow-y: auto;\n max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n min-height: 5rem;\n padding: 0 0 calc(${scrollOffset}) 0;\n }\n\n .headline {\n font-size: ${headlineFontSize};\n font-weight: bold;\n text-align: center;\n line-height: ${headlineLineHeight};\n margin: 0;\n padding: 0;\n }\n\n .message {\n margin: 1rem 0 0 0;\n text-align: center;\n font-size: ${messageFontSize};\n line-height: ${messageLineHeight};\n }\n\n .logo-icon {\n border-radius: 100%;\n border: 3px solid #fff;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n width: ${modalLogoSize};\n height: ${modalLogoSize};\n margin: -2.9rem auto 0.5rem auto;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .logo-icon svg {\n width: calc(${modalLogoSize} * 0.65);\n height: calc(${modalLogoSize} * 0.65);\n }\n\n .logo-icon svg .fill-color {\n fill: white;\n }\n\n .logo-icon svg .stroke-color {\n stroke: red;\n }\n\n .close-button {\n position: absolute;\n right: 1.2rem;\n top: 1.2rem;\n width: 2rem;\n height: 2rem;\n border-radius: 100%;\n border: 0;\n padding: 0;\n cursor: pointer;\n background-color: white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n 0 4px 4px 0 rgba(0, 0, 0, 0.08);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n slot::slotted(.sr-only) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@internetarchive/modal-manager",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "A Modal Manager Web Component",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@internetarchive/ia-activity-indicator": "^0.0.
|
|
32
|
+
"@internetarchive/ia-activity-indicator": "^0.0.6",
|
|
33
33
|
"@internetarchive/icon-close": "^1.3.4",
|
|
34
34
|
"@internetarchive/icon-ia-logo": "^1.3.4",
|
|
35
35
|
"@internetarchive/icon-user": "^1.3.4",
|
package/src/modal-config.ts
CHANGED
|
@@ -65,7 +65,7 @@ export class ModalConfig {
|
|
|
65
65
|
*
|
|
66
66
|
* @memberof ModalConfig
|
|
67
67
|
*/
|
|
68
|
-
processingImageMode:
|
|
68
|
+
processingImageMode: 'processing' | 'complete';
|
|
69
69
|
|
|
70
70
|
/**
|
|
71
71
|
* Show the close button
|
|
@@ -96,7 +96,7 @@ export class ModalConfig {
|
|
|
96
96
|
headerColor?: string;
|
|
97
97
|
bodyColor?: string;
|
|
98
98
|
showProcessingIndicator?: boolean;
|
|
99
|
-
processingImageMode?:
|
|
99
|
+
processingImageMode?: 'processing' | 'complete';
|
|
100
100
|
showCloseButton?: boolean;
|
|
101
101
|
showHeaderLogo?: boolean;
|
|
102
102
|
closeOnBackdropClick?: boolean;
|
package/src/modal-template.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';
|
|
2
2
|
import { property, customElement } from 'lit/decorators.js';
|
|
3
3
|
|
|
4
|
-
import '@internetarchive/ia-activity-indicator
|
|
4
|
+
import '@internetarchive/ia-activity-indicator';
|
|
5
5
|
import '@internetarchive/icon-close';
|
|
6
6
|
|
|
7
7
|
import { ModalConfig } from './modal-config';
|