@crowdfarming/oliva-ds 1.29.0-rc.9 → 1.30.0
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.
|
@@ -3200,18 +3200,21 @@ class OverlayComponent {
|
|
|
3200
3200
|
destroyRef = inject(DestroyRef);
|
|
3201
3201
|
focusTrapFactory = inject(FocusTrapFactory);
|
|
3202
3202
|
router = inject(Router);
|
|
3203
|
+
// Portal and container management
|
|
3203
3204
|
triggerButtonRef;
|
|
3204
3205
|
portal;
|
|
3205
3206
|
portalOutlet;
|
|
3206
3207
|
portalContainer;
|
|
3207
|
-
|
|
3208
|
+
boundPortalClickHandler;
|
|
3209
|
+
// Focus and accessibility management
|
|
3208
3210
|
focusTrap;
|
|
3209
3211
|
previouslyFocusedElement;
|
|
3210
3212
|
triggerKeydownHandler;
|
|
3211
3213
|
inertElements = [];
|
|
3212
3214
|
escapeKeyHandler;
|
|
3215
|
+
// Scroll and navigation management
|
|
3216
|
+
originalBodyOverflow;
|
|
3213
3217
|
navigationSub;
|
|
3214
|
-
boundPortalClickHandler;
|
|
3215
3218
|
// Helper to get the correct document context (important for Storybook)
|
|
3216
3219
|
getDocument() {
|
|
3217
3220
|
return this.elementRef.nativeElement.ownerDocument || document;
|
|
@@ -3240,11 +3243,13 @@ class OverlayComponent {
|
|
|
3240
3243
|
this.removeEscapeKeyListener();
|
|
3241
3244
|
});
|
|
3242
3245
|
}
|
|
3246
|
+
// ================== MOBILE DETECTION ==================
|
|
3243
3247
|
updateMobileDetection() {
|
|
3244
3248
|
this._isMobile.set(isPlatformBrowser(this.platformId)
|
|
3245
3249
|
? window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT
|
|
3246
3250
|
: false);
|
|
3247
3251
|
}
|
|
3252
|
+
// ================== TRIGGER MANAGEMENT ==================
|
|
3248
3253
|
setTriggerButton(element) {
|
|
3249
3254
|
this.triggerButtonRef = element;
|
|
3250
3255
|
this.triggerKeydownHandler = (event) => {
|
|
@@ -3269,6 +3274,7 @@ class OverlayComponent {
|
|
|
3269
3274
|
onEscapeKey() {
|
|
3270
3275
|
this.closeOverlay();
|
|
3271
3276
|
}
|
|
3277
|
+
// ================== OVERLAY LIFECYCLE ==================
|
|
3272
3278
|
openOverlay() {
|
|
3273
3279
|
this.initializeOverlayState();
|
|
3274
3280
|
this.prepareOverlayForOpening();
|
|
@@ -3334,6 +3340,8 @@ class OverlayComponent {
|
|
|
3334
3340
|
destroyOverlayComponents() {
|
|
3335
3341
|
this.destroyFocusTrap();
|
|
3336
3342
|
this.destroyPortal();
|
|
3343
|
+
// Ensure elements are restored after destroying components
|
|
3344
|
+
this.restoreOutsideElements();
|
|
3337
3345
|
}
|
|
3338
3346
|
scheduleOverlayFinalization() {
|
|
3339
3347
|
setTimeout(() => {
|
|
@@ -3344,6 +3352,7 @@ class OverlayComponent {
|
|
|
3344
3352
|
this._isOpen.set(false);
|
|
3345
3353
|
this._isClosing.set(false);
|
|
3346
3354
|
}
|
|
3355
|
+
// ================== EVENT HANDLING ==================
|
|
3347
3356
|
onPortalClick = (event) => {
|
|
3348
3357
|
if (!this.isOpen() || this.isClosing())
|
|
3349
3358
|
return;
|
|
@@ -3359,6 +3368,7 @@ class OverlayComponent {
|
|
|
3359
3368
|
}
|
|
3360
3369
|
this.closeOverlay();
|
|
3361
3370
|
};
|
|
3371
|
+
// ================== POSITIONING ==================
|
|
3362
3372
|
calculatePosition() {
|
|
3363
3373
|
if (!this.triggerButtonRef)
|
|
3364
3374
|
return;
|
|
@@ -3425,6 +3435,7 @@ class OverlayComponent {
|
|
|
3425
3435
|
const w = parseFloat(this.width());
|
|
3426
3436
|
return isNaN(w) ? OverlayComponent.DEFAULT_MENU_WIDTH : w;
|
|
3427
3437
|
}
|
|
3438
|
+
// ================== RESIZE HANDLING ==================
|
|
3428
3439
|
addResizeListener() {
|
|
3429
3440
|
if (!isPlatformBrowser(this.platformId))
|
|
3430
3441
|
return;
|
|
@@ -3452,6 +3463,7 @@ class OverlayComponent {
|
|
|
3452
3463
|
this.calculatePosition();
|
|
3453
3464
|
}
|
|
3454
3465
|
};
|
|
3466
|
+
// ================== PORTAL MANAGEMENT ==================
|
|
3455
3467
|
createPortal() {
|
|
3456
3468
|
if (!this.menuTemplate || !this.contentTemplate)
|
|
3457
3469
|
return;
|
|
@@ -3545,6 +3557,7 @@ class OverlayComponent {
|
|
|
3545
3557
|
}
|
|
3546
3558
|
this.portalContainer = undefined;
|
|
3547
3559
|
}
|
|
3560
|
+
// ================== SCROLL MANAGEMENT ==================
|
|
3548
3561
|
blockBodyScroll() {
|
|
3549
3562
|
if (!isPlatformBrowser(this.platformId))
|
|
3550
3563
|
return;
|
|
@@ -5289,11 +5302,11 @@ class ModalComponent {
|
|
|
5289
5302
|
}
|
|
5290
5303
|
}
|
|
5291
5304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5292
|
-
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 }], 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 class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @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 @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\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:
|
|
5305
|
+
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 }], 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 class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @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 @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\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:10000;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%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.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);padding:0 var(--space-container-padding-sm)}.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{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.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: 768px){.c-modal{align-items:flex-end}.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;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;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-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"] }] });
|
|
5293
5306
|
}
|
|
5294
5307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5295
5308
|
type: Component,
|
|
5296
|
-
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 class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @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 @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\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:
|
|
5309
|
+
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 class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @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 @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\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:10000;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%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.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);padding:0 var(--space-container-padding-sm)}.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{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.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: 768px){.c-modal{align-items:flex-end}.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;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;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-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"] }]
|
|
5297
5310
|
}], ctorParameters: () => [] });
|
|
5298
5311
|
|
|
5299
5312
|
class ModalService {
|
|
@@ -7166,11 +7179,11 @@ class TileComponent {
|
|
|
7166
7179
|
return this.variant === 'neutral' && this.name ? this.name : null;
|
|
7167
7180
|
}
|
|
7168
7181
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7169
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p
|
|
7182
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n @if (title) {\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p class=\"c-tile__title\">{{ title }}</p>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n ></lib-checkbox>\n </div>\n }\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }] });
|
|
7170
7183
|
}
|
|
7171
7184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
7172
7185
|
type: Component,
|
|
7173
|
-
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p
|
|
7186
|
+
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n @if (title) {\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <p class=\"c-tile__title\">{{ title }}</p>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n ></lib-checkbox>\n </div>\n }\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-component-gap-sm);width:100%;height:100%;align-items:center;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title{flex-grow:1;margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile--disabled .c-tile__title{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"] }]
|
|
7174
7187
|
}], propDecorators: { variant: [{
|
|
7175
7188
|
type: Input
|
|
7176
7189
|
}], paddingSize: [{
|