@underlayerdev/ui 0.9.1 → 0.9.2
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.
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
@use './values' as *;
|
|
2
|
+
|
|
3
|
+
// Common container styles
|
|
4
|
+
@mixin container-base {
|
|
5
|
+
width: 100%;
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Container Fluid
|
|
12
|
+
@mixin container-fluid {
|
|
13
|
+
@include container-base;
|
|
14
|
+
padding-left: $spacing-spacing-4;
|
|
15
|
+
padding-right: $spacing-spacing-4;
|
|
16
|
+
|
|
17
|
+
@media (min-width: $breakpoint-md) {
|
|
18
|
+
padding-left: $spacing-spacing-8;
|
|
19
|
+
padding-right: $spacing-spacing-8;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Container Gallery
|
|
24
|
+
@mixin container-gallery {
|
|
25
|
+
@include container-base;
|
|
26
|
+
padding-left: $spacing-spacing-8;
|
|
27
|
+
padding-right: $spacing-spacing-8;
|
|
28
|
+
|
|
29
|
+
@media (min-width: $breakpoint-md) {
|
|
30
|
+
padding-left: $spacing-spacing-16;
|
|
31
|
+
padding-right: $spacing-spacing-16;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (min-width: $breakpoint-xl) {
|
|
35
|
+
&.content {
|
|
36
|
+
max-width: 2176px;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Container Product
|
|
42
|
+
@mixin container-product {
|
|
43
|
+
@include container-base;
|
|
44
|
+
padding-left: $spacing-spacing-8;
|
|
45
|
+
padding-right: $spacing-spacing-8;
|
|
46
|
+
|
|
47
|
+
@media (min-width: $breakpoint-md) {
|
|
48
|
+
padding-left: $spacing-spacing-16;
|
|
49
|
+
padding-right: $spacing-spacing-16;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@media (min-width: $breakpoint-xl) {
|
|
53
|
+
padding-left: $spacing-spacing-48;
|
|
54
|
+
padding-right: $spacing-spacing-48;
|
|
55
|
+
&.content {
|
|
56
|
+
max-width: 1920px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Container Form
|
|
62
|
+
@mixin container-form {
|
|
63
|
+
@include container-base;
|
|
64
|
+
padding-left: $spacing-spacing-8;
|
|
65
|
+
padding-right: $spacing-spacing-8;
|
|
66
|
+
|
|
67
|
+
@media (min-width: $breakpoint-md) {
|
|
68
|
+
padding-left: $spacing-spacing-16;
|
|
69
|
+
padding-right: $spacing-spacing-16;
|
|
70
|
+
&.content {
|
|
71
|
+
max-width: 960px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (min-width: $breakpoint-xl) {
|
|
76
|
+
padding-left: $spacing-spacing-48;
|
|
77
|
+
padding-right: $spacing-spacing-48;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Public Sass entry point for @underlayerdev/ui container mixins.
|
|
3
|
+
*
|
|
4
|
+
* Consuming apps can import this via the `pkg:` importer to compose their
|
|
5
|
+
* own responsive container (e.g. fluid on mobile, product on desktop)
|
|
6
|
+
* instead of duplicating the padding scale by hand:
|
|
7
|
+
*
|
|
8
|
+
* @use 'pkg:@underlayerdev/ui/containers' as containers;
|
|
9
|
+
* @use 'pkg:@underlayerdev/ui/breakpoints' as bp;
|
|
10
|
+
*
|
|
11
|
+
* .my-page {
|
|
12
|
+
* @include containers.container-fluid;
|
|
13
|
+
*
|
|
14
|
+
* @include bp.up('md') {
|
|
15
|
+
* @include containers.container-product;
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
*
|
|
19
|
+
* Requires Dart Sass with the Node package importer enabled (supported by
|
|
20
|
+
* @angular/build out of the box since Angular CLI 20+).
|
|
21
|
+
*/
|
|
22
|
+
@forward './containers';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Keep in sync with design-tokens/_variables.scss $breakpoint-*/$spacing-spacing-*.
|
|
2
|
+
//
|
|
3
|
+
// Duplicated (not imported from ../core / ../design-tokens) so the
|
|
4
|
+
// published `./containers` package export stays self-contained: Node's
|
|
5
|
+
// package "exports" boundaries block relative imports that cross from one
|
|
6
|
+
// exported subpath into a different one, so this file can't reach outside
|
|
7
|
+
// its own foundations/containers/ directory once published.
|
|
8
|
+
$breakpoint-md: 1024px !default;
|
|
9
|
+
$breakpoint-xl: 1600px !default;
|
|
10
|
+
|
|
11
|
+
$spacing-spacing-4: 16px !default;
|
|
12
|
+
$spacing-spacing-8: 32px !default;
|
|
13
|
+
$spacing-spacing-16: 64px !default;
|
|
14
|
+
$spacing-spacing-48: 192px !default;
|
|
@@ -3036,13 +3036,13 @@ class ModalComponent {
|
|
|
3036
3036
|
}
|
|
3037
3037
|
}
|
|
3038
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:#
|
|
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
3040
|
}
|
|
3041
3041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ModalComponent, decorators: [{
|
|
3042
3042
|
type: Component,
|
|
3043
3043
|
args: [{ selector: 'ul-modal', imports: [CdkTrapFocus, ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3044
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:#
|
|
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
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
3047
|
type: HostListener,
|
|
3048
3048
|
args: ['document:keydown.escape']
|
|
@@ -3929,7 +3929,7 @@ class SearchInputComponent {
|
|
|
3929
3929
|
...(ngDevMode ? [{ debugName: "activeList" }] : /* istanbul ignore next */ []));
|
|
3930
3930
|
activeListLabel = computed(() => this.hasQuery() ? null : this.suggestionsLabel(), /* @ts-ignore */
|
|
3931
3931
|
...(ngDevMode ? [{ debugName: "activeListLabel" }] : /* istanbul ignore next */ []));
|
|
3932
|
-
hasCustomResults = computed(() =>
|
|
3932
|
+
hasCustomResults = computed(() => !!this.resultsTemplate(), /* @ts-ignore */
|
|
3933
3933
|
...(ngDevMode ? [{ debugName: "hasCustomResults" }] : /* istanbul ignore next */ []));
|
|
3934
3934
|
shouldShowPanel = computed(() => this.combobox.isOpen() && (this.activeList().length > 0 || this.hasCustomResults()), /* @ts-ignore */
|
|
3935
3935
|
...(ngDevMode ? [{ debugName: "shouldShowPanel" }] : /* istanbul ignore next */ []));
|