@underlayerdev/ui 0.9.2 → 0.9.4
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,156 @@ 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
|
+
label = input(null, /* @ts-ignore */
|
|
3674
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3675
|
+
helperText = input(null, /* @ts-ignore */
|
|
3676
|
+
...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
3677
|
+
error = input(false, /* @ts-ignore */
|
|
3678
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3679
|
+
errorText = input(null, /* @ts-ignore */
|
|
3680
|
+
...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
3681
|
+
invalid = input(false, /* @ts-ignore */
|
|
3682
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3683
|
+
errors = input([], /* @ts-ignore */
|
|
3684
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3685
|
+
ids = createFormFieldIds('ul-toggle');
|
|
3686
|
+
hasError = computed(() => this.error() || this.invalid(), /* @ts-ignore */
|
|
3687
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
3688
|
+
resolvedErrorText = computed(() => this.errorText() ||
|
|
3689
|
+
(this.hasError() && this.errors().length ? (this.errors()[0]?.message ?? null) : null), /* @ts-ignore */
|
|
3690
|
+
...(ngDevMode ? [{ debugName: "resolvedErrorText" }] : /* istanbul ignore next */ []));
|
|
3691
|
+
describedBy = computed(() => getFormFieldDescribedBy(this.ids.helperId, this.ids.errorId, !!this.helperText(), this.hasError(), !!this.resolvedErrorText()), /* @ts-ignore */
|
|
3692
|
+
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
3693
|
+
onChange(event) {
|
|
3694
|
+
const input = event.target;
|
|
3695
|
+
this.checked.set(input.checked);
|
|
3696
|
+
}
|
|
3697
|
+
onEnter(event) {
|
|
3698
|
+
if (this.disabled())
|
|
3699
|
+
return;
|
|
3700
|
+
event.preventDefault();
|
|
3701
|
+
this.checked.set(!this.checked());
|
|
3702
|
+
}
|
|
3703
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3704
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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: `
|
|
3705
|
+
<div
|
|
3706
|
+
class="ul-toggle ul-toggle--{{ size() }}"
|
|
3707
|
+
[class.ul-toggle--error]="hasError()"
|
|
3708
|
+
[class.ul-toggle--disabled]="disabled()"
|
|
3709
|
+
[attr.aria-invalid]="hasError()"
|
|
3710
|
+
[attr.aria-describedby]="describedBy()"
|
|
3711
|
+
>
|
|
3712
|
+
<ul-form-field-label
|
|
3713
|
+
[label]="label()"
|
|
3714
|
+
[for]="ids.controlId"
|
|
3715
|
+
[size]="size() === 'sm' ? 'sm' : 'md'"
|
|
3716
|
+
/>
|
|
3717
|
+
|
|
3718
|
+
<label
|
|
3719
|
+
class="ul-toggle__row"
|
|
3720
|
+
[class.ul-toggle__row--sm]="size() === 'sm'"
|
|
3721
|
+
[class.ul-toggle__row--lg]="size() === 'lg'"
|
|
3722
|
+
[class.ul-toggle__row--error]="hasError()"
|
|
3723
|
+
[attr.for]="ids.controlId"
|
|
3724
|
+
>
|
|
3725
|
+
<input
|
|
3726
|
+
type="checkbox"
|
|
3727
|
+
role="switch"
|
|
3728
|
+
class="ul-toggle__input"
|
|
3729
|
+
[id]="ids.controlId"
|
|
3730
|
+
[checked]="checked()"
|
|
3731
|
+
[disabled]="disabled()"
|
|
3732
|
+
[attr.aria-checked]="checked()"
|
|
3733
|
+
[attr.aria-describedby]="describedBy()"
|
|
3734
|
+
[attr.aria-invalid]="hasError()"
|
|
3735
|
+
(change)="onChange($event)"
|
|
3736
|
+
(keydown.enter)="onEnter($event)"
|
|
3737
|
+
/>
|
|
3738
|
+
<span class="ul-toggle__track">
|
|
3739
|
+
<span class="ul-toggle__thumb"></span>
|
|
3740
|
+
</span>
|
|
3741
|
+
<span class="ul-toggle__label">
|
|
3742
|
+
<ng-content />
|
|
3743
|
+
</span>
|
|
3744
|
+
</label>
|
|
3745
|
+
|
|
3746
|
+
<ul-form-field-helper
|
|
3747
|
+
[id]="ids.helperId"
|
|
3748
|
+
[helperText]="helperText()"
|
|
3749
|
+
[errorText]="resolvedErrorText()"
|
|
3750
|
+
[error]="hasError()"
|
|
3751
|
+
/>
|
|
3752
|
+
</div>
|
|
3753
|
+
`, 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: 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"] }] });
|
|
3754
|
+
}
|
|
3755
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
3756
|
+
type: Component,
|
|
3757
|
+
args: [{ selector: 'ul-toggle', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: `
|
|
3758
|
+
<div
|
|
3759
|
+
class="ul-toggle ul-toggle--{{ size() }}"
|
|
3760
|
+
[class.ul-toggle--error]="hasError()"
|
|
3761
|
+
[class.ul-toggle--disabled]="disabled()"
|
|
3762
|
+
[attr.aria-invalid]="hasError()"
|
|
3763
|
+
[attr.aria-describedby]="describedBy()"
|
|
3764
|
+
>
|
|
3765
|
+
<ul-form-field-label
|
|
3766
|
+
[label]="label()"
|
|
3767
|
+
[for]="ids.controlId"
|
|
3768
|
+
[size]="size() === 'sm' ? 'sm' : 'md'"
|
|
3769
|
+
/>
|
|
3770
|
+
|
|
3771
|
+
<label
|
|
3772
|
+
class="ul-toggle__row"
|
|
3773
|
+
[class.ul-toggle__row--sm]="size() === 'sm'"
|
|
3774
|
+
[class.ul-toggle__row--lg]="size() === 'lg'"
|
|
3775
|
+
[class.ul-toggle__row--error]="hasError()"
|
|
3776
|
+
[attr.for]="ids.controlId"
|
|
3777
|
+
>
|
|
3778
|
+
<input
|
|
3779
|
+
type="checkbox"
|
|
3780
|
+
role="switch"
|
|
3781
|
+
class="ul-toggle__input"
|
|
3782
|
+
[id]="ids.controlId"
|
|
3783
|
+
[checked]="checked()"
|
|
3784
|
+
[disabled]="disabled()"
|
|
3785
|
+
[attr.aria-checked]="checked()"
|
|
3786
|
+
[attr.aria-describedby]="describedBy()"
|
|
3787
|
+
[attr.aria-invalid]="hasError()"
|
|
3788
|
+
(change)="onChange($event)"
|
|
3789
|
+
(keydown.enter)="onEnter($event)"
|
|
3790
|
+
/>
|
|
3791
|
+
<span class="ul-toggle__track">
|
|
3792
|
+
<span class="ul-toggle__thumb"></span>
|
|
3793
|
+
</span>
|
|
3794
|
+
<span class="ul-toggle__label">
|
|
3795
|
+
<ng-content />
|
|
3796
|
+
</span>
|
|
3797
|
+
</label>
|
|
3798
|
+
|
|
3799
|
+
<ul-form-field-helper
|
|
3800
|
+
[id]="ids.helperId"
|
|
3801
|
+
[helperText]="helperText()"
|
|
3802
|
+
[errorText]="resolvedErrorText()"
|
|
3803
|
+
[error]="hasError()"
|
|
3804
|
+
/>
|
|
3805
|
+
</div>
|
|
3806
|
+
`, 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"] }]
|
|
3807
|
+
}], 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 }] }] } });
|
|
3808
|
+
|
|
3659
3809
|
class TooltipComponent {
|
|
3660
3810
|
text = input('', /* @ts-ignore */
|
|
3661
3811
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
@@ -3888,13 +4038,13 @@ class SearchInputComponent {
|
|
|
3888
4038
|
results = input([], /* @ts-ignore */
|
|
3889
4039
|
...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
|
|
3890
4040
|
/**
|
|
3891
|
-
*
|
|
3892
|
-
*
|
|
3893
|
-
*
|
|
3894
|
-
*
|
|
3895
|
-
*
|
|
3896
|
-
* falls through to `searchSubmit` since
|
|
3897
|
-
* selection interaction.
|
|
4041
|
+
* When set, always projects this arbitrary content (e.g. rich cards with
|
|
4042
|
+
* images/prices) into the panel instead of the built-in plain-text rows —
|
|
4043
|
+
* for both `suggestions` (query empty) and `results` (query non-empty).
|
|
4044
|
+
* The consumer's own template is responsible for varying its content by
|
|
4045
|
+
* query if it needs to. Arrow-key/Enter option-highlighting is skipped
|
|
4046
|
+
* while this is set — Enter always falls through to `searchSubmit` since
|
|
4047
|
+
* the projected content owns its own selection interaction.
|
|
3898
4048
|
*/
|
|
3899
4049
|
resultsTemplate = input(null, /* @ts-ignore */
|
|
3900
4050
|
...(ngDevMode ? [{ debugName: "resultsTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -3987,7 +4137,7 @@ class SearchInputComponent {
|
|
|
3987
4137
|
this.searchSubmit.emit(this.value());
|
|
3988
4138
|
}
|
|
3989
4139
|
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"] }] });
|
|
4140
|
+
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
4141
|
}
|
|
3992
4142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
3993
4143
|
type: Component,
|
|
@@ -4000,7 +4150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4000
4150
|
ModalComponent,
|
|
4001
4151
|
FormFieldLabelComponent,
|
|
4002
4152
|
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"] }]
|
|
4153
|
+
], 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
4154
|
}], 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
4155
|
|
|
4006
4156
|
/**
|
|
@@ -4269,6 +4419,13 @@ class SelectableRowComponent {
|
|
|
4269
4419
|
*/
|
|
4270
4420
|
selectionActive = input(false, /* @ts-ignore */
|
|
4271
4421
|
...(ngDevMode ? [{ debugName: "selectionActive" }] : /* istanbul ignore next */ []));
|
|
4422
|
+
/**
|
|
4423
|
+
* Whether this row supports selection at all. False renders it as a plain
|
|
4424
|
+
* row — no checkbox (hover or compact), no long-press, no click-to-toggle
|
|
4425
|
+
* — for a list that doesn't offer bulk actions right now.
|
|
4426
|
+
*/
|
|
4427
|
+
selectable = input(true, /* @ts-ignore */
|
|
4428
|
+
...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
|
|
4272
4429
|
/** Accessible label for this row's checkbox(es). */
|
|
4273
4430
|
ariaLabel = input(null, /* @ts-ignore */
|
|
4274
4431
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -4291,6 +4448,8 @@ class SelectableRowComponent {
|
|
|
4291
4448
|
justLongPressed = false;
|
|
4292
4449
|
constructor() {
|
|
4293
4450
|
inject(LongPressDirective).ulLongPress.subscribe(() => {
|
|
4451
|
+
if (!this.selectable())
|
|
4452
|
+
return;
|
|
4294
4453
|
this.justLongPressed = true;
|
|
4295
4454
|
this.longPress.emit();
|
|
4296
4455
|
});
|
|
@@ -4313,7 +4472,7 @@ class SelectableRowComponent {
|
|
|
4313
4472
|
this.justLongPressed = false;
|
|
4314
4473
|
return;
|
|
4315
4474
|
}
|
|
4316
|
-
if (!this.selectionActive())
|
|
4475
|
+
if (!this.selectable() || !this.selectionActive())
|
|
4317
4476
|
return;
|
|
4318
4477
|
// The checkbox already has its own (checkedChange) handler — without
|
|
4319
4478
|
// this, a tap on it would toggle twice (once from checkedChange, once
|
|
@@ -4323,8 +4482,8 @@ class SelectableRowComponent {
|
|
|
4323
4482
|
this.selectedChange.emit(!this.selected());
|
|
4324
4483
|
}
|
|
4325
4484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4326
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SelectableRowComponent, isStandalone: true, selector: "ul-selectable-row", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionActive: { classPropertyName: "selectionActive", publicName: "selectionActive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", longPress: "longPress" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ul-selectable-row": "selected()" } }, hostDirectives: [{ directive: LongPressDirective }], ngImport: i0, template: `
|
|
4327
|
-
@if (isCompact() && selectionActive()) {
|
|
4485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SelectableRowComponent, isStandalone: true, selector: "ul-selectable-row", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, selectionActive: { classPropertyName: "selectionActive", publicName: "selectionActive", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", longPress: "longPress" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.ul-selectable-row": "selected()" } }, hostDirectives: [{ directive: LongPressDirective }], ngImport: i0, template: `
|
|
4486
|
+
@if (selectable() && isCompact() && selectionActive()) {
|
|
4328
4487
|
<ul-checkbox
|
|
4329
4488
|
size="lg"
|
|
4330
4489
|
[checked]="selected()"
|
|
@@ -4334,7 +4493,7 @@ class SelectableRowComponent {
|
|
|
4334
4493
|
} @else {
|
|
4335
4494
|
<ng-content select="[ul-selectable-row-media]" />
|
|
4336
4495
|
}
|
|
4337
|
-
@if (!isCompact()) {
|
|
4496
|
+
@if (selectable() && !isCompact()) {
|
|
4338
4497
|
<ul-checkbox
|
|
4339
4498
|
class="ul-selectable-row__hover-checkbox"
|
|
4340
4499
|
[checked]="selected()"
|
|
@@ -4352,7 +4511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4352
4511
|
'[class.ul-selectable-row]': 'selected()',
|
|
4353
4512
|
'(click)': 'onHostClick($event)',
|
|
4354
4513
|
}, template: `
|
|
4355
|
-
@if (isCompact() && selectionActive()) {
|
|
4514
|
+
@if (selectable() && isCompact() && selectionActive()) {
|
|
4356
4515
|
<ul-checkbox
|
|
4357
4516
|
size="lg"
|
|
4358
4517
|
[checked]="selected()"
|
|
@@ -4362,7 +4521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4362
4521
|
} @else {
|
|
4363
4522
|
<ng-content select="[ul-selectable-row-media]" />
|
|
4364
4523
|
}
|
|
4365
|
-
@if (!isCompact()) {
|
|
4524
|
+
@if (selectable() && !isCompact()) {
|
|
4366
4525
|
<ul-checkbox
|
|
4367
4526
|
class="ul-selectable-row__hover-checkbox"
|
|
4368
4527
|
[checked]="selected()"
|
|
@@ -4373,7 +4532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4373
4532
|
<ng-content select="[ul-selectable-row-content]" />
|
|
4374
4533
|
<ng-content />
|
|
4375
4534
|
`, 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}:host{display:flex;align-items:center;width:100%;box-sizing:border-box;gap:16px;padding:4px;border-radius:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.ul-selectable-row__hover-checkbox{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}:host(:hover) .ul-selectable-row__hover-checkbox,:host(:focus-within) .ul-selectable-row__hover-checkbox,:host(:has(.ul-checkbox__input:checked)) .ul-selectable-row__hover-checkbox{opacity:1}\n"] }]
|
|
4376
|
-
}], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActive", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], longPress: [{ type: i0.Output, args: ["longPress"] }] } });
|
|
4535
|
+
}], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectionActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActive", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], longPress: [{ type: i0.Output, args: ["longPress"] }] } });
|
|
4377
4536
|
|
|
4378
4537
|
class SidebarComponent {
|
|
4379
4538
|
items = input([], /* @ts-ignore */
|
|
@@ -4676,5 +4835,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4676
4835
|
* Generated bundle index. Do not edit.
|
|
4677
4836
|
*/
|
|
4678
4837
|
|
|
4679
|
-
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 };
|
|
4838
|
+
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 };
|
|
4680
4839
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|