@underlayerdev/ui 0.9.3 → 0.9.5
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.
|
@@ -3656,6 +3656,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3656
3656
|
args: [{ selector: 'ul-toast-container', imports: [ButtonComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"ul-toast-container\" aria-live=\"polite\" aria-atomic=\"true\">\n @for (toast of toasts(); track trackById($index, toast)) {\n <section class=\"ul-toast ul-toast--{{ toast.kind }}\" [attr.role]=\"toast.role\">\n <div class=\"ul-toast__icon\">\n @if (toast.showIcon) {\n <ul-icon [icon]=\"toast.icon\" size=\"6\" iconWeight=\"bold\" />\n }\n </div>\n\n <div class=\"ul-toast__body\">\n @if (toast.title) {\n <h3 class=\"ul-toast__title\">\n {{ toast.title }}\n </h3>\n }\n <p class=\"ul-toast__message\">\n {{ toast.message }}\n </p>\n </div>\n\n @if (toast.dismissible) {\n <ul-button\n theme=\"ghost-white\"\n size=\"sm\"\n [iconOnly]=\"true\"\n class=\"ul-toast__close\"\n ariaLabel=\"Dismiss notification\"\n (buttonClick)=\"dismiss(toast.id)\"\n >\n <ul-icon icon=\"cross\" size=\"5\" />\n </ul-button>\n }\n </section>\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-toast-container{position:fixed;inset-inline-end:16px;inset-block-end:16px;z-index:1200;display:flex;flex-direction:column;gap:12px;pointer-events:none}@media(max-width:767px){.ul-toast-container{inset-inline:12px;inset-block-end:12px}}.ul-toast{display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:360px;padding:12px 16px;border-radius:12px;background-color:#232323;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px #0006;pointer-events:auto;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}@media(max-width:767px){.ul-toast{min-width:0;width:100%}}.ul-toast__icon{display:flex;align-items:center;justify-content:center;margin-top:4px;color:#fff}.ul-toast__body{flex:1 1 auto}.ul-toast__title{margin:0 0 4px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800;color:#fff}.ul-toast__message{margin:0;color:#ffffffb3}.ul-toast__close{margin-inline-start:8px;flex-shrink:0}.ul-toast__close .ul-icon{font-size:12px;line-height:16px}.ul-toast--success{border-color:#7edc96}.ul-toast--warning{border-color:#ffd9af}.ul-toast--error{border-color:#f69d9d}\n"] }]
|
|
3657
3657
|
}] });
|
|
3658
3658
|
|
|
3659
|
+
/**
|
|
3660
|
+
* On/off switch. Implements FormCheckboxControl for Signal Forms [formField],
|
|
3661
|
+
* the switch equivalent of ul-checkbox. Prefer this over ul-checkbox when the
|
|
3662
|
+
* change takes effect immediately (e.g. a setting) rather than being
|
|
3663
|
+
* submitted later with the rest of a form.
|
|
3664
|
+
* Use [(checked)] or [formField]="myForm().notificationsEnabled". No value property.
|
|
3665
|
+
*/
|
|
3666
|
+
class ToggleComponent {
|
|
3667
|
+
checked = model(false, /* @ts-ignore */
|
|
3668
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
3669
|
+
disabled = model(false, /* @ts-ignore */
|
|
3670
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3671
|
+
size = input('default', /* @ts-ignore */
|
|
3672
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3673
|
+
/** Rendered inline next to the switch (not stacked above it, unlike ul-input/ul-checkbox's form-field label). Use ng-content instead for richer projected content. */
|
|
3674
|
+
label = input(null, /* @ts-ignore */
|
|
3675
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3676
|
+
helperText = input(null, /* @ts-ignore */
|
|
3677
|
+
...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
3678
|
+
error = input(false, /* @ts-ignore */
|
|
3679
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3680
|
+
errorText = input(null, /* @ts-ignore */
|
|
3681
|
+
...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
3682
|
+
invalid = input(false, /* @ts-ignore */
|
|
3683
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3684
|
+
errors = input([], /* @ts-ignore */
|
|
3685
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3686
|
+
ids = createFormFieldIds('ul-toggle');
|
|
3687
|
+
hasError = computed(() => this.error() || this.invalid(), /* @ts-ignore */
|
|
3688
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
3689
|
+
resolvedErrorText = computed(() => this.errorText() ||
|
|
3690
|
+
(this.hasError() && this.errors().length ? (this.errors()[0]?.message ?? null) : null), /* @ts-ignore */
|
|
3691
|
+
...(ngDevMode ? [{ debugName: "resolvedErrorText" }] : /* istanbul ignore next */ []));
|
|
3692
|
+
describedBy = computed(() => getFormFieldDescribedBy(this.ids.helperId, this.ids.errorId, !!this.helperText(), this.hasError(), !!this.resolvedErrorText()), /* @ts-ignore */
|
|
3693
|
+
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
3694
|
+
onChange(event) {
|
|
3695
|
+
const input = event.target;
|
|
3696
|
+
this.checked.set(input.checked);
|
|
3697
|
+
}
|
|
3698
|
+
onEnter(event) {
|
|
3699
|
+
if (this.disabled())
|
|
3700
|
+
return;
|
|
3701
|
+
event.preventDefault();
|
|
3702
|
+
this.checked.set(!this.checked());
|
|
3703
|
+
}
|
|
3704
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ToggleComponent, isStandalone: true, selector: "ul-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", 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 } }, outputs: { checked: "checkedChange", disabled: "disabledChange" }, ngImport: i0, template: `
|
|
3706
|
+
<div
|
|
3707
|
+
class="ul-toggle ul-toggle--{{ size() }}"
|
|
3708
|
+
[class.ul-toggle--error]="hasError()"
|
|
3709
|
+
[class.ul-toggle--disabled]="disabled()"
|
|
3710
|
+
[attr.aria-invalid]="hasError()"
|
|
3711
|
+
[attr.aria-describedby]="describedBy()"
|
|
3712
|
+
>
|
|
3713
|
+
<label
|
|
3714
|
+
class="ul-toggle__row"
|
|
3715
|
+
[class.ul-toggle__row--sm]="size() === 'sm'"
|
|
3716
|
+
[class.ul-toggle__row--lg]="size() === 'lg'"
|
|
3717
|
+
[class.ul-toggle__row--error]="hasError()"
|
|
3718
|
+
[attr.for]="ids.controlId"
|
|
3719
|
+
>
|
|
3720
|
+
<input
|
|
3721
|
+
type="checkbox"
|
|
3722
|
+
role="switch"
|
|
3723
|
+
class="ul-toggle__input"
|
|
3724
|
+
[id]="ids.controlId"
|
|
3725
|
+
[checked]="checked()"
|
|
3726
|
+
[disabled]="disabled()"
|
|
3727
|
+
[attr.aria-checked]="checked()"
|
|
3728
|
+
[attr.aria-describedby]="describedBy()"
|
|
3729
|
+
[attr.aria-invalid]="hasError()"
|
|
3730
|
+
(change)="onChange($event)"
|
|
3731
|
+
(keydown.enter)="onEnter($event)"
|
|
3732
|
+
/>
|
|
3733
|
+
<span class="ul-toggle__track">
|
|
3734
|
+
<span class="ul-toggle__thumb"></span>
|
|
3735
|
+
</span>
|
|
3736
|
+
<span class="ul-toggle__label">
|
|
3737
|
+
@if (label()) {
|
|
3738
|
+
{{ label() }}
|
|
3739
|
+
}
|
|
3740
|
+
<ng-content />
|
|
3741
|
+
</span>
|
|
3742
|
+
</label>
|
|
3743
|
+
|
|
3744
|
+
<ul-form-field-helper
|
|
3745
|
+
[id]="ids.helperId"
|
|
3746
|
+
[helperText]="helperText()"
|
|
3747
|
+
[errorText]="resolvedErrorText()"
|
|
3748
|
+
[error]="hasError()"
|
|
3749
|
+
/>
|
|
3750
|
+
</div>
|
|
3751
|
+
`, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-toggle{display:flex;flex-direction:column;align-items:flex-start}.ul-toggle__row{display:inline-flex;align-items:center;cursor:pointer}.ul-toggle__row:has(.ul-toggle__input:disabled){cursor:not-allowed}.ul-toggle__row:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-toggle__row:hover .ul-toggle__input:not([disabled]):checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__row--error .ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error .ul-toggle__input:checked+.ul-toggle__track{background-color:#c33a3a;border-color:#c33a3a}.ul-toggle__row--error .ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--sm .ul-toggle__track{width:32px;height:18px}.ul-toggle__row--sm .ul-toggle__thumb{width:14px;height:14px}.ul-toggle__row--sm .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(14px)}.ul-toggle__row--sm .ul-toggle__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-toggle__row--lg .ul-toggle__track{width:48px;height:28px}.ul-toggle__row--lg .ul-toggle__thumb{width:22px;height:22px}.ul-toggle__row--lg .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(22px)}.ul-toggle__input{position:absolute;opacity:0;width:1px;height:1px}.ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#ffffff80;box-shadow:0 0 0 2px #ffffff1a}.ul-toggle__input:checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(18px)}.ul-toggle__input:disabled+.ul-toggle__track{border-color:#ffffff1a;background-color:#ffffff0d}.ul-toggle__input:disabled+.ul-toggle__track .ul-toggle__thumb{background-color:#ffffff4d}.ul-toggle__input:disabled:checked+.ul-toggle__track{background-color:#ffffff0d;border-color:transparent}.ul-toggle__input:disabled~.ul-toggle__label{color:#ffffff4d}.ul-toggle__track{position:relative;flex-shrink:0;width:40px;height:22px;border-radius:4096px;border:1px solid rgba(255,255,255,.5);background-color:#fff3;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:4096px;background-color:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__label{margin-left:8px;color:#fff;transition:color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-toggle__label:empty{display:none}\n"], dependencies: [{ kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
3752
|
+
}
|
|
3753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
3754
|
+
type: Component,
|
|
3755
|
+
args: [{ selector: 'ul-toggle', imports: [FormFieldHelperComponent], template: `
|
|
3756
|
+
<div
|
|
3757
|
+
class="ul-toggle ul-toggle--{{ size() }}"
|
|
3758
|
+
[class.ul-toggle--error]="hasError()"
|
|
3759
|
+
[class.ul-toggle--disabled]="disabled()"
|
|
3760
|
+
[attr.aria-invalid]="hasError()"
|
|
3761
|
+
[attr.aria-describedby]="describedBy()"
|
|
3762
|
+
>
|
|
3763
|
+
<label
|
|
3764
|
+
class="ul-toggle__row"
|
|
3765
|
+
[class.ul-toggle__row--sm]="size() === 'sm'"
|
|
3766
|
+
[class.ul-toggle__row--lg]="size() === 'lg'"
|
|
3767
|
+
[class.ul-toggle__row--error]="hasError()"
|
|
3768
|
+
[attr.for]="ids.controlId"
|
|
3769
|
+
>
|
|
3770
|
+
<input
|
|
3771
|
+
type="checkbox"
|
|
3772
|
+
role="switch"
|
|
3773
|
+
class="ul-toggle__input"
|
|
3774
|
+
[id]="ids.controlId"
|
|
3775
|
+
[checked]="checked()"
|
|
3776
|
+
[disabled]="disabled()"
|
|
3777
|
+
[attr.aria-checked]="checked()"
|
|
3778
|
+
[attr.aria-describedby]="describedBy()"
|
|
3779
|
+
[attr.aria-invalid]="hasError()"
|
|
3780
|
+
(change)="onChange($event)"
|
|
3781
|
+
(keydown.enter)="onEnter($event)"
|
|
3782
|
+
/>
|
|
3783
|
+
<span class="ul-toggle__track">
|
|
3784
|
+
<span class="ul-toggle__thumb"></span>
|
|
3785
|
+
</span>
|
|
3786
|
+
<span class="ul-toggle__label">
|
|
3787
|
+
@if (label()) {
|
|
3788
|
+
{{ label() }}
|
|
3789
|
+
}
|
|
3790
|
+
<ng-content />
|
|
3791
|
+
</span>
|
|
3792
|
+
</label>
|
|
3793
|
+
|
|
3794
|
+
<ul-form-field-helper
|
|
3795
|
+
[id]="ids.helperId"
|
|
3796
|
+
[helperText]="helperText()"
|
|
3797
|
+
[errorText]="resolvedErrorText()"
|
|
3798
|
+
[error]="hasError()"
|
|
3799
|
+
/>
|
|
3800
|
+
</div>
|
|
3801
|
+
`, 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-toggle{display:flex;flex-direction:column;align-items:flex-start}.ul-toggle__row{display:inline-flex;align-items:center;cursor:pointer}.ul-toggle__row:has(.ul-toggle__input:disabled){cursor:not-allowed}.ul-toggle__row:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-toggle__row:hover .ul-toggle__input:not([disabled]):checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__row--error .ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error .ul-toggle__input:checked+.ul-toggle__track{background-color:#c33a3a;border-color:#c33a3a}.ul-toggle__row--error .ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--sm .ul-toggle__track{width:32px;height:18px}.ul-toggle__row--sm .ul-toggle__thumb{width:14px;height:14px}.ul-toggle__row--sm .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(14px)}.ul-toggle__row--sm .ul-toggle__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-toggle__row--lg .ul-toggle__track{width:48px;height:28px}.ul-toggle__row--lg .ul-toggle__thumb{width:22px;height:22px}.ul-toggle__row--lg .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(22px)}.ul-toggle__input{position:absolute;opacity:0;width:1px;height:1px}.ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#ffffff80;box-shadow:0 0 0 2px #ffffff1a}.ul-toggle__input:checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(18px)}.ul-toggle__input:disabled+.ul-toggle__track{border-color:#ffffff1a;background-color:#ffffff0d}.ul-toggle__input:disabled+.ul-toggle__track .ul-toggle__thumb{background-color:#ffffff4d}.ul-toggle__input:disabled:checked+.ul-toggle__track{background-color:#ffffff0d;border-color:transparent}.ul-toggle__input:disabled~.ul-toggle__label{color:#ffffff4d}.ul-toggle__track{position:relative;flex-shrink:0;width:40px;height:22px;border-radius:4096px;border:1px solid rgba(255,255,255,.5);background-color:#fff3;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:4096px;background-color:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__label{margin-left:8px;color:#fff;transition:color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-toggle__label:empty{display:none}\n"] }]
|
|
3802
|
+
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
|
|
3803
|
+
|
|
3659
3804
|
class TooltipComponent {
|
|
3660
3805
|
text = input('', /* @ts-ignore */
|
|
3661
3806
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
@@ -3888,13 +4033,13 @@ class SearchInputComponent {
|
|
|
3888
4033
|
results = input([], /* @ts-ignore */
|
|
3889
4034
|
...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
|
|
3890
4035
|
/**
|
|
3891
|
-
*
|
|
3892
|
-
*
|
|
3893
|
-
*
|
|
3894
|
-
*
|
|
3895
|
-
*
|
|
3896
|
-
* falls through to `searchSubmit` since
|
|
3897
|
-
* selection interaction.
|
|
4036
|
+
* When set, always projects this arbitrary content (e.g. rich cards with
|
|
4037
|
+
* images/prices) into the panel instead of the built-in plain-text rows —
|
|
4038
|
+
* for both `suggestions` (query empty) and `results` (query non-empty).
|
|
4039
|
+
* The consumer's own template is responsible for varying its content by
|
|
4040
|
+
* query if it needs to. Arrow-key/Enter option-highlighting is skipped
|
|
4041
|
+
* while this is set — Enter always falls through to `searchSubmit` since
|
|
4042
|
+
* the projected content owns its own selection interaction.
|
|
3898
4043
|
*/
|
|
3899
4044
|
resultsTemplate = input(null, /* @ts-ignore */
|
|
3900
4045
|
...(ngDevMode ? [{ debugName: "resultsTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -3987,7 +4132,7 @@ class SearchInputComponent {
|
|
|
3987
4132
|
this.searchSubmit.emit(this.value());
|
|
3988
4133
|
}
|
|
3989
4134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
4135
|
+
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-left-elements>\n <ul-icon icon=\"search\" size=\"4\" />\n </ng-container>\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 }\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-left-elements>\n <ul-icon icon=\"search\" size=\"4\" />\n </ng-container>\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 }\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"] }] });
|
|
3991
4136
|
}
|
|
3992
4137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
3993
4138
|
type: Component,
|
|
@@ -4000,7 +4145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4000
4145
|
ModalComponent,
|
|
4001
4146
|
FormFieldLabelComponent,
|
|
4002
4147
|
FormFieldHelperComponent,
|
|
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"] }]
|
|
4148
|
+
], 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-left-elements>\n <ul-icon icon=\"search\" size=\"4\" />\n </ng-container>\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 }\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-left-elements>\n <ul-icon icon=\"search\" size=\"4\" />\n </ng-container>\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 }\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
4149
|
}], 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 }] }] } });
|
|
4005
4150
|
|
|
4006
4151
|
/**
|
|
@@ -4685,5 +4830,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4685
4830
|
* Generated bundle index. Do not edit.
|
|
4686
4831
|
*/
|
|
4687
4832
|
|
|
4688
|
-
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4833
|
+
export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4689
4834
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|