@crowdfarming/oliva-ds 1.86.0 → 1.87.0-rc.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.
|
@@ -5857,11 +5857,11 @@ class ModalComponent {
|
|
|
5857
5857
|
return c.filter(Boolean).join(' ');
|
|
5858
5858
|
}
|
|
5859
5859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5860
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }, { propertyName: "bodyContentRef", first: true, predicate: ["bodyContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:
|
|
5860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }, { propertyName: "bodyContentRef", first: true, predicate: ["bodyContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:0 0 auto;display:flex;justify-content:flex-end}.c-modal__content__header__slot{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5861
5861
|
}
|
|
5862
5862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5863
5863
|
type: Component,
|
|
5864
|
-
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:
|
|
5864
|
+
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:0 0 auto;display:flex;justify-content:flex-end}.c-modal__content__header__slot{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
|
|
5865
5865
|
}], ctorParameters: () => [] });
|
|
5866
5866
|
|
|
5867
5867
|
class ModalService {
|