@underlayerdev/ui 0.9.0 → 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']
|
|
@@ -3887,6 +3887,17 @@ class SearchInputComponent {
|
|
|
3887
3887
|
/** Shown once the query is non-empty — e.g. live search results. The consumer computes/fetches these as `value` changes (via `[(value)]`/`valueChange`). */
|
|
3888
3888
|
results = input([], /* @ts-ignore */
|
|
3889
3889
|
...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
|
|
3890
|
+
/**
|
|
3891
|
+
* Overrides `results` once the query is non-empty, projecting arbitrary
|
|
3892
|
+
* content (e.g. rich cards with images/prices) instead of the built-in
|
|
3893
|
+
* plain-text rows. `suggestions` (shown while the query is empty) are
|
|
3894
|
+
* unaffected and keep rendering as plain `SearchSuggestion` rows regardless.
|
|
3895
|
+
* When set, arrow-key/Enter option-highlighting is skipped — Enter always
|
|
3896
|
+
* falls through to `searchSubmit` since the projected content owns its own
|
|
3897
|
+
* selection interaction.
|
|
3898
|
+
*/
|
|
3899
|
+
resultsTemplate = input(null, /* @ts-ignore */
|
|
3900
|
+
...(ngDevMode ? [{ debugName: "resultsTemplate" }] : /* istanbul ignore next */ []));
|
|
3890
3901
|
invalid = input(false, /* @ts-ignore */
|
|
3891
3902
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3892
3903
|
errors = input([], /* @ts-ignore */
|
|
@@ -3918,11 +3929,13 @@ class SearchInputComponent {
|
|
|
3918
3929
|
...(ngDevMode ? [{ debugName: "activeList" }] : /* istanbul ignore next */ []));
|
|
3919
3930
|
activeListLabel = computed(() => this.hasQuery() ? null : this.suggestionsLabel(), /* @ts-ignore */
|
|
3920
3931
|
...(ngDevMode ? [{ debugName: "activeListLabel" }] : /* istanbul ignore next */ []));
|
|
3921
|
-
|
|
3932
|
+
hasCustomResults = computed(() => !!this.resultsTemplate(), /* @ts-ignore */
|
|
3933
|
+
...(ngDevMode ? [{ debugName: "hasCustomResults" }] : /* istanbul ignore next */ []));
|
|
3934
|
+
shouldShowPanel = computed(() => this.combobox.isOpen() && (this.activeList().length > 0 || this.hasCustomResults()), /* @ts-ignore */
|
|
3922
3935
|
...(ngDevMode ? [{ debugName: "shouldShowPanel" }] : /* istanbul ignore next */ []));
|
|
3923
3936
|
optionId = (index) => comboboxOptionId(this.ids.controlId, index);
|
|
3924
3937
|
activeDescendantId = computed(() => {
|
|
3925
|
-
if (!this.shouldShowPanel())
|
|
3938
|
+
if (!this.shouldShowPanel() || this.hasCustomResults())
|
|
3926
3939
|
return undefined;
|
|
3927
3940
|
return comboboxActiveDescendantId(this.ids.controlId, this.activeList().length, this.combobox.highlightedIndex());
|
|
3928
3941
|
}, /* @ts-ignore */
|
|
@@ -3974,7 +3987,7 @@ class SearchInputComponent {
|
|
|
3974
3987
|
this.searchSubmit.emit(this.value());
|
|
3975
3988
|
}
|
|
3976
3989
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3977
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SearchInputComponent, isStandalone: true, selector: "ul-search-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, suggestionsLabel: { classPropertyName: "suggestionsLabel", publicName: "suggestionsLabel", isSignal: true, isRequired: false, transformFunction: null }, results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", suggestionSelected: "suggestionSelected", searchSubmit: "searchSubmit" }, viewQueries: [{ propertyName: "mobileInput", first: true, predicate: ["mobileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resultsList>\n @if (activeListLabel()) {\n <div class=\"ul-search-input__list-label\" role=\"presentation\">{{ activeListLabel() }}</div>\n }\n @for (result of activeList(); track result.value; let i = $index) {\n <div\n class=\"ul-search-input__option\"\n [class.ul-search-input__option--highlighted]=\"combobox.highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === result.label\"\n (mousedown)=\"selectSuggestion(result)\"\n >\n <ul-list-item theme=\"ghost-white\" [hideFocusOutline]=\"true\">\n @if (result.icon) {\n <ng-container ul-list-item-before-label>\n <ul-icon size=\"5\" [icon]=\"result.icon\" />\n </ng-container>\n }\n <ng-container ul-list-item-label>{{ result.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n</ng-template>\n\n<div\n class=\"ul-search-input ul-search-input--{{ size() }}\"\n [class.ul-search-input--error]=\"hasError()\"\n [class.ul-search-input--disabled]=\"disabled()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"false\"\n />\n\n @if (isMobile()) {\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n [readOnly]=\"true\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n (click)=\"openMobileSearch()\"\n >\n <ng-container ul-input-right-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n <ul-modal [(open)]=\"combobox.isOpen\" [fullScreenInMobile]=\"true\" [showCloseButton]=\"false\">\n <div\n class=\"ul-search-input__combobox ul-search-input__combobox--takeover\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"ul-search-input__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"backLabel()\"\n (buttonClick)=\"closeMobileSearch()\"\n >\n <ul-icon icon=\"arrow_left\" size=\"6\" />\n </ul-button>\n\n <ul-input\n #mobileInput\n class=\"ul-search-input__field\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n </div>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-search-input__list--takeover ul-scrollable\"\n [id]=\"listId\"\n role=\"listbox\"\n [attr.aria-label]=\"activeListLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n </div>\n }\n </div>\n </ul-modal>\n } @else {\n <div\n class=\"ul-search-input__combobox\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n (inputFocus)=\"onInputFocus()\"\n (inputBlur)=\"onInputBlur()\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-scrollable\"\n [id]=\"listId\"\n role=\"listbox\"\n [attr.aria-label]=\"activeListLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n </div>\n }\n </div>\n }\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n [error]=\"hasError()\"\n />\n</div>\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-search-input{display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-input__combobox{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-input__combobox .ul-list-item:focus-visible,.ul-search-input__combobox .ul-list-item:focus{outline:none}.ul-search-input__combobox--takeover{height:100%}.ul-search-input__header{display:flex;align-items:center;flex-shrink:0;gap:8px;width:100%}.ul-search-input__field{flex:1;min-width:0}.ul-search-input__list{position:absolute;top:100%;left:0;right:0;z-index:1;display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin-top:4px;max-height:316px;overflow-y:auto;border:2px solid rgba(255,255,255,.1)}.ul-search-input__list--takeover{position:static;flex:1;min-height:0;margin-top:16px;max-height:none;padding:0;border:none;background-color:transparent}.ul-search-input__list-label{font-weight:400;color:#ffffffb3;padding:4px 8px}.ul-search-input__option{cursor:pointer;border-radius:8px}.ul-search-input__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-input--disabled .ul-search-input__combobox{opacity:.6;cursor:not-allowed}.ul-search-input--error .ul-input__group{border-color:#f69d9d}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "ul-input", inputs: ["type", "size", "appearance", "error", "disabled", "readOnly", "required", "showRequiredIndicator", "placeholder", "label", "helperText", "errorText", "maxLength", "minLength", "pattern", "step", "autocomplete", "controlId", "showPasswordLabel", "hidePasswordLabel", "invalid", "errors", "touched", "value"], outputs: ["touchedChange", "touch", "valueChange", "inputBlur", "inputFocus", "inputEnter"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { 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: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
3990
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SearchInputComponent, isStandalone: true, selector: "ul-search-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, suggestionsLabel: { classPropertyName: "suggestionsLabel", publicName: "suggestionsLabel", isSignal: true, isRequired: false, transformFunction: null }, results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, resultsTemplate: { classPropertyName: "resultsTemplate", publicName: "resultsTemplate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", suggestionSelected: "suggestionSelected", searchSubmit: "searchSubmit" }, viewQueries: [{ propertyName: "mobileInput", first: true, predicate: ["mobileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #resultsList>\n @if (activeListLabel()) {\n <div class=\"ul-search-input__list-label\" role=\"presentation\">{{ activeListLabel() }}</div>\n }\n @for (result of activeList(); track result.value; let i = $index) {\n <div\n class=\"ul-search-input__option\"\n [class.ul-search-input__option--highlighted]=\"combobox.highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === result.label\"\n (mousedown)=\"selectSuggestion(result)\"\n >\n <ul-list-item theme=\"ghost-white\" [hideFocusOutline]=\"true\">\n @if (result.icon) {\n <ng-container ul-list-item-before-label>\n <ul-icon size=\"5\" [icon]=\"result.icon\" />\n </ng-container>\n }\n <ng-container ul-list-item-label>{{ result.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n</ng-template>\n\n<div\n class=\"ul-search-input ul-search-input--{{ size() }}\"\n [class.ul-search-input--error]=\"hasError()\"\n [class.ul-search-input--disabled]=\"disabled()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"false\"\n />\n\n @if (isMobile()) {\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n [readOnly]=\"true\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n (click)=\"openMobileSearch()\"\n >\n <ng-container ul-input-right-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n <ul-modal [(open)]=\"combobox.isOpen\" [fullScreenInMobile]=\"true\" [showCloseButton]=\"false\">\n <div\n class=\"ul-search-input__combobox ul-search-input__combobox--takeover\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"ul-search-input__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"backLabel()\"\n (buttonClick)=\"closeMobileSearch()\"\n >\n <ul-icon icon=\"arrow_left\" size=\"6\" />\n </ul-button>\n\n <ul-input\n #mobileInput\n class=\"ul-search-input__field\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n </div>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-search-input__list--takeover ul-scrollable\"\n [id]=\"listId\"\n [attr.role]=\"hasCustomResults() ? null : 'listbox'\"\n [attr.aria-label]=\"hasCustomResults() ? null : activeListLabel()\"\n >\n @if (hasCustomResults()) {\n <ng-container *ngTemplateOutlet=\"resultsTemplate()!\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n }\n </div>\n }\n </div>\n </ul-modal>\n } @else {\n <div\n class=\"ul-search-input__combobox\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n (inputFocus)=\"onInputFocus()\"\n (inputBlur)=\"onInputBlur()\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-scrollable\"\n [id]=\"listId\"\n [attr.role]=\"hasCustomResults() ? null : 'listbox'\"\n [attr.aria-label]=\"hasCustomResults() ? null : activeListLabel()\"\n >\n @if (hasCustomResults()) {\n <ng-container *ngTemplateOutlet=\"resultsTemplate()!\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n }\n </div>\n }\n </div>\n }\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n [error]=\"hasError()\"\n />\n</div>\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-search-input{display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-input__combobox{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-input__combobox .ul-list-item:focus-visible,.ul-search-input__combobox .ul-list-item:focus{outline:none}.ul-search-input__combobox--takeover{height:100%}.ul-search-input__header{display:flex;align-items:center;flex-shrink:0;gap:8px;width:100%}.ul-search-input__field{flex:1;min-width:0}.ul-search-input__list{position:absolute;top:100%;left:0;right:0;z-index:1;display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin-top:4px;max-height:316px;overflow-y:auto;border:2px solid rgba(255,255,255,.1)}.ul-search-input__list--takeover{position:static;flex:1;min-height:0;margin-top:16px;max-height:none;padding:0;border:none;background-color:transparent}.ul-search-input__list-label{font-weight:400;color:#ffffffb3;padding:4px 8px}.ul-search-input__option{cursor:pointer;border-radius:8px}.ul-search-input__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-input--disabled .ul-search-input__combobox{opacity:.6;cursor:not-allowed}.ul-search-input--error .ul-input__group{border-color:#f69d9d}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "ul-input", inputs: ["type", "size", "appearance", "error", "disabled", "readOnly", "required", "showRequiredIndicator", "placeholder", "label", "helperText", "errorText", "maxLength", "minLength", "pattern", "step", "autocomplete", "controlId", "showPasswordLabel", "hidePasswordLabel", "invalid", "errors", "touched", "value"], outputs: ["touchedChange", "touch", "valueChange", "inputBlur", "inputFocus", "inputEnter"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { 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: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
3978
3991
|
}
|
|
3979
3992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
3980
3993
|
type: Component,
|
|
@@ -3987,8 +4000,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3987
4000
|
ModalComponent,
|
|
3988
4001
|
FormFieldLabelComponent,
|
|
3989
4002
|
FormFieldHelperComponent,
|
|
3990
|
-
], template: "<ng-template #resultsList>\n @if (activeListLabel()) {\n <div class=\"ul-search-input__list-label\" role=\"presentation\">{{ activeListLabel() }}</div>\n }\n @for (result of activeList(); track result.value; let i = $index) {\n <div\n class=\"ul-search-input__option\"\n [class.ul-search-input__option--highlighted]=\"combobox.highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === result.label\"\n (mousedown)=\"selectSuggestion(result)\"\n >\n <ul-list-item theme=\"ghost-white\" [hideFocusOutline]=\"true\">\n @if (result.icon) {\n <ng-container ul-list-item-before-label>\n <ul-icon size=\"5\" [icon]=\"result.icon\" />\n </ng-container>\n }\n <ng-container ul-list-item-label>{{ result.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n</ng-template>\n\n<div\n class=\"ul-search-input ul-search-input--{{ size() }}\"\n [class.ul-search-input--error]=\"hasError()\"\n [class.ul-search-input--disabled]=\"disabled()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"false\"\n />\n\n @if (isMobile()) {\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n [readOnly]=\"true\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n (click)=\"openMobileSearch()\"\n >\n <ng-container ul-input-right-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n <ul-modal [(open)]=\"combobox.isOpen\" [fullScreenInMobile]=\"true\" [showCloseButton]=\"false\">\n <div\n class=\"ul-search-input__combobox ul-search-input__combobox--takeover\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"ul-search-input__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"backLabel()\"\n (buttonClick)=\"closeMobileSearch()\"\n >\n <ul-icon icon=\"arrow_left\" size=\"6\" />\n </ul-button>\n\n <ul-input\n #mobileInput\n class=\"ul-search-input__field\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n </div>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-search-input__list--takeover ul-scrollable\"\n [id]=\"listId\"\n role=\"listbox\"\n [attr.aria-label]=\"activeListLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n </div>\n }\n </div>\n </ul-modal>\n } @else {\n <div\n class=\"ul-search-input__combobox\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n (inputFocus)=\"onInputFocus()\"\n (inputBlur)=\"onInputBlur()\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-scrollable\"\n [id]=\"listId\"\n role=\"listbox\"\n [attr.aria-label]=\"activeListLabel()\"\n >\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n </div>\n }\n </div>\n }\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n [error]=\"hasError()\"\n />\n</div>\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-search-input{display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-input__combobox{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-input__combobox .ul-list-item:focus-visible,.ul-search-input__combobox .ul-list-item:focus{outline:none}.ul-search-input__combobox--takeover{height:100%}.ul-search-input__header{display:flex;align-items:center;flex-shrink:0;gap:8px;width:100%}.ul-search-input__field{flex:1;min-width:0}.ul-search-input__list{position:absolute;top:100%;left:0;right:0;z-index:1;display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin-top:4px;max-height:316px;overflow-y:auto;border:2px solid rgba(255,255,255,.1)}.ul-search-input__list--takeover{position:static;flex:1;min-height:0;margin-top:16px;max-height:none;padding:0;border:none;background-color:transparent}.ul-search-input__list-label{font-weight:400;color:#ffffffb3;padding:4px 8px}.ul-search-input__option{cursor:pointer;border-radius:8px}.ul-search-input__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-input--disabled .ul-search-input__combobox{opacity:.6;cursor:not-allowed}.ul-search-input--error .ul-input__group{border-color:#f69d9d}\n"] }]
|
|
3991
|
-
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], suggestionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionsLabel", required: false }] }], results: [{ type: i0.Input, args: [{ isSignal: true, alias: "results", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], suggestionSelected: [{ type: i0.Output, args: ["suggestionSelected"] }], searchSubmit: [{ type: i0.Output, args: ["searchSubmit"] }], mobileInput: [{ type: i0.ViewChild, args: ['mobileInput', { isSignal: true }] }] } });
|
|
4003
|
+
], template: "<ng-template #resultsList>\n @if (activeListLabel()) {\n <div class=\"ul-search-input__list-label\" role=\"presentation\">{{ activeListLabel() }}</div>\n }\n @for (result of activeList(); track result.value; let i = $index) {\n <div\n class=\"ul-search-input__option\"\n [class.ul-search-input__option--highlighted]=\"combobox.highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === result.label\"\n (mousedown)=\"selectSuggestion(result)\"\n >\n <ul-list-item theme=\"ghost-white\" [hideFocusOutline]=\"true\">\n @if (result.icon) {\n <ng-container ul-list-item-before-label>\n <ul-icon size=\"5\" [icon]=\"result.icon\" />\n </ng-container>\n }\n <ng-container ul-list-item-label>{{ result.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n</ng-template>\n\n<div\n class=\"ul-search-input ul-search-input--{{ size() }}\"\n [class.ul-search-input--error]=\"hasError()\"\n [class.ul-search-input--disabled]=\"disabled()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"false\"\n />\n\n @if (isMobile()) {\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n [readOnly]=\"true\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n (click)=\"openMobileSearch()\"\n >\n <ng-container ul-input-right-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n <ul-modal [(open)]=\"combobox.isOpen\" [fullScreenInMobile]=\"true\" [showCloseButton]=\"false\">\n <div\n class=\"ul-search-input__combobox ul-search-input__combobox--takeover\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <div class=\"ul-search-input__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"backLabel()\"\n (buttonClick)=\"closeMobileSearch()\"\n >\n <ul-icon icon=\"arrow_left\" size=\"6\" />\n </ul-button>\n\n <ul-input\n #mobileInput\n class=\"ul-search-input__field\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n </div>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-search-input__list--takeover ul-scrollable\"\n [id]=\"listId\"\n [attr.role]=\"hasCustomResults() ? null : 'listbox'\"\n [attr.aria-label]=\"hasCustomResults() ? null : activeListLabel()\"\n >\n @if (hasCustomResults()) {\n <ng-container *ngTemplateOutlet=\"resultsTemplate()!\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n }\n </div>\n }\n </div>\n </ul-modal>\n } @else {\n <div\n class=\"ul-search-input__combobox\"\n role=\"combobox\"\n [attr.aria-expanded]=\"shouldShowPanel()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"value()\"\n (valueChange)=\"onValueChange($event)\"\n (inputFocus)=\"onInputFocus()\"\n (inputBlur)=\"onInputBlur()\"\n [size]=\"size()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [label]=\"null\"\n [helperText]=\"null\"\n [autocomplete]=\"'off'\"\n >\n <ng-container ul-input-right-elements>\n @if (hasQuery()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"clearLabel()\"\n (buttonClick)=\"clearInput()\"\n >\n <ul-icon icon=\"cross\" size=\"4\" />\n </ul-button>\n } @else {\n <ul-icon size=\"5\" icon=\"search\" />\n }\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-input__list ul-scrollable\"\n [id]=\"listId\"\n [attr.role]=\"hasCustomResults() ? null : 'listbox'\"\n [attr.aria-label]=\"hasCustomResults() ? null : activeListLabel()\"\n >\n @if (hasCustomResults()) {\n <ng-container *ngTemplateOutlet=\"resultsTemplate()!\" />\n } @else {\n <ng-container *ngTemplateOutlet=\"resultsList\" />\n }\n </div>\n }\n </div>\n }\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n [error]=\"hasError()\"\n />\n</div>\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-search-input{display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-input__combobox{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-input__combobox .ul-list-item:focus-visible,.ul-search-input__combobox .ul-list-item:focus{outline:none}.ul-search-input__combobox--takeover{height:100%}.ul-search-input__header{display:flex;align-items:center;flex-shrink:0;gap:8px;width:100%}.ul-search-input__field{flex:1;min-width:0}.ul-search-input__list{position:absolute;top:100%;left:0;right:0;z-index:1;display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin-top:4px;max-height:316px;overflow-y:auto;border:2px solid rgba(255,255,255,.1)}.ul-search-input__list--takeover{position:static;flex:1;min-height:0;margin-top:16px;max-height:none;padding:0;border:none;background-color:transparent}.ul-search-input__list-label{font-weight:400;color:#ffffffb3;padding:4px 8px}.ul-search-input__option{cursor:pointer;border-radius:8px}.ul-search-input__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-input--disabled .ul-search-input__combobox{opacity:.6;cursor:not-allowed}.ul-search-input--error .ul-input__group{border-color:#f69d9d}\n"] }]
|
|
4004
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], suggestionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionsLabel", required: false }] }], results: [{ type: i0.Input, args: [{ isSignal: true, alias: "results", required: false }] }], resultsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsTemplate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], suggestionSelected: [{ type: i0.Output, args: ["suggestionSelected"] }], searchSubmit: [{ type: i0.Output, args: ["searchSubmit"] }], mobileInput: [{ type: i0.ViewChild, args: ['mobileInput', { isSignal: true }] }] } });
|
|
3992
4005
|
|
|
3993
4006
|
/**
|
|
3994
4007
|
* Combobox: search input with filterable dropdown. User types to filter options and selects a result.
|