@underlayerdev/ui 0.9.6 → 0.10.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.
|
@@ -408,6 +408,11 @@ $component-control-height-md: 40px !default;
|
|
|
408
408
|
$component-control-height-lg: 48px !default;
|
|
409
409
|
$component-control-height-xl: 64px !default;
|
|
410
410
|
|
|
411
|
+
// Avatar-only — deliberately not part of the shared control-height family
|
|
412
|
+
// above (a giant size doesn't make sense on a button or input), so it isn't
|
|
413
|
+
// exposed through UiSize.
|
|
414
|
+
$component-avatar-size-2xl: 128px !default;
|
|
415
|
+
|
|
411
416
|
$component-dropdown-list-max-height: 316px !default;
|
|
412
417
|
|
|
413
418
|
$component-control-min-width-sm: 96px !default;
|
|
@@ -10,6 +10,7 @@ import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
|
|
|
10
10
|
import Splide from '@splidejs/splide';
|
|
11
11
|
import { fromEvent, map } from 'rxjs';
|
|
12
12
|
import { debounceTime } from 'rxjs/operators';
|
|
13
|
+
import { ImageCropperComponent as ImageCropperComponent$1 } from 'ngx-image-cropper';
|
|
13
14
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
14
15
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
15
16
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
@@ -404,6 +405,7 @@ class AvatarComponent {
|
|
|
404
405
|
md: '6',
|
|
405
406
|
lg: '7',
|
|
406
407
|
xl: '8',
|
|
408
|
+
'2xl': '16',
|
|
407
409
|
};
|
|
408
410
|
return sizeMap[this.size()];
|
|
409
411
|
}, /* @ts-ignore */
|
|
@@ -437,7 +439,7 @@ class AvatarComponent {
|
|
|
437
439
|
}
|
|
438
440
|
</div>
|
|
439
441
|
</ul-skeleton>
|
|
440
|
-
`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:4096px;background-color:#ffffff1a;color:#fff}.ul-avatar--sm{width:32px;height:32px;min-width:32px}.ul-avatar--md{width:40px;height:40px;min-width:40px}.ul-avatar--lg{width:48px;height:48px;min-width:48px}.ul-avatar--xl{width:64px;height:64px;min-width:64px}.ul-avatar__image{width:100%;height:100%;object-fit:cover;object-position:center}.ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:1}.ul-avatar--sm .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-avatar--md .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-avatar--lg .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-avatar--xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-avatar .ul-icon{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
442
|
+
`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:4096px;background-color:#ffffff1a;color:#fff}.ul-avatar--sm{width:32px;height:32px;min-width:32px}.ul-avatar--md{width:40px;height:40px;min-width:40px}.ul-avatar--lg{width:48px;height:48px;min-width:48px}.ul-avatar--xl{width:64px;height:64px;min-width:64px}.ul-avatar--2xl{width:128px;height:128px;min-width:128px}.ul-avatar__image{width:100%;height:100%;object-fit:cover;object-position:center}.ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:1}.ul-avatar--sm .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-avatar--md .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-avatar--lg .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-avatar--xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-avatar--2xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:800}.ul-avatar .ul-icon{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
441
443
|
}
|
|
442
444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
443
445
|
type: Component,
|
|
@@ -458,7 +460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
458
460
|
}
|
|
459
461
|
</div>
|
|
460
462
|
</ul-skeleton>
|
|
461
|
-
`, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:4096px;background-color:#ffffff1a;color:#fff}.ul-avatar--sm{width:32px;height:32px;min-width:32px}.ul-avatar--md{width:40px;height:40px;min-width:40px}.ul-avatar--lg{width:48px;height:48px;min-width:48px}.ul-avatar--xl{width:64px;height:64px;min-width:64px}.ul-avatar__image{width:100%;height:100%;object-fit:cover;object-position:center}.ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:1}.ul-avatar--sm .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-avatar--md .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-avatar--lg .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-avatar--xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-avatar .ul-icon{color:#ffffffb3}\n"] }]
|
|
463
|
+
`, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:4096px;background-color:#ffffff1a;color:#fff}.ul-avatar--sm{width:32px;height:32px;min-width:32px}.ul-avatar--md{width:40px;height:40px;min-width:40px}.ul-avatar--lg{width:48px;height:48px;min-width:48px}.ul-avatar--xl{width:64px;height:64px;min-width:64px}.ul-avatar--2xl{width:128px;height:128px;min-width:128px}.ul-avatar__image{width:100%;height:100%;object-fit:cover;object-position:center}.ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none;line-height:1}.ul-avatar--sm .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-avatar--md .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-avatar--lg .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-avatar--xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-avatar--2xl .ul-avatar__initials{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:800}.ul-avatar .ul-icon{color:#ffffffb3}\n"] }]
|
|
462
464
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
463
465
|
|
|
464
466
|
/**
|
|
@@ -2633,6 +2635,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
2633
2635
|
}]
|
|
2634
2636
|
}], propDecorators: { showPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlaceholder", required: false }] }] } });
|
|
2635
2637
|
|
|
2638
|
+
class ModalComponent {
|
|
2639
|
+
/** Whether the modal is open. Supports two-way binding with [(open)]. */
|
|
2640
|
+
open = model(false, /* @ts-ignore */
|
|
2641
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2642
|
+
/** Visual variant: default, success, error, custom, or bottom-sheet (mobile-only layout). */
|
|
2643
|
+
variant = input('default', /* @ts-ignore */
|
|
2644
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2645
|
+
/** Optional title shown in the header. */
|
|
2646
|
+
title = input(undefined, /* @ts-ignore */
|
|
2647
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2648
|
+
/** Whether clicking the backdrop closes the modal. */
|
|
2649
|
+
closeOnBackdropClick = input(true, /* @ts-ignore */
|
|
2650
|
+
...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
|
|
2651
|
+
/** Whether to show the close button in the header. */
|
|
2652
|
+
showCloseButton = input(true, /* @ts-ignore */
|
|
2653
|
+
...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
|
|
2654
|
+
/** Label for the primary confirm action in the confirmation variant. */
|
|
2655
|
+
confirmLabel = input('Confirm', /* @ts-ignore */
|
|
2656
|
+
...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
|
|
2657
|
+
/** Label for the secondary cancel action in the confirmation variant. */
|
|
2658
|
+
cancelLabel = input('Cancel', /* @ts-ignore */
|
|
2659
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2660
|
+
/** Optional CSS class for the panel (e.g. for custom variant). */
|
|
2661
|
+
customClass = input(undefined, /* @ts-ignore */
|
|
2662
|
+
...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
|
|
2663
|
+
/**
|
|
2664
|
+
* Below the phone breakpoint, fills the entire viewport edge-to-edge (no
|
|
2665
|
+
* margin, no rounded corners, no visible backdrop) instead of the default
|
|
2666
|
+
* bottom-pinned sheet every variant otherwise gets there. Has no effect
|
|
2667
|
+
* above that breakpoint — desktop/tablet layout is unchanged either way.
|
|
2668
|
+
*/
|
|
2669
|
+
fullScreenInMobile = input(false, /* @ts-ignore */
|
|
2670
|
+
...(ngDevMode ? [{ debugName: "fullScreenInMobile" }] : /* istanbul ignore next */ []));
|
|
2671
|
+
/** Emitted when the modal is closed (button, backdrop, or escape). */
|
|
2672
|
+
closed = output();
|
|
2673
|
+
/** Emitted when the user confirms in the confirmation variant. */
|
|
2674
|
+
confirmed = output();
|
|
2675
|
+
/** Emitted when the user cancels in the confirmation variant. */
|
|
2676
|
+
cancelled = output();
|
|
2677
|
+
panelClass = computed(() => {
|
|
2678
|
+
const variant = this.variant();
|
|
2679
|
+
const custom = this.customClass();
|
|
2680
|
+
const classes = ['ul-modal__panel', `ul-modal__panel--${variant}`];
|
|
2681
|
+
if (this.fullScreenInMobile()) {
|
|
2682
|
+
classes.push('ul-modal__panel--fullscreen-mobile');
|
|
2683
|
+
}
|
|
2684
|
+
if (custom) {
|
|
2685
|
+
classes.push(custom);
|
|
2686
|
+
}
|
|
2687
|
+
return classes.join(' ');
|
|
2688
|
+
}, /* @ts-ignore */
|
|
2689
|
+
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
2690
|
+
isConfirmation = computed(() => this.variant() === 'confirmation', /* @ts-ignore */
|
|
2691
|
+
...(ngDevMode ? [{ debugName: "isConfirmation" }] : /* istanbul ignore next */ []));
|
|
2692
|
+
isSuccess = computed(() => this.variant() === 'success', /* @ts-ignore */
|
|
2693
|
+
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
2694
|
+
isError = computed(() => this.variant() === 'error', /* @ts-ignore */
|
|
2695
|
+
...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
2696
|
+
modalTitle = computed(() => (this.isSuccess() || this.isError() ? '' : this.title()), /* @ts-ignore */
|
|
2697
|
+
...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
|
|
2698
|
+
titleId = `ul-modal-title-${Math.random().toString(36).slice(2, 11)}`;
|
|
2699
|
+
bodyId = `ul-modal-body-${Math.random().toString(36).slice(2, 11)}`;
|
|
2700
|
+
close() {
|
|
2701
|
+
this.open.set(false);
|
|
2702
|
+
this.closed.emit();
|
|
2703
|
+
}
|
|
2704
|
+
onConfirm() {
|
|
2705
|
+
if (!this.isConfirmation()) {
|
|
2706
|
+
return;
|
|
2707
|
+
}
|
|
2708
|
+
this.confirmed.emit();
|
|
2709
|
+
this.close();
|
|
2710
|
+
}
|
|
2711
|
+
onCancel() {
|
|
2712
|
+
if (!this.isConfirmation()) {
|
|
2713
|
+
return;
|
|
2714
|
+
}
|
|
2715
|
+
this.cancelled.emit();
|
|
2716
|
+
this.close();
|
|
2717
|
+
}
|
|
2718
|
+
onBackdropClick(event) {
|
|
2719
|
+
if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
|
|
2720
|
+
this.close();
|
|
2721
|
+
}
|
|
2722
|
+
}
|
|
2723
|
+
onEscape() {
|
|
2724
|
+
if (this.open()) {
|
|
2725
|
+
this.close();
|
|
2726
|
+
}
|
|
2727
|
+
}
|
|
2728
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2729
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ModalComponent, isStandalone: true, selector: "ul-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, fullScreenInMobile: { classPropertyName: "fullScreenInMobile", publicName: "fullScreenInMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "@if (open()) {\n <div\n class=\"ul-modal ul-modal--backdrop\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"bodyId\"\n (click)=\"onBackdropClick($event)\"\n >\n <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n @if (modalTitle() || showCloseButton()) {\n <header class=\"ul-modal__header\">\n @if (modalTitle()) {\n <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Close\"\n class=\"ul-modal__close\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n </header>\n }\n <div class=\"ul-modal__body\" [id]=\"bodyId\">\n @if (isSuccess() || isError()) {\n <div class=\"ul-modal__status\" aria-hidden=\"true\">\n <ul-icon\n class=\"ul-modal__status-icon\"\n [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n size=\"16\"\n />\n </div>\n }\n <ng-content />\n </div>\n <div class=\"ul-modal__footer\">\n @if (isConfirmation()) {\n <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n {{ confirmLabel() }}\n </ul-button>\n } @else {\n <ng-content select=\"[ul-modal-footer]\" />\n }\n </div>\n </div>\n </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2730
|
+
}
|
|
2731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2732
|
+
type: Component,
|
|
2733
|
+
args: [{ selector: 'ul-modal', imports: [CdkTrapFocus, ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
2734
|
+
'[attr.aria-hidden]': '!open()',
|
|
2735
|
+
}, template: "@if (open()) {\n <div\n class=\"ul-modal ul-modal--backdrop\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"bodyId\"\n (click)=\"onBackdropClick($event)\"\n >\n <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n @if (modalTitle() || showCloseButton()) {\n <header class=\"ul-modal__header\">\n @if (modalTitle()) {\n <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Close\"\n class=\"ul-modal__close\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n </header>\n }\n <div class=\"ul-modal__body\" [id]=\"bodyId\">\n @if (isSuccess() || isError()) {\n <div class=\"ul-modal__status\" aria-hidden=\"true\">\n <ul-icon\n class=\"ul-modal__status-icon\"\n [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n size=\"16\"\n />\n </div>\n }\n <ng-content />\n </div>\n <div class=\"ul-modal__footer\">\n @if (isConfirmation()) {\n <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n {{ confirmLabel() }}\n </ul-button>\n } @else {\n <ng-content select=\"[ul-modal-footer]\" />\n }\n </div>\n </div>\n </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"] }]
|
|
2736
|
+
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], fullScreenInMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreenInMobile", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], onEscape: [{
|
|
2737
|
+
type: HostListener,
|
|
2738
|
+
args: ['document:keydown.escape']
|
|
2739
|
+
}] } });
|
|
2740
|
+
|
|
2741
|
+
// Matches $spacing-spacing-60 (240px) — the longer side of the fixed crop
|
|
2742
|
+
// frame used in locked-aspect-ratio mode. Kept as a plain constant since
|
|
2743
|
+
// ngx-image-cropper's inputs take numbers, not Sass tokens.
|
|
2744
|
+
const FRAME_MAX_DIMENSION = 240;
|
|
2745
|
+
const DEFAULT_MAX_OUTPUT_SIZE = 1024;
|
|
2746
|
+
const MIN_ZOOM = 1;
|
|
2747
|
+
const MAX_ZOOM = 3;
|
|
2748
|
+
const ZOOM_STEP = 0.01;
|
|
2749
|
+
/**
|
|
2750
|
+
* Modal flow for cropping/resizing a photo. Wraps ngx-image-cropper so the
|
|
2751
|
+
* third-party crop mechanics never leak outside the design system —
|
|
2752
|
+
* consumers only ever see `ul-image-cropper`.
|
|
2753
|
+
*
|
|
2754
|
+
* Two interaction modes, chosen by whether `aspectRatio` is set:
|
|
2755
|
+
* - **Locked** (`aspectRatio` given, e.g. `1` for an avatar): a fixed-size
|
|
2756
|
+
* frame; the user drags/zooms the photo underneath it. Best when every
|
|
2757
|
+
* output needs the same ratio (avatars, thumbnails).
|
|
2758
|
+
* - **Free-form** (`aspectRatio` omitted, the default): a resizable frame
|
|
2759
|
+
* over a static photo; the user drags its corners to trim/straighten with
|
|
2760
|
+
* no ratio imposed. Best for listing photos, which keep their own shape
|
|
2761
|
+
* today (see `um-image-upload`'s auto-width carousel).
|
|
2762
|
+
*
|
|
2763
|
+
* Emits a resized `File`, ready to hand to any upload call that accepts
|
|
2764
|
+
* one — this component only produces the file, it never uploads it.
|
|
2765
|
+
*
|
|
2766
|
+
* @example Locked 1:1 round (avatar)
|
|
2767
|
+
* <ul-image-cropper
|
|
2768
|
+
* [(open)]="showCropper"
|
|
2769
|
+
* [imageFile]="selectedFile"
|
|
2770
|
+
* shape="round"
|
|
2771
|
+
* [aspectRatio]="1"
|
|
2772
|
+
* [maxOutputSize]="512"
|
|
2773
|
+
* (cropped)="onCropped($event)"
|
|
2774
|
+
* />
|
|
2775
|
+
*
|
|
2776
|
+
* @example Free-form rectangle (listing photo)
|
|
2777
|
+
* <ul-image-cropper
|
|
2778
|
+
* [(open)]="showCropper"
|
|
2779
|
+
* [imageFile]="selectedFile"
|
|
2780
|
+
* [maxOutputSize]="1920"
|
|
2781
|
+
* (cropped)="onCropped($event)"
|
|
2782
|
+
* />
|
|
2783
|
+
*/
|
|
2784
|
+
class ImageCropperComponent {
|
|
2785
|
+
/** Whether the crop modal is open. Supports two-way binding with [(open)]. */
|
|
2786
|
+
open = model(false, /* @ts-ignore */
|
|
2787
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2788
|
+
/** The source photo to crop. Required for the modal to render its content. */
|
|
2789
|
+
imageFile = input(null, /* @ts-ignore */
|
|
2790
|
+
...(ngDevMode ? [{ debugName: "imageFile" }] : /* istanbul ignore next */ []));
|
|
2791
|
+
/** Visual shape of the crop mask. */
|
|
2792
|
+
shape = input('rectangle', /* @ts-ignore */
|
|
2793
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
2794
|
+
/**
|
|
2795
|
+
* Locks the crop frame to this width/height ratio and switches to
|
|
2796
|
+
* pan-and-zoom mode. Omit (or pass null) for a free-form resizable frame
|
|
2797
|
+
* with no ratio imposed.
|
|
2798
|
+
*/
|
|
2799
|
+
aspectRatio = input(null, /* @ts-ignore */
|
|
2800
|
+
...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
|
|
2801
|
+
/** Longest side (px) of the final output image; scales down without distorting. */
|
|
2802
|
+
maxOutputSize = input(DEFAULT_MAX_OUTPUT_SIZE, /* @ts-ignore */
|
|
2803
|
+
...(ngDevMode ? [{ debugName: "maxOutputSize" }] : /* istanbul ignore next */ []));
|
|
2804
|
+
/** Title shown in the modal header. */
|
|
2805
|
+
title = input('Adjust photo', /* @ts-ignore */
|
|
2806
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2807
|
+
/** Label for the confirm button. */
|
|
2808
|
+
confirmLabel = input('Save', /* @ts-ignore */
|
|
2809
|
+
...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
|
|
2810
|
+
/** Label for the cancel button. */
|
|
2811
|
+
cancelLabel = input('Cancel', /* @ts-ignore */
|
|
2812
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2813
|
+
/** Label next to the zoom slider (locked-aspect mode only). */
|
|
2814
|
+
zoomLabel = input('Zoom', /* @ts-ignore */
|
|
2815
|
+
...(ngDevMode ? [{ debugName: "zoomLabel" }] : /* istanbul ignore next */ []));
|
|
2816
|
+
/** Accessible label for the crop frame. */
|
|
2817
|
+
frameAriaLabel = input('Crop frame', /* @ts-ignore */
|
|
2818
|
+
...(ngDevMode ? [{ debugName: "frameAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2819
|
+
/** Emitted with the cropped, resized photo once the user confirms. */
|
|
2820
|
+
cropped = output();
|
|
2821
|
+
/** Emitted when the user cancels or dismisses the modal without cropping. */
|
|
2822
|
+
cancelled = output();
|
|
2823
|
+
/** Emitted when the source photo fails to load in the cropper. */
|
|
2824
|
+
loadFailed = output();
|
|
2825
|
+
cropperRef = viewChild(ImageCropperComponent$1, /* @ts-ignore */
|
|
2826
|
+
...(ngDevMode ? [{ debugName: "cropperRef" }] : /* istanbul ignore next */ []));
|
|
2827
|
+
cropperImageFile = computed(() => this.imageFile() ?? undefined, /* @ts-ignore */
|
|
2828
|
+
...(ngDevMode ? [{ debugName: "cropperImageFile" }] : /* istanbul ignore next */ []));
|
|
2829
|
+
isRound = computed(() => this.shape() === 'round', /* @ts-ignore */
|
|
2830
|
+
...(ngDevMode ? [{ debugName: "isRound" }] : /* istanbul ignore next */ []));
|
|
2831
|
+
isLocked = computed(() => this.aspectRatio() != null, /* @ts-ignore */
|
|
2832
|
+
...(ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []));
|
|
2833
|
+
/** ngx-image-cropper always wants a number here; unused while isLocked() is false. */
|
|
2834
|
+
effectiveAspectRatio = computed(() => this.aspectRatio() ?? 1, /* @ts-ignore */
|
|
2835
|
+
...(ngDevMode ? [{ debugName: "effectiveAspectRatio" }] : /* istanbul ignore next */ []));
|
|
2836
|
+
// Longer side stays at FRAME_MAX_DIMENSION; the other side is derived from
|
|
2837
|
+
// the ratio, so non-square locked ratios (e.g. 4:3) get a proportional
|
|
2838
|
+
// frame instead of a squashed 240x240 one.
|
|
2839
|
+
frameWidth = computed(() => {
|
|
2840
|
+
if (!this.isLocked())
|
|
2841
|
+
return undefined;
|
|
2842
|
+
const ratio = this.effectiveAspectRatio();
|
|
2843
|
+
return ratio >= 1 ? FRAME_MAX_DIMENSION : FRAME_MAX_DIMENSION * ratio;
|
|
2844
|
+
}, /* @ts-ignore */
|
|
2845
|
+
...(ngDevMode ? [{ debugName: "frameWidth" }] : /* istanbul ignore next */ []));
|
|
2846
|
+
frameHeight = computed(() => {
|
|
2847
|
+
if (!this.isLocked())
|
|
2848
|
+
return undefined;
|
|
2849
|
+
const ratio = this.effectiveAspectRatio();
|
|
2850
|
+
return ratio >= 1 ? FRAME_MAX_DIMENSION / ratio : FRAME_MAX_DIMENSION;
|
|
2851
|
+
}, /* @ts-ignore */
|
|
2852
|
+
...(ngDevMode ? [{ debugName: "frameHeight" }] : /* istanbul ignore next */ []));
|
|
2853
|
+
minZoom = MIN_ZOOM;
|
|
2854
|
+
maxZoom = MAX_ZOOM;
|
|
2855
|
+
zoomStep = ZOOM_STEP;
|
|
2856
|
+
zoom = signal(MIN_ZOOM, /* @ts-ignore */
|
|
2857
|
+
...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
|
|
2858
|
+
transform = computed(() => ({ scale: this.zoom() }), /* @ts-ignore */
|
|
2859
|
+
...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
|
|
2860
|
+
cropperReady = signal(false, /* @ts-ignore */
|
|
2861
|
+
...(ngDevMode ? [{ debugName: "cropperReady" }] : /* istanbul ignore next */ []));
|
|
2862
|
+
constructor() {
|
|
2863
|
+
// A fresh file (new selection, or re-opening for a retry) always starts
|
|
2864
|
+
// from a neutral zoom rather than carrying over the previous session's,
|
|
2865
|
+
// and isn't croppable again until ngx-image-cropper reports it loaded.
|
|
2866
|
+
effect(() => {
|
|
2867
|
+
this.imageFile();
|
|
2868
|
+
this.zoom.set(MIN_ZOOM);
|
|
2869
|
+
this.cropperReady.set(false);
|
|
2870
|
+
});
|
|
2871
|
+
}
|
|
2872
|
+
onZoomInput(event) {
|
|
2873
|
+
this.zoom.set(event.target.valueAsNumber);
|
|
2874
|
+
}
|
|
2875
|
+
async onConfirm() {
|
|
2876
|
+
const croppedEvent = await this.cropperRef()?.crop('blob');
|
|
2877
|
+
const blob = croppedEvent?.blob;
|
|
2878
|
+
if (!blob)
|
|
2879
|
+
return;
|
|
2880
|
+
this.cropped.emit(new File([blob], 'photo.jpg', { type: blob.type }));
|
|
2881
|
+
this.open.set(false);
|
|
2882
|
+
}
|
|
2883
|
+
onCancel() {
|
|
2884
|
+
this.cancelled.emit();
|
|
2885
|
+
this.open.set(false);
|
|
2886
|
+
}
|
|
2887
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ImageCropperComponent, isStandalone: true, selector: "ul-image-cropper", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, imageFile: { classPropertyName: "imageFile", publicName: "imageFile", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxOutputSize: { classPropertyName: "maxOutputSize", publicName: "maxOutputSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, zoomLabel: { classPropertyName: "zoomLabel", publicName: "zoomLabel", isSignal: true, isRequired: false, transformFunction: null }, frameAriaLabel: { classPropertyName: "frameAriaLabel", publicName: "frameAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", cropped: "cropped", cancelled: "cancelled", loadFailed: "loadFailed" }, viewQueries: [{ propertyName: "cropperRef", first: true, predicate: ImageCropperComponent$1, descendants: true, isSignal: true }], ngImport: i0, template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onCancel()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <image-cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"cropperReady.set(true)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div ul-modal-footer>\n <ul-button theme=\"ghost-white\" size=\"md\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}\n"], dependencies: [{ kind: "component", type: ImageCropperComponent$1, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: ModalComponent, selector: "ul-modal", inputs: ["open", "variant", "title", "closeOnBackdropClick", "showCloseButton", "confirmLabel", "cancelLabel", "customClass", "fullScreenInMobile"], outputs: ["openChange", "closed", "confirmed", "cancelled"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
2889
|
+
}
|
|
2890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
2891
|
+
type: Component,
|
|
2892
|
+
args: [{ selector: 'ul-image-cropper', imports: [ImageCropperComponent$1, ModalComponent, ButtonComponent], template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onCancel()\">\n @if (imageFile()) {\n <div class=\"ul-image-cropper\">\n <image-cropper\n class=\"ul-image-cropper__frame\"\n [imageFile]=\"cropperImageFile()\"\n [maintainAspectRatio]=\"isLocked()\"\n [aspectRatio]=\"effectiveAspectRatio()\"\n [roundCropper]=\"isRound()\"\n [cropperStaticWidth]=\"frameWidth()\"\n [cropperStaticHeight]=\"frameHeight()\"\n [allowMoveImage]=\"isLocked()\"\n [transform]=\"transform()\"\n [resizeToWidth]=\"maxOutputSize()\"\n [resizeToHeight]=\"maxOutputSize()\"\n [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n format=\"jpeg\"\n output=\"blob\"\n (cropperReady)=\"cropperReady.set(true)\"\n (loadImageFailed)=\"loadFailed.emit()\"\n />\n\n @if (isLocked()) {\n <label class=\"ul-image-cropper__zoom\">\n <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n <input\n type=\"range\"\n class=\"ul-image-cropper__zoom-input\"\n [min]=\"minZoom\"\n [max]=\"maxZoom\"\n [step]=\"zoomStep\"\n [value]=\"zoom()\"\n (input)=\"onZoomInput($event)\"\n />\n </label>\n }\n </div>\n }\n\n <div ul-modal-footer>\n <ul-button theme=\"ghost-white\" size=\"md\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button\n theme=\"fill-purple\"\n size=\"md\"\n [disabled]=\"!cropperReady()\"\n (buttonClick)=\"onConfirm()\"\n >\n {{ confirmLabel() }}\n </ul-button>\n </div>\n</ul-modal>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}\n"] }]
|
|
2893
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], imageFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFile", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxOutputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOutputSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], zoomLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomLabel", required: false }] }], frameAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameAriaLabel", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], loadFailed: [{ type: i0.Output, args: ["loadFailed"] }], cropperRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ImageCropperComponent$1), { isSignal: true }] }] } });
|
|
2894
|
+
|
|
2636
2895
|
/**
|
|
2637
2896
|
* A reusable input component that follows UDS design system guidelines.
|
|
2638
2897
|
* Implements FormValueControl for use with Signal Forms [formField] directive.
|
|
@@ -2945,109 +3204,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
2945
3204
|
args: [{ selector: 'ul-menu', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-menu ul-list-item .ul-list-item{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"] }]
|
|
2946
3205
|
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerLeftIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLeftIcons", required: false }] }], triggerRightIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRightIcons", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuTriggerComponent), { isSignal: true }] }] } });
|
|
2947
3206
|
|
|
2948
|
-
class ModalComponent {
|
|
2949
|
-
/** Whether the modal is open. Supports two-way binding with [(open)]. */
|
|
2950
|
-
open = model(false, /* @ts-ignore */
|
|
2951
|
-
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2952
|
-
/** Visual variant: default, success, error, custom, or bottom-sheet (mobile-only layout). */
|
|
2953
|
-
variant = input('default', /* @ts-ignore */
|
|
2954
|
-
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2955
|
-
/** Optional title shown in the header. */
|
|
2956
|
-
title = input(undefined, /* @ts-ignore */
|
|
2957
|
-
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2958
|
-
/** Whether clicking the backdrop closes the modal. */
|
|
2959
|
-
closeOnBackdropClick = input(true, /* @ts-ignore */
|
|
2960
|
-
...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
|
|
2961
|
-
/** Whether to show the close button in the header. */
|
|
2962
|
-
showCloseButton = input(true, /* @ts-ignore */
|
|
2963
|
-
...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
|
|
2964
|
-
/** Label for the primary confirm action in the confirmation variant. */
|
|
2965
|
-
confirmLabel = input('Confirm', /* @ts-ignore */
|
|
2966
|
-
...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
|
|
2967
|
-
/** Label for the secondary cancel action in the confirmation variant. */
|
|
2968
|
-
cancelLabel = input('Cancel', /* @ts-ignore */
|
|
2969
|
-
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2970
|
-
/** Optional CSS class for the panel (e.g. for custom variant). */
|
|
2971
|
-
customClass = input(undefined, /* @ts-ignore */
|
|
2972
|
-
...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
|
|
2973
|
-
/**
|
|
2974
|
-
* Below the phone breakpoint, fills the entire viewport edge-to-edge (no
|
|
2975
|
-
* margin, no rounded corners, no visible backdrop) instead of the default
|
|
2976
|
-
* bottom-pinned sheet every variant otherwise gets there. Has no effect
|
|
2977
|
-
* above that breakpoint — desktop/tablet layout is unchanged either way.
|
|
2978
|
-
*/
|
|
2979
|
-
fullScreenInMobile = input(false, /* @ts-ignore */
|
|
2980
|
-
...(ngDevMode ? [{ debugName: "fullScreenInMobile" }] : /* istanbul ignore next */ []));
|
|
2981
|
-
/** Emitted when the modal is closed (button, backdrop, or escape). */
|
|
2982
|
-
closed = output();
|
|
2983
|
-
/** Emitted when the user confirms in the confirmation variant. */
|
|
2984
|
-
confirmed = output();
|
|
2985
|
-
/** Emitted when the user cancels in the confirmation variant. */
|
|
2986
|
-
cancelled = output();
|
|
2987
|
-
panelClass = computed(() => {
|
|
2988
|
-
const variant = this.variant();
|
|
2989
|
-
const custom = this.customClass();
|
|
2990
|
-
const classes = ['ul-modal__panel', `ul-modal__panel--${variant}`];
|
|
2991
|
-
if (this.fullScreenInMobile()) {
|
|
2992
|
-
classes.push('ul-modal__panel--fullscreen-mobile');
|
|
2993
|
-
}
|
|
2994
|
-
if (custom) {
|
|
2995
|
-
classes.push(custom);
|
|
2996
|
-
}
|
|
2997
|
-
return classes.join(' ');
|
|
2998
|
-
}, /* @ts-ignore */
|
|
2999
|
-
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
3000
|
-
isConfirmation = computed(() => this.variant() === 'confirmation', /* @ts-ignore */
|
|
3001
|
-
...(ngDevMode ? [{ debugName: "isConfirmation" }] : /* istanbul ignore next */ []));
|
|
3002
|
-
isSuccess = computed(() => this.variant() === 'success', /* @ts-ignore */
|
|
3003
|
-
...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
|
|
3004
|
-
isError = computed(() => this.variant() === 'error', /* @ts-ignore */
|
|
3005
|
-
...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
3006
|
-
modalTitle = computed(() => (this.isSuccess() || this.isError() ? '' : this.title()), /* @ts-ignore */
|
|
3007
|
-
...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
|
|
3008
|
-
titleId = `ul-modal-title-${Math.random().toString(36).slice(2, 11)}`;
|
|
3009
|
-
bodyId = `ul-modal-body-${Math.random().toString(36).slice(2, 11)}`;
|
|
3010
|
-
close() {
|
|
3011
|
-
this.open.set(false);
|
|
3012
|
-
this.closed.emit();
|
|
3013
|
-
}
|
|
3014
|
-
onConfirm() {
|
|
3015
|
-
if (!this.isConfirmation()) {
|
|
3016
|
-
return;
|
|
3017
|
-
}
|
|
3018
|
-
this.confirmed.emit();
|
|
3019
|
-
this.close();
|
|
3020
|
-
}
|
|
3021
|
-
onCancel() {
|
|
3022
|
-
if (!this.isConfirmation()) {
|
|
3023
|
-
return;
|
|
3024
|
-
}
|
|
3025
|
-
this.cancelled.emit();
|
|
3026
|
-
this.close();
|
|
3027
|
-
}
|
|
3028
|
-
onBackdropClick(event) {
|
|
3029
|
-
if (this.closeOnBackdropClick() && event.target === event.currentTarget) {
|
|
3030
|
-
this.close();
|
|
3031
|
-
}
|
|
3032
|
-
}
|
|
3033
|
-
onEscape() {
|
|
3034
|
-
if (this.open()) {
|
|
3035
|
-
this.close();
|
|
3036
|
-
}
|
|
3037
|
-
}
|
|
3038
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ModalComponent, isStandalone: true, selector: "ul-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, fullScreenInMobile: { classPropertyName: "fullScreenInMobile", publicName: "fullScreenInMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "@if (open()) {\n <div\n class=\"ul-modal ul-modal--backdrop\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"bodyId\"\n (click)=\"onBackdropClick($event)\"\n >\n <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n @if (modalTitle() || showCloseButton()) {\n <header class=\"ul-modal__header\">\n @if (modalTitle()) {\n <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Close\"\n class=\"ul-modal__close\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n </header>\n }\n <div class=\"ul-modal__body\" [id]=\"bodyId\">\n @if (isSuccess() || isError()) {\n <div class=\"ul-modal__status\" aria-hidden=\"true\">\n <ul-icon\n class=\"ul-modal__status-icon\"\n [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n size=\"16\"\n />\n </div>\n }\n <ng-content />\n </div>\n <div class=\"ul-modal__footer\">\n @if (isConfirmation()) {\n <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n {{ confirmLabel() }}\n </ul-button>\n } @else {\n <ng-content select=\"[ul-modal-footer]\" />\n }\n </div>\n </div>\n </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3040
|
-
}
|
|
3041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, decorators: [{
|
|
3042
|
-
type: Component,
|
|
3043
|
-
args: [{ selector: 'ul-modal', imports: [CdkTrapFocus, ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3044
|
-
'[attr.aria-hidden]': '!open()',
|
|
3045
|
-
}, template: "@if (open()) {\n <div\n class=\"ul-modal ul-modal--backdrop\"\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"bodyId\"\n (click)=\"onBackdropClick($event)\"\n >\n <div [class]=\"panelClass()\" cdkTrapFocus (click)=\"$event.stopPropagation()\">\n @if (modalTitle() || showCloseButton()) {\n <header class=\"ul-modal__header\">\n @if (modalTitle()) {\n <h2 [id]=\"titleId\" class=\"ul-modal__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Close\"\n class=\"ul-modal__close\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n </header>\n }\n <div class=\"ul-modal__body\" [id]=\"bodyId\">\n @if (isSuccess() || isError()) {\n <div class=\"ul-modal__status\" aria-hidden=\"true\">\n <ul-icon\n class=\"ul-modal__status-icon\"\n [icon]=\"isSuccess() ? 'check_circle' : 'cross_circle'\"\n size=\"16\"\n />\n </div>\n }\n <ng-content />\n </div>\n <div class=\"ul-modal__footer\">\n @if (isConfirmation()) {\n <ul-button theme=\"ghost-white\" (buttonClick)=\"onCancel()\">\n {{ cancelLabel() }}\n </ul-button>\n <ul-button theme=\"fill-purple\" (buttonClick)=\"onConfirm()\">\n {{ confirmLabel() }}\n </ul-button>\n } @else {\n <ng-content select=\"[ul-modal-footer]\" />\n }\n </div>\n </div>\n </div>\n}\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-modal--backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#000000b3;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.ul-modal__panel{position:relative;display:flex;flex-direction:column;max-height:calc(100% - 32px);overflow:auto;border-radius:16px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);background-color:#0a0a0a;padding:24px;border:1px solid rgba(255,255,255,.1)}.ul-modal__panel--confirmation{border:1px solid rgba(255,255,255,.1)}@media(max-width:767px){.ul-modal__panel--success{border:1px solid #7edc96}.ul-modal__panel--error{border:1px solid #f69d9d}}.ul-modal__panel--custom,.ul-modal__panel--bottom-sheet{border:1px solid rgba(255,255,255,.1)}.ul-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-shrink:0}.ul-modal__title{margin:0;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800;color:#fff}.ul-modal__status{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.ul-modal__status-icon{flex-shrink:0}.ul-modal__close{flex-shrink:0;margin-left:auto}.ul-modal__body{flex:1 1 auto;min-height:0;color:#ffffffb3}.ul-modal__panel--success .ul-modal__status-icon{color:#7edc96}.ul-modal__panel--error .ul-modal__status-icon{color:#f69d9d}.ul-modal__panel--success .ul-modal__body,.ul-modal__panel--error .ul-modal__body{text-align:center;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}@media(min-width:768px){.ul-modal--backdrop{padding:24px}.ul-modal__panel{width:100%;max-width:512px}}@media(max-width:767px){.ul-modal--backdrop{align-items:flex-end;padding:0}.ul-modal__panel{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:calc(100dvh - 32px);margin-top:auto;border-bottom:none}.ul-modal__panel--bottom-sheet{border-bottom:none}.ul-modal__panel--fullscreen-mobile{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:none}}.ul-modal__footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;flex-shrink:0;justify-content:flex-end}\n"] }]
|
|
3046
|
-
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], fullScreenInMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreenInMobile", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], onEscape: [{
|
|
3047
|
-
type: HostListener,
|
|
3048
|
-
args: ['document:keydown.escape']
|
|
3049
|
-
}] } });
|
|
3050
|
-
|
|
3051
3207
|
/** Place on the element projected into [ul-navbar-logo] so the navbar can detect logo content. */
|
|
3052
3208
|
class NavbarLogoSlotDirective {
|
|
3053
3209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NavbarLogoSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -4887,5 +5043,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4887
5043
|
* Generated bundle index. Do not edit.
|
|
4888
5044
|
*/
|
|
4889
5045
|
|
|
4890
|
-
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
5046
|
+
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4891
5047
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|