@internetarchive/modal-manager 0.2.3 → 0.2.4

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.
Files changed (9) hide show
  1. package/demo/index.html +1 -0
  2. package/dist/src/modal-config.d.ts +8 -1
  3. package/dist/src/modal-config.js +6 -5
  4. package/dist/src/modal-config.js.map +1 -1
  5. package/dist/src/modal-template.js +4 -1
  6. package/dist/src/modal-template.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/modal-config.ts +10 -1
  9. package/src/modal-template.ts +4 -1
package/demo/index.html CHANGED
@@ -109,6 +109,7 @@
109
109
  config.headline = 'Error'
110
110
  config.message = 'An error occurred while processing your donation.';
111
111
  config.headerColor = '#691916';
112
+ config.bodyColor = '#fff';
112
113
 
113
114
  modalManager.showModal({
114
115
  config
package/dist/src/modal-config.d.ts CHANGED
@@ -35,11 +35,17 @@ export declare class ModalConfig {
35
35
  */
36
36
  message?: TemplateResult;
37
37
  /**
38
- * The color of the header
38
+ * The background color of the header
39
39
  *
40
40
  * @memberof ModalConfig
41
41
  */
42
42
  headerColor: string;
43
+ /**
44
+ * The background color of the body
45
+ *
46
+ * @memberof ModalConfig
47
+ */
48
+ bodyColor: string;
43
49
  /**
44
50
  * Show or hide the processing indicator
45
51
  *
@@ -70,6 +76,7 @@ export declare class ModalConfig {
70
76
  headline?: TemplateResult;
71
77
  message?: TemplateResult;
72
78
  headerColor?: string;
79
+ bodyColor?: string;
73
80
  showProcessingIndicator?: boolean;
74
81
  processingImageMode?: string;
75
82
  showCloseButton?: boolean;
package/dist/src/modal-config.js CHANGED
@@ -6,16 +6,17 @@
6
6
  */
7
7
  export class ModalConfig {
8
8
  constructor(options) {
9
- var _a, _b, _c, _d, _e;
9
+ var _a, _b, _c, _d, _e, _f;
10
10
  this.title = options === null || options === void 0 ? void 0 : options.title;
11
11
  this.subtitle = options === null || options === void 0 ? void 0 : options.subtitle;
12
12
  this.headline = options === null || options === void 0 ? void 0 : options.headline;
13
13
  this.message = options === null || options === void 0 ? void 0 : options.message;
14
14
  this.headerColor = (_a = options === null || options === void 0 ? void 0 : options.headerColor) !== null && _a !== void 0 ? _a : '#55A183';
15
- this.showProcessingIndicator = (_b = options === null || options === void 0 ? void 0 : options.showProcessingIndicator) !== null && _b !== void 0 ? _b : false;
16
- this.processingImageMode = (_c = options === null || options === void 0 ? void 0 : options.processingImageMode) !== null && _c !== void 0 ? _c : 'complete';
17
- this.showCloseButton = (_d = options === null || options === void 0 ? void 0 : options.showCloseButton) !== null && _d !== void 0 ? _d : true;
18
- this.closeOnBackdropClick = (_e = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _e !== void 0 ? _e : true;
15
+ this.bodyColor = (_b = options === null || options === void 0 ? void 0 : options.bodyColor) !== null && _b !== void 0 ? _b : '#f5f5f7';
16
+ this.showProcessingIndicator = (_c = options === null || options === void 0 ? void 0 : options.showProcessingIndicator) !== null && _c !== void 0 ? _c : false;
17
+ this.processingImageMode = (_d = options === null || options === void 0 ? void 0 : options.processingImageMode) !== null && _d !== void 0 ? _d : 'complete';
18
+ this.showCloseButton = (_e = options === null || options === void 0 ? void 0 : options.showCloseButton) !== null && _e !== void 0 ? _e : true;
19
+ this.closeOnBackdropClick = (_f = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _f !== void 0 ? _f : true;
19
20
  }
20
21
  }
21
22
  //# sourceMappingURL=modal-config.js.map
package/dist/src/modal-config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IAoEtB,YAAY,OAUX;;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,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,oBAAoB,SAAG,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 color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: 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: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: 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 showProcessingIndicator?: boolean;\n processingImageMode?: string;\n showCloseButton?: 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.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA2EtB,YAAY,OAWX;;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,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,oBAAoB,SAAG,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: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: 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?: string;\n showCloseButton?: 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.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
package/dist/src/modal-template.js CHANGED
@@ -33,7 +33,10 @@ let ModalTemplate = class ModalTemplate extends LitElement {
33
33
  ? html `<h2 class="subtitle">${this.config.subtitle}</h2>`
34
34
  : ''}
35
35
  </header>
36
- <section class="modal-body">
36
+ <section
37
+ class="modal-body"
38
+ style="background-color: ${this.config.bodyColor}"
39
+ >
37
40
  <div class="content">
38
41
  <div
39
42
  class="processing-logo ${this.config.showProcessingIndicator
package/dist/src/modal-template.js.map CHANGED
@@ -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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close';\nimport iaLogo from '@internetarchive/icon-ia-logo';\n\nimport { ModalConfig } from './modal-config';\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 <div class=\"logo-icon\">\n ${iaLogo}\n </div>\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 class=\"modal-body\">\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\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(): void {\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 tabindex=\"0\"\n @click=${this.handleCloseButton}\n >\n ${closeIcon}\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 }\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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close';\nimport iaLogo from '@internetarchive/icon-ia-logo';\n\nimport { ModalConfig } from './modal-config';\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 <div class=\"logo-icon\">\n ${iaLogo}\n </div>\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\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(): void {\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 tabindex=\"0\"\n @click=${this.handleCloseButton}\n >\n ${closeIcon}\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 }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/modal-manager",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "description": "A Modal Manager Web Component",
5
5
  "repository": {
6
6
  "type": "git",
package/src/modal-config.ts CHANGED
@@ -40,12 +40,19 @@ export class ModalConfig {
40
40
  message?: TemplateResult;
41
41
 
42
42
  /**
43
- * The color of the header
43
+ * The background color of the header
44
44
  *
45
45
  * @memberof ModalConfig
46
46
  */
47
47
  headerColor: string;
48
48
 
49
+ /**
50
+ * The background color of the body
51
+ *
52
+ * @memberof ModalConfig
53
+ */
54
+ bodyColor: string;
55
+
49
56
  /**
50
57
  * Show or hide the processing indicator
51
58
  *
@@ -80,6 +87,7 @@ export class ModalConfig {
80
87
  headline?: TemplateResult;
81
88
  message?: TemplateResult;
82
89
  headerColor?: string;
90
+ bodyColor?: string;
83
91
  showProcessingIndicator?: boolean;
84
92
  processingImageMode?: string;
85
93
  showCloseButton?: boolean;
@@ -91,6 +99,7 @@ export class ModalConfig {
91
99
  this.message = options?.message;
92
100
 
93
101
  this.headerColor = options?.headerColor ?? '#55A183';
102
+ this.bodyColor = options?.bodyColor ?? '#f5f5f7';
94
103
  this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
95
104
  this.processingImageMode = options?.processingImageMode ?? 'complete';
96
105
  this.showCloseButton = options?.showCloseButton ?? true;
package/src/modal-template.ts CHANGED
@@ -34,7 +34,10 @@ export class ModalTemplate extends LitElement {
34
34
  ? html`<h2 class="subtitle">${this.config.subtitle}</h2>`
35
35
  : ''}
36
36
  </header>
37
- <section class="modal-body">
37
+ <section
38
+ class="modal-body"
39
+ style="background-color: ${this.config.bodyColor}"
40
+ >
38
41
  <div class="content">
39
42
  <div
40
43
  class="processing-logo ${this.config.showProcessingIndicator