@underlayerdev/ui 0.6.6 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/underlayerdev-ui.mjs +625 -63
- package/fesm2022/underlayerdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/foundations.css +11 -30
- package/types/underlayerdev-ui.d.ts +260 -43
|
@@ -2,16 +2,17 @@ import * as i1 from '@angular/cdk/accordion';
|
|
|
2
2
|
import { CdkAccordionItem, CdkAccordion } from '@angular/cdk/accordion';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { inject, ElementRef, Component, input, DestroyRef, contentChildren, computed, ViewEncapsulation, signal, effect, Directive, output, model, booleanAttribute, viewChild, ViewChild, contentChild, HostListener, Pipe, SecurityContext, Injectable, HostBinding } from '@angular/core';
|
|
5
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
+
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1$1 from '@angular/common';
|
|
7
7
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
|
|
8
8
|
import { RouterLink } from '@angular/router';
|
|
9
9
|
import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
|
|
10
10
|
import Splide from '@splidejs/splide';
|
|
11
|
-
import { fromEvent } from 'rxjs';
|
|
11
|
+
import { fromEvent, map } from 'rxjs';
|
|
12
12
|
import { debounceTime } from 'rxjs/operators';
|
|
13
13
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
14
14
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
15
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
15
16
|
|
|
16
17
|
/**
|
|
17
18
|
* AccordionItemComponent is a standalone Angular component that extends CdkAccordionItem.
|
|
@@ -772,8 +773,10 @@ class FormFieldLabelComponent {
|
|
|
772
773
|
...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
|
|
773
774
|
size = input('md', /* @ts-ignore */
|
|
774
775
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
776
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
777
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
775
778
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FormFieldLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
776
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: FormFieldLabelComponent, isStandalone: true, selector: "ul-form-field-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: FormFieldLabelComponent, isStandalone: true, selector: "ul-form-field-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
777
780
|
@if (label()) {
|
|
778
781
|
<label
|
|
779
782
|
[attr.for]="for()"
|
|
@@ -781,7 +784,7 @@ class FormFieldLabelComponent {
|
|
|
781
784
|
[class.ul-form-field__label--required]="required()"
|
|
782
785
|
>
|
|
783
786
|
{{ label() }}
|
|
784
|
-
@if (required()) {
|
|
787
|
+
@if (required() && !!showRequiredIndicator()) {
|
|
785
788
|
<span class="ul-form-field__required-indicator" aria-hidden="true" title="Required">
|
|
786
789
|
*
|
|
787
790
|
</span>
|
|
@@ -800,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
800
803
|
[class.ul-form-field__label--required]="required()"
|
|
801
804
|
>
|
|
802
805
|
{{ label() }}
|
|
803
|
-
@if (required()) {
|
|
806
|
+
@if (required() && !!showRequiredIndicator()) {
|
|
804
807
|
<span class="ul-form-field__required-indicator" aria-hidden="true" title="Required">
|
|
805
808
|
*
|
|
806
809
|
</span>
|
|
@@ -808,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
808
811
|
</label>
|
|
809
812
|
}
|
|
810
813
|
`, encapsulation: ViewEncapsulation.None, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-form-field__label{color:#fff;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--sm{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800}.ul-form-field__label--md{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-form-field__label--lg{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:800}.ul-form-field__label--xl{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-form-field__helper-text{color:#ffffff80;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-form-field__helper-text--error{color:#f69d9d}\n"] }]
|
|
811
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
814
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }] } });
|
|
812
815
|
|
|
813
816
|
/**
|
|
814
817
|
* Shared helper/error text for form fields (input, select, textarea).
|
|
@@ -874,6 +877,8 @@ class CalendarComponent {
|
|
|
874
877
|
...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
875
878
|
required = input(false, /* @ts-ignore */
|
|
876
879
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
880
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
881
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
877
882
|
placeholder = input('', /* @ts-ignore */
|
|
878
883
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
879
884
|
label = input(null, /* @ts-ignore */
|
|
@@ -1217,7 +1222,7 @@ class CalendarComponent {
|
|
|
1217
1222
|
trigger?.focus();
|
|
1218
1223
|
}
|
|
1219
1224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: CalendarComponent, isStandalone: true, selector: "ul-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", 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: { value: "valueChange", opened: "opened", closed: "closed" }, ngImport: i0, template: "<div\n class=\"ul-calendar ul-calendar--{{ mode() }} ul-calendar--{{ size() }}\"\n [class.ul-calendar--error]=\"hasError()\"\n [class.ul-calendar--disabled]=\"disabled()\"\n [class.ul-calendar--read-only]=\"readOnly()\"\n [class.ul-calendar--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-calendar__trigger-group\" [class.ul-calendar__trigger-group--focused]=\"isOpen()\">\n <button\n type=\"button\"\n [id]=\"ids.controlId\"\n class=\"ul-calendar__trigger\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"ids.controlId + '-menu'\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <span\n class=\"ul-calendar__trigger-text\"\n [class.ul-calendar__trigger-text--placeholder]=\"!displayValue()\"\n >\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n {{ defaultPlaceholder() }}\n }\n </span>\n </button>\n\n @if (showCalendarIcon()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [size]=\"buttonSize()\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n class=\"ul-calendar__icon-button\"\n ariaLabel=\"Open calendar\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ul-icon icon=\"calendar\" [size]=\"iconSize()\" />\n </ul-button>\n }\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"resolvedErrorText()\"\n [error]=\"hasError()\"\n />\n\n <ng-template #calendarMenu>\n <div cdkMenu class=\"ul-calendar__popup\" [id]=\"ids.controlId + '-menu'\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <div class=\"ul-calendar__date-picker\">\n <div class=\"ul-calendar__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Previous month\"\n (buttonClick)=\"previousMonth()\"\n >\n <ul-icon icon=\"chevron_left\" size=\"6\" />\n </ul-button>\n <div class=\"ul-calendar__month-year\">{{ monthYearLabel() }}</div>\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Next month\"\n (buttonClick)=\"nextMonth()\"\n >\n <ul-icon icon=\"chevron_right\" size=\"6\" />\n </ul-button>\n </div>\n\n <div class=\"ul-calendar__weekdays\">\n @for (day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']; track $index) {\n <div class=\"ul-calendar__weekday\">{{ day }}</div>\n }\n </div>\n\n <div class=\"ul-calendar__days\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ul-calendar__day\"\n [class.ul-calendar__day--current-month]=\"day.isCurrentMonth\"\n [class.ul-calendar__day--today]=\"day.isToday\"\n [class.ul-calendar__day--selected]=\"day.isSelected\"\n [class.ul-calendar__day--disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (mode() === 'time' || mode() === 'datetime') {\n <div class=\"ul-calendar__time-picker\">\n <div class=\"ul-calendar__time-controls\">\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedHour()\"\n (change)=\"selectTime(+$any($event.target).value, selectedMinute())\"\n >\n @for (hour of hourOptions(); track hour) {\n <option [value]=\"hour\" [disabled]=\"isTimeDisabled(hour, selectedMinute())\">\n {{ hour.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"ul-calendar__time-separator\">:</span>\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedMinute()\"\n (change)=\"selectTime(selectedHour(), +$any($event.target).value)\"\n >\n @for (minute of minuteOptions(); track minute) {\n <option [value]=\"minute\" [disabled]=\"isTimeDisabled(selectedHour(), minute)\">\n {{ minute.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"ul-calendar__actions\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"selectToday()\">\n Today\n </ul-button>\n }\n @if (value()) {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"clear()\">\n Clear\n </ul-button>\n }\n </div>\n </div>\n </ng-template>\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-calendar{box-sizing:border-box;display:flex;flex-direction:column;gap:4px}.ul-calendar__trigger-group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-calendar__trigger-group--focused{border-color:#ffffff80}.ul-calendar:not(.ul-calendar--disabled) .ul-calendar__trigger-group:hover{border-color:#ffffff4d}.ul-calendar__trigger{all:unset;flex:1;cursor:pointer;text-align:left;background:transparent;border:none;padding:0}.ul-calendar__trigger-text{display:block;color:#fff}.ul-calendar__trigger-text--placeholder{color:#ffffff80}.ul-calendar__trigger:disabled .ul-calendar__trigger-text{color:#ffffff4d;cursor:not-allowed}.ul-calendar__icon-button{flex-shrink:0}.ul-calendar__trigger-group--focused .ul-btn:focus-visible,.ul-calendar__trigger-group--focused .ul-btn:focus{outline:none}.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-visible,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-within,.ul-calendar__trigger-group--focused .ul-calendar__trigger:hover,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus{outline:none}.ul-calendar__popup{display:flex;flex-direction:column;gap:16px;background-color:#232323;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;min-width:160px;max-width:512px}.ul-calendar__date-picker{display:flex;flex-direction:column;gap:12px}.ul-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.ul-calendar__month-year{flex:1;text-align:center;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__weekday{text-align:center;color:#ffffff80;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;padding:4px}.ul-calendar__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__day{all:unset;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:#fff;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);min-height:32px}.ul-calendar__day--current-month{color:#fff}.ul-calendar__day:not(.ul-calendar__day--current-month){color:#ffffff80}.ul-calendar__day--today{border:2px solid #c2a8ff}.ul-calendar__day--selected{background-color:#6f3de0;border-color:#6f3de0;color:#fff}.ul-calendar__day--disabled{color:#ffffff4d;cursor:not-allowed;pointer-events:none}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover{background-color:#ffffff1a;color:inherit}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:hover{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:active{background-color:#ffffff1a}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:selected{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:disabled,.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover[disabled]{background-color:#ffffff0d}.ul-calendar__time-picker{display:flex;flex-direction:column;gap:8px}.ul-calendar__time-controls{display:flex;align-items:center;justify-content:center;gap:8px}.ul-calendar__time-select{appearance:none;background-color:transparent;border:2px solid rgba(255,255,255,.1);border-radius:8px;min-width:48px;height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-calendar__time-select:hover:not(:disabled){border-color:#ffffff4d}.ul-calendar__time-select:focus{outline:none;border-color:#ffffff80}.ul-calendar__time-select:disabled{color:#ffffff4d;cursor:not-allowed;border-color:#ffffff1a;background-color:transparent}.ul-calendar__time-select option{background-color:#232323;color:#fff}.ul-calendar__time-select option:disabled{color:#ffffff4d}.ul-calendar__time-separator{color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.ul-calendar--sm .ul-calendar__trigger-group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-calendar--sm .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;min-height:24px}.ul-calendar--md .ul-calendar__trigger-group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-calendar--md .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;min-height:32px}.ul-calendar--lg .ul-calendar__trigger-group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-calendar--lg .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;min-height:40px}.ul-calendar--xl .ul-calendar__trigger-group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-calendar--xl .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400;min-height:48px}.ul-calendar--error .ul-calendar__trigger-group{border:2px solid #f69d9d}.ul-calendar--disabled .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--disabled .ul-calendar__trigger,.ul-calendar--disabled .ul-calendar__trigger:disabled::placeholder{color:#ffffff4d}.ul-calendar--read-only .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--read-only .ul-calendar__trigger,.ul-calendar--read-only .ul-calendar__trigger:read-only::placeholder{color:#ffffffb3}@media(max-width:767px){.ul-calendar__popup{min-width:auto;width:calc(100vw - 32px);max-width:calc(100vw - 32px);box-sizing:border-box;overflow-x:hidden;position:relative}.ul-calendar__day{min-height:24px}}@media(max-width:1023px){.ul-calendar :host ::ng-deep .cdk-overlay-pane{max-width:calc(100vw - 32px)!important;margin-left:16px!important;margin-right:16px!important}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: CalendarComponent, isStandalone: true, selector: "ul-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", 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: { value: "valueChange", opened: "opened", closed: "closed" }, ngImport: i0, template: "<div\n class=\"ul-calendar ul-calendar--{{ mode() }} ul-calendar--{{ size() }}\"\n [class.ul-calendar--error]=\"hasError()\"\n [class.ul-calendar--disabled]=\"disabled()\"\n [class.ul-calendar--read-only]=\"readOnly()\"\n [class.ul-calendar--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-calendar__trigger-group\" [class.ul-calendar__trigger-group--focused]=\"isOpen()\">\n <button\n type=\"button\"\n [id]=\"ids.controlId\"\n class=\"ul-calendar__trigger\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"ids.controlId + '-menu'\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <span\n class=\"ul-calendar__trigger-text\"\n [class.ul-calendar__trigger-text--placeholder]=\"!displayValue()\"\n >\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n {{ defaultPlaceholder() }}\n }\n </span>\n </button>\n\n @if (showCalendarIcon()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [size]=\"buttonSize()\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n class=\"ul-calendar__icon-button\"\n ariaLabel=\"Open calendar\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ul-icon icon=\"calendar\" [size]=\"iconSize()\" />\n </ul-button>\n }\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"resolvedErrorText()\"\n [error]=\"hasError()\"\n />\n\n <ng-template #calendarMenu>\n <div cdkMenu class=\"ul-calendar__popup\" [id]=\"ids.controlId + '-menu'\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <div class=\"ul-calendar__date-picker\">\n <div class=\"ul-calendar__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Previous month\"\n (buttonClick)=\"previousMonth()\"\n >\n <ul-icon icon=\"chevron_left\" size=\"6\" />\n </ul-button>\n <div class=\"ul-calendar__month-year\">{{ monthYearLabel() }}</div>\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Next month\"\n (buttonClick)=\"nextMonth()\"\n >\n <ul-icon icon=\"chevron_right\" size=\"6\" />\n </ul-button>\n </div>\n\n <div class=\"ul-calendar__weekdays\">\n @for (day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']; track $index) {\n <div class=\"ul-calendar__weekday\">{{ day }}</div>\n }\n </div>\n\n <div class=\"ul-calendar__days\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ul-calendar__day\"\n [class.ul-calendar__day--current-month]=\"day.isCurrentMonth\"\n [class.ul-calendar__day--today]=\"day.isToday\"\n [class.ul-calendar__day--selected]=\"day.isSelected\"\n [class.ul-calendar__day--disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (mode() === 'time' || mode() === 'datetime') {\n <div class=\"ul-calendar__time-picker\">\n <div class=\"ul-calendar__time-controls\">\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedHour()\"\n (change)=\"selectTime(+$any($event.target).value, selectedMinute())\"\n >\n @for (hour of hourOptions(); track hour) {\n <option [value]=\"hour\" [disabled]=\"isTimeDisabled(hour, selectedMinute())\">\n {{ hour.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"ul-calendar__time-separator\">:</span>\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedMinute()\"\n (change)=\"selectTime(selectedHour(), +$any($event.target).value)\"\n >\n @for (minute of minuteOptions(); track minute) {\n <option [value]=\"minute\" [disabled]=\"isTimeDisabled(selectedHour(), minute)\">\n {{ minute.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"ul-calendar__actions\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"selectToday()\">\n Today\n </ul-button>\n }\n @if (value()) {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"clear()\">\n Clear\n </ul-button>\n }\n </div>\n </div>\n </ng-template>\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-calendar{box-sizing:border-box;display:flex;flex-direction:column;gap:4px}.ul-calendar__trigger-group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-calendar__trigger-group--focused{border-color:#ffffff80}.ul-calendar:not(.ul-calendar--disabled) .ul-calendar__trigger-group:hover{border-color:#ffffff4d}.ul-calendar__trigger{all:unset;flex:1;cursor:pointer;text-align:left;background:transparent;border:none;padding:0}.ul-calendar__trigger-text{display:block;color:#fff}.ul-calendar__trigger-text--placeholder{color:#ffffff80}.ul-calendar__trigger:disabled .ul-calendar__trigger-text{color:#ffffff4d;cursor:not-allowed}.ul-calendar__icon-button{flex-shrink:0}.ul-calendar__trigger-group--focused .ul-btn:focus-visible,.ul-calendar__trigger-group--focused .ul-btn:focus{outline:none}.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-visible,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-within,.ul-calendar__trigger-group--focused .ul-calendar__trigger:hover,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus{outline:none}.ul-calendar__popup{display:flex;flex-direction:column;gap:16px;background-color:#232323;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;min-width:160px;max-width:512px}.ul-calendar__date-picker{display:flex;flex-direction:column;gap:12px}.ul-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.ul-calendar__month-year{flex:1;text-align:center;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__weekday{text-align:center;color:#ffffff80;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;padding:4px}.ul-calendar__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__day{all:unset;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:#fff;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);min-height:32px}.ul-calendar__day--current-month{color:#fff}.ul-calendar__day:not(.ul-calendar__day--current-month){color:#ffffff80}.ul-calendar__day--today{border:2px solid #c2a8ff}.ul-calendar__day--selected{background-color:#6f3de0;border-color:#6f3de0;color:#fff}.ul-calendar__day--disabled{color:#ffffff4d;cursor:not-allowed;pointer-events:none}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover{background-color:#ffffff1a;color:inherit}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:hover{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:active{background-color:#ffffff1a}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:selected{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:disabled,.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover[disabled]{background-color:#ffffff0d}.ul-calendar__time-picker{display:flex;flex-direction:column;gap:8px}.ul-calendar__time-controls{display:flex;align-items:center;justify-content:center;gap:8px}.ul-calendar__time-select{appearance:none;background-color:transparent;border:2px solid rgba(255,255,255,.1);border-radius:8px;min-width:48px;height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-calendar__time-select:hover:not(:disabled){border-color:#ffffff4d}.ul-calendar__time-select:focus{outline:none;border-color:#ffffff80}.ul-calendar__time-select:disabled{color:#ffffff4d;cursor:not-allowed;border-color:#ffffff1a;background-color:transparent}.ul-calendar__time-select option{background-color:#232323;color:#fff}.ul-calendar__time-select option:disabled{color:#ffffff4d}.ul-calendar__time-separator{color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.ul-calendar--sm .ul-calendar__trigger-group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-calendar--sm .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;min-height:24px}.ul-calendar--md .ul-calendar__trigger-group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-calendar--md .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;min-height:32px}.ul-calendar--lg .ul-calendar__trigger-group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-calendar--lg .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;min-height:40px}.ul-calendar--xl .ul-calendar__trigger-group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-calendar--xl .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400;min-height:48px}.ul-calendar--error .ul-calendar__trigger-group{border:2px solid #f69d9d}.ul-calendar--disabled .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--disabled .ul-calendar__trigger,.ul-calendar--disabled .ul-calendar__trigger:disabled::placeholder{color:#ffffff4d}.ul-calendar--read-only .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--read-only .ul-calendar__trigger,.ul-calendar--read-only .ul-calendar__trigger:read-only::placeholder{color:#ffffffb3}@media(max-width:767px){.ul-calendar__popup{min-width:auto;width:calc(100vw - 32px);max-width:calc(100vw - 32px);box-sizing:border-box;overflow-x:hidden;position:relative}.ul-calendar__day{min-height:24px}}@media(max-width:1023px){.ul-calendar :host ::ng-deep .cdk-overlay-pane{max-width:calc(100vw - 32px)!important;margin-left:16px!important;margin-right:16px!important}}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1221
1226
|
}
|
|
1222
1227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
1223
1228
|
type: Component,
|
|
@@ -1228,8 +1233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1228
1233
|
IconComponent,
|
|
1229
1234
|
FormFieldLabelComponent,
|
|
1230
1235
|
FormFieldHelperComponent,
|
|
1231
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ul-calendar ul-calendar--{{ mode() }} ul-calendar--{{ size() }}\"\n [class.ul-calendar--error]=\"hasError()\"\n [class.ul-calendar--disabled]=\"disabled()\"\n [class.ul-calendar--read-only]=\"readOnly()\"\n [class.ul-calendar--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-calendar__trigger-group\" [class.ul-calendar__trigger-group--focused]=\"isOpen()\">\n <button\n type=\"button\"\n [id]=\"ids.controlId\"\n class=\"ul-calendar__trigger\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"ids.controlId + '-menu'\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <span\n class=\"ul-calendar__trigger-text\"\n [class.ul-calendar__trigger-text--placeholder]=\"!displayValue()\"\n >\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n {{ defaultPlaceholder() }}\n }\n </span>\n </button>\n\n @if (showCalendarIcon()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [size]=\"buttonSize()\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n class=\"ul-calendar__icon-button\"\n ariaLabel=\"Open calendar\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ul-icon icon=\"calendar\" [size]=\"iconSize()\" />\n </ul-button>\n }\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"resolvedErrorText()\"\n [error]=\"hasError()\"\n />\n\n <ng-template #calendarMenu>\n <div cdkMenu class=\"ul-calendar__popup\" [id]=\"ids.controlId + '-menu'\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <div class=\"ul-calendar__date-picker\">\n <div class=\"ul-calendar__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Previous month\"\n (buttonClick)=\"previousMonth()\"\n >\n <ul-icon icon=\"chevron_left\" size=\"6\" />\n </ul-button>\n <div class=\"ul-calendar__month-year\">{{ monthYearLabel() }}</div>\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Next month\"\n (buttonClick)=\"nextMonth()\"\n >\n <ul-icon icon=\"chevron_right\" size=\"6\" />\n </ul-button>\n </div>\n\n <div class=\"ul-calendar__weekdays\">\n @for (day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']; track $index) {\n <div class=\"ul-calendar__weekday\">{{ day }}</div>\n }\n </div>\n\n <div class=\"ul-calendar__days\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ul-calendar__day\"\n [class.ul-calendar__day--current-month]=\"day.isCurrentMonth\"\n [class.ul-calendar__day--today]=\"day.isToday\"\n [class.ul-calendar__day--selected]=\"day.isSelected\"\n [class.ul-calendar__day--disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (mode() === 'time' || mode() === 'datetime') {\n <div class=\"ul-calendar__time-picker\">\n <div class=\"ul-calendar__time-controls\">\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedHour()\"\n (change)=\"selectTime(+$any($event.target).value, selectedMinute())\"\n >\n @for (hour of hourOptions(); track hour) {\n <option [value]=\"hour\" [disabled]=\"isTimeDisabled(hour, selectedMinute())\">\n {{ hour.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"ul-calendar__time-separator\">:</span>\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedMinute()\"\n (change)=\"selectTime(selectedHour(), +$any($event.target).value)\"\n >\n @for (minute of minuteOptions(); track minute) {\n <option [value]=\"minute\" [disabled]=\"isTimeDisabled(selectedHour(), minute)\">\n {{ minute.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"ul-calendar__actions\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"selectToday()\">\n Today\n </ul-button>\n }\n @if (value()) {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"clear()\">\n Clear\n </ul-button>\n }\n </div>\n </div>\n </ng-template>\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-calendar{box-sizing:border-box;display:flex;flex-direction:column;gap:4px}.ul-calendar__trigger-group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-calendar__trigger-group--focused{border-color:#ffffff80}.ul-calendar:not(.ul-calendar--disabled) .ul-calendar__trigger-group:hover{border-color:#ffffff4d}.ul-calendar__trigger{all:unset;flex:1;cursor:pointer;text-align:left;background:transparent;border:none;padding:0}.ul-calendar__trigger-text{display:block;color:#fff}.ul-calendar__trigger-text--placeholder{color:#ffffff80}.ul-calendar__trigger:disabled .ul-calendar__trigger-text{color:#ffffff4d;cursor:not-allowed}.ul-calendar__icon-button{flex-shrink:0}.ul-calendar__trigger-group--focused .ul-btn:focus-visible,.ul-calendar__trigger-group--focused .ul-btn:focus{outline:none}.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-visible,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-within,.ul-calendar__trigger-group--focused .ul-calendar__trigger:hover,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus{outline:none}.ul-calendar__popup{display:flex;flex-direction:column;gap:16px;background-color:#232323;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;min-width:160px;max-width:512px}.ul-calendar__date-picker{display:flex;flex-direction:column;gap:12px}.ul-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.ul-calendar__month-year{flex:1;text-align:center;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__weekday{text-align:center;color:#ffffff80;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;padding:4px}.ul-calendar__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__day{all:unset;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:#fff;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);min-height:32px}.ul-calendar__day--current-month{color:#fff}.ul-calendar__day:not(.ul-calendar__day--current-month){color:#ffffff80}.ul-calendar__day--today{border:2px solid #c2a8ff}.ul-calendar__day--selected{background-color:#6f3de0;border-color:#6f3de0;color:#fff}.ul-calendar__day--disabled{color:#ffffff4d;cursor:not-allowed;pointer-events:none}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover{background-color:#ffffff1a;color:inherit}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:hover{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:active{background-color:#ffffff1a}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:selected{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:disabled,.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover[disabled]{background-color:#ffffff0d}.ul-calendar__time-picker{display:flex;flex-direction:column;gap:8px}.ul-calendar__time-controls{display:flex;align-items:center;justify-content:center;gap:8px}.ul-calendar__time-select{appearance:none;background-color:transparent;border:2px solid rgba(255,255,255,.1);border-radius:8px;min-width:48px;height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-calendar__time-select:hover:not(:disabled){border-color:#ffffff4d}.ul-calendar__time-select:focus{outline:none;border-color:#ffffff80}.ul-calendar__time-select:disabled{color:#ffffff4d;cursor:not-allowed;border-color:#ffffff1a;background-color:transparent}.ul-calendar__time-select option{background-color:#232323;color:#fff}.ul-calendar__time-select option:disabled{color:#ffffff4d}.ul-calendar__time-separator{color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.ul-calendar--sm .ul-calendar__trigger-group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-calendar--sm .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;min-height:24px}.ul-calendar--md .ul-calendar__trigger-group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-calendar--md .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;min-height:32px}.ul-calendar--lg .ul-calendar__trigger-group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-calendar--lg .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;min-height:40px}.ul-calendar--xl .ul-calendar__trigger-group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-calendar--xl .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400;min-height:48px}.ul-calendar--error .ul-calendar__trigger-group{border:2px solid #f69d9d}.ul-calendar--disabled .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--disabled .ul-calendar__trigger,.ul-calendar--disabled .ul-calendar__trigger:disabled::placeholder{color:#ffffff4d}.ul-calendar--read-only .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--read-only .ul-calendar__trigger,.ul-calendar--read-only .ul-calendar__trigger:read-only::placeholder{color:#ffffffb3}@media(max-width:767px){.ul-calendar__popup{min-width:auto;width:calc(100vw - 32px);max-width:calc(100vw - 32px);box-sizing:border-box;overflow-x:hidden;position:relative}.ul-calendar__day{min-height:24px}}@media(max-width:1023px){.ul-calendar :host ::ng-deep .cdk-overlay-pane{max-width:calc(100vw - 32px)!important;margin-left:16px!important;margin-right:16px!important}}\n"] }]
|
|
1232
|
-
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1236
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ul-calendar ul-calendar--{{ mode() }} ul-calendar--{{ size() }}\"\n [class.ul-calendar--error]=\"hasError()\"\n [class.ul-calendar--disabled]=\"disabled()\"\n [class.ul-calendar--read-only]=\"readOnly()\"\n [class.ul-calendar--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-calendar__trigger-group\" [class.ul-calendar__trigger-group--focused]=\"isOpen()\">\n <button\n type=\"button\"\n [id]=\"ids.controlId\"\n class=\"ul-calendar__trigger\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"ids.controlId + '-menu'\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <span\n class=\"ul-calendar__trigger-text\"\n [class.ul-calendar__trigger-text--placeholder]=\"!displayValue()\"\n >\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n {{ defaultPlaceholder() }}\n }\n </span>\n </button>\n\n @if (showCalendarIcon()) {\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [size]=\"buttonSize()\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"calendarMenu\"\n class=\"ul-calendar__icon-button\"\n ariaLabel=\"Open calendar\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ul-icon icon=\"calendar\" [size]=\"iconSize()\" />\n </ul-button>\n }\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"resolvedErrorText()\"\n [error]=\"hasError()\"\n />\n\n <ng-template #calendarMenu>\n <div cdkMenu class=\"ul-calendar__popup\" [id]=\"ids.controlId + '-menu'\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <div class=\"ul-calendar__date-picker\">\n <div class=\"ul-calendar__header\">\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Previous month\"\n (buttonClick)=\"previousMonth()\"\n >\n <ul-icon icon=\"chevron_left\" size=\"6\" />\n </ul-button>\n <div class=\"ul-calendar__month-year\">{{ monthYearLabel() }}</div>\n <ul-button\n type=\"button\"\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n ariaLabel=\"Next month\"\n (buttonClick)=\"nextMonth()\"\n >\n <ul-icon icon=\"chevron_right\" size=\"6\" />\n </ul-button>\n </div>\n\n <div class=\"ul-calendar__weekdays\">\n @for (day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']; track $index) {\n <div class=\"ul-calendar__weekday\">{{ day }}</div>\n }\n </div>\n\n <div class=\"ul-calendar__days\">\n @for (day of calendarDays(); track day.date.getTime()) {\n <button\n type=\"button\"\n class=\"ul-calendar__day\"\n [class.ul-calendar__day--current-month]=\"day.isCurrentMonth\"\n [class.ul-calendar__day--today]=\"day.isToday\"\n [class.ul-calendar__day--selected]=\"day.isSelected\"\n [class.ul-calendar__day--disabled]=\"day.isDisabled\"\n [disabled]=\"day.isDisabled\"\n (click)=\"selectDate(day.date)\"\n >\n {{ day.date.getDate() }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (mode() === 'time' || mode() === 'datetime') {\n <div class=\"ul-calendar__time-picker\">\n <div class=\"ul-calendar__time-controls\">\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedHour()\"\n (change)=\"selectTime(+$any($event.target).value, selectedMinute())\"\n >\n @for (hour of hourOptions(); track hour) {\n <option [value]=\"hour\" [disabled]=\"isTimeDisabled(hour, selectedMinute())\">\n {{ hour.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n <span class=\"ul-calendar__time-separator\">:</span>\n <select\n class=\"ul-calendar__time-select\"\n [value]=\"selectedMinute()\"\n (change)=\"selectTime(selectedHour(), +$any($event.target).value)\"\n >\n @for (minute of minuteOptions(); track minute) {\n <option [value]=\"minute\" [disabled]=\"isTimeDisabled(selectedHour(), minute)\">\n {{ minute.toString().padStart(2, '0') }}\n </option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"ul-calendar__actions\">\n @if (mode() === 'date' || mode() === 'datetime') {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"selectToday()\">\n Today\n </ul-button>\n }\n @if (value()) {\n <ul-button type=\"button\" theme=\"transparent-white\" (buttonClick)=\"clear()\">\n Clear\n </ul-button>\n }\n </div>\n </div>\n </ng-template>\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-calendar{box-sizing:border-box;display:flex;flex-direction:column;gap:4px}.ul-calendar__trigger-group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-calendar__trigger-group--focused{border-color:#ffffff80}.ul-calendar:not(.ul-calendar--disabled) .ul-calendar__trigger-group:hover{border-color:#ffffff4d}.ul-calendar__trigger{all:unset;flex:1;cursor:pointer;text-align:left;background:transparent;border:none;padding:0}.ul-calendar__trigger-text{display:block;color:#fff}.ul-calendar__trigger-text--placeholder{color:#ffffff80}.ul-calendar__trigger:disabled .ul-calendar__trigger-text{color:#ffffff4d;cursor:not-allowed}.ul-calendar__icon-button{flex-shrink:0}.ul-calendar__trigger-group--focused .ul-btn:focus-visible,.ul-calendar__trigger-group--focused .ul-btn:focus{outline:none}.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-visible,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus-within,.ul-calendar__trigger-group--focused .ul-calendar__trigger:hover,.ul-calendar__trigger-group--focused .ul-calendar__trigger:focus{outline:none}.ul-calendar__popup{display:flex;flex-direction:column;gap:16px;background-color:#232323;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;min-width:160px;max-width:512px}.ul-calendar__date-picker{display:flex;flex-direction:column;gap:12px}.ul-calendar__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.ul-calendar__month-year{flex:1;text-align:center;color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__weekday{text-align:center;color:#ffffff80;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:800;padding:4px}.ul-calendar__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ul-calendar__day{all:unset;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:#fff;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);min-height:32px}.ul-calendar__day--current-month{color:#fff}.ul-calendar__day:not(.ul-calendar__day--current-month){color:#ffffff80}.ul-calendar__day--today{border:2px solid #c2a8ff}.ul-calendar__day--selected{background-color:#6f3de0;border-color:#6f3de0;color:#fff}.ul-calendar__day--disabled{color:#ffffff4d;cursor:not-allowed;pointer-events:none}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover{background-color:#ffffff1a;color:inherit}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:hover{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:active{background-color:#ffffff1a}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:selected{background-color:#fff3}.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover:disabled,.ul-calendar__day:not(.ul-calendar__day--disabled):not(.ul-calendar__day--selected):hover[disabled]{background-color:#ffffff0d}.ul-calendar__time-picker{display:flex;flex-direction:column;gap:8px}.ul-calendar__time-controls{display:flex;align-items:center;justify-content:center;gap:8px}.ul-calendar__time-select{appearance:none;background-color:transparent;border:2px solid rgba(255,255,255,.1);border-radius:8px;min-width:48px;height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#fff;cursor:pointer;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-calendar__time-select:hover:not(:disabled){border-color:#ffffff4d}.ul-calendar__time-select:focus{outline:none;border-color:#ffffff80}.ul-calendar__time-select:disabled{color:#ffffff4d;cursor:not-allowed;border-color:#ffffff1a;background-color:transparent}.ul-calendar__time-select option{background-color:#232323;color:#fff}.ul-calendar__time-select option:disabled{color:#ffffff4d}.ul-calendar__time-separator{color:#fff;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:800}.ul-calendar__actions{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.ul-calendar--sm .ul-calendar__trigger-group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-calendar--sm .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;min-height:24px}.ul-calendar--md .ul-calendar__trigger-group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-calendar--md .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;min-height:32px}.ul-calendar--lg .ul-calendar__trigger-group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-calendar--lg .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;min-height:40px}.ul-calendar--xl .ul-calendar__trigger-group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-calendar--xl .ul-calendar__day{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400;min-height:48px}.ul-calendar--error .ul-calendar__trigger-group{border:2px solid #f69d9d}.ul-calendar--disabled .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--disabled .ul-calendar__trigger,.ul-calendar--disabled .ul-calendar__trigger:disabled::placeholder{color:#ffffff4d}.ul-calendar--read-only .ul-calendar__trigger-group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-calendar--read-only .ul-calendar__trigger,.ul-calendar--read-only .ul-calendar__trigger:read-only::placeholder{color:#ffffffb3}@media(max-width:767px){.ul-calendar__popup{min-width:auto;width:calc(100vw - 32px);max-width:calc(100vw - 32px);box-sizing:border-box;overflow-x:hidden;position:relative}.ul-calendar__day{min-height:24px}}@media(max-width:1023px){.ul-calendar :host ::ng-deep .cdk-overlay-pane{max-width:calc(100vw - 32px)!important;margin-left:16px!important;margin-right:16px!important}}\n"] }]
|
|
1237
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1233
1238
|
|
|
1234
1239
|
class CardComponent {
|
|
1235
1240
|
// State inputs
|
|
@@ -1408,6 +1413,8 @@ class CheckboxComponent {
|
|
|
1408
1413
|
...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1409
1414
|
required = input(false, /* @ts-ignore */
|
|
1410
1415
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1416
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
1417
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
1411
1418
|
error = input(false, /* @ts-ignore */
|
|
1412
1419
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1413
1420
|
errorText = input(null, /* @ts-ignore */
|
|
@@ -1429,7 +1436,7 @@ class CheckboxComponent {
|
|
|
1429
1436
|
this.checked.set(input.checked);
|
|
1430
1437
|
}
|
|
1431
1438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: CheckboxComponent, isStandalone: true, selector: "ul-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, zone: { classPropertyName: "zone", publicName: "zone", 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 }, required: { classPropertyName: "required", publicName: "required", 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", indeterminate: "indeterminateChange" }, ngImport: i0, template: `
|
|
1439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: CheckboxComponent, isStandalone: true, selector: "ul-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, zone: { classPropertyName: "zone", publicName: "zone", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", 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", indeterminate: "indeterminateChange" }, ngImport: i0, template: `
|
|
1433
1440
|
<div
|
|
1434
1441
|
class="ul-checkbox ul-checkbox--{{ size() }}"
|
|
1435
1442
|
[class.ul-checkbox--accessible-zone]="zone() === 'accessible'"
|
|
@@ -1447,6 +1454,7 @@ class CheckboxComponent {
|
|
|
1447
1454
|
[required]="required()"
|
|
1448
1455
|
[for]="ids.controlId"
|
|
1449
1456
|
[size]="size() === 'sm' ? 'sm' : 'md'"
|
|
1457
|
+
[showRequiredIndicator]="showRequiredIndicator()"
|
|
1450
1458
|
/>
|
|
1451
1459
|
|
|
1452
1460
|
<label
|
|
@@ -1455,6 +1463,7 @@ class CheckboxComponent {
|
|
|
1455
1463
|
[class.ul-checkbox__row--visible-zone]="zone() === 'visible'"
|
|
1456
1464
|
[class.ul-checkbox__row--checked-visible-zone]="zone() === 'checked-visible'"
|
|
1457
1465
|
[class.ul-checkbox__row--sm]="size() === 'sm'"
|
|
1466
|
+
[class.ul-checkbox__row--lg]="size() === 'lg'"
|
|
1458
1467
|
[class.ul-checkbox__row--error]="hasError()"
|
|
1459
1468
|
[attr.for]="ids.controlId"
|
|
1460
1469
|
>
|
|
@@ -1483,7 +1492,7 @@ class CheckboxComponent {
|
|
|
1483
1492
|
[error]="hasError()"
|
|
1484
1493
|
/>
|
|
1485
1494
|
</div>
|
|
1486
|
-
`, 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-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ul-checkbox__row{display:inline-flex;align-items:flex-start;cursor:pointer}.ul-checkbox__row:has(.ul-checkbox__input:disabled){cursor:not-allowed}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:has(.ul-checkbox__input:indeterminate) .ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__row--accessible-zone{padding:12px}.ul-checkbox__row--visible-zone{padding:12px;background:#fff3;border-radius:12px}.ul-checkbox__row--checked-visible-zone{padding:12px;border-radius:12px;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__row--checked-visible-zone:has(.ul-checkbox__input:checked){background:#fff3}.ul-checkbox__row--error .ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input,.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#f69d9d}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__input{position:absolute;opacity:0}.ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#ffffff80}.ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#fff;box-shadow:none}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__input:disabled+.ul-checkbox__pseudo-input{border-color:#ffffff1a}.ul-checkbox__input:disabled~.ul-checkbox__label{color:#ffffff4d}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input:before{content:\"minus_small\";opacity:1}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__pseudo-input{margin:2px;border-radius:4px;border:1px solid rgba(255,255,255,.5);width:16px;height:16px;position:relative;flex-shrink:0;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__pseudo-input:before{content:\"check_small\";font-family:Ultra Icons;top:-1px;left:-1px;width:16px;height:16px;position:absolute;color:#fff;line-height:16px;opacity:0;text-align:center;font-size:16px}.ul-checkbox__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-checkbox--sm .ul-checkbox__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-checkbox:not(.ul-checkbox--sm) .ul-checkbox__label{margin-top:-2px;margin-bottom:-2px}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
1495
|
+
`, 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-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ul-checkbox__row{display:inline-flex;align-items:flex-start;cursor:pointer}.ul-checkbox__row:has(.ul-checkbox__input:disabled){cursor:not-allowed}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:has(.ul-checkbox__input:indeterminate) .ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__row--accessible-zone{padding:12px}.ul-checkbox__row--visible-zone{padding:12px;background:#fff3;border-radius:12px}.ul-checkbox__row--checked-visible-zone{padding:12px;border-radius:12px;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__row--checked-visible-zone:has(.ul-checkbox__input:checked){background:#fff3}.ul-checkbox__row--error .ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input,.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#f69d9d}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--lg .ul-checkbox__pseudo-input{width:24px;height:24px}.ul-checkbox__row--lg .ul-checkbox__pseudo-input:before{width:24px;height:24px;line-height:24px;font-size:24px}.ul-checkbox__input{position:absolute;opacity:0}.ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#ffffff80}.ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#fff;box-shadow:none}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__input:disabled+.ul-checkbox__pseudo-input{border-color:#ffffff1a}.ul-checkbox__input:disabled~.ul-checkbox__label{color:#ffffff4d}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input:before{content:\"minus_small\";opacity:1}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__pseudo-input{margin:2px;border-radius:4px;border:1px solid rgba(255,255,255,.5);width:16px;height:16px;position:relative;flex-shrink:0;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__pseudo-input:before{content:\"check_small\";font-family:Ultra Icons;top:-1px;left:-1px;width:16px;height:16px;position:absolute;color:#fff;line-height:16px;opacity:0;text-align:center;font-size:16px}.ul-checkbox__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-checkbox--sm .ul-checkbox__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-checkbox:not(.ul-checkbox--sm) .ul-checkbox__label{margin-top:-2px;margin-bottom:-2px}\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"] }] });
|
|
1487
1496
|
}
|
|
1488
1497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1489
1498
|
type: Component,
|
|
@@ -1505,6 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1505
1514
|
[required]="required()"
|
|
1506
1515
|
[for]="ids.controlId"
|
|
1507
1516
|
[size]="size() === 'sm' ? 'sm' : 'md'"
|
|
1517
|
+
[showRequiredIndicator]="showRequiredIndicator()"
|
|
1508
1518
|
/>
|
|
1509
1519
|
|
|
1510
1520
|
<label
|
|
@@ -1513,6 +1523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1513
1523
|
[class.ul-checkbox__row--visible-zone]="zone() === 'visible'"
|
|
1514
1524
|
[class.ul-checkbox__row--checked-visible-zone]="zone() === 'checked-visible'"
|
|
1515
1525
|
[class.ul-checkbox__row--sm]="size() === 'sm'"
|
|
1526
|
+
[class.ul-checkbox__row--lg]="size() === 'lg'"
|
|
1516
1527
|
[class.ul-checkbox__row--error]="hasError()"
|
|
1517
1528
|
[attr.for]="ids.controlId"
|
|
1518
1529
|
>
|
|
@@ -1541,8 +1552,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1541
1552
|
[error]="hasError()"
|
|
1542
1553
|
/>
|
|
1543
1554
|
</div>
|
|
1544
|
-
`, 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-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ul-checkbox__row{display:inline-flex;align-items:flex-start;cursor:pointer}.ul-checkbox__row:has(.ul-checkbox__input:disabled){cursor:not-allowed}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:has(.ul-checkbox__input:indeterminate) .ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__row--accessible-zone{padding:12px}.ul-checkbox__row--visible-zone{padding:12px;background:#fff3;border-radius:12px}.ul-checkbox__row--checked-visible-zone{padding:12px;border-radius:12px;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__row--checked-visible-zone:has(.ul-checkbox__input:checked){background:#fff3}.ul-checkbox__row--error .ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input,.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#f69d9d}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__input{position:absolute;opacity:0}.ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#ffffff80}.ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#fff;box-shadow:none}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__input:disabled+.ul-checkbox__pseudo-input{border-color:#ffffff1a}.ul-checkbox__input:disabled~.ul-checkbox__label{color:#ffffff4d}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input:before{content:\"minus_small\";opacity:1}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__pseudo-input{margin:2px;border-radius:4px;border:1px solid rgba(255,255,255,.5);width:16px;height:16px;position:relative;flex-shrink:0;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__pseudo-input:before{content:\"check_small\";font-family:Ultra Icons;top:-1px;left:-1px;width:16px;height:16px;position:absolute;color:#fff;line-height:16px;opacity:0;text-align:center;font-size:16px}.ul-checkbox__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-checkbox--sm .ul-checkbox__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-checkbox:not(.ul-checkbox--sm) .ul-checkbox__label{margin-top:-2px;margin-bottom:-2px}\n"] }]
|
|
1545
|
-
}], 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"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], zone: [{ type: i0.Input, args: [{ isSignal: true, alias: "zone", required: false }] }], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }] } });
|
|
1555
|
+
`, 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-checkbox{display:flex;flex-direction:column;align-items:flex-start}.ul-checkbox__row{display:inline-flex;align-items:flex-start;cursor:pointer}.ul-checkbox__row:has(.ul-checkbox__input:disabled){cursor:not-allowed}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__row:has(.ul-checkbox__input:indeterminate) .ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__row--accessible-zone{padding:12px}.ul-checkbox__row--visible-zone{padding:12px;background:#fff3;border-radius:12px}.ul-checkbox__row--checked-visible-zone{padding:12px;border-radius:12px;transition:background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__row--checked-visible-zone:has(.ul-checkbox__input:checked){background:#fff3}.ul-checkbox__row--error .ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#f69d9d}.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input,.ul-checkbox__row--error .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled])+.ul-checkbox__pseudo-input{box-shadow:0 0 0 2px #ffffff1a;border-color:#f69d9d}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):indeterminate:active+.ul-checkbox__pseudo-input,.ul-checkbox__row--error:hover .ul-checkbox__input:not([disabled]):checked:active+.ul-checkbox__pseudo-input{background-color:#c33a3a;border-color:#c33a3a}.ul-checkbox__row--lg .ul-checkbox__pseudo-input{width:24px;height:24px}.ul-checkbox__row--lg .ul-checkbox__pseudo-input:before{width:24px;height:24px;line-height:24px;font-size:24px}.ul-checkbox__input{position:absolute;opacity:0}.ul-checkbox__input:focus-visible+.ul-checkbox__pseudo-input{border-color:#ffffff80}.ul-checkbox__input:not([disabled]):active+.ul-checkbox__pseudo-input[class]{border-color:#fff;box-shadow:none}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:not([disabled]):checked+.ul-checkbox__pseudo-input:before{opacity:1}.ul-checkbox__input:disabled+.ul-checkbox__pseudo-input{border-color:#ffffff1a}.ul-checkbox__input:disabled~.ul-checkbox__label{color:#ffffff4d}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input:disabled:checked+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input{background-color:#6f3de0;border-color:#6f3de0}.ul-checkbox__input:indeterminate+.ul-checkbox__pseudo-input:before{content:\"minus_small\";opacity:1}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input{background-color:#ffffff0d;border-color:transparent}.ul-checkbox__input[disabled]:indeterminate+.ul-checkbox__pseudo-input:before{opacity:1;color:#ffffff4d}.ul-checkbox__pseudo-input{margin:2px;border-radius:4px;border:1px solid rgba(255,255,255,.5);width:16px;height:16px;position:relative;flex-shrink:0;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-checkbox__pseudo-input:before{content:\"check_small\";font-family:Ultra Icons;top:-1px;left:-1px;width:16px;height:16px;position:absolute;color:#fff;line-height:16px;opacity:0;text-align:center;font-size:16px}.ul-checkbox__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-checkbox--sm .ul-checkbox__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-checkbox:not(.ul-checkbox--sm) .ul-checkbox__label{margin-top:-2px;margin-bottom:-2px}\n"] }]
|
|
1556
|
+
}], 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"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], zone: [{ type: i0.Input, args: [{ isSignal: true, alias: "zone", required: false }] }], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", 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 }] }] } });
|
|
1546
1557
|
|
|
1547
1558
|
/**
|
|
1548
1559
|
* A collapsible content component that supports both text and icon variants.
|
|
@@ -1816,22 +1827,22 @@ class ListItemComponent {
|
|
|
1816
1827
|
type="button"
|
|
1817
1828
|
class="ul-list-item ul-list-item--{{ theme() }}"
|
|
1818
1829
|
[class.ul-list-item--no-focus-outline]="hideFocusOutline()"
|
|
1819
|
-
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked"
|
|
1830
|
+
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
|
|
1820
1831
|
(click)="clickHandler()"
|
|
1821
1832
|
[disabled]="disabled() || loading()"
|
|
1822
1833
|
>
|
|
1823
1834
|
<div class="ul-list-item__before-label">
|
|
1824
|
-
<ng-content select="[ul-list-item-before-label]"
|
|
1835
|
+
<ng-content select="[ul-list-item-before-label]" />
|
|
1825
1836
|
</div>
|
|
1826
1837
|
<div class="ul-list-item__label">
|
|
1827
|
-
<ng-content select="[ul-list-item-label]"
|
|
1838
|
+
<ng-content select="[ul-list-item-label]" />
|
|
1828
1839
|
</div>
|
|
1829
1840
|
<div class="ul-list-item__after-label">
|
|
1830
|
-
<ng-content select="[ul-list-item-after-label]"
|
|
1841
|
+
<ng-content select="[ul-list-item-after-label]" />
|
|
1831
1842
|
</div>
|
|
1832
1843
|
</button>
|
|
1833
1844
|
</ul-skeleton>
|
|
1834
|
-
`, 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-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible
|
|
1845
|
+
`, 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-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }] });
|
|
1835
1846
|
}
|
|
1836
1847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
1837
1848
|
type: Component,
|
|
@@ -1841,24 +1852,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1841
1852
|
type="button"
|
|
1842
1853
|
class="ul-list-item ul-list-item--{{ theme() }}"
|
|
1843
1854
|
[class.ul-list-item--no-focus-outline]="hideFocusOutline()"
|
|
1844
|
-
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked"
|
|
1855
|
+
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked()"
|
|
1845
1856
|
(click)="clickHandler()"
|
|
1846
1857
|
[disabled]="disabled() || loading()"
|
|
1847
1858
|
>
|
|
1848
1859
|
<div class="ul-list-item__before-label">
|
|
1849
|
-
<ng-content select="[ul-list-item-before-label]"
|
|
1860
|
+
<ng-content select="[ul-list-item-before-label]" />
|
|
1850
1861
|
</div>
|
|
1851
1862
|
<div class="ul-list-item__label">
|
|
1852
|
-
<ng-content select="[ul-list-item-label]"
|
|
1863
|
+
<ng-content select="[ul-list-item-label]" />
|
|
1853
1864
|
</div>
|
|
1854
1865
|
<div class="ul-list-item__after-label">
|
|
1855
|
-
<ng-content select="[ul-list-item-after-label]"
|
|
1866
|
+
<ng-content select="[ul-list-item-after-label]" />
|
|
1856
1867
|
</div>
|
|
1857
1868
|
</button>
|
|
1858
1869
|
</ul-skeleton>
|
|
1859
|
-
`, 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-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible
|
|
1870
|
+
`, 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-list-item{cursor:pointer;border:none;white-space:nowrap;box-sizing:border-box;text-align:start;display:flex;align-items:center;width:100%;gap:8px;border-radius:8px;padding:8px 12px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-list-item:hover{background-color:#fff3}.ul-list-item:active{background-color:#ffffff1a}.ul-list-item:selected{background-color:#fff3}.ul-list-item{background-color:#fff0;color:inherit}.ul-list-item:disabled,.ul-list-item[disabled]{background-color:#fff0}.ul-list-item:focus-visible{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-list-item--no-focus-outline:focus-visible{outline:none;outline-offset:0}.ul-list-item--selected{background-color:transparent}.ul-list-item--transparent-white{background-color:#ffffff1a;color:inherit}.ul-list-item--transparent-white:hover{background-color:#fff3}.ul-list-item--transparent-white:active{background-color:#ffffff1a}.ul-list-item--transparent-white:selected{background-color:#fff3}.ul-list-item--transparent-white:disabled,.ul-list-item--transparent-white[disabled]{background-color:#ffffff0d}.ul-list-item--transparent-white{background-color:transparent}.ul-list-item--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-list-item--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-list-item--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-list-item--outline-white:disabled,.ul-list-item--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-list-item--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-list-item--outline-purple:disabled,.ul-list-item--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-list-item--transparent-white.ul-list-item--selected{background-color:#fff3}.ul-list-item__label{flex:1;color:#fff}.ul-list-item__before-label,.ul-list-item__after-label{display:flex;align-items:center;gap:8px}.ul-list-item .ul--icon{color:#fff}.ul-list-item:disabled,.ul-list-item[disabled]{cursor:not-allowed;color:#ffffff4d}.ul-list-item:disabled .ul-list-item__label,.ul-list-item[disabled] .ul-list-item__label{color:#ffffff4d}\n"] }]
|
|
1860
1871
|
}], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CheckboxComponent), { isSignal: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFocusOutline", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
1861
1872
|
|
|
1873
|
+
/**
|
|
1874
|
+
* Renders `items` as `ul-list-item` + `cdkMenuItem` rows inside an
|
|
1875
|
+
* already-open `cdkMenu` panel. Shared by `ul-dropdown` (which passes
|
|
1876
|
+
* `selectedIndex` so the current choice renders with a checkmark) and
|
|
1877
|
+
* `ul-menu` (which leaves `selectedIndex` as `null` — every item there is a
|
|
1878
|
+
* one-off action, never a persisted "current selection").
|
|
1879
|
+
*/
|
|
1880
|
+
class MenuItemsComponent {
|
|
1881
|
+
items = input([], /* @ts-ignore */
|
|
1882
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1883
|
+
theme = input('ghost-white', /* @ts-ignore */
|
|
1884
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
1885
|
+
/**
|
|
1886
|
+
* Index of the item to render as checked/selected.
|
|
1887
|
+
* @default null - no item is ever shown as checked (the action-menu case).
|
|
1888
|
+
*/
|
|
1889
|
+
selectedIndex = input(null, /* @ts-ignore */
|
|
1890
|
+
...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
1891
|
+
itemTriggered = output();
|
|
1892
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1893
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: MenuItemsComponent, isStandalone: true, selector: "ul-menu-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemTriggered: "itemTriggered" }, ngImport: i0, template: `
|
|
1894
|
+
<ng-template #renderIcons let-icons>
|
|
1895
|
+
@for (icon of icons; track icon) {
|
|
1896
|
+
<ul-icon size="5" [icon]="icon" />
|
|
1897
|
+
}
|
|
1898
|
+
</ng-template>
|
|
1899
|
+
|
|
1900
|
+
@for (item of items(); track $index) {
|
|
1901
|
+
<ul-list-item
|
|
1902
|
+
cdkMenuItem
|
|
1903
|
+
[theme]="theme()"
|
|
1904
|
+
[disabled]="!!item.disabled"
|
|
1905
|
+
(cdkMenuItemTriggered)="itemTriggered.emit($index)"
|
|
1906
|
+
[attr.role]="selectedIndex() === null ? 'menuitem' : 'menuitemradio'"
|
|
1907
|
+
[attr.aria-checked]="
|
|
1908
|
+
selectedIndex() === null ? null : selectedIndex() === $index ? 'true' : 'false'
|
|
1909
|
+
"
|
|
1910
|
+
>
|
|
1911
|
+
<ng-container ul-list-item-before-label>
|
|
1912
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: item.leftIcons }" />
|
|
1913
|
+
</ng-container>
|
|
1914
|
+
<ng-container ul-list-item-label>{{ item.label }}</ng-container>
|
|
1915
|
+
<ng-container ul-list-item-after-label>
|
|
1916
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: item.rightIcons }" />
|
|
1917
|
+
@if (selectedIndex() === $index) {
|
|
1918
|
+
<ul-icon size="5" icon="check" />
|
|
1919
|
+
}
|
|
1920
|
+
</ng-container>
|
|
1921
|
+
</ul-list-item>
|
|
1922
|
+
}
|
|
1923
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
1924
|
+
}
|
|
1925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuItemsComponent, decorators: [{
|
|
1926
|
+
type: Component,
|
|
1927
|
+
args: [{
|
|
1928
|
+
selector: 'ul-menu-items',
|
|
1929
|
+
imports: [CdkMenuItem, NgTemplateOutlet, ListItemComponent, IconComponent],
|
|
1930
|
+
template: `
|
|
1931
|
+
<ng-template #renderIcons let-icons>
|
|
1932
|
+
@for (icon of icons; track icon) {
|
|
1933
|
+
<ul-icon size="5" [icon]="icon" />
|
|
1934
|
+
}
|
|
1935
|
+
</ng-template>
|
|
1936
|
+
|
|
1937
|
+
@for (item of items(); track $index) {
|
|
1938
|
+
<ul-list-item
|
|
1939
|
+
cdkMenuItem
|
|
1940
|
+
[theme]="theme()"
|
|
1941
|
+
[disabled]="!!item.disabled"
|
|
1942
|
+
(cdkMenuItemTriggered)="itemTriggered.emit($index)"
|
|
1943
|
+
[attr.role]="selectedIndex() === null ? 'menuitem' : 'menuitemradio'"
|
|
1944
|
+
[attr.aria-checked]="
|
|
1945
|
+
selectedIndex() === null ? null : selectedIndex() === $index ? 'true' : 'false'
|
|
1946
|
+
"
|
|
1947
|
+
>
|
|
1948
|
+
<ng-container ul-list-item-before-label>
|
|
1949
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: item.leftIcons }" />
|
|
1950
|
+
</ng-container>
|
|
1951
|
+
<ng-container ul-list-item-label>{{ item.label }}</ng-container>
|
|
1952
|
+
<ng-container ul-list-item-after-label>
|
|
1953
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: item.rightIcons }" />
|
|
1954
|
+
@if (selectedIndex() === $index) {
|
|
1955
|
+
<ul-icon size="5" icon="check" />
|
|
1956
|
+
}
|
|
1957
|
+
</ng-container>
|
|
1958
|
+
</ul-list-item>
|
|
1959
|
+
}
|
|
1960
|
+
`,
|
|
1961
|
+
}]
|
|
1962
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], itemTriggered: [{ type: i0.Output, args: ["itemTriggered"] }] } });
|
|
1963
|
+
|
|
1964
|
+
/**
|
|
1965
|
+
* The trigger button shared by `ul-dropdown` and `ul-menu`: either an
|
|
1966
|
+
* icon-only button (`iconOnly`, e.g. a "more options" `⋮`) or a
|
|
1967
|
+
* `ul-list-item`-styled button showing a label with optional icons on
|
|
1968
|
+
* either side. Wires `cdkMenuTriggerFor` plus the ARIA attributes a menu
|
|
1969
|
+
* trigger needs, and exposes `close()` so the panel it opens can be
|
|
1970
|
+
* dismissed programmatically (e.g. a tap on a mobile bottom-sheet backdrop,
|
|
1971
|
+
* which CDK's own outside-click handling won't catch since the backdrop
|
|
1972
|
+
* lives inside the same overlay pane).
|
|
1973
|
+
*/
|
|
1974
|
+
class MenuTriggerComponent {
|
|
1975
|
+
theme = input('ghost-white', /* @ts-ignore */
|
|
1976
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
1977
|
+
disabled = input(false, /* @ts-ignore */
|
|
1978
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1979
|
+
iconOnly = input(/* @ts-ignore */
|
|
1980
|
+
...(ngDevMode ? [undefined, { debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
1981
|
+
iconOnlyLabel = input('Open menu', /* @ts-ignore */
|
|
1982
|
+
...(ngDevMode ? [{ debugName: "iconOnlyLabel" }] : /* istanbul ignore next */ []));
|
|
1983
|
+
label = input('', /* @ts-ignore */
|
|
1984
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1985
|
+
leftIcons = input([], /* @ts-ignore */
|
|
1986
|
+
...(ngDevMode ? [{ debugName: "leftIcons" }] : /* istanbul ignore next */ []));
|
|
1987
|
+
rightIcons = input([], /* @ts-ignore */
|
|
1988
|
+
...(ngDevMode ? [{ debugName: "rightIcons" }] : /* istanbul ignore next */ []));
|
|
1989
|
+
menuTemplate = input.required(/* @ts-ignore */
|
|
1990
|
+
...(ngDevMode ? [{ debugName: "menuTemplate" }] : /* istanbul ignore next */ []));
|
|
1991
|
+
menuId = input.required(/* @ts-ignore */
|
|
1992
|
+
...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
|
|
1993
|
+
isOpen = input(false, /* @ts-ignore */
|
|
1994
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1995
|
+
opened = output();
|
|
1996
|
+
closed = output();
|
|
1997
|
+
trigger = viewChild(CdkMenuTrigger, /* @ts-ignore */
|
|
1998
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
1999
|
+
close() {
|
|
2000
|
+
this.trigger()?.close();
|
|
2001
|
+
}
|
|
2002
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2003
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: MenuTriggerComponent, isStandalone: true, selector: "ul-menu-trigger", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leftIcons: { classPropertyName: "leftIcons", publicName: "leftIcons", isSignal: true, isRequired: false, transformFunction: null }, rightIcons: { classPropertyName: "rightIcons", publicName: "rightIcons", isSignal: true, isRequired: false, transformFunction: null }, menuTemplate: { classPropertyName: "menuTemplate", publicName: "menuTemplate", isSignal: true, isRequired: true, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2004
|
+
<ng-template #renderIcons let-icons>
|
|
2005
|
+
@for (icon of icons; track icon) {
|
|
2006
|
+
<ul-icon size="5" [icon]="icon" />
|
|
2007
|
+
}
|
|
2008
|
+
</ng-template>
|
|
2009
|
+
|
|
2010
|
+
@if (iconOnly(); as iconName) {
|
|
2011
|
+
<ul-button
|
|
2012
|
+
[theme]="theme()"
|
|
2013
|
+
[iconOnly]="true"
|
|
2014
|
+
[disabled]="disabled()"
|
|
2015
|
+
[cdkMenuTriggerFor]="menuTemplate()"
|
|
2016
|
+
class="ul-menu-trigger"
|
|
2017
|
+
aria-haspopup="menu"
|
|
2018
|
+
[attr.aria-expanded]="isOpen()"
|
|
2019
|
+
[attr.aria-controls]="menuId()"
|
|
2020
|
+
[attr.aria-label]="iconOnlyLabel()"
|
|
2021
|
+
(cdkMenuOpened)="opened.emit()"
|
|
2022
|
+
(cdkMenuClosed)="closed.emit()"
|
|
2023
|
+
>
|
|
2024
|
+
<ul-icon [icon]="iconName" />
|
|
2025
|
+
</ul-button>
|
|
2026
|
+
} @else {
|
|
2027
|
+
<ul-list-item
|
|
2028
|
+
[theme]="theme()"
|
|
2029
|
+
[disabled]="disabled()"
|
|
2030
|
+
[cdkMenuTriggerFor]="menuTemplate()"
|
|
2031
|
+
class="ul-menu-trigger"
|
|
2032
|
+
aria-haspopup="menu"
|
|
2033
|
+
[attr.aria-expanded]="isOpen()"
|
|
2034
|
+
[attr.aria-controls]="menuId()"
|
|
2035
|
+
(cdkMenuOpened)="opened.emit()"
|
|
2036
|
+
(cdkMenuClosed)="closed.emit()"
|
|
2037
|
+
>
|
|
2038
|
+
<ng-container ul-list-item-before-label>
|
|
2039
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: leftIcons() }" />
|
|
2040
|
+
</ng-container>
|
|
2041
|
+
<ng-container ul-list-item-label>{{ label() }}</ng-container>
|
|
2042
|
+
<ng-container ul-list-item-after-label>
|
|
2043
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: rightIcons() }" />
|
|
2044
|
+
</ng-container>
|
|
2045
|
+
</ul-list-item>
|
|
2046
|
+
}
|
|
2047
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
2048
|
+
}
|
|
2049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuTriggerComponent, decorators: [{
|
|
2050
|
+
type: Component,
|
|
2051
|
+
args: [{
|
|
2052
|
+
selector: 'ul-menu-trigger',
|
|
2053
|
+
imports: [CdkMenuTrigger, NgTemplateOutlet, ButtonComponent, ListItemComponent, IconComponent],
|
|
2054
|
+
template: `
|
|
2055
|
+
<ng-template #renderIcons let-icons>
|
|
2056
|
+
@for (icon of icons; track icon) {
|
|
2057
|
+
<ul-icon size="5" [icon]="icon" />
|
|
2058
|
+
}
|
|
2059
|
+
</ng-template>
|
|
2060
|
+
|
|
2061
|
+
@if (iconOnly(); as iconName) {
|
|
2062
|
+
<ul-button
|
|
2063
|
+
[theme]="theme()"
|
|
2064
|
+
[iconOnly]="true"
|
|
2065
|
+
[disabled]="disabled()"
|
|
2066
|
+
[cdkMenuTriggerFor]="menuTemplate()"
|
|
2067
|
+
class="ul-menu-trigger"
|
|
2068
|
+
aria-haspopup="menu"
|
|
2069
|
+
[attr.aria-expanded]="isOpen()"
|
|
2070
|
+
[attr.aria-controls]="menuId()"
|
|
2071
|
+
[attr.aria-label]="iconOnlyLabel()"
|
|
2072
|
+
(cdkMenuOpened)="opened.emit()"
|
|
2073
|
+
(cdkMenuClosed)="closed.emit()"
|
|
2074
|
+
>
|
|
2075
|
+
<ul-icon [icon]="iconName" />
|
|
2076
|
+
</ul-button>
|
|
2077
|
+
} @else {
|
|
2078
|
+
<ul-list-item
|
|
2079
|
+
[theme]="theme()"
|
|
2080
|
+
[disabled]="disabled()"
|
|
2081
|
+
[cdkMenuTriggerFor]="menuTemplate()"
|
|
2082
|
+
class="ul-menu-trigger"
|
|
2083
|
+
aria-haspopup="menu"
|
|
2084
|
+
[attr.aria-expanded]="isOpen()"
|
|
2085
|
+
[attr.aria-controls]="menuId()"
|
|
2086
|
+
(cdkMenuOpened)="opened.emit()"
|
|
2087
|
+
(cdkMenuClosed)="closed.emit()"
|
|
2088
|
+
>
|
|
2089
|
+
<ng-container ul-list-item-before-label>
|
|
2090
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: leftIcons() }" />
|
|
2091
|
+
</ng-container>
|
|
2092
|
+
<ng-container ul-list-item-label>{{ label() }}</ng-container>
|
|
2093
|
+
<ng-container ul-list-item-after-label>
|
|
2094
|
+
<ng-container *ngTemplateOutlet="renderIcons; context: { $implicit: rightIcons() }" />
|
|
2095
|
+
</ng-container>
|
|
2096
|
+
</ul-list-item>
|
|
2097
|
+
}
|
|
2098
|
+
`,
|
|
2099
|
+
}]
|
|
2100
|
+
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], leftIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcons", required: false }] }], rightIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcons", required: false }] }], menuTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTemplate", required: true }] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuId", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }] } });
|
|
2101
|
+
|
|
2102
|
+
const DEFAULT_MENU_TRIGGER_ICONS = {
|
|
2103
|
+
rightIcons: ['chevron_down'],
|
|
2104
|
+
};
|
|
1862
2105
|
/**
|
|
1863
2106
|
* A customizable dropdown component that displays a list of selectable items.
|
|
1864
2107
|
*
|
|
@@ -1907,7 +2150,7 @@ class DropdownComponent {
|
|
|
1907
2150
|
/**
|
|
1908
2151
|
* Overrides the icons of the selected item in the trigger button.
|
|
1909
2152
|
* Can override leftIcons, rightIcons, or both.
|
|
1910
|
-
* @default {}
|
|
2153
|
+
* @default { rightIcons: ['chevron_down'] }
|
|
1911
2154
|
*
|
|
1912
2155
|
* @example
|
|
1913
2156
|
* ```typescript
|
|
@@ -1916,9 +2159,7 @@ class DropdownComponent {
|
|
|
1916
2159
|
* }
|
|
1917
2160
|
* ```
|
|
1918
2161
|
*/
|
|
1919
|
-
menuTriggerIcons = input(
|
|
1920
|
-
rightIcons: ['chevron_down'],
|
|
1921
|
-
}, /* @ts-ignore */
|
|
2162
|
+
menuTriggerIcons = input(DEFAULT_MENU_TRIGGER_ICONS, /* @ts-ignore */
|
|
1922
2163
|
...(ngDevMode ? [{ debugName: "menuTriggerIcons" }] : /* istanbul ignore next */ []));
|
|
1923
2164
|
/**
|
|
1924
2165
|
* Shows only a single icon in the trigger button, hiding the selected item's label and icons.
|
|
@@ -1961,7 +2202,7 @@ class DropdownComponent {
|
|
|
1961
2202
|
const item = items[index] ?? items[0] ?? fallback;
|
|
1962
2203
|
return {
|
|
1963
2204
|
...item,
|
|
1964
|
-
...this.menuTriggerIcons(),
|
|
2205
|
+
...(this.menuTriggerIcons() ?? DEFAULT_MENU_TRIGGER_ICONS),
|
|
1965
2206
|
};
|
|
1966
2207
|
}, /* @ts-ignore */
|
|
1967
2208
|
...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
@@ -1997,6 +2238,8 @@ class DropdownComponent {
|
|
|
1997
2238
|
* built on top of it (see ul-select's touch output).
|
|
1998
2239
|
*/
|
|
1999
2240
|
closed = output();
|
|
2241
|
+
trigger = viewChild(MenuTriggerComponent, /* @ts-ignore */
|
|
2242
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
2000
2243
|
/**
|
|
2001
2244
|
* Handles the selection of a dropdown item.
|
|
2002
2245
|
* @param index - The index of the selected item
|
|
@@ -2005,6 +2248,13 @@ class DropdownComponent {
|
|
|
2005
2248
|
this.selectedIndex.set(index);
|
|
2006
2249
|
this.selectedItemChange.emit(this.items()[index]);
|
|
2007
2250
|
}
|
|
2251
|
+
/**
|
|
2252
|
+
* Closes the panel. CDK auto-closes on a `cdkMenuItem` trigger already —
|
|
2253
|
+
* this is for the mobile backdrop tap, which isn't one.
|
|
2254
|
+
*/
|
|
2255
|
+
closeMenu() {
|
|
2256
|
+
this.trigger()?.close();
|
|
2257
|
+
}
|
|
2008
2258
|
onMenuOpened() {
|
|
2009
2259
|
this.isOpen.set(true);
|
|
2010
2260
|
}
|
|
@@ -2013,20 +2263,12 @@ class DropdownComponent {
|
|
|
2013
2263
|
this.closed.emit();
|
|
2014
2264
|
}
|
|
2015
2265
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2016
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
2266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: DropdownComponent, isStandalone: true, selector: "ul-dropdown", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerIcons: { classPropertyName: "menuTriggerIcons", publicName: "menuTriggerIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedItemChange: "selectedItemChange", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ul-dropdown\">\n <ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"selectedItem().label\"\n [leftIcons]=\"selectedItem().leftIcons ?? []\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n />\n\n <ng-template #menu>\n <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n [selectedIndex]=\"selectedIndex()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n </div>\n </ng-template>\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-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2017
2267
|
}
|
|
2018
2268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
2019
2269
|
type: Component,
|
|
2020
|
-
args: [{ selector: 'ul-dropdown', imports: [
|
|
2021
|
-
|
|
2022
|
-
CdkMenu,
|
|
2023
|
-
CdkMenuItem,
|
|
2024
|
-
NgTemplateOutlet,
|
|
2025
|
-
ListItemComponent,
|
|
2026
|
-
IconComponent,
|
|
2027
|
-
ButtonComponent,
|
|
2028
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"ul-dropdown\">\n <!-- Template for rendering icon arrays -->\n <ng-template #renderIcons let-icons>\n @for (icon of icons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n </ng-template>\n\n @if (triggerIconOnly(); as iconName) {\n <ul-button\n [theme]=\"theme()\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"menu\"\n class=\"ul-dropdown__trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-label]=\"iconOnlyLabel()\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ul-icon [icon]=\"iconName\" />\n </ul-button>\n } @else {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [cdkMenuTriggerFor]=\"menu\"\n class=\"ul-dropdown__trigger\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n (cdkMenuOpened)=\"onMenuOpened()\"\n (cdkMenuClosed)=\"onMenuClosed()\"\n >\n <ng-container ul-list-item-before-label>\n @if (selectedItem().leftIcons) {\n <ng-container\n *ngTemplateOutlet=\"renderIcons; context: { $implicit: selectedItem().leftIcons }\"\n />\n }\n </ng-container>\n <ng-container ul-list-item-label>\n {{ selectedItem().label }}\n </ng-container>\n <ng-container ul-list-item-after-label>\n <ng-container\n *ngTemplateOutlet=\"renderIcons; context: { $implicit: triggerRightIcons() }\"\n />\n </ng-container>\n </ul-list-item>\n }\n\n <ng-template #menu>\n <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n @for (item of items(); track $index) {\n <ul-list-item\n cdkMenuItem\n (cdkMenuItemTriggered)=\"handleItemTriggered($index)\"\n [disabled]=\"!!item.disabled\"\n role=\"menuitemradio\"\n [attr.aria-checked]=\"selectedIndex() === $index ? 'true' : 'false'\"\n >\n <ng-container ul-list-item-before-label>\n <ng-container *ngTemplateOutlet=\"renderIcons; context: { $implicit: item.leftIcons }\" />\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n <ng-container\n *ngTemplateOutlet=\"renderIcons; context: { $implicit: item.rightIcons }\"\n />\n @if (selectedIndex() === $index) {\n <ul-icon size=\"5\" icon=\"check\" />\n }\n </ng-container>\n </ul-list-item>\n }\n </div>\n </ng-template>\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-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}\n"] }]
|
|
2029
|
-
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuTriggerIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerIcons", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedItemChange: [{ type: i0.Output, args: ["selectedItemChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2270
|
+
args: [{ selector: 'ul-dropdown', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"ul-dropdown\">\n <ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"selectedItem().label\"\n [leftIcons]=\"selectedItem().leftIcons ?? []\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n />\n\n <ng-template #menu>\n <div class=\"ul-dropdown__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-dropdown__content ul-scrollable\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n [selectedIndex]=\"selectedIndex()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n </div>\n </ng-template>\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-dropdown{display:inline-flex;flex-direction:column;width:100%;gap:4px}.ul-dropdown__backdrop{display:none}@media(max-width:1023px){.ul-dropdown__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}.ul-dropdown__content{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;max-height:316px;overflow-y:auto}@media(max-width:1023px){.ul-dropdown__content{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto}}\n"] }]
|
|
2271
|
+
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuTriggerIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerIcons", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedItemChange: [{ type: i0.Output, args: ["selectedItemChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuTriggerComponent), { isSignal: true }] }] } });
|
|
2030
2272
|
|
|
2031
2273
|
/**
|
|
2032
2274
|
* File input component with label, helper/error text, and optional slots.
|
|
@@ -2048,6 +2290,8 @@ class FileInputComponent {
|
|
|
2048
2290
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2049
2291
|
required = input(false, /* @ts-ignore */
|
|
2050
2292
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2293
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
2294
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
2051
2295
|
label = input(null, /* @ts-ignore */
|
|
2052
2296
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2053
2297
|
helperText = input(null, /* @ts-ignore */
|
|
@@ -2134,12 +2378,12 @@ class FileInputComponent {
|
|
|
2134
2378
|
el.focus();
|
|
2135
2379
|
}
|
|
2136
2380
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: FileInputComponent, isStandalone: true, selector: "ul-file-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ul-file-input ul-file-input--{{ size() }} ul-file-input--appearance-{{ appearance() }}\"\n [class.ul-file-input--error]=\"hasError()\"\n [class.ul-file-input--disabled]=\"disabled()\"\n [class.ul-file-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-file-input__group\" [class.ul-file-input__group--focused]=\"isFocused()\">\n <div class=\"ul-file-input__left-elements\">\n <ng-content select=\"[ul-file-input-left-elements]\" />\n </div>\n\n <input\n #fileInput\n [id]=\"effectiveControlId()\"\n type=\"file\"\n class=\"ul-file-input__native\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onFileChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <button\n type=\"button\"\n class=\"ul-file-input__trigger\"\n [disabled]=\"disabled()\"\n (click)=\"triggerClick()\"\n >\n Choose file\n </button>\n <span class=\"ul-file-input__label\">{{ selectedLabel() }}</span>\n\n <div class=\"ul-file-input__right-elements\">\n <ng-content select=\"[ul-file-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-file-input{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-file-input__group{position:relative;display:flex;align-items:center;height:40px;gap:0;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-file-input__group--focused{border-color:#ffffff80}.ul-file-input--appearance-border-only:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d}.ul-file-input--appearance-subtle-tint:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d;background-color:#ffffff0d}.ul-file-input__native{position:absolute;width:0;height:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.ul-file-input__trigger{flex-shrink:0;margin:0 8px 0 0;height:100%;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background-color:#232323;padding:0 12px;color:#fff;cursor:pointer;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.ul-file-input__trigger:hover:not(:disabled){background-color:#ffffff1a}.ul-file-input__trigger:disabled{cursor:not-allowed;color:#ffffff4d;background-color:transparent}.ul-file-input__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffffff80}.ul-file-input__left-elements,.ul-file-input__right-elements{display:flex;gap:8px}.ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--sm .ul-file-input__group{height:32px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-file-input--sm .ul-file-input__left-elements,.ul-file-input--sm .ul-file-input__right-elements{gap:4px}.ul-file-input--sm .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--sm .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-file-input--md .ul-file-input__group{height:40px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-file-input--md .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--md .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--lg .ul-file-input__group{height:48px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-file-input--lg .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--lg .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-file-input--xl .ul-file-input__group{height:64px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-file-input--xl .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--xl .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-file-input--error .ul-file-input__group{border:2px solid #f69d9d}.ul-file-input--disabled .ul-file-input__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-file-input--disabled .ul-file-input__label{color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
2381
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: FileInputComponent, isStandalone: true, selector: "ul-file-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", 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 }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ul-file-input ul-file-input--{{ size() }} ul-file-input--appearance-{{ appearance() }}\"\n [class.ul-file-input--error]=\"hasError()\"\n [class.ul-file-input--disabled]=\"disabled()\"\n [class.ul-file-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-file-input__group\" [class.ul-file-input__group--focused]=\"isFocused()\">\n <div class=\"ul-file-input__left-elements\">\n <ng-content select=\"[ul-file-input-left-elements]\" />\n </div>\n\n <input\n #fileInput\n [id]=\"effectiveControlId()\"\n type=\"file\"\n class=\"ul-file-input__native\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onFileChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <button\n type=\"button\"\n class=\"ul-file-input__trigger\"\n [disabled]=\"disabled()\"\n (click)=\"triggerClick()\"\n >\n Choose file\n </button>\n <span class=\"ul-file-input__label\">{{ selectedLabel() }}</span>\n\n <div class=\"ul-file-input__right-elements\">\n <ng-content select=\"[ul-file-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-file-input{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-file-input__group{position:relative;display:flex;align-items:center;height:40px;gap:0;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-file-input__group--focused{border-color:#ffffff80}.ul-file-input--appearance-border-only:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d}.ul-file-input--appearance-subtle-tint:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d;background-color:#ffffff0d}.ul-file-input__native{position:absolute;width:0;height:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.ul-file-input__trigger{flex-shrink:0;margin:0 8px 0 0;height:100%;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background-color:#232323;padding:0 12px;color:#fff;cursor:pointer;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.ul-file-input__trigger:hover:not(:disabled){background-color:#ffffff1a}.ul-file-input__trigger:disabled{cursor:not-allowed;color:#ffffff4d;background-color:transparent}.ul-file-input__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffffff80}.ul-file-input__left-elements,.ul-file-input__right-elements{display:flex;gap:8px}.ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--sm .ul-file-input__group{height:32px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-file-input--sm .ul-file-input__left-elements,.ul-file-input--sm .ul-file-input__right-elements{gap:4px}.ul-file-input--sm .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--sm .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-file-input--md .ul-file-input__group{height:40px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-file-input--md .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--md .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--lg .ul-file-input__group{height:48px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-file-input--lg .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--lg .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-file-input--xl .ul-file-input__group{height:64px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-file-input--xl .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--xl .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-file-input--error .ul-file-input__group{border:2px solid #f69d9d}.ul-file-input--disabled .ul-file-input__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-file-input--disabled .ul-file-input__label{color:#ffffff4d}\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"] }] });
|
|
2138
2382
|
}
|
|
2139
2383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2140
2384
|
type: Component,
|
|
2141
|
-
args: [{ selector: 'ul-file-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: "<div\n class=\"ul-file-input ul-file-input--{{ size() }} ul-file-input--appearance-{{ appearance() }}\"\n [class.ul-file-input--error]=\"hasError()\"\n [class.ul-file-input--disabled]=\"disabled()\"\n [class.ul-file-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-file-input__group\" [class.ul-file-input__group--focused]=\"isFocused()\">\n <div class=\"ul-file-input__left-elements\">\n <ng-content select=\"[ul-file-input-left-elements]\" />\n </div>\n\n <input\n #fileInput\n [id]=\"effectiveControlId()\"\n type=\"file\"\n class=\"ul-file-input__native\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onFileChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <button\n type=\"button\"\n class=\"ul-file-input__trigger\"\n [disabled]=\"disabled()\"\n (click)=\"triggerClick()\"\n >\n Choose file\n </button>\n <span class=\"ul-file-input__label\">{{ selectedLabel() }}</span>\n\n <div class=\"ul-file-input__right-elements\">\n <ng-content select=\"[ul-file-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-file-input{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-file-input__group{position:relative;display:flex;align-items:center;height:40px;gap:0;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-file-input__group--focused{border-color:#ffffff80}.ul-file-input--appearance-border-only:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d}.ul-file-input--appearance-subtle-tint:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d;background-color:#ffffff0d}.ul-file-input__native{position:absolute;width:0;height:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.ul-file-input__trigger{flex-shrink:0;margin:0 8px 0 0;height:100%;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background-color:#232323;padding:0 12px;color:#fff;cursor:pointer;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.ul-file-input__trigger:hover:not(:disabled){background-color:#ffffff1a}.ul-file-input__trigger:disabled{cursor:not-allowed;color:#ffffff4d;background-color:transparent}.ul-file-input__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffffff80}.ul-file-input__left-elements,.ul-file-input__right-elements{display:flex;gap:8px}.ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--sm .ul-file-input__group{height:32px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-file-input--sm .ul-file-input__left-elements,.ul-file-input--sm .ul-file-input__right-elements{gap:4px}.ul-file-input--sm .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--sm .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-file-input--md .ul-file-input__group{height:40px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-file-input--md .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--md .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--lg .ul-file-input__group{height:48px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-file-input--lg .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--lg .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-file-input--xl .ul-file-input__group{height:64px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-file-input--xl .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--xl .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-file-input--error .ul-file-input__group{border:2px solid #f69d9d}.ul-file-input--disabled .ul-file-input__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-file-input--disabled .ul-file-input__label{color:#ffffff4d}\n"] }]
|
|
2142
|
-
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }] } });
|
|
2385
|
+
args: [{ selector: 'ul-file-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: "<div\n class=\"ul-file-input ul-file-input--{{ size() }} ul-file-input--appearance-{{ appearance() }}\"\n [class.ul-file-input--error]=\"hasError()\"\n [class.ul-file-input--disabled]=\"disabled()\"\n [class.ul-file-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-file-input__group\" [class.ul-file-input__group--focused]=\"isFocused()\">\n <div class=\"ul-file-input__left-elements\">\n <ng-content select=\"[ul-file-input-left-elements]\" />\n </div>\n\n <input\n #fileInput\n [id]=\"effectiveControlId()\"\n type=\"file\"\n class=\"ul-file-input__native\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n (change)=\"onFileChange($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <button\n type=\"button\"\n class=\"ul-file-input__trigger\"\n [disabled]=\"disabled()\"\n (click)=\"triggerClick()\"\n >\n Choose file\n </button>\n <span class=\"ul-file-input__label\">{{ selectedLabel() }}</span>\n\n <div class=\"ul-file-input__right-elements\">\n <ng-content select=\"[ul-file-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-file-input{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-file-input__group{position:relative;display:flex;align-items:center;height:40px;gap:0;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-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-file-input__group--focused{border-color:#ffffff80}.ul-file-input--appearance-border-only:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d}.ul-file-input--appearance-subtle-tint:not(.ul-file-input--disabled) .ul-file-input__group:hover{border-color:#ffffff4d;background-color:#ffffff0d}.ul-file-input__native{position:absolute;width:0;height:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.ul-file-input__trigger{flex-shrink:0;margin:0 8px 0 0;height:100%;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background-color:#232323;padding:0 12px;color:#fff;cursor:pointer;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.ul-file-input__trigger:hover:not(:disabled){background-color:#ffffff1a}.ul-file-input__trigger:disabled{cursor:not-allowed;color:#ffffff4d;background-color:transparent}.ul-file-input__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffffff80}.ul-file-input__left-elements,.ul-file-input__right-elements{display:flex;gap:8px}.ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--sm .ul-file-input__group{height:32px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-file-input--sm .ul-file-input__left-elements,.ul-file-input--sm .ul-file-input__right-elements{gap:4px}.ul-file-input--sm .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--sm .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-file-input--md .ul-file-input__group{height:40px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-file-input--md .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--md .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-file-input--lg .ul-file-input__group{height:48px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-file-input--lg .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--lg .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-file-input--xl .ul-file-input__group{height:64px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-file-input--xl .ul-file-input__left-elements ::ng-deep .ul-icon,.ul-file-input--xl .ul-file-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-file-input--error .ul-file-input__group{border:2px solid #f69d9d}.ul-file-input--disabled .ul-file-input__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-file-input--disabled .ul-file-input__label{color:#ffffff4d}\n"] }]
|
|
2386
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", 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 }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }] } });
|
|
2143
2387
|
|
|
2144
2388
|
class FooterComponent {
|
|
2145
2389
|
socialLinks = input([], /* @ts-ignore */
|
|
@@ -2192,11 +2436,11 @@ class PillComponent {
|
|
|
2192
2436
|
}, /* @ts-ignore */
|
|
2193
2437
|
...(ngDevMode ? [{ debugName: "modifierClass" }] : /* istanbul ignore next */ []));
|
|
2194
2438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: PillComponent, isStandalone: true, selector: "ul-pill", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (variant() === 'selectable') {\n <label [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <input type=\"checkbox\" class=\"ul-pill__checkbox\" />\n <ng-container *ngTemplateOutlet=\"content\" />\n </label>\n} @else if (['dismissible', 'read-only'].includes(variant())) {\n <div [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (variant() === 'dismissible') {\n <ul-button\n [theme]=\"dismissibleButtonTheme()\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"dismiss.emit()\"\n >\n <ul-icon icon=\"close\" />\n </ul-button>\n }\n </div>\n} @else if (['interactive', 'interactive-rounded'].includes(variant())) {\n <button [class]=\"modifierClass()\" [disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </button>\n}\n\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-pill{border:none;cursor:pointer;text-decoration-line:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;box-sizing:border-box;background-color:transparent;gap:8px;color:#fff;border-radius:8px;padding:4px 12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-pill--md{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-pill--lg{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500}.ul-pill--interactive,.ul-pill--interactive-rounded,.ul-pill--selectable{cursor:pointer}.ul-pill--interactive:focus-visible,.ul-pill--interactive:focus,.ul-pill--interactive-rounded:focus-visible,.ul-pill--interactive-rounded:focus,.ul-pill--selectable:focus-visible,.ul-pill--selectable:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-pill--interactive-rounded{cursor:pointer;border-radius:4096px}.ul-pill--read-only,.ul-pill--dismissible.ul-pill{cursor:default}.ul-pill--dismissible.ul-pill .ul-btn--sm:last-child .ul-icon{font-size:16px;line-height:16px}.ul-pill--dismissible.ul-pill--md{padding:4px 4px 4px 12px;border-radius:8px}.ul-pill--dismissible.ul-pill--md .ul-btn--sm:last-child{min-width:24px;height:24px}.ul-pill--dismissible.ul-pill--lg{padding:8px 4px 8px 16px;border-radius:12px}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{background-color:#fff;color:inherit}.ul-pill--interactive.ul-pill--fill-white:hover,.ul-pill--interactive-rounded.ul-pill--fill-white:hover{background-color:#e7e7e7}.ul-pill--interactive.ul-pill--fill-white:active,.ul-pill--interactive-rounded.ul-pill--fill-white:active{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:selected,.ul-pill--interactive-rounded.ul-pill--fill-white:selected{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:disabled,.ul-pill--interactive.ul-pill--fill-white[disabled],.ul-pill--interactive-rounded.ul-pill--fill-white:disabled,.ul-pill--interactive-rounded.ul-pill--fill-white[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{color:#000}.ul-pill--interactive.ul-pill--fill-black:hover,.ul-pill--interactive-rounded.ul-pill--fill-black:hover{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:active,.ul-pill--interactive-rounded.ul-pill--fill-black:active{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black:selected,.ul-pill--interactive-rounded.ul-pill--fill-black:selected{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:disabled,.ul-pill--interactive.ul-pill--fill-black[disabled],.ul-pill--interactive-rounded.ul-pill--fill-black:disabled,.ul-pill--interactive-rounded.ul-pill--fill-black[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black,.ul-pill--interactive-rounded.ul-pill--fill-black{background-color:#232323;color:inherit;color:#fff}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{background-color:#6f3de0;color:inherit}.ul-pill--interactive.ul-pill--fill-purple:hover,.ul-pill--interactive-rounded.ul-pill--fill-purple:hover{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:active,.ul-pill--interactive-rounded.ul-pill--fill-purple:active{background-color:#5935af}.ul-pill--interactive.ul-pill--fill-purple:selected,.ul-pill--interactive-rounded.ul-pill--fill-purple:selected{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:disabled,.ul-pill--interactive.ul-pill--fill-purple[disabled],.ul-pill--interactive-rounded.ul-pill--fill-purple:disabled,.ul-pill--interactive-rounded.ul-pill--fill-purple[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{color:#fff}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{background-color:#c33a3a;color:inherit}.ul-pill--interactive.ul-pill--fill-red:hover,.ul-pill--interactive-rounded.ul-pill--fill-red:hover{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:active,.ul-pill--interactive-rounded.ul-pill--fill-red:active{background-color:#982d2d}.ul-pill--interactive.ul-pill--fill-red:selected,.ul-pill--interactive-rounded.ul-pill--fill-red:selected{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:disabled,.ul-pill--interactive.ul-pill--fill-red[disabled],.ul-pill--interactive-rounded.ul-pill--fill-red:disabled,.ul-pill--interactive-rounded.ul-pill--fill-red[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{color:#fff}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{background-color:#0b7a27;color:inherit}.ul-pill--interactive.ul-pill--fill-green:hover,.ul-pill--interactive-rounded.ul-pill--fill-green:hover{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:active,.ul-pill--interactive-rounded.ul-pill--fill-green:active{background-color:#096620}.ul-pill--interactive.ul-pill--fill-green:selected,.ul-pill--interactive-rounded.ul-pill--fill-green:selected{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:disabled,.ul-pill--interactive.ul-pill--fill-green[disabled],.ul-pill--interactive-rounded.ul-pill--fill-green:disabled,.ul-pill--interactive-rounded.ul-pill--fill-green[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{color:#fff}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:hover,.ul-pill--interactive-rounded.ul-pill--transparent-white:hover{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:active,.ul-pill--interactive-rounded.ul-pill--transparent-white:active{background-color:#ffffff1a}.ul-pill--interactive.ul-pill--transparent-white:selected,.ul-pill--interactive-rounded.ul-pill--transparent-white:selected{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:hover,.ul-pill--interactive-rounded.ul-pill--transparent-purple:hover{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:active,.ul-pill--interactive-rounded.ul-pill--transparent-purple:active{background-color:#a781ff33}.ul-pill--interactive.ul-pill--transparent-purple:selected,.ul-pill--interactive-rounded.ul-pill--transparent-purple:selected{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{background-color:#f3707033;color:inherit}.ul-pill--interactive.ul-pill--transparent-red:hover,.ul-pill--interactive-rounded.ul-pill--transparent-red:hover{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:active,.ul-pill--interactive-rounded.ul-pill--transparent-red:active{background-color:#f3707033}.ul-pill--interactive.ul-pill--transparent-red:selected,.ul-pill--interactive-rounded.ul-pill--transparent-red:selected{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:disabled,.ul-pill--interactive.ul-pill--transparent-red[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-red:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-red[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{color:#f69d9d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{background-color:#50c06c33;color:inherit}.ul-pill--interactive.ul-pill--transparent-green:hover,.ul-pill--interactive-rounded.ul-pill--transparent-green:hover{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:active,.ul-pill--interactive-rounded.ul-pill--transparent-green:active{background-color:#50c06c33}.ul-pill--interactive.ul-pill--transparent-green:selected,.ul-pill--interactive-rounded.ul-pill--transparent-green:selected{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:disabled,.ul-pill--interactive.ul-pill--transparent-green[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-green:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-green[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{color:#7edc96}.ul-pill--interactive.ul-pill--stroke-white,.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--stroke-white,.ul-pill--interactive-rounded.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--stroke-white:disabled,.ul-pill--interactive.ul-pill--stroke-white[disabled],.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--stroke-white:disabled,.ul-pill--interactive-rounded.ul-pill--stroke-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled],.ul-pill--dismissible.ul-pill--transparent-white:disabled,.ul-pill--dismissible.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled],.ul-pill--dismissible.ul-pill--transparent-purple:disabled,.ul-pill--dismissible.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--outline-white,.ul-pill--dismissible.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled],.ul-pill--dismissible.ul-pill--outline-white:disabled,.ul-pill--dismissible.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple,.ul-pill--dismissible.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled],.ul-pill--dismissible.ul-pill--outline-purple:disabled,.ul-pill--dismissible.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red,.ul-pill--dismissible.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled],.ul-pill--dismissible.ul-pill--outline-red:disabled,.ul-pill--dismissible.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green,.ul-pill--dismissible.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled],.ul-pill--dismissible.ul-pill--outline-green:disabled,.ul-pill--dismissible.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--read-only.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--read-only.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--read-only.ul-pill--transparent-red{color:#f69d9d;border:1px solid #f69d9d}.ul-pill--read-only.ul-pill--transparent-green{color:#7edc96;border:1px solid #7edc96}.ul-pill--read-only.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--read-only.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--read-only.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--read-only.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable{position:relative}.ul-pill--selectable.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--selectable.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--selectable.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--selectable.ul-pill--outline-white:disabled,.ul-pill--selectable.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:disabled,.ul-pill--selectable.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:disabled,.ul-pill--selectable.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#f3707033;color:inherit}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):hover{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):active{background-color:#f3707033}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):selected{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:disabled,.ul-pill--selectable.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#50c06c33;color:inherit}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):hover{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):active{background-color:#50c06c33}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):selected{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable .ul-pill__checkbox{position:absolute;visibility:hidden;height:0;width:0;top:0;left:0}.ul-pill--disabled,.ul-pill[disabled],.ul-pill:disabled{cursor:not-allowed;color:#ffffff4d}.ul-pill--disabled.ul-pill--outline-white,.ul-pill--disabled.ul-pill--outline-purple,.ul-pill--disabled.ul-pill--outline-red,.ul-pill--disabled.ul-pill--outline-green,.ul-pill--disabled.ul-pill--stroke-white,.ul-pill[disabled].ul-pill--outline-white,.ul-pill[disabled].ul-pill--outline-purple,.ul-pill[disabled].ul-pill--outline-red,.ul-pill[disabled].ul-pill--outline-green,.ul-pill[disabled].ul-pill--stroke-white,.ul-pill:disabled.ul-pill--outline-white,.ul-pill:disabled.ul-pill--outline-purple,.ul-pill:disabled.ul-pill--outline-red,.ul-pill:disabled.ul-pill--outline-green,.ul-pill:disabled.ul-pill--stroke-white{border-color:#6c6c6c}.ul-pill .ul-icon{font-size:20px;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
2439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: PillComponent, isStandalone: true, selector: "ul-pill", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "@if (variant() === 'selectable') {\n <label [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <input type=\"checkbox\" class=\"ul-pill__checkbox\" />\n <ng-container *ngTemplateOutlet=\"content\" />\n </label>\n} @else if (['dismissible', 'read-only'].includes(variant())) {\n <div [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (variant() === 'dismissible') {\n <ul-button\n [theme]=\"dismissibleButtonTheme()\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"dismiss.emit()\"\n >\n <ul-icon icon=\"close\" />\n </ul-button>\n }\n </div>\n} @else if (['interactive', 'interactive-rounded'].includes(variant())) {\n <button [class]=\"modifierClass()\" [disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </button>\n}\n\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-pill{border:none;cursor:pointer;text-decoration-line:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;box-sizing:border-box;background-color:transparent;gap:8px;color:#fff;border-radius:8px;padding:4px 12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-pill--sm{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500;gap:4px;padding:4px 8px}.ul-pill--md{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-pill--lg{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500}.ul-pill--interactive,.ul-pill--interactive-rounded,.ul-pill--selectable{cursor:pointer}.ul-pill--interactive:focus-visible,.ul-pill--interactive:focus,.ul-pill--interactive-rounded:focus-visible,.ul-pill--interactive-rounded:focus,.ul-pill--selectable:focus-visible,.ul-pill--selectable:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-pill--interactive-rounded{cursor:pointer;border-radius:4096px}.ul-pill--read-only,.ul-pill--dismissible.ul-pill{cursor:default}.ul-pill--dismissible.ul-pill .ul-btn--sm:last-child .ul-icon{font-size:16px;line-height:16px}.ul-pill--dismissible.ul-pill--sm{padding:4px 4px 4px 8px;border-radius:8px}.ul-pill--dismissible.ul-pill--sm .ul-btn--sm:last-child{min-width:20px;height:20px}.ul-pill--dismissible.ul-pill--md{padding:4px 4px 4px 12px;border-radius:8px}.ul-pill--dismissible.ul-pill--md .ul-btn--sm:last-child{min-width:24px;height:24px}.ul-pill--dismissible.ul-pill--lg{padding:8px 4px 8px 16px;border-radius:12px}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{background-color:#fff;color:inherit}.ul-pill--interactive.ul-pill--fill-white:hover,.ul-pill--interactive-rounded.ul-pill--fill-white:hover{background-color:#e7e7e7}.ul-pill--interactive.ul-pill--fill-white:active,.ul-pill--interactive-rounded.ul-pill--fill-white:active{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:selected,.ul-pill--interactive-rounded.ul-pill--fill-white:selected{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:disabled,.ul-pill--interactive.ul-pill--fill-white[disabled],.ul-pill--interactive-rounded.ul-pill--fill-white:disabled,.ul-pill--interactive-rounded.ul-pill--fill-white[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{color:#000}.ul-pill--interactive.ul-pill--fill-black:hover,.ul-pill--interactive-rounded.ul-pill--fill-black:hover{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:active,.ul-pill--interactive-rounded.ul-pill--fill-black:active{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black:selected,.ul-pill--interactive-rounded.ul-pill--fill-black:selected{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:disabled,.ul-pill--interactive.ul-pill--fill-black[disabled],.ul-pill--interactive-rounded.ul-pill--fill-black:disabled,.ul-pill--interactive-rounded.ul-pill--fill-black[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black,.ul-pill--interactive-rounded.ul-pill--fill-black{background-color:#232323;color:inherit;color:#fff}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{background-color:#6f3de0;color:inherit}.ul-pill--interactive.ul-pill--fill-purple:hover,.ul-pill--interactive-rounded.ul-pill--fill-purple:hover{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:active,.ul-pill--interactive-rounded.ul-pill--fill-purple:active{background-color:#5935af}.ul-pill--interactive.ul-pill--fill-purple:selected,.ul-pill--interactive-rounded.ul-pill--fill-purple:selected{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:disabled,.ul-pill--interactive.ul-pill--fill-purple[disabled],.ul-pill--interactive-rounded.ul-pill--fill-purple:disabled,.ul-pill--interactive-rounded.ul-pill--fill-purple[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{color:#fff}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{background-color:#c33a3a;color:inherit}.ul-pill--interactive.ul-pill--fill-red:hover,.ul-pill--interactive-rounded.ul-pill--fill-red:hover{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:active,.ul-pill--interactive-rounded.ul-pill--fill-red:active{background-color:#982d2d}.ul-pill--interactive.ul-pill--fill-red:selected,.ul-pill--interactive-rounded.ul-pill--fill-red:selected{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:disabled,.ul-pill--interactive.ul-pill--fill-red[disabled],.ul-pill--interactive-rounded.ul-pill--fill-red:disabled,.ul-pill--interactive-rounded.ul-pill--fill-red[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{color:#fff}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{background-color:#0b7a27;color:inherit}.ul-pill--interactive.ul-pill--fill-green:hover,.ul-pill--interactive-rounded.ul-pill--fill-green:hover{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:active,.ul-pill--interactive-rounded.ul-pill--fill-green:active{background-color:#096620}.ul-pill--interactive.ul-pill--fill-green:selected,.ul-pill--interactive-rounded.ul-pill--fill-green:selected{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:disabled,.ul-pill--interactive.ul-pill--fill-green[disabled],.ul-pill--interactive-rounded.ul-pill--fill-green:disabled,.ul-pill--interactive-rounded.ul-pill--fill-green[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{color:#fff}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:hover,.ul-pill--interactive-rounded.ul-pill--transparent-white:hover{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:active,.ul-pill--interactive-rounded.ul-pill--transparent-white:active{background-color:#ffffff1a}.ul-pill--interactive.ul-pill--transparent-white:selected,.ul-pill--interactive-rounded.ul-pill--transparent-white:selected{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:hover,.ul-pill--interactive-rounded.ul-pill--transparent-purple:hover{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:active,.ul-pill--interactive-rounded.ul-pill--transparent-purple:active{background-color:#a781ff33}.ul-pill--interactive.ul-pill--transparent-purple:selected,.ul-pill--interactive-rounded.ul-pill--transparent-purple:selected{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{background-color:#f3707033;color:inherit}.ul-pill--interactive.ul-pill--transparent-red:hover,.ul-pill--interactive-rounded.ul-pill--transparent-red:hover{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:active,.ul-pill--interactive-rounded.ul-pill--transparent-red:active{background-color:#f3707033}.ul-pill--interactive.ul-pill--transparent-red:selected,.ul-pill--interactive-rounded.ul-pill--transparent-red:selected{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:disabled,.ul-pill--interactive.ul-pill--transparent-red[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-red:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-red[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{color:#f69d9d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{background-color:#50c06c33;color:inherit}.ul-pill--interactive.ul-pill--transparent-green:hover,.ul-pill--interactive-rounded.ul-pill--transparent-green:hover{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:active,.ul-pill--interactive-rounded.ul-pill--transparent-green:active{background-color:#50c06c33}.ul-pill--interactive.ul-pill--transparent-green:selected,.ul-pill--interactive-rounded.ul-pill--transparent-green:selected{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:disabled,.ul-pill--interactive.ul-pill--transparent-green[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-green:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-green[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{color:#7edc96}.ul-pill--interactive.ul-pill--stroke-white,.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--stroke-white,.ul-pill--interactive-rounded.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--stroke-white:disabled,.ul-pill--interactive.ul-pill--stroke-white[disabled],.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--stroke-white:disabled,.ul-pill--interactive-rounded.ul-pill--stroke-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled],.ul-pill--dismissible.ul-pill--transparent-white:disabled,.ul-pill--dismissible.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled],.ul-pill--dismissible.ul-pill--transparent-purple:disabled,.ul-pill--dismissible.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--outline-white,.ul-pill--dismissible.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled],.ul-pill--dismissible.ul-pill--outline-white:disabled,.ul-pill--dismissible.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple,.ul-pill--dismissible.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled],.ul-pill--dismissible.ul-pill--outline-purple:disabled,.ul-pill--dismissible.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red,.ul-pill--dismissible.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled],.ul-pill--dismissible.ul-pill--outline-red:disabled,.ul-pill--dismissible.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green,.ul-pill--dismissible.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled],.ul-pill--dismissible.ul-pill--outline-green:disabled,.ul-pill--dismissible.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--read-only.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--read-only.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--read-only.ul-pill--transparent-red{color:#f69d9d;border:1px solid #f69d9d}.ul-pill--read-only.ul-pill--transparent-green{color:#7edc96;border:1px solid #7edc96}.ul-pill--read-only.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--read-only.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--read-only.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--read-only.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable{position:relative}.ul-pill--selectable.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--selectable.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--selectable.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--selectable.ul-pill--outline-white:disabled,.ul-pill--selectable.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:disabled,.ul-pill--selectable.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:disabled,.ul-pill--selectable.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#f3707033;color:inherit}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):hover{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):active{background-color:#f3707033}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):selected{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:disabled,.ul-pill--selectable.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#50c06c33;color:inherit}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):hover{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):active{background-color:#50c06c33}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):selected{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable .ul-pill__checkbox{position:absolute;visibility:hidden;height:0;width:0;top:0;left:0}.ul-pill--disabled,.ul-pill[disabled],.ul-pill:disabled{cursor:not-allowed;color:#ffffff4d}.ul-pill--disabled.ul-pill--outline-white,.ul-pill--disabled.ul-pill--outline-purple,.ul-pill--disabled.ul-pill--outline-red,.ul-pill--disabled.ul-pill--outline-green,.ul-pill--disabled.ul-pill--stroke-white,.ul-pill[disabled].ul-pill--outline-white,.ul-pill[disabled].ul-pill--outline-purple,.ul-pill[disabled].ul-pill--outline-red,.ul-pill[disabled].ul-pill--outline-green,.ul-pill[disabled].ul-pill--stroke-white,.ul-pill:disabled.ul-pill--outline-white,.ul-pill:disabled.ul-pill--outline-purple,.ul-pill:disabled.ul-pill--outline-red,.ul-pill:disabled.ul-pill--outline-green,.ul-pill:disabled.ul-pill--stroke-white{border-color:#6c6c6c}.ul-pill .ul-icon{font-size:20px;line-height:20px}.ul-pill--sm .ul-icon{font-size:16px;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
2196
2440
|
}
|
|
2197
2441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PillComponent, decorators: [{
|
|
2198
2442
|
type: Component,
|
|
2199
|
-
args: [{ selector: 'ul-pill', imports: [CommonModule, ButtonComponent, IconComponent], template: "@if (variant() === 'selectable') {\n <label [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <input type=\"checkbox\" class=\"ul-pill__checkbox\" />\n <ng-container *ngTemplateOutlet=\"content\" />\n </label>\n} @else if (['dismissible', 'read-only'].includes(variant())) {\n <div [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (variant() === 'dismissible') {\n <ul-button\n [theme]=\"dismissibleButtonTheme()\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"dismiss.emit()\"\n >\n <ul-icon icon=\"close\" />\n </ul-button>\n }\n </div>\n} @else if (['interactive', 'interactive-rounded'].includes(variant())) {\n <button [class]=\"modifierClass()\" [disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </button>\n}\n\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-pill{border:none;cursor:pointer;text-decoration-line:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;box-sizing:border-box;background-color:transparent;gap:8px;color:#fff;border-radius:8px;padding:4px 12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-pill--md{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-pill--lg{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500}.ul-pill--interactive,.ul-pill--interactive-rounded,.ul-pill--selectable{cursor:pointer}.ul-pill--interactive:focus-visible,.ul-pill--interactive:focus,.ul-pill--interactive-rounded:focus-visible,.ul-pill--interactive-rounded:focus,.ul-pill--selectable:focus-visible,.ul-pill--selectable:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-pill--interactive-rounded{cursor:pointer;border-radius:4096px}.ul-pill--read-only,.ul-pill--dismissible.ul-pill{cursor:default}.ul-pill--dismissible.ul-pill .ul-btn--sm:last-child .ul-icon{font-size:16px;line-height:16px}.ul-pill--dismissible.ul-pill--md{padding:4px 4px 4px 12px;border-radius:8px}.ul-pill--dismissible.ul-pill--md .ul-btn--sm:last-child{min-width:24px;height:24px}.ul-pill--dismissible.ul-pill--lg{padding:8px 4px 8px 16px;border-radius:12px}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{background-color:#fff;color:inherit}.ul-pill--interactive.ul-pill--fill-white:hover,.ul-pill--interactive-rounded.ul-pill--fill-white:hover{background-color:#e7e7e7}.ul-pill--interactive.ul-pill--fill-white:active,.ul-pill--interactive-rounded.ul-pill--fill-white:active{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:selected,.ul-pill--interactive-rounded.ul-pill--fill-white:selected{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:disabled,.ul-pill--interactive.ul-pill--fill-white[disabled],.ul-pill--interactive-rounded.ul-pill--fill-white:disabled,.ul-pill--interactive-rounded.ul-pill--fill-white[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{color:#000}.ul-pill--interactive.ul-pill--fill-black:hover,.ul-pill--interactive-rounded.ul-pill--fill-black:hover{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:active,.ul-pill--interactive-rounded.ul-pill--fill-black:active{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black:selected,.ul-pill--interactive-rounded.ul-pill--fill-black:selected{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:disabled,.ul-pill--interactive.ul-pill--fill-black[disabled],.ul-pill--interactive-rounded.ul-pill--fill-black:disabled,.ul-pill--interactive-rounded.ul-pill--fill-black[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black,.ul-pill--interactive-rounded.ul-pill--fill-black{background-color:#232323;color:inherit;color:#fff}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{background-color:#6f3de0;color:inherit}.ul-pill--interactive.ul-pill--fill-purple:hover,.ul-pill--interactive-rounded.ul-pill--fill-purple:hover{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:active,.ul-pill--interactive-rounded.ul-pill--fill-purple:active{background-color:#5935af}.ul-pill--interactive.ul-pill--fill-purple:selected,.ul-pill--interactive-rounded.ul-pill--fill-purple:selected{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:disabled,.ul-pill--interactive.ul-pill--fill-purple[disabled],.ul-pill--interactive-rounded.ul-pill--fill-purple:disabled,.ul-pill--interactive-rounded.ul-pill--fill-purple[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{color:#fff}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{background-color:#c33a3a;color:inherit}.ul-pill--interactive.ul-pill--fill-red:hover,.ul-pill--interactive-rounded.ul-pill--fill-red:hover{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:active,.ul-pill--interactive-rounded.ul-pill--fill-red:active{background-color:#982d2d}.ul-pill--interactive.ul-pill--fill-red:selected,.ul-pill--interactive-rounded.ul-pill--fill-red:selected{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:disabled,.ul-pill--interactive.ul-pill--fill-red[disabled],.ul-pill--interactive-rounded.ul-pill--fill-red:disabled,.ul-pill--interactive-rounded.ul-pill--fill-red[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{color:#fff}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{background-color:#0b7a27;color:inherit}.ul-pill--interactive.ul-pill--fill-green:hover,.ul-pill--interactive-rounded.ul-pill--fill-green:hover{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:active,.ul-pill--interactive-rounded.ul-pill--fill-green:active{background-color:#096620}.ul-pill--interactive.ul-pill--fill-green:selected,.ul-pill--interactive-rounded.ul-pill--fill-green:selected{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:disabled,.ul-pill--interactive.ul-pill--fill-green[disabled],.ul-pill--interactive-rounded.ul-pill--fill-green:disabled,.ul-pill--interactive-rounded.ul-pill--fill-green[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{color:#fff}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:hover,.ul-pill--interactive-rounded.ul-pill--transparent-white:hover{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:active,.ul-pill--interactive-rounded.ul-pill--transparent-white:active{background-color:#ffffff1a}.ul-pill--interactive.ul-pill--transparent-white:selected,.ul-pill--interactive-rounded.ul-pill--transparent-white:selected{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:hover,.ul-pill--interactive-rounded.ul-pill--transparent-purple:hover{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:active,.ul-pill--interactive-rounded.ul-pill--transparent-purple:active{background-color:#a781ff33}.ul-pill--interactive.ul-pill--transparent-purple:selected,.ul-pill--interactive-rounded.ul-pill--transparent-purple:selected{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{background-color:#f3707033;color:inherit}.ul-pill--interactive.ul-pill--transparent-red:hover,.ul-pill--interactive-rounded.ul-pill--transparent-red:hover{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:active,.ul-pill--interactive-rounded.ul-pill--transparent-red:active{background-color:#f3707033}.ul-pill--interactive.ul-pill--transparent-red:selected,.ul-pill--interactive-rounded.ul-pill--transparent-red:selected{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:disabled,.ul-pill--interactive.ul-pill--transparent-red[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-red:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-red[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{color:#f69d9d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{background-color:#50c06c33;color:inherit}.ul-pill--interactive.ul-pill--transparent-green:hover,.ul-pill--interactive-rounded.ul-pill--transparent-green:hover{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:active,.ul-pill--interactive-rounded.ul-pill--transparent-green:active{background-color:#50c06c33}.ul-pill--interactive.ul-pill--transparent-green:selected,.ul-pill--interactive-rounded.ul-pill--transparent-green:selected{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:disabled,.ul-pill--interactive.ul-pill--transparent-green[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-green:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-green[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{color:#7edc96}.ul-pill--interactive.ul-pill--stroke-white,.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--stroke-white,.ul-pill--interactive-rounded.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--stroke-white:disabled,.ul-pill--interactive.ul-pill--stroke-white[disabled],.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--stroke-white:disabled,.ul-pill--interactive-rounded.ul-pill--stroke-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled],.ul-pill--dismissible.ul-pill--transparent-white:disabled,.ul-pill--dismissible.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled],.ul-pill--dismissible.ul-pill--transparent-purple:disabled,.ul-pill--dismissible.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--outline-white,.ul-pill--dismissible.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled],.ul-pill--dismissible.ul-pill--outline-white:disabled,.ul-pill--dismissible.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple,.ul-pill--dismissible.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled],.ul-pill--dismissible.ul-pill--outline-purple:disabled,.ul-pill--dismissible.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red,.ul-pill--dismissible.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled],.ul-pill--dismissible.ul-pill--outline-red:disabled,.ul-pill--dismissible.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green,.ul-pill--dismissible.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled],.ul-pill--dismissible.ul-pill--outline-green:disabled,.ul-pill--dismissible.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--read-only.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--read-only.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--read-only.ul-pill--transparent-red{color:#f69d9d;border:1px solid #f69d9d}.ul-pill--read-only.ul-pill--transparent-green{color:#7edc96;border:1px solid #7edc96}.ul-pill--read-only.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--read-only.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--read-only.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--read-only.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable{position:relative}.ul-pill--selectable.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--selectable.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--selectable.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--selectable.ul-pill--outline-white:disabled,.ul-pill--selectable.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:disabled,.ul-pill--selectable.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:disabled,.ul-pill--selectable.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#f3707033;color:inherit}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):hover{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):active{background-color:#f3707033}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):selected{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:disabled,.ul-pill--selectable.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#50c06c33;color:inherit}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):hover{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):active{background-color:#50c06c33}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):selected{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable .ul-pill__checkbox{position:absolute;visibility:hidden;height:0;width:0;top:0;left:0}.ul-pill--disabled,.ul-pill[disabled],.ul-pill:disabled{cursor:not-allowed;color:#ffffff4d}.ul-pill--disabled.ul-pill--outline-white,.ul-pill--disabled.ul-pill--outline-purple,.ul-pill--disabled.ul-pill--outline-red,.ul-pill--disabled.ul-pill--outline-green,.ul-pill--disabled.ul-pill--stroke-white,.ul-pill[disabled].ul-pill--outline-white,.ul-pill[disabled].ul-pill--outline-purple,.ul-pill[disabled].ul-pill--outline-red,.ul-pill[disabled].ul-pill--outline-green,.ul-pill[disabled].ul-pill--stroke-white,.ul-pill:disabled.ul-pill--outline-white,.ul-pill:disabled.ul-pill--outline-purple,.ul-pill:disabled.ul-pill--outline-red,.ul-pill:disabled.ul-pill--outline-green,.ul-pill:disabled.ul-pill--stroke-white{border-color:#6c6c6c}.ul-pill .ul-icon{font-size:20px;line-height:20px}\n"] }]
|
|
2443
|
+
args: [{ selector: 'ul-pill', imports: [CommonModule, ButtonComponent, IconComponent], template: "@if (variant() === 'selectable') {\n <label [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <input type=\"checkbox\" class=\"ul-pill__checkbox\" />\n <ng-container *ngTemplateOutlet=\"content\" />\n </label>\n} @else if (['dismissible', 'read-only'].includes(variant())) {\n <div [class]=\"modifierClass()\" [class.ul-pill--disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n @if (variant() === 'dismissible') {\n <ul-button\n [theme]=\"dismissibleButtonTheme()\"\n size=\"sm\"\n [iconOnly]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"dismiss.emit()\"\n >\n <ul-icon icon=\"close\" />\n </ul-button>\n }\n </div>\n} @else if (['interactive', 'interactive-rounded'].includes(variant())) {\n <button [class]=\"modifierClass()\" [disabled]=\"disabled()\">\n <ng-container *ngTemplateOutlet=\"content\" />\n </button>\n}\n\n<ng-template #content>\n <ng-content />\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-pill{border:none;cursor:pointer;text-decoration-line:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;box-sizing:border-box;background-color:transparent;gap:8px;color:#fff;border-radius:8px;padding:4px 12px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}.ul-pill--sm{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500;gap:4px;padding:4px 8px}.ul-pill--md{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:500}.ul-pill--lg{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:500}.ul-pill--interactive,.ul-pill--interactive-rounded,.ul-pill--selectable{cursor:pointer}.ul-pill--interactive:focus-visible,.ul-pill--interactive:focus,.ul-pill--interactive-rounded:focus-visible,.ul-pill--interactive-rounded:focus,.ul-pill--selectable:focus-visible,.ul-pill--selectable:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-pill--interactive-rounded{cursor:pointer;border-radius:4096px}.ul-pill--read-only,.ul-pill--dismissible.ul-pill{cursor:default}.ul-pill--dismissible.ul-pill .ul-btn--sm:last-child .ul-icon{font-size:16px;line-height:16px}.ul-pill--dismissible.ul-pill--sm{padding:4px 4px 4px 8px;border-radius:8px}.ul-pill--dismissible.ul-pill--sm .ul-btn--sm:last-child{min-width:20px;height:20px}.ul-pill--dismissible.ul-pill--md{padding:4px 4px 4px 12px;border-radius:8px}.ul-pill--dismissible.ul-pill--md .ul-btn--sm:last-child{min-width:24px;height:24px}.ul-pill--dismissible.ul-pill--lg{padding:8px 4px 8px 16px;border-radius:12px}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{background-color:#fff;color:inherit}.ul-pill--interactive.ul-pill--fill-white:hover,.ul-pill--interactive-rounded.ul-pill--fill-white:hover{background-color:#e7e7e7}.ul-pill--interactive.ul-pill--fill-white:active,.ul-pill--interactive-rounded.ul-pill--fill-white:active{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:selected,.ul-pill--interactive-rounded.ul-pill--fill-white:selected{background-color:#fff}.ul-pill--interactive.ul-pill--fill-white:disabled,.ul-pill--interactive.ul-pill--fill-white[disabled],.ul-pill--interactive-rounded.ul-pill--fill-white:disabled,.ul-pill--interactive-rounded.ul-pill--fill-white[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-white,.ul-pill--interactive-rounded.ul-pill--fill-white{color:#000}.ul-pill--interactive.ul-pill--fill-black:hover,.ul-pill--interactive-rounded.ul-pill--fill-black:hover{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:active,.ul-pill--interactive-rounded.ul-pill--fill-black:active{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black:selected,.ul-pill--interactive-rounded.ul-pill--fill-black:selected{background-color:#3b3b3b}.ul-pill--interactive.ul-pill--fill-black:disabled,.ul-pill--interactive.ul-pill--fill-black[disabled],.ul-pill--interactive-rounded.ul-pill--fill-black:disabled,.ul-pill--interactive-rounded.ul-pill--fill-black[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-black,.ul-pill--interactive-rounded.ul-pill--fill-black{background-color:#232323;color:inherit;color:#fff}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{background-color:#6f3de0;color:inherit}.ul-pill--interactive.ul-pill--fill-purple:hover,.ul-pill--interactive-rounded.ul-pill--fill-purple:hover{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:active,.ul-pill--interactive-rounded.ul-pill--fill-purple:active{background-color:#5935af}.ul-pill--interactive.ul-pill--fill-purple:selected,.ul-pill--interactive-rounded.ul-pill--fill-purple:selected{background-color:#7e4af7}.ul-pill--interactive.ul-pill--fill-purple:disabled,.ul-pill--interactive.ul-pill--fill-purple[disabled],.ul-pill--interactive-rounded.ul-pill--fill-purple:disabled,.ul-pill--interactive-rounded.ul-pill--fill-purple[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-purple,.ul-pill--interactive-rounded.ul-pill--fill-purple{color:#fff}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{background-color:#c33a3a;color:inherit}.ul-pill--interactive.ul-pill--fill-red:hover,.ul-pill--interactive-rounded.ul-pill--fill-red:hover{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:active,.ul-pill--interactive-rounded.ul-pill--fill-red:active{background-color:#982d2d}.ul-pill--interactive.ul-pill--fill-red:selected,.ul-pill--interactive-rounded.ul-pill--fill-red:selected{background-color:#d64040}.ul-pill--interactive.ul-pill--fill-red:disabled,.ul-pill--interactive.ul-pill--fill-red[disabled],.ul-pill--interactive-rounded.ul-pill--fill-red:disabled,.ul-pill--interactive-rounded.ul-pill--fill-red[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-red,.ul-pill--interactive-rounded.ul-pill--fill-red{color:#fff}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{background-color:#0b7a27;color:inherit}.ul-pill--interactive.ul-pill--fill-green:hover,.ul-pill--interactive-rounded.ul-pill--fill-green:hover{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:active,.ul-pill--interactive-rounded.ul-pill--fill-green:active{background-color:#096620}.ul-pill--interactive.ul-pill--fill-green:selected,.ul-pill--interactive-rounded.ul-pill--fill-green:selected{background-color:#0e892d}.ul-pill--interactive.ul-pill--fill-green:disabled,.ul-pill--interactive.ul-pill--fill-green[disabled],.ul-pill--interactive-rounded.ul-pill--fill-green:disabled,.ul-pill--interactive-rounded.ul-pill--fill-green[disabled]{background-color:#232323}.ul-pill--interactive.ul-pill--fill-green,.ul-pill--interactive-rounded.ul-pill--fill-green{color:#fff}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:hover,.ul-pill--interactive-rounded.ul-pill--transparent-white:hover{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:active,.ul-pill--interactive-rounded.ul-pill--transparent-white:active{background-color:#ffffff1a}.ul-pill--interactive.ul-pill--transparent-white:selected,.ul-pill--interactive-rounded.ul-pill--transparent-white:selected{background-color:#fff3}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:hover,.ul-pill--interactive-rounded.ul-pill--transparent-purple:hover{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:active,.ul-pill--interactive-rounded.ul-pill--transparent-purple:active{background-color:#a781ff33}.ul-pill--interactive.ul-pill--transparent-purple:selected,.ul-pill--interactive-rounded.ul-pill--transparent-purple:selected{background-color:#a781ff4d}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{background-color:#f3707033;color:inherit}.ul-pill--interactive.ul-pill--transparent-red:hover,.ul-pill--interactive-rounded.ul-pill--transparent-red:hover{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:active,.ul-pill--interactive-rounded.ul-pill--transparent-red:active{background-color:#f3707033}.ul-pill--interactive.ul-pill--transparent-red:selected,.ul-pill--interactive-rounded.ul-pill--transparent-red:selected{background-color:#f370704d}.ul-pill--interactive.ul-pill--transparent-red:disabled,.ul-pill--interactive.ul-pill--transparent-red[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-red:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-red[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-red,.ul-pill--interactive-rounded.ul-pill--transparent-red{color:#f69d9d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{background-color:#50c06c33;color:inherit}.ul-pill--interactive.ul-pill--transparent-green:hover,.ul-pill--interactive-rounded.ul-pill--transparent-green:hover{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:active,.ul-pill--interactive-rounded.ul-pill--transparent-green:active{background-color:#50c06c33}.ul-pill--interactive.ul-pill--transparent-green:selected,.ul-pill--interactive-rounded.ul-pill--transparent-green:selected{background-color:#50c06c4d}.ul-pill--interactive.ul-pill--transparent-green:disabled,.ul-pill--interactive.ul-pill--transparent-green[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-green:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-green[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-green,.ul-pill--interactive-rounded.ul-pill--transparent-green{color:#7edc96}.ul-pill--interactive.ul-pill--stroke-white,.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--stroke-white,.ul-pill--interactive-rounded.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--stroke-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--stroke-white:disabled,.ul-pill--interactive.ul-pill--stroke-white[disabled],.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--stroke-white:disabled,.ul-pill--interactive-rounded.ul-pill--stroke-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{background-color:#ffffff1a;color:inherit}.ul-pill--interactive.ul-pill--transparent-white:disabled,.ul-pill--interactive.ul-pill--transparent-white[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-white:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-white[disabled],.ul-pill--dismissible.ul-pill--transparent-white:disabled,.ul-pill--dismissible.ul-pill--transparent-white[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-white,.ul-pill--interactive-rounded.ul-pill--transparent-white,.ul-pill--dismissible.ul-pill--transparent-white{color:#fff}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{background-color:#a781ff33;color:inherit}.ul-pill--interactive.ul-pill--transparent-purple:disabled,.ul-pill--interactive.ul-pill--transparent-purple[disabled],.ul-pill--interactive-rounded.ul-pill--transparent-purple:disabled,.ul-pill--interactive-rounded.ul-pill--transparent-purple[disabled],.ul-pill--dismissible.ul-pill--transparent-purple:disabled,.ul-pill--dismissible.ul-pill--transparent-purple[disabled]{background-color:#ffffff0d}.ul-pill--interactive.ul-pill--transparent-purple,.ul-pill--interactive-rounded.ul-pill--transparent-purple,.ul-pill--dismissible.ul-pill--transparent-purple{color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-white,.ul-pill--interactive-rounded.ul-pill--outline-white,.ul-pill--dismissible.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--interactive.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--interactive.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-white:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--interactive.ul-pill--outline-white:disabled,.ul-pill--interactive.ul-pill--outline-white[disabled],.ul-pill--interactive-rounded.ul-pill--outline-white:disabled,.ul-pill--interactive-rounded.ul-pill--outline-white[disabled],.ul-pill--dismissible.ul-pill--outline-white:disabled,.ul-pill--dismissible.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-purple,.ul-pill--interactive-rounded.ul-pill--outline-purple,.ul-pill--dismissible.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-purple:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--interactive.ul-pill--outline-purple:disabled,.ul-pill--interactive.ul-pill--outline-purple[disabled],.ul-pill--interactive-rounded.ul-pill--outline-purple:disabled,.ul-pill--interactive-rounded.ul-pill--outline-purple[disabled],.ul-pill--dismissible.ul-pill--outline-purple:disabled,.ul-pill--dismissible.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-red,.ul-pill--interactive-rounded.ul-pill--outline-red,.ul-pill--dismissible.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-red:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--interactive.ul-pill--outline-red:disabled,.ul-pill--interactive.ul-pill--outline-red[disabled],.ul-pill--interactive-rounded.ul-pill--outline-red:disabled,.ul-pill--interactive-rounded.ul-pill--outline-red[disabled],.ul-pill--dismissible.ul-pill--outline-red:disabled,.ul-pill--dismissible.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--interactive.ul-pill--outline-green,.ul-pill--interactive-rounded.ul-pill--outline-green,.ul-pill--dismissible.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:hover:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--interactive-rounded.ul-pill--outline-green:active:not(:disabled):not([disabled]),.ul-pill--dismissible.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--interactive.ul-pill--outline-green:disabled,.ul-pill--interactive.ul-pill--outline-green[disabled],.ul-pill--interactive-rounded.ul-pill--outline-green:disabled,.ul-pill--interactive-rounded.ul-pill--outline-green[disabled],.ul-pill--dismissible.ul-pill--outline-green:disabled,.ul-pill--dismissible.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--read-only.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--read-only.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--read-only.ul-pill--transparent-red{color:#f69d9d;border:1px solid #f69d9d}.ul-pill--read-only.ul-pill--transparent-green{color:#7edc96;border:1px solid #7edc96}.ul-pill--read-only.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--read-only.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--read-only.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--read-only.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable{position:relative}.ul-pill--selectable.ul-pill--transparent-white{color:#ffffffb3;border:1px solid rgba(255,255,255,.3)}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--transparent-purple{color:#c2a8ff;border:1px solid #c2a8ff}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--transparent-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-white{background-color:transparent;border:1px solid rgba(255,255,255,.3);color:#fff}.ul-pill--selectable.ul-pill--outline-white:hover:not(:disabled):not([disabled]){border-color:#fff}.ul-pill--selectable.ul-pill--outline-white:active:not(:disabled):not([disabled]){border-color:#ffffff80}.ul-pill--selectable.ul-pill--outline-white:disabled,.ul-pill--selectable.ul-pill--outline-white[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#ffffff1a;color:inherit}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):hover{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):active{background-color:#ffffff1a}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):selected{background-color:#fff3}.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-white:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-purple{background-color:transparent;border:1px solid #c2a8ff;color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:hover:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:active:not(:disabled):not([disabled]){border-color:#c2a8ff}.ul-pill--selectable.ul-pill--outline-purple:disabled,.ul-pill--selectable.ul-pill--outline-purple[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#a781ff33;color:inherit}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):hover{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):active{background-color:#a781ff33}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):selected{background-color:#a781ff4d}.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-purple:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-red{background-color:transparent;border:1px solid #f69d9d;color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:hover:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:active:not(:disabled):not([disabled]){border-color:#f69d9d}.ul-pill--selectable.ul-pill--outline-red:disabled,.ul-pill--selectable.ul-pill--outline-red[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#f3707033;color:inherit}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):hover{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):active{background-color:#f3707033}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):selected{background-color:#f370704d}.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-red:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable.ul-pill--outline-green{background-color:transparent;border:1px solid #7edc96;color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:hover:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:active:not(:disabled):not([disabled]){border-color:#7edc96}.ul-pill--selectable.ul-pill--outline-green:disabled,.ul-pill--selectable.ul-pill--outline-green[disabled]{border-color:#6c6c6c;color:#ffffff4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked){border-color:transparent;background-color:#50c06c33;color:inherit}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):hover{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):active{background-color:#50c06c33}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):selected{background-color:#50c06c4d}.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked):disabled,.ul-pill--selectable.ul-pill--outline-green:has(.ul-pill__checkbox:checked)[disabled]{background-color:#ffffff0d}.ul-pill--selectable .ul-pill__checkbox{position:absolute;visibility:hidden;height:0;width:0;top:0;left:0}.ul-pill--disabled,.ul-pill[disabled],.ul-pill:disabled{cursor:not-allowed;color:#ffffff4d}.ul-pill--disabled.ul-pill--outline-white,.ul-pill--disabled.ul-pill--outline-purple,.ul-pill--disabled.ul-pill--outline-red,.ul-pill--disabled.ul-pill--outline-green,.ul-pill--disabled.ul-pill--stroke-white,.ul-pill[disabled].ul-pill--outline-white,.ul-pill[disabled].ul-pill--outline-purple,.ul-pill[disabled].ul-pill--outline-red,.ul-pill[disabled].ul-pill--outline-green,.ul-pill[disabled].ul-pill--stroke-white,.ul-pill:disabled.ul-pill--outline-white,.ul-pill:disabled.ul-pill--outline-purple,.ul-pill:disabled.ul-pill--outline-red,.ul-pill:disabled.ul-pill--outline-green,.ul-pill:disabled.ul-pill--stroke-white{border-color:#6c6c6c}.ul-pill .ul-icon{font-size:20px;line-height:20px}.ul-pill--sm .ul-icon{font-size:16px;line-height:16px}\n"] }]
|
|
2200
2444
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
2201
2445
|
|
|
2202
2446
|
/** Place on the element projected into [ul-hero-badges] so the hero can detect custom badges content. */
|
|
@@ -2413,6 +2657,8 @@ class InputComponent {
|
|
|
2413
2657
|
...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
2414
2658
|
required = input(false, /* @ts-ignore */
|
|
2415
2659
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2660
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
2661
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
2416
2662
|
placeholder = input('', /* @ts-ignore */
|
|
2417
2663
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2418
2664
|
label = input(null, /* @ts-ignore */
|
|
@@ -2535,12 +2781,169 @@ class InputComponent {
|
|
|
2535
2781
|
inputEl?.select();
|
|
2536
2782
|
}
|
|
2537
2783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: InputComponent, isStandalone: true, selector: "ul-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus", inputEnter: "inputEnter" }, ngImport: i0, template: "<div\n class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n [class.ul-input--error]=\"hasError()\"\n [class.ul-input--disabled]=\"disabled()\"\n [class.ul-input--read-only]=\"readOnly()\"\n [class.ul-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n <div class=\"ul-input__left-elements\">\n <ng-content select=\"[ul-input-left-elements]\" />\n </div>\n\n <input\n [id]=\"effectiveControlId()\"\n [type]=\"effectiveType()\"\n class=\"ul-input__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.pattern]=\"nativePattern()\"\n [attr.step]=\"nativeStep()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <div class=\"ul-input__right-elements\">\n @if (isPasswordType()) {\n <ul-button\n class=\"ul-input__password-toggle\"\n theme=\"ghost-white\"\n size=\"sm\"\n type=\"button\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"passwordToggleLabel()\"\n (buttonClick)=\"togglePasswordVisibility()\"\n >\n <ul-icon [icon]=\"passwordToggleIcon()\" />\n </ul-button>\n }\n <ng-content select=\"[ul-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-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-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
2784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: InputComponent, isStandalone: true, selector: "ul-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus", inputEnter: "inputEnter" }, ngImport: i0, template: "<div\n class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n [class.ul-input--error]=\"hasError()\"\n [class.ul-input--disabled]=\"disabled()\"\n [class.ul-input--read-only]=\"readOnly()\"\n [class.ul-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n <div class=\"ul-input__left-elements\">\n <ng-content select=\"[ul-input-left-elements]\" />\n </div>\n\n <input\n [id]=\"effectiveControlId()\"\n [type]=\"effectiveType()\"\n class=\"ul-input__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.pattern]=\"nativePattern()\"\n [attr.step]=\"nativeStep()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <div class=\"ul-input__right-elements\">\n @if (isPasswordType()) {\n <ul-button\n class=\"ul-input__password-toggle\"\n theme=\"ghost-white\"\n size=\"sm\"\n type=\"button\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"passwordToggleLabel()\"\n (buttonClick)=\"togglePasswordVisibility()\"\n >\n <ul-icon [icon]=\"passwordToggleIcon()\" />\n </ul-button>\n }\n <ng-content select=\"[ul-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-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-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\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"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }] });
|
|
2539
2785
|
}
|
|
2540
2786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, decorators: [{
|
|
2541
2787
|
type: Component,
|
|
2542
|
-
args: [{ selector: 'ul-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent, ButtonComponent, IconComponent], template: "<div\n class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n [class.ul-input--error]=\"hasError()\"\n [class.ul-input--disabled]=\"disabled()\"\n [class.ul-input--read-only]=\"readOnly()\"\n [class.ul-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n />\n\n <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n <div class=\"ul-input__left-elements\">\n <ng-content select=\"[ul-input-left-elements]\" />\n </div>\n\n <input\n [id]=\"effectiveControlId()\"\n [type]=\"effectiveType()\"\n class=\"ul-input__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.pattern]=\"nativePattern()\"\n [attr.step]=\"nativeStep()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <div class=\"ul-input__right-elements\">\n @if (isPasswordType()) {\n <ul-button\n class=\"ul-input__password-toggle\"\n theme=\"ghost-white\"\n size=\"sm\"\n type=\"button\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"passwordToggleLabel()\"\n (buttonClick)=\"togglePasswordVisibility()\"\n >\n <ul-icon [icon]=\"passwordToggleIcon()\" />\n </ul-button>\n }\n <ng-content select=\"[ul-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-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-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"] }]
|
|
2543
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputEnter: [{ type: i0.Output, args: ["inputEnter"] }] } });
|
|
2788
|
+
args: [{ selector: 'ul-input', imports: [FormFieldLabelComponent, FormFieldHelperComponent, ButtonComponent, IconComponent], template: "<div\n class=\"ul-input ul-input--{{ size() }} ul-input--appearance-{{ appearance() }}\"\n [class.ul-input--error]=\"hasError()\"\n [class.ul-input--disabled]=\"disabled()\"\n [class.ul-input--read-only]=\"readOnly()\"\n [class.ul-input--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"effectiveControlId()\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div class=\"ul-input__group\" [class.ul-input__group--focused]=\"isFocused()\">\n <div class=\"ul-input__left-elements\">\n <ng-content select=\"[ul-input-left-elements]\" />\n </div>\n\n <input\n [id]=\"effectiveControlId()\"\n [type]=\"effectiveType()\"\n class=\"ul-input__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.pattern]=\"nativePattern()\"\n [attr.step]=\"nativeStep()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n />\n\n <div class=\"ul-input__right-elements\">\n @if (isPasswordType()) {\n <ul-button\n class=\"ul-input__password-toggle\"\n theme=\"ghost-white\"\n size=\"sm\"\n type=\"button\"\n [iconOnly]=\"true\"\n [ariaLabel]=\"passwordToggleLabel()\"\n (buttonClick)=\"togglePasswordVisibility()\"\n >\n <ul-icon [icon]=\"passwordToggleIcon()\" />\n </ul-button>\n }\n <ng-content select=\"[ul-input-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"effectiveHelperId()\"\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-input{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-input__group{display:flex;align-items:center;height:40px;padding:0 12px;gap:8px;border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent;color:#fff;transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-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-input__group--focused{box-shadow:inset 0 0 0 2px #ffffff80}.ul-input--appearance-border-only:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d}.ul-input--appearance-subtle-tint:not(.ul-input--disabled) .ul-input__group:hover{box-shadow:inset 0 0 0 2px #ffffff4d;background-color:#ffffff0d}.ul-input__field{all:unset;flex:1}.ul-input__field::placeholder{color:#ffffff80}.ul-input__field:hover::placeholder{color:#fff}.ul-input__left-elements,.ul-input__right-elements{display:flex;align-items:center;gap:8px}.ul-input__left-elements ::ng-deep .ul-icon,.ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input__password-toggle ::ng-deep .ul-btn:hover,.ul-input__password-toggle ::ng-deep .ul-btn:active{background-color:transparent}.ul-input__password-toggle ::ng-deep .ul-btn:focus:not(:focus-visible){outline:none}.ul-input--sm .ul-input__group{height:32px;padding:0 8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-input--sm .ul-input__left-elements,.ul-input--sm .ul-input__right-elements{gap:4px}.ul-input--sm .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--sm .ul-input__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-input--md .ul-input__group{height:40px;padding:0 12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-input--md .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--md .ul-input__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-input--lg .ul-input__group{height:48px;padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-input--lg .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--lg .ul-input__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-input--xl .ul-input__group{height:64px;padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-input--xl .ul-input__left-elements ::ng-deep .ul-icon,.ul-input--xl .ul-input__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-input--error .ul-input__group{box-shadow:inset 0 0 0 2px #f69d9d}.ul-input--disabled .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--disabled .ul-input__field,.ul-input--disabled .ul-input__field:disabled::placeholder{color:#ffffff4d}.ul-input--read-only .ul-input__group{box-shadow:inset 0 0 0 2px #ffffff1a;background-color:transparent}.ul-input--read-only .ul-input__field,.ul-input--read-only .ul-input__field:read-only::placeholder{color:#ffffffb3}\n"] }]
|
|
2789
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputEnter: [{ type: i0.Output, args: ["inputEnter"] }] } });
|
|
2790
|
+
|
|
2791
|
+
const DEFAULT_DURATION_MS = 500;
|
|
2792
|
+
const MOVE_CANCEL_THRESHOLD_PX = 10;
|
|
2793
|
+
/**
|
|
2794
|
+
* Emits `ulLongPress` when the pointer (mouse, touch, or pen) is held down
|
|
2795
|
+
* on the host element for `ulLongPressDuration` without moving more than a
|
|
2796
|
+
* few pixels. Also suppresses the `click` that follows the triggering
|
|
2797
|
+
* press's release, so long-press-to-select gestures don't also activate a
|
|
2798
|
+
* link/button underneath.
|
|
2799
|
+
*/
|
|
2800
|
+
class LongPressDirective {
|
|
2801
|
+
ulLongPressDuration = input(DEFAULT_DURATION_MS, /* @ts-ignore */
|
|
2802
|
+
...(ngDevMode ? [{ debugName: "ulLongPressDuration" }] : /* istanbul ignore next */ []));
|
|
2803
|
+
ulLongPress = output();
|
|
2804
|
+
timeoutId = null;
|
|
2805
|
+
startX = 0;
|
|
2806
|
+
startY = 0;
|
|
2807
|
+
triggered = false;
|
|
2808
|
+
handlePointerDown(event) {
|
|
2809
|
+
if (event.pointerType === 'mouse' && event.button !== 0)
|
|
2810
|
+
return;
|
|
2811
|
+
this.startX = event.clientX;
|
|
2812
|
+
this.startY = event.clientY;
|
|
2813
|
+
this.triggered = false;
|
|
2814
|
+
this.timeoutId = setTimeout(() => {
|
|
2815
|
+
this.timeoutId = null;
|
|
2816
|
+
this.triggered = true;
|
|
2817
|
+
this.ulLongPress.emit();
|
|
2818
|
+
}, this.ulLongPressDuration());
|
|
2819
|
+
}
|
|
2820
|
+
handlePointerMove(event) {
|
|
2821
|
+
if (this.timeoutId === null)
|
|
2822
|
+
return;
|
|
2823
|
+
const distance = Math.hypot(event.clientX - this.startX, event.clientY - this.startY);
|
|
2824
|
+
if (distance > MOVE_CANCEL_THRESHOLD_PX) {
|
|
2825
|
+
this.cancelTimer();
|
|
2826
|
+
}
|
|
2827
|
+
}
|
|
2828
|
+
handlePointerEnd() {
|
|
2829
|
+
this.cancelTimer();
|
|
2830
|
+
}
|
|
2831
|
+
handleClick(event) {
|
|
2832
|
+
if (!this.triggered)
|
|
2833
|
+
return;
|
|
2834
|
+
this.triggered = false;
|
|
2835
|
+
event.preventDefault();
|
|
2836
|
+
event.stopPropagation();
|
|
2837
|
+
}
|
|
2838
|
+
cancelTimer() {
|
|
2839
|
+
if (this.timeoutId !== null) {
|
|
2840
|
+
clearTimeout(this.timeoutId);
|
|
2841
|
+
this.timeoutId = null;
|
|
2842
|
+
}
|
|
2843
|
+
}
|
|
2844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2845
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: LongPressDirective, isStandalone: true, selector: "[ulLongPress]", inputs: { ulLongPressDuration: { classPropertyName: "ulLongPressDuration", publicName: "ulLongPressDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ulLongPress: "ulLongPress" }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "pointerup": "handlePointerEnd()", "pointercancel": "handlePointerEnd()", "pointerleave": "handlePointerEnd()", "pointermove": "handlePointerMove($event)", "click": "handleClick($event)" } }, ngImport: i0 });
|
|
2846
|
+
}
|
|
2847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LongPressDirective, decorators: [{
|
|
2848
|
+
type: Directive,
|
|
2849
|
+
args: [{
|
|
2850
|
+
selector: '[ulLongPress]',
|
|
2851
|
+
host: {
|
|
2852
|
+
'(pointerdown)': 'handlePointerDown($event)',
|
|
2853
|
+
'(pointerup)': 'handlePointerEnd()',
|
|
2854
|
+
'(pointercancel)': 'handlePointerEnd()',
|
|
2855
|
+
'(pointerleave)': 'handlePointerEnd()',
|
|
2856
|
+
'(pointermove)': 'handlePointerMove($event)',
|
|
2857
|
+
'(click)': 'handleClick($event)',
|
|
2858
|
+
},
|
|
2859
|
+
}]
|
|
2860
|
+
}], propDecorators: { ulLongPressDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "ulLongPressDuration", required: false }] }], ulLongPress: [{ type: i0.Output, args: ["ulLongPress"] }] } });
|
|
2861
|
+
|
|
2862
|
+
/**
|
|
2863
|
+
* A trigger + panel for an action menu (edit, delete, share, ...). Unlike
|
|
2864
|
+
* `ul-dropdown`, there is no notion of a "currently selected" item — every
|
|
2865
|
+
* item is a one-off action, so nothing is ever shown as checked.
|
|
2866
|
+
*
|
|
2867
|
+
* Pass `items` for the common label+icon action-list case, and/or project
|
|
2868
|
+
* custom content (e.g. a `ul-list-item cdkMenuItem routerLink="...">` for a
|
|
2869
|
+
* navigation item) — both can be combined, or you can skip `items`
|
|
2870
|
+
* entirely and compose the panel purely from projected content.
|
|
2871
|
+
*
|
|
2872
|
+
* Below the 'md' breakpoint the panel renders as a bottom sheet (full
|
|
2873
|
+
* width, pinned to the viewport, tap-outside-to-dismiss) instead of a
|
|
2874
|
+
* small anchored popover — the same behavior `ul-dropdown` gets.
|
|
2875
|
+
*
|
|
2876
|
+
* @example
|
|
2877
|
+
* ```html
|
|
2878
|
+
* <ul-menu
|
|
2879
|
+
* [items]="[{ label: 'Edit', value: 'edit', leftIcons: ['edit'] },
|
|
2880
|
+
* { label: 'Delete', value: 'delete', leftIcons: ['trash'] }]"
|
|
2881
|
+
* triggerIconOnly="more_options"
|
|
2882
|
+
* (itemSelected)="onAction($event)">
|
|
2883
|
+
* </ul-menu>
|
|
2884
|
+
* ```
|
|
2885
|
+
*/
|
|
2886
|
+
class MenuComponent {
|
|
2887
|
+
/** Visual theme, passed through to the trigger and to any items rendered via `items`. */
|
|
2888
|
+
theme = input('ghost-white', /* @ts-ignore */
|
|
2889
|
+
...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
2890
|
+
/** Simple label+icon action items. Optional — content projection covers everything else. */
|
|
2891
|
+
items = input([], /* @ts-ignore */
|
|
2892
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2893
|
+
disabled = input(false, /* @ts-ignore */
|
|
2894
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2895
|
+
/**
|
|
2896
|
+
* Shows only a single icon in the trigger, hiding any label. Commonly
|
|
2897
|
+
* `'more_options'` for a row-level "⋮" action menu.
|
|
2898
|
+
*/
|
|
2899
|
+
triggerIconOnly = input(/* @ts-ignore */
|
|
2900
|
+
...(ngDevMode ? [undefined, { debugName: "triggerIconOnly" }] : /* istanbul ignore next */ []));
|
|
2901
|
+
/** Accessible label for the icon-only trigger. */
|
|
2902
|
+
iconOnlyLabel = input('Open menu', /* @ts-ignore */
|
|
2903
|
+
...(ngDevMode ? [{ debugName: "iconOnlyLabel" }] : /* istanbul ignore next */ []));
|
|
2904
|
+
/** Static label for a non-icon-only trigger (there is no "current selection" to show instead). */
|
|
2905
|
+
triggerLabel = input('', /* @ts-ignore */
|
|
2906
|
+
...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
|
|
2907
|
+
triggerLeftIcons = input([], /* @ts-ignore */
|
|
2908
|
+
...(ngDevMode ? [{ debugName: "triggerLeftIcons" }] : /* istanbul ignore next */ []));
|
|
2909
|
+
triggerRightIcons = input([], /* @ts-ignore */
|
|
2910
|
+
...(ngDevMode ? [{ debugName: "triggerRightIcons" }] : /* istanbul ignore next */ []));
|
|
2911
|
+
/** Emitted when an `items`-provided entry is triggered. */
|
|
2912
|
+
itemSelected = output();
|
|
2913
|
+
/** Emitted when the menu closes, whether or not a selection was made. */
|
|
2914
|
+
closed = output();
|
|
2915
|
+
isOpen = signal(false, /* @ts-ignore */
|
|
2916
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2917
|
+
menuId = `ul-menu-${Math.random().toString(36).slice(2, 11)}`;
|
|
2918
|
+
trigger = viewChild(MenuTriggerComponent, /* @ts-ignore */
|
|
2919
|
+
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
2920
|
+
handleItemTriggered(index) {
|
|
2921
|
+
const item = this.items()[index];
|
|
2922
|
+
if (item) {
|
|
2923
|
+
this.itemSelected.emit(item);
|
|
2924
|
+
}
|
|
2925
|
+
}
|
|
2926
|
+
/**
|
|
2927
|
+
* Closes the panel. CDK auto-closes on a `cdkMenuItem` trigger already —
|
|
2928
|
+
* this is for the mobile backdrop tap, which isn't one.
|
|
2929
|
+
*/
|
|
2930
|
+
closeMenu() {
|
|
2931
|
+
this.trigger()?.close();
|
|
2932
|
+
}
|
|
2933
|
+
onMenuOpened() {
|
|
2934
|
+
this.isOpen.set(true);
|
|
2935
|
+
}
|
|
2936
|
+
onMenuClosed() {
|
|
2937
|
+
this.isOpen.set(false);
|
|
2938
|
+
this.closed.emit();
|
|
2939
|
+
}
|
|
2940
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: MenuComponent, isStandalone: true, selector: "ul-menu", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "triggerIconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyLabel: { classPropertyName: "iconOnlyLabel", publicName: "iconOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerLeftIcons: { classPropertyName: "triggerLeftIcons", publicName: "triggerLeftIcons", isSignal: true, isRequired: false, transformFunction: null }, triggerRightIcons: { classPropertyName: "triggerRightIcons", publicName: "triggerRightIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MenuTriggerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"], dependencies: [{ kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: MenuItemsComponent, selector: "ul-menu-items", inputs: ["items", "theme", "selectedIndex"], outputs: ["itemTriggered"] }, { kind: "component", type: MenuTriggerComponent, selector: "ul-menu-trigger", inputs: ["theme", "disabled", "iconOnly", "iconOnlyLabel", "label", "leftIcons", "rightIcons", "menuTemplate", "menuId", "isOpen"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2942
|
+
}
|
|
2943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2944
|
+
type: Component,
|
|
2945
|
+
args: [{ selector: 'ul-menu', imports: [CdkMenu, MenuItemsComponent, MenuTriggerComponent], encapsulation: ViewEncapsulation.None, template: "<ul-menu-trigger\n [theme]=\"theme()\"\n [disabled]=\"disabled()\"\n [iconOnly]=\"triggerIconOnly()\"\n [iconOnlyLabel]=\"iconOnlyLabel()\"\n [label]=\"triggerLabel()\"\n [leftIcons]=\"triggerLeftIcons()\"\n [rightIcons]=\"triggerRightIcons()\"\n [menuTemplate]=\"menu\"\n [menuId]=\"menuId\"\n [isOpen]=\"isOpen()\"\n (opened)=\"onMenuOpened()\"\n (closed)=\"onMenuClosed()\"\n/>\n\n<ng-template #menu>\n <div class=\"ul-menu__backdrop\" (click)=\"closeMenu()\"></div>\n <div cdkMenu class=\"ul-menu\" [id]=\"menuId\">\n <ul-menu-items\n [items]=\"items()\"\n [theme]=\"theme()\"\n (itemTriggered)=\"handleItemTriggered($event)\"\n />\n <ng-content />\n </div>\n</ng-template>\n", styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-menu{display:flex;flex-direction:column;gap:4px;background-color:#232323;border-radius:16px;padding:4px;margin:4px 0;min-width:200px}@media(max-width:1023px){.ul-menu{position:fixed;inset:auto 0 0;width:100%;max-height:40vh;margin:0;border-radius:16px 16px 0 0;gap:16px;display:flex;flex-direction:column;overflow-y:auto}}.ul-menu__backdrop{display:none}@media(max-width:1023px){.ul-menu__backdrop{display:block;position:fixed;inset:0;background-color:#0000004d}}\n"] }]
|
|
2946
|
+
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIconOnly", required: false }] }], iconOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyLabel", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerLeftIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLeftIcons", required: false }] }], triggerRightIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerRightIcons", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuTriggerComponent), { isSignal: true }] }] } });
|
|
2544
2947
|
|
|
2545
2948
|
class ModalComponent {
|
|
2546
2949
|
/** Whether the modal is open. Supports two-way binding with [(open)]. */
|
|
@@ -2964,6 +3367,8 @@ class RadioGroupComponent {
|
|
|
2964
3367
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2965
3368
|
required = input(false, /* @ts-ignore */
|
|
2966
3369
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3370
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
3371
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
2967
3372
|
invalid = input(false, /* @ts-ignore */
|
|
2968
3373
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2969
3374
|
errors = input([], /* @ts-ignore */
|
|
@@ -2976,7 +3381,7 @@ class RadioGroupComponent {
|
|
|
2976
3381
|
describedBy = computed(() => getFormFieldDescribedBy(this.ids.helperId, this.ids.errorId, !!this.helperText(), this.hasError(), !!this.errorText() || this.errors().length > 0), /* @ts-ignore */
|
|
2977
3382
|
...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
2978
3383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: RadioGroupComponent, isStandalone: true, selector: "ul-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, required: { classPropertyName: "required", publicName: "required", 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" }, ngImport: i0, template: `
|
|
3384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: RadioGroupComponent, isStandalone: true, selector: "ul-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", 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" }, ngImport: i0, template: `
|
|
2980
3385
|
<div
|
|
2981
3386
|
class="ul-radio-group"
|
|
2982
3387
|
[attr.aria-invalid]="hasError()"
|
|
@@ -2990,6 +3395,7 @@ class RadioGroupComponent {
|
|
|
2990
3395
|
[required]="required()"
|
|
2991
3396
|
[for]="ids.controlId"
|
|
2992
3397
|
size="md"
|
|
3398
|
+
[showRequiredIndicator]="showRequiredIndicator()"
|
|
2993
3399
|
/>
|
|
2994
3400
|
<div class="ul-radio-group__radios" [id]="ids.controlId">
|
|
2995
3401
|
@for (opt of options(); track opt.value) {
|
|
@@ -3013,7 +3419,7 @@ class RadioGroupComponent {
|
|
|
3013
3419
|
[error]="hasError()"
|
|
3014
3420
|
/>
|
|
3015
3421
|
</div>
|
|
3016
|
-
`, isInline: true, styles: [".ul-radio-group{display:flex;flex-direction:column;gap:.5rem}.ul-radio-group__radios{display:flex;flex-direction:column;gap:.25rem}\n"], dependencies: [{ kind: "component", type: RadioComponent, selector: "ul-radio", inputs: ["value", "name", "disabled", "checked", "id"], outputs: ["checkedChange", "click", "selected"] }, { kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
3422
|
+
`, isInline: true, styles: [".ul-radio-group{display:flex;flex-direction:column;gap:.5rem}.ul-radio-group__radios{display:flex;flex-direction:column;gap:.25rem}\n"], dependencies: [{ kind: "component", type: RadioComponent, selector: "ul-radio", inputs: ["value", "name", "disabled", "checked", "id"], outputs: ["checkedChange", "click", "selected"] }, { 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"] }] });
|
|
3017
3423
|
}
|
|
3018
3424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
3019
3425
|
type: Component,
|
|
@@ -3031,6 +3437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3031
3437
|
[required]="required()"
|
|
3032
3438
|
[for]="ids.controlId"
|
|
3033
3439
|
size="md"
|
|
3440
|
+
[showRequiredIndicator]="showRequiredIndicator()"
|
|
3034
3441
|
/>
|
|
3035
3442
|
<div class="ul-radio-group__radios" [id]="ids.controlId">
|
|
3036
3443
|
@for (opt of options(); track opt.value) {
|
|
@@ -3055,7 +3462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3055
3462
|
/>
|
|
3056
3463
|
</div>
|
|
3057
3464
|
`, styles: [".ul-radio-group{display:flex;flex-direction:column;gap:.5rem}.ul-radio-group__radios{display:flex;flex-direction:column;gap:.25rem}\n"] }]
|
|
3058
|
-
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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"] }] } });
|
|
3465
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", 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"] }] } });
|
|
3059
3466
|
|
|
3060
3467
|
const lineWidths = {
|
|
3061
3468
|
96: 6,
|
|
@@ -3346,6 +3753,8 @@ class SearchSelectComponent {
|
|
|
3346
3753
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3347
3754
|
required = input(false, /* @ts-ignore */
|
|
3348
3755
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3756
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
3757
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
3349
3758
|
placeholder = input('Search...', /* @ts-ignore */
|
|
3350
3759
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3351
3760
|
options = input([], /* @ts-ignore */
|
|
@@ -3482,7 +3891,7 @@ class SearchSelectComponent {
|
|
|
3482
3891
|
}
|
|
3483
3892
|
}
|
|
3484
3893
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SearchSelectComponent, isStandalone: true, selector: "ul-search-select", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, minCharsToOpen: { classPropertyName: "minCharsToOpen", publicName: "minCharsToOpen", 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" }, ngImport: i0, template: "<div\n class=\"ul-search-select ul-search-select--{{ size() }}\"\n [class.ul-search-select--open]=\"isOpen()\"\n [class.ul-search-select--error]=\"hasError()\"\n [class.ul-search-select--disabled]=\"disabled()\"\n [class.ul-search-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-search-select__control\"\n [class.ul-search-select__control--focused]=\"isFocused()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"displayText()\"\n (valueChange)=\"onInputValueChange($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 <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-select__list ul-scrollable\"\n [class.ul-search-select__list--empty]=\"hasNoResults()\"\n [id]=\"listId\"\n role=\"listbox\"\n >\n @if (hasNoResults()) {\n <div class=\"ul-search-select__empty\" role=\"status\">No results</div>\n } @else {\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"ul-search-select__option\"\n [class.ul-search-select__option--highlighted]=\"highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === opt.value\"\n (mousedown)=\"selectOption(opt)\"\n >\n <ul-list-item\n theme=\"ghost-white\"\n [selected]=\"value() === opt.value\"\n [hideFocusOutline]=\"true\"\n >\n <ng-container ul-list-item-label>{{ opt.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n }\n </div>\n }\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-select__control{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-select__control .ul-list-item:focus-visible,.ul-search-select__control .ul-list-item:focus{outline:none}.ul-search-select__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-select__list--empty{padding:12px}.ul-search-select__option{cursor:pointer;border-radius:8px}.ul-search-select__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-select__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-search-select--disabled .ul-search-select__control{opacity:.6;cursor:not-allowed}.ul-search-select--error .ul-input__group{border-color:#f69d9d}@media(max-width:1023px){.ul-search-select__list{max-height:316px}}@media(min-width:1024px){.ul-search-select__control{max-width:100%}}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "ul-input", inputs: ["type", "size", "appearance", "error", "disabled", "readOnly", "required", "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: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
3894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SearchSelectComponent, isStandalone: true, selector: "ul-search-select", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, minCharsToOpen: { classPropertyName: "minCharsToOpen", publicName: "minCharsToOpen", 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" }, ngImport: i0, template: "<div\n class=\"ul-search-select ul-search-select--{{ size() }}\"\n [class.ul-search-select--open]=\"isOpen()\"\n [class.ul-search-select--error]=\"hasError()\"\n [class.ul-search-select--disabled]=\"disabled()\"\n [class.ul-search-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-search-select__control\"\n [class.ul-search-select__control--focused]=\"isFocused()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"displayText()\"\n (valueChange)=\"onInputValueChange($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 <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-select__list ul-scrollable\"\n [class.ul-search-select__list--empty]=\"hasNoResults()\"\n [id]=\"listId\"\n role=\"listbox\"\n >\n @if (hasNoResults()) {\n <div class=\"ul-search-select__empty\" role=\"status\">No results</div>\n } @else {\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"ul-search-select__option\"\n [class.ul-search-select__option--highlighted]=\"highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === opt.value\"\n (mousedown)=\"selectOption(opt)\"\n >\n <ul-list-item\n theme=\"ghost-white\"\n [selected]=\"value() === opt.value\"\n [hideFocusOutline]=\"true\"\n >\n <ng-container ul-list-item-label>{{ opt.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n }\n </div>\n }\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-select__control{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-select__control .ul-list-item:focus-visible,.ul-search-select__control .ul-list-item:focus{outline:none}.ul-search-select__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-select__list--empty{padding:12px}.ul-search-select__option{cursor:pointer;border-radius:8px}.ul-search-select__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-select__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-search-select--disabled .ul-search-select__control{opacity:.6;cursor:not-allowed}.ul-search-select--error .ul-input__group{border-color:#f69d9d}@media(max-width:1023px){.ul-search-select__list{max-height:316px}}@media(min-width:1024px){.ul-search-select__control{max-width:100%}}\n"], dependencies: [{ 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: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }, { 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"] }] });
|
|
3486
3895
|
}
|
|
3487
3896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchSelectComponent, decorators: [{
|
|
3488
3897
|
type: Component,
|
|
@@ -3492,8 +3901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3492
3901
|
ListItemComponent,
|
|
3493
3902
|
FormFieldLabelComponent,
|
|
3494
3903
|
FormFieldHelperComponent,
|
|
3495
|
-
], template: "<div\n class=\"ul-search-select ul-search-select--{{ size() }}\"\n [class.ul-search-select--open]=\"isOpen()\"\n [class.ul-search-select--error]=\"hasError()\"\n [class.ul-search-select--disabled]=\"disabled()\"\n [class.ul-search-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-search-select__control\"\n [class.ul-search-select__control--focused]=\"isFocused()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"displayText()\"\n (valueChange)=\"onInputValueChange($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 <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-select__list ul-scrollable\"\n [class.ul-search-select__list--empty]=\"hasNoResults()\"\n [id]=\"listId\"\n role=\"listbox\"\n >\n @if (hasNoResults()) {\n <div class=\"ul-search-select__empty\" role=\"status\">No results</div>\n } @else {\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"ul-search-select__option\"\n [class.ul-search-select__option--highlighted]=\"highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === opt.value\"\n (mousedown)=\"selectOption(opt)\"\n >\n <ul-list-item\n theme=\"ghost-white\"\n [selected]=\"value() === opt.value\"\n [hideFocusOutline]=\"true\"\n >\n <ng-container ul-list-item-label>{{ opt.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n }\n </div>\n }\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-select__control{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-select__control .ul-list-item:focus-visible,.ul-search-select__control .ul-list-item:focus{outline:none}.ul-search-select__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-select__list--empty{padding:12px}.ul-search-select__option{cursor:pointer;border-radius:8px}.ul-search-select__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-select__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-search-select--disabled .ul-search-select__control{opacity:.6;cursor:not-allowed}.ul-search-select--error .ul-input__group{border-color:#f69d9d}@media(max-width:1023px){.ul-search-select__list{max-height:316px}}@media(min-width:1024px){.ul-search-select__control{max-width:100%}}\n"] }]
|
|
3496
|
-
}], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], minCharsToOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsToOpen", 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"] }] } });
|
|
3904
|
+
], template: "<div\n class=\"ul-search-select ul-search-select--{{ size() }}\"\n [class.ul-search-select--open]=\"isOpen()\"\n [class.ul-search-select--error]=\"hasError()\"\n [class.ul-search-select--disabled]=\"disabled()\"\n [class.ul-search-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-search-select__control\"\n [class.ul-search-select__control--focused]=\"isFocused()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ul-input\n [controlId]=\"ids.controlId\"\n [value]=\"displayText()\"\n (valueChange)=\"onInputValueChange($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 <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n\n @if (shouldShowPanel()) {\n <div\n class=\"ul-search-select__list ul-scrollable\"\n [class.ul-search-select__list--empty]=\"hasNoResults()\"\n [id]=\"listId\"\n role=\"listbox\"\n >\n @if (hasNoResults()) {\n <div class=\"ul-search-select__empty\" role=\"status\">No results</div>\n } @else {\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <div\n class=\"ul-search-select__option\"\n [class.ul-search-select__option--highlighted]=\"highlightedIndex() === i\"\n [id]=\"optionId(i)\"\n role=\"option\"\n [attr.aria-selected]=\"value() === opt.value\"\n (mousedown)=\"selectOption(opt)\"\n >\n <ul-list-item\n theme=\"ghost-white\"\n [selected]=\"value() === opt.value\"\n [hideFocusOutline]=\"true\"\n >\n <ng-container ul-list-item-label>{{ opt.label }}</ng-container>\n </ul-list-item>\n </div>\n }\n }\n </div>\n }\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%}.ul-search-select__control{position:relative;display:flex;flex-direction:column;width:100%}.ul-search-select__control .ul-list-item:focus-visible,.ul-search-select__control .ul-list-item:focus{outline:none}.ul-search-select__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-select__list--empty{padding:12px}.ul-search-select__option{cursor:pointer;border-radius:8px}.ul-search-select__option--highlighted .ul-list-item{background-color:#fff3}.ul-search-select__empty{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-search-select--disabled .ul-search-select__control{opacity:.6;cursor:not-allowed}.ul-search-select--error .ul-input__group{border-color:#f69d9d}@media(max-width:1023px){.ul-search-select__list{max-height:316px}}@media(min-width:1024px){.ul-search-select__control{max-width:100%}}\n"] }]
|
|
3905
|
+
}], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], minCharsToOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsToOpen", 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"] }] } });
|
|
3497
3906
|
|
|
3498
3907
|
/**
|
|
3499
3908
|
* Form-friendly select built on the dropdown. Implements FormValueControl for Signal Forms [formField].
|
|
@@ -3519,6 +3928,8 @@ class SelectComponent {
|
|
|
3519
3928
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3520
3929
|
required = input(false, /* @ts-ignore */
|
|
3521
3930
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3931
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
3932
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
3522
3933
|
placeholder = input('Select an option', /* @ts-ignore */
|
|
3523
3934
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3524
3935
|
options = input([], /* @ts-ignore */
|
|
@@ -3575,12 +3986,161 @@ class SelectComponent {
|
|
|
3575
3986
|
this.touch.emit();
|
|
3576
3987
|
}
|
|
3577
3988
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3578
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: SelectComponent, isStandalone: true, selector: "ul-select", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange", selectedIndex: "selectedIndexChange" }, ngImport: i0, template: "<div\n class=\"ul-select ul-select--{{ size() }}\"\n [class.ul-select--disabled]=\"disabled()\"\n [class.ul-select--error]=\"hasError()\"\n [class.ul-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-select__control\"\n [id]=\"ids.controlId\"\n [class.ul-select__control--disabled]=\"disabled()\"\n >\n <ul-dropdown\n class=\"ul-select__dropdown\"\n [theme]=\"theme()\"\n [items]=\"items()\"\n [disabled]=\"disabled()\"\n [(selectedIndex)]=\"selectedIndex\"\n (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n (closed)=\"onDropdownClosed()\"\n />\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ul-dropdown", inputs: ["theme", "items", "disabled", "menuTriggerIcons", "triggerIconOnly", "iconOnlyLabel", "selectedIndex"], outputs: ["selectedIndexChange", "selectedItemChange", "closed"] }, { kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3989
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: SelectComponent, isStandalone: true, selector: "ul-select", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange", selectedIndex: "selectedIndexChange" }, ngImport: i0, template: "<div\n class=\"ul-select ul-select--{{ size() }}\"\n [class.ul-select--disabled]=\"disabled()\"\n [class.ul-select--error]=\"hasError()\"\n [class.ul-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-select__control\"\n [id]=\"ids.controlId\"\n [class.ul-select__control--disabled]=\"disabled()\"\n >\n <ul-dropdown\n class=\"ul-select__dropdown\"\n [theme]=\"theme()\"\n [items]=\"items()\"\n [disabled]=\"disabled()\"\n [(selectedIndex)]=\"selectedIndex\"\n (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n (closed)=\"onDropdownClosed()\"\n />\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "ul-dropdown", inputs: ["theme", "items", "disabled", "menuTriggerIcons", "triggerIconOnly", "iconOnlyLabel", "selectedIndex"], outputs: ["selectedIndexChange", "selectedItemChange", "closed"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3579
3990
|
}
|
|
3580
3991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3581
3992
|
type: Component,
|
|
3582
|
-
args: [{ selector: 'ul-select', imports: [DropdownComponent, FormFieldLabelComponent, FormFieldHelperComponent], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ul-select ul-select--{{ size() }}\"\n [class.ul-select--disabled]=\"disabled()\"\n [class.ul-select--error]=\"hasError()\"\n [class.ul-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-select__control\"\n [id]=\"ids.controlId\"\n [class.ul-select__control--disabled]=\"disabled()\"\n >\n <ul-dropdown\n class=\"ul-select__dropdown\"\n [theme]=\"theme()\"\n [items]=\"items()\"\n [disabled]=\"disabled()\"\n [(selectedIndex)]=\"selectedIndex\"\n (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n (closed)=\"onDropdownClosed()\"\n />\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"] }]
|
|
3583
|
-
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }] } });
|
|
3993
|
+
args: [{ selector: 'ul-select', imports: [DropdownComponent, FormFieldLabelComponent, FormFieldHelperComponent], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ul-select ul-select--{{ size() }}\"\n [class.ul-select--disabled]=\"disabled()\"\n [class.ul-select--error]=\"hasError()\"\n [class.ul-select--required]=\"required()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-select__control\"\n [id]=\"ids.controlId\"\n [class.ul-select__control--disabled]=\"disabled()\"\n >\n <ul-dropdown\n class=\"ul-select__dropdown\"\n [theme]=\"theme()\"\n [items]=\"items()\"\n [disabled]=\"disabled()\"\n [(selectedIndex)]=\"selectedIndex\"\n (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n (closed)=\"onDropdownClosed()\"\n />\n </div>\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-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"] }]
|
|
3994
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }] } });
|
|
3995
|
+
|
|
3996
|
+
/**
|
|
3997
|
+
* Makes any row of projected content (thumbnail/media + label content, plus
|
|
3998
|
+
* anything else — a status pill, actions) selectable in a bulk-select list,
|
|
3999
|
+
* without the consumer having to hand-roll device detection or gesture
|
|
4000
|
+
* wiring themselves:
|
|
4001
|
+
*
|
|
4002
|
+
* - Fine-pointer/real-hover devices (desktop): a checkbox is always present
|
|
4003
|
+
* but invisible until the row is hovered, keyboard-focused, or already
|
|
4004
|
+
* checked — Gmail-list style.
|
|
4005
|
+
* - Coarse-pointer/no-hover devices (touch): long-press a row to select it;
|
|
4006
|
+
* every row then swaps its projected `[ul-selectable-row-media]` content
|
|
4007
|
+
* for a large checkbox — there's rarely room for both a thumbnail and an
|
|
4008
|
+
* easy-to-hit checkbox on a small card.
|
|
4009
|
+
*
|
|
4010
|
+
* This component only decides what to *show* and detects the long-press
|
|
4011
|
+
* gesture — it doesn't know about routing, so a consumer whose media/content
|
|
4012
|
+
* slots contain a routerLink-driven anchor still needs to null that binding
|
|
4013
|
+
* out itself while `selectionActive` (see ul-selectable-row's own usage in
|
|
4014
|
+
* undermarket's profile-listings for the pattern).
|
|
4015
|
+
*
|
|
4016
|
+
* @example
|
|
4017
|
+
* ```html
|
|
4018
|
+
* <ul-selectable-row
|
|
4019
|
+
* [selected]="isSelected(item.id)"
|
|
4020
|
+
* [selectionActive]="hasSelection()"
|
|
4021
|
+
* [ariaLabel]="'Select ' + item.title"
|
|
4022
|
+
* (selectedChange)="toggleSelect(item.id, $event)"
|
|
4023
|
+
* (longPress)="onRowLongPress(item.id)"
|
|
4024
|
+
* >
|
|
4025
|
+
* <img ul-selectable-row-media [src]="item.imageUrl" alt="" />
|
|
4026
|
+
* <div ul-selectable-row-content>{{ item.title }}</div>
|
|
4027
|
+
* <ul-pill>{{ item.status }}</ul-pill>
|
|
4028
|
+
* </ul-selectable-row>
|
|
4029
|
+
* ```
|
|
4030
|
+
*/
|
|
4031
|
+
class SelectableRowComponent {
|
|
4032
|
+
/** Whether this row is currently selected. */
|
|
4033
|
+
selected = input(false, /* @ts-ignore */
|
|
4034
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
4035
|
+
/**
|
|
4036
|
+
* Whether the list is in selection mode (something, anywhere, is
|
|
4037
|
+
* selected) — drives the compact-mode media-for-checkbox swap.
|
|
4038
|
+
*/
|
|
4039
|
+
selectionActive = input(false, /* @ts-ignore */
|
|
4040
|
+
...(ngDevMode ? [{ debugName: "selectionActive" }] : /* istanbul ignore next */ []));
|
|
4041
|
+
/** Accessible label for this row's checkbox(es). */
|
|
4042
|
+
ariaLabel = input(null, /* @ts-ignore */
|
|
4043
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4044
|
+
selectedChange = output();
|
|
4045
|
+
longPress = output();
|
|
4046
|
+
/**
|
|
4047
|
+
* Same distinction the hover-reveal CSS relies on — a width breakpoint
|
|
4048
|
+
* alone would misclassify a wide tablet in landscape, which has no real
|
|
4049
|
+
* hover, as "desktop".
|
|
4050
|
+
*/
|
|
4051
|
+
hasFinePointer = toSignal(inject(BreakpointObserver)
|
|
4052
|
+
.observe('(hover: hover) and (pointer: fine)')
|
|
4053
|
+
.pipe(map((state) => state.matches)), { initialValue: true });
|
|
4054
|
+
isCompact = computed(() => !this.hasFinePointer(), /* @ts-ignore */
|
|
4055
|
+
...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
|
|
4056
|
+
// Set for the click that immediately follows a successful long-press, so
|
|
4057
|
+
// that trailing click doesn't also toggle the row straight back off via
|
|
4058
|
+
// onHostClick below (see the same problem/fix in undermarket's
|
|
4059
|
+
// profile-listings for the version of this before it moved into here).
|
|
4060
|
+
justLongPressed = false;
|
|
4061
|
+
constructor() {
|
|
4062
|
+
inject(LongPressDirective).ulLongPress.subscribe(() => {
|
|
4063
|
+
this.justLongPressed = true;
|
|
4064
|
+
this.longPress.emit();
|
|
4065
|
+
});
|
|
4066
|
+
}
|
|
4067
|
+
/**
|
|
4068
|
+
* Once every row shows a checkbox in place of its media (compact +
|
|
4069
|
+
* selecting), the checkbox is the only thing with its own toggle handler
|
|
4070
|
+
* — everything else in the row (the content slot, empty space) does
|
|
4071
|
+
* nothing on tap, which defeats the point of showing a large, easy-to-hit
|
|
4072
|
+
* target. Toggling on any tap in that state fixes it; it's safe to do
|
|
4073
|
+
* unconditionally (regardless of what's projected) because a consumer
|
|
4074
|
+
* whose content contains a routerLink is already expected to have nulled
|
|
4075
|
+
* that binding out while `selectionActive` — so there's no competing
|
|
4076
|
+
* navigation to accidentally trigger.
|
|
4077
|
+
*/
|
|
4078
|
+
onHostClick(event) {
|
|
4079
|
+
if (this.justLongPressed) {
|
|
4080
|
+
this.justLongPressed = false;
|
|
4081
|
+
return;
|
|
4082
|
+
}
|
|
4083
|
+
if (!this.isCompact() || !this.selectionActive())
|
|
4084
|
+
return;
|
|
4085
|
+
// The checkbox already has its own (checkedChange) handler — without
|
|
4086
|
+
// this, a tap on it would toggle twice (once from checkedChange, once
|
|
4087
|
+
// from this handler catching the same click as it bubbles up).
|
|
4088
|
+
if (event.target.closest('ul-checkbox'))
|
|
4089
|
+
return;
|
|
4090
|
+
this.selectedChange.emit(!this.selected());
|
|
4091
|
+
}
|
|
4092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4093
|
+
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: `
|
|
4094
|
+
@if (isCompact() && selectionActive()) {
|
|
4095
|
+
<ul-checkbox
|
|
4096
|
+
size="lg"
|
|
4097
|
+
[checked]="selected()"
|
|
4098
|
+
[attr.aria-label]="ariaLabel()"
|
|
4099
|
+
(checkedChange)="selectedChange.emit($event)"
|
|
4100
|
+
/>
|
|
4101
|
+
} @else {
|
|
4102
|
+
<ng-content select="[ul-selectable-row-media]" />
|
|
4103
|
+
}
|
|
4104
|
+
@if (!isCompact()) {
|
|
4105
|
+
<ul-checkbox
|
|
4106
|
+
class="ul-selectable-row__hover-checkbox"
|
|
4107
|
+
[checked]="selected()"
|
|
4108
|
+
[attr.aria-label]="ariaLabel()"
|
|
4109
|
+
(checkedChange)="selectedChange.emit($event)"
|
|
4110
|
+
/>
|
|
4111
|
+
}
|
|
4112
|
+
<ng-content select="[ul-selectable-row-content]" />
|
|
4113
|
+
<ng-content />
|
|
4114
|
+
`, 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}: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"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ul-checkbox", inputs: ["checked", "disabled", "indeterminate", "zone", "size", "label", "helperText", "required", "showRequiredIndicator", "error", "errorText", "invalid", "errors"], outputs: ["checkedChange", "disabledChange", "indeterminateChange"] }] });
|
|
4115
|
+
}
|
|
4116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectableRowComponent, decorators: [{
|
|
4117
|
+
type: Component,
|
|
4118
|
+
args: [{ selector: 'ul-selectable-row', imports: [CheckboxComponent], hostDirectives: [LongPressDirective], host: {
|
|
4119
|
+
'[class.ul-selectable-row]': 'selected()',
|
|
4120
|
+
'(click)': 'onHostClick($event)',
|
|
4121
|
+
}, template: `
|
|
4122
|
+
@if (isCompact() && selectionActive()) {
|
|
4123
|
+
<ul-checkbox
|
|
4124
|
+
size="lg"
|
|
4125
|
+
[checked]="selected()"
|
|
4126
|
+
[attr.aria-label]="ariaLabel()"
|
|
4127
|
+
(checkedChange)="selectedChange.emit($event)"
|
|
4128
|
+
/>
|
|
4129
|
+
} @else {
|
|
4130
|
+
<ng-content select="[ul-selectable-row-media]" />
|
|
4131
|
+
}
|
|
4132
|
+
@if (!isCompact()) {
|
|
4133
|
+
<ul-checkbox
|
|
4134
|
+
class="ul-selectable-row__hover-checkbox"
|
|
4135
|
+
[checked]="selected()"
|
|
4136
|
+
[attr.aria-label]="ariaLabel()"
|
|
4137
|
+
(checkedChange)="selectedChange.emit($event)"
|
|
4138
|
+
/>
|
|
4139
|
+
}
|
|
4140
|
+
<ng-content select="[ul-selectable-row-content]" />
|
|
4141
|
+
<ng-content />
|
|
4142
|
+
`, 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"] }]
|
|
4143
|
+
}], 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"] }] } });
|
|
3584
4144
|
|
|
3585
4145
|
class SidebarComponent {
|
|
3586
4146
|
items = input([], /* @ts-ignore */
|
|
@@ -3617,13 +4177,13 @@ class SidebarComponent {
|
|
|
3617
4177
|
}
|
|
3618
4178
|
}
|
|
3619
4179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3620
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\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-scrollable
|
|
4180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SidebarComponent, isStandalone: true, selector: "ul-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hideItemFocusOutline: { classPropertyName: "hideItemFocusOutline", publicName: "hideItemFocusOutline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", open: "openChange", itemSelected: "itemSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "attr.aria-hidden": "!open()" } }, ngImport: i0, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }, { kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }, { kind: "component", type: ListItemComponent, selector: "ul-list-item", inputs: ["theme", "disabled", "hideFocusOutline", "selected", "loading"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3621
4181
|
}
|
|
3622
4182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3623
4183
|
type: Component,
|
|
3624
4184
|
args: [{ selector: 'ul-sidebar', imports: [ButtonComponent, IconComponent, ListItemComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3625
4185
|
'[attr.aria-hidden]': '!open()',
|
|
3626
|
-
}, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\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-scrollable
|
|
4186
|
+
}, template: "<div class=\"ul-sidebar\">\n <div\n class=\"ul-sidebar__overlay\"\n [class.ul-sidebar__overlay--visible]=\"open()\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"onOverlayClick()\"\n ></div>\n\n <aside\n class=\"ul-sidebar__drawer\"\n [class.ul-sidebar__drawer--open]=\"open()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open()\"\n >\n <div class=\"ul-sidebar__inner\">\n <header class=\"ul-sidebar__header\">\n @if (open()) {\n <ul-button\n theme=\"ghost-white\"\n [iconOnly]=\"true\"\n class=\"ul-sidebar__close\"\n ariaLabel=\"Close menu\"\n (buttonClick)=\"close()\"\n >\n <ul-icon icon=\"close\" size=\"6\" />\n </ul-button>\n }\n <ng-content select=\"[ul-sidebar-header]\" />\n </header>\n <nav class=\"ul-sidebar__nav ul-scrollable\">\n @if (items().length > 0) {\n @for (item of items(); track $index) {\n <ul-list-item\n [theme]=\"theme()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"selectedIndex() === $index\"\n [hideFocusOutline]=\"hideItemFocusOutline()\"\n (click)=\"onItemClick(item, $index)\"\n >\n <ng-container ul-list-item-before-label>\n @if (item.leftIcons) {\n @for (icon of item.leftIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n <ng-container ul-list-item-label>{{ item.label }}</ng-container>\n <ng-container ul-list-item-after-label>\n @if (item.rightIcons) {\n @for (icon of item.rightIcons; track icon) {\n <ul-icon size=\"5\" [icon]=\"icon\" />\n }\n }\n </ng-container>\n </ul-list-item>\n }\n } @else {\n <ng-content select=\"[ul-sidebar-nav]\" />\n }\n </nav>\n <footer class=\"ul-sidebar__footer\">\n <ng-content select=\"[ul-sidebar-footer]\" />\n </footer>\n </div>\n </aside>\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-scrollable{scrollbar-width:none;-webkit-overflow-scrolling:touch}.ul-scrollable::-webkit-scrollbar{width:0;height:0;display:none}.ul-sidebar{position:relative;height:100%}.ul-sidebar__overlay{display:none;position:fixed;inset:0;background-color:#000000b3;z-index:900;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__overlay{display:block}}.ul-sidebar__overlay--visible{opacity:1;pointer-events:auto}.ul-sidebar__drawer{position:fixed;top:0;left:0;bottom:0;width:240px;max-width:85vw;height:100%;background-color:#0a0a0a;border-right:1px solid rgba(255,255,255,.1);z-index:1000;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1)}@media(max-width:1023px){.ul-sidebar__drawer{transform:translate(-100%)}}@media(max-width:1023px){.ul-sidebar__drawer--open{transform:translate(0)}}@media(min-width:1024px){.ul-sidebar__drawer{position:relative;transform:none;flex-shrink:0}}.ul-sidebar__inner{display:flex;flex-direction:column;height:100%;padding:16px;gap:16px}.ul-sidebar__header{flex-shrink:0;display:flex;align-items:center;gap:8px}@media(min-width:1024px){.ul-sidebar__header .ul-sidebar__close{display:none}}.ul-sidebar__header .ul-sidebar__close .ul-icon,.ul-sidebar__header .ul-sidebar__close .ul-icon:before{background-color:transparent}.ul-sidebar__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.ul-sidebar__footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}@media(max-width:1023px){.ul-sidebar__nav .ul-list-item,.ul-sidebar__footer .ul-list-item{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;padding:12px}.ul-sidebar__nav .ul-list-item .ul-icon,.ul-sidebar__footer .ul-list-item .ul-icon{font-size:24px;line-height:24px}}\n"] }]
|
|
3627
4187
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], hideItemFocusOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideItemFocusOutline", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], onEscape: [{
|
|
3628
4188
|
type: HostListener,
|
|
3629
4189
|
args: ['document:keydown.escape']
|
|
@@ -3758,7 +4318,7 @@ class TableComponent {
|
|
|
3758
4318
|
return this.sortDirection() === 'asc' ? 'ascending' : 'descending';
|
|
3759
4319
|
}
|
|
3760
4320
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TableComponent, isStandalone: true, selector: "ul-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, showGlobalFilter: { classPropertyName: "showGlobalFilter", publicName: "showGlobalFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", sortChange: "sortChange", filterChange: "filterChange" }, ngImport: i0, template: "<div\n class=\"ul-table\"\n [class.ul-table--sortable]=\"hasSortableColumn()\"\n [class.ul-table--filterable]=\"showGlobalFilter()\"\n>\n @if (showGlobalFilter()) {\n <div class=\"ul-table__toolbar\">\n <ul-input\n [controlId]=\"filterId\"\n [label]=\"filterLabel()\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (valueChange)=\"onFilterInput($event)\"\n size=\"sm\"\n >\n <ng-container ul-input-left-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n </div>\n }\n\n <div class=\"ul-table__scroll ul-scrollable\">\n <ul-skeleton [show]=\"loading()\" variant=\"rect\">\n <table class=\"ul-table__table\">\n <thead class=\"ul-table__head\">\n <tr class=\"ul-table__row ul-table__row--head\">\n @for (col of columns(); track col.id) {\n <th\n class=\"ul-table__th\"\n [class.ul-table__th--sortable]=\"col.sortable\"\n [class.ul-table__th--sort-asc]=\"sortColumn() === col.id && sortDirection() === 'asc'\"\n [class.ul-table__th--sort-desc]=\"sortColumn() === col.id && sortDirection() === 'desc'\"\n [attr.scope]=\"'col'\"\n [attr.aria-sort]=\"col.sortable ? getSortAriaSort(col.id) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ul-table__th-button\"\n [attr.aria-label]=\"'Sort by ' + col.label\"\n (click)=\"toggleSort(col.id)\"\n >\n <span class=\"ul-table__th-label\">{{ col.label }}</span>\n @if (sortColumn() === col.id && sortDirection() === 'asc') {\n <ul-icon size=\"5\" icon=\"arrow_up\" />\n } @else if (sortColumn() === col.id && sortDirection() === 'desc') {\n <ul-icon size=\"5\" icon=\"arrow_down\" />\n } @else {\n <ul-icon size=\"5\" icon=\"sort\" />\n }\n </button>\n } @else {\n <span class=\"ul-table__th-label\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ul-table__body\">\n @if (sortedData().length === 0) {\n <tr class=\"ul-table__row ul-table__row--empty\">\n <td class=\"ul-table__cell ul-table__cell--empty\" [attr.colspan]=\"columns().length || 1\">\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of sortedData(); track $index) {\n <tr class=\"ul-table__row\">\n @for (col of columns(); track col.id) {\n <td class=\"ul-table__cell\">{{ getCellValue(row, col.id) }}</td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </ul-skeleton>\n </div>\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-table{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%}.ul-table__toolbar{flex-shrink:0;max-width:100%}.ul-table__scroll{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:touch}.ul-table__table{width:100%;min-width:100%;border-collapse:collapse;border-spacing:0;border:1px solid rgba(255,255,255,.1);font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#fff}.ul-table__head{position:sticky;top:0;z-index:1;background-color:transparent}.ul-table__row{border-bottom:1px solid rgba(255,255,255,.1)}.ul-table__row--head{border-bottom:2px solid rgba(255,255,255,.1)}.ul-table__row--empty{border-bottom:none}.ul-table__th{padding:8px 12px;text-align:left;font-weight:600;white-space:nowrap}.ul-table__th--sortable .ul-table__th-button{display:inline-flex;align-items:center;gap:4px;width:100%;min-width:0;padding:0;border:none;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;font-weight:600}.ul-table__th--sortable .ul-table__th-button:hover{color:#ffffffb3}.ul-table__th--sortable .ul-table__th-button:focus-visible{outline:2px solid rgba(255,255,255,.3);outline-offset:2px}.ul-table__th--sort-asc,.ul-table__th--sort-desc{color:#c2a8ff}.ul-table__th-label{overflow:hidden;text-overflow:ellipsis}.ul-table__body{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#fff}.ul-table__cell{padding:8px 12px;vertical-align:middle}.ul-table__cell--empty{padding:24px;text-align:center;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}@media(max-width:1023px){.ul-table__scroll{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.ul-table__table{min-width:max-content}}@media(min-width:1024px){.ul-table__scroll{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}\n"], dependencies: [{ kind: "component", type: InputComponent, selector: "ul-input", inputs: ["type", "size", "appearance", "error", "disabled", "readOnly", "required", "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: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }] });
|
|
4321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TableComponent, isStandalone: true, selector: "ul-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, showGlobalFilter: { classPropertyName: "showGlobalFilter", publicName: "showGlobalFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortColumn: "sortColumnChange", sortDirection: "sortDirectionChange", sortChange: "sortChange", filterChange: "filterChange" }, ngImport: i0, template: "<div\n class=\"ul-table\"\n [class.ul-table--sortable]=\"hasSortableColumn()\"\n [class.ul-table--filterable]=\"showGlobalFilter()\"\n>\n @if (showGlobalFilter()) {\n <div class=\"ul-table__toolbar\">\n <ul-input\n [controlId]=\"filterId\"\n [label]=\"filterLabel()\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"filterQuery()\"\n (valueChange)=\"onFilterInput($event)\"\n size=\"sm\"\n >\n <ng-container ul-input-left-elements>\n <ul-icon size=\"5\" icon=\"search\" />\n </ng-container>\n </ul-input>\n </div>\n }\n\n <div class=\"ul-table__scroll ul-scrollable\">\n <ul-skeleton [show]=\"loading()\" variant=\"rect\">\n <table class=\"ul-table__table\">\n <thead class=\"ul-table__head\">\n <tr class=\"ul-table__row ul-table__row--head\">\n @for (col of columns(); track col.id) {\n <th\n class=\"ul-table__th\"\n [class.ul-table__th--sortable]=\"col.sortable\"\n [class.ul-table__th--sort-asc]=\"sortColumn() === col.id && sortDirection() === 'asc'\"\n [class.ul-table__th--sort-desc]=\"sortColumn() === col.id && sortDirection() === 'desc'\"\n [attr.scope]=\"'col'\"\n [attr.aria-sort]=\"col.sortable ? getSortAriaSort(col.id) : null\"\n >\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"ul-table__th-button\"\n [attr.aria-label]=\"'Sort by ' + col.label\"\n (click)=\"toggleSort(col.id)\"\n >\n <span class=\"ul-table__th-label\">{{ col.label }}</span>\n @if (sortColumn() === col.id && sortDirection() === 'asc') {\n <ul-icon size=\"5\" icon=\"arrow_up\" />\n } @else if (sortColumn() === col.id && sortDirection() === 'desc') {\n <ul-icon size=\"5\" icon=\"arrow_down\" />\n } @else {\n <ul-icon size=\"5\" icon=\"sort\" />\n }\n </button>\n } @else {\n <span class=\"ul-table__th-label\">{{ col.label }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ul-table__body\">\n @if (sortedData().length === 0) {\n <tr class=\"ul-table__row ul-table__row--empty\">\n <td class=\"ul-table__cell ul-table__cell--empty\" [attr.colspan]=\"columns().length || 1\">\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of sortedData(); track $index) {\n <tr class=\"ul-table__row\">\n @for (col of columns(); track col.id) {\n <td class=\"ul-table__cell\">{{ getCellValue(row, col.id) }}</td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n </ul-skeleton>\n </div>\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-table{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%}.ul-table__toolbar{flex-shrink:0;max-width:100%}.ul-table__scroll{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:touch}.ul-table__table{width:100%;min-width:100%;border-collapse:collapse;border-spacing:0;border:1px solid rgba(255,255,255,.1);font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#fff}.ul-table__head{position:sticky;top:0;z-index:1;background-color:transparent}.ul-table__row{border-bottom:1px solid rgba(255,255,255,.1)}.ul-table__row--head{border-bottom:2px solid rgba(255,255,255,.1)}.ul-table__row--empty{border-bottom:none}.ul-table__th{padding:8px 12px;text-align:left;font-weight:600;white-space:nowrap}.ul-table__th--sortable .ul-table__th-button{display:inline-flex;align-items:center;gap:4px;width:100%;min-width:0;padding:0;border:none;background:none;cursor:pointer;color:inherit;font:inherit;text-align:left;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;font-weight:600}.ul-table__th--sortable .ul-table__th-button:hover{color:#ffffffb3}.ul-table__th--sortable .ul-table__th-button:focus-visible{outline:2px solid rgba(255,255,255,.3);outline-offset:2px}.ul-table__th--sort-asc,.ul-table__th--sort-desc{color:#c2a8ff}.ul-table__th-label{overflow:hidden;text-overflow:ellipsis}.ul-table__body{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#fff}.ul-table__cell{padding:8px 12px;vertical-align:middle}.ul-table__cell--empty{padding:24px;text-align:center;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}@media(max-width:1023px){.ul-table__scroll{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.ul-table__table{min-width:max-content}}@media(min-width:1024px){.ul-table__scroll{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}\n"], dependencies: [{ 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: SkeletonComponent, selector: "ul-skeleton", inputs: ["variant", "width", "height", "lines", "borderRadius", "show"] }] });
|
|
3762
4322
|
}
|
|
3763
4323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
3764
4324
|
type: Component,
|
|
@@ -3797,6 +4357,8 @@ class TextareaComponent {
|
|
|
3797
4357
|
...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
3798
4358
|
required = input(false, /* @ts-ignore */
|
|
3799
4359
|
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
4360
|
+
showRequiredIndicator = input(true, /* @ts-ignore */
|
|
4361
|
+
...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
|
|
3800
4362
|
placeholder = input('', /* @ts-ignore */
|
|
3801
4363
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3802
4364
|
label = input(null, /* @ts-ignore */
|
|
@@ -3866,12 +4428,12 @@ class TextareaComponent {
|
|
|
3866
4428
|
el?.select();
|
|
3867
4429
|
}
|
|
3868
4430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TextareaComponent, isStandalone: true, selector: "ul-textarea", inputs: { size: { classPropertyName: "size", publicName: "size", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, groupFocused: { classPropertyName: "groupFocused", publicName: "groupFocused", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, queries: [{ propertyName: "customField", first: true, predicate: TextareaFieldDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ul-textarea ul-textarea--{{ size() }}\"\n [class.ul-textarea--error]=\"hasError()\"\n [class.ul-textarea--disabled]=\"disabled()\"\n [class.ul-textarea--read-only]=\"readOnly()\"\n [class.ul-textarea--required]=\"required()\"\n [class.ul-textarea--resize-none]=\"resize() === 'none'\"\n [class.ul-textarea--resize-vertical]=\"resize() === 'vertical'\"\n [class.ul-textarea--resize-horizontal]=\"resize() === 'horizontal'\"\n [class.ul-textarea--resize-both]=\"resize() === 'both'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-textarea__group\"\n [class.ul-textarea__group--focused]=\"groupFocusedState()\"\n [style.--ul-textarea-rows]=\"rows()\"\n >\n <div class=\"ul-textarea__left-elements\">\n <ng-content select=\"[ul-textarea-left-elements]\" />\n </div>\n\n <ng-content select=\"[ul-textarea-field]\" />\n @if (!customField()) {\n <textarea\n [id]=\"ids.controlId\"\n class=\"ul-textarea__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n ></textarea>\n }\n\n <div class=\"ul-textarea__right-elements\">\n <ng-content select=\"[ul-textarea-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"(errorText() || (hasError() && errors().length ? errors()[0].message : null)) ?? 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-textarea{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-textarea__group{display:flex;align-items:stretch;padding:12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-textarea__group--focused{border-color:#ffffff80}.ul-textarea:not(.ul-textarea--disabled) .ul-textarea__group:hover{border-color:#ffffff4d}.ul-textarea__field{all:unset;flex:1;min-height:0;resize:vertical}.ul-textarea__field::placeholder{color:#ffffff80}.ul-textarea__field:hover::placeholder{color:#fff}.ul-textarea__field--custom{display:flex;flex-direction:column;min-height:0}.ul-textarea__left-elements,.ul-textarea__right-elements{display:flex;gap:8px;align-items:flex-start;padding-top:8px}.ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--sm .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 20px + 2 * 8px);padding:8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-textarea--sm .ul-textarea__left-elements,.ul-textarea--sm .ul-textarea__right-elements{gap:4px;padding-top:4px}.ul-textarea--sm .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--sm .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-textarea--md .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 24px + 2 * 12px);padding:12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-textarea--md .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--md .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--lg .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 28px + 2 * 12px);padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-textarea--lg .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--lg .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-textarea--xl .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 36px + 2 * 16px);padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-textarea--xl .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--xl .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-textarea--resize-none .ul-textarea__field{resize:none}.ul-textarea--resize-vertical .ul-textarea__field{resize:vertical}.ul-textarea--resize-horizontal .ul-textarea__field{resize:horizontal}.ul-textarea--resize-both .ul-textarea__field{resize:both}.ul-textarea--error .ul-textarea__group{border:2px solid #f69d9d}.ul-textarea--disabled .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--disabled .ul-textarea__field,.ul-textarea--disabled .ul-textarea__field:disabled::placeholder{color:#ffffff4d}.ul-textarea--read-only .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--read-only .ul-textarea__field,.ul-textarea--read-only .ul-textarea__field:read-only::placeholder{color:#ffffffb3}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
|
|
4431
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: TextareaComponent, isStandalone: true, selector: "ul-textarea", inputs: { size: { classPropertyName: "size", publicName: "size", 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 }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredIndicator: { classPropertyName: "showRequiredIndicator", publicName: "showRequiredIndicator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, groupFocused: { classPropertyName: "groupFocused", publicName: "groupFocused", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, queries: [{ propertyName: "customField", first: true, predicate: TextareaFieldDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ul-textarea ul-textarea--{{ size() }}\"\n [class.ul-textarea--error]=\"hasError()\"\n [class.ul-textarea--disabled]=\"disabled()\"\n [class.ul-textarea--read-only]=\"readOnly()\"\n [class.ul-textarea--required]=\"required()\"\n [class.ul-textarea--resize-none]=\"resize() === 'none'\"\n [class.ul-textarea--resize-vertical]=\"resize() === 'vertical'\"\n [class.ul-textarea--resize-horizontal]=\"resize() === 'horizontal'\"\n [class.ul-textarea--resize-both]=\"resize() === 'both'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-textarea__group\"\n [class.ul-textarea__group--focused]=\"groupFocusedState()\"\n [style.--ul-textarea-rows]=\"rows()\"\n >\n <div class=\"ul-textarea__left-elements\">\n <ng-content select=\"[ul-textarea-left-elements]\" />\n </div>\n\n <ng-content select=\"[ul-textarea-field]\" />\n @if (!customField()) {\n <textarea\n [id]=\"ids.controlId\"\n class=\"ul-textarea__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n ></textarea>\n }\n\n <div class=\"ul-textarea__right-elements\">\n <ng-content select=\"[ul-textarea-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"\n (errorText() || (hasError() && errors().length ? errors()[0].message : null)) ?? null\n \"\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-textarea{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-textarea__group{display:flex;align-items:stretch;padding:12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-textarea__group--focused{border-color:#ffffff80}.ul-textarea:not(.ul-textarea--disabled) .ul-textarea__group:hover{border-color:#ffffff4d}.ul-textarea__field{all:unset;flex:1;min-height:0;resize:vertical}.ul-textarea__field::placeholder{color:#ffffff80}.ul-textarea__field:hover::placeholder{color:#fff}.ul-textarea__field--custom{display:flex;flex-direction:column;min-height:0}.ul-textarea__left-elements,.ul-textarea__right-elements{display:flex;gap:8px;align-items:flex-start;padding-top:8px}.ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--sm .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 20px + 2 * 8px);padding:8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-textarea--sm .ul-textarea__left-elements,.ul-textarea--sm .ul-textarea__right-elements{gap:4px;padding-top:4px}.ul-textarea--sm .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--sm .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-textarea--md .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 24px + 2 * 12px);padding:12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-textarea--md .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--md .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--lg .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 28px + 2 * 12px);padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-textarea--lg .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--lg .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-textarea--xl .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 36px + 2 * 16px);padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-textarea--xl .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--xl .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-textarea--resize-none .ul-textarea__field{resize:none}.ul-textarea--resize-vertical .ul-textarea__field{resize:vertical}.ul-textarea--resize-horizontal .ul-textarea__field{resize:horizontal}.ul-textarea--resize-both .ul-textarea__field{resize:both}.ul-textarea--error .ul-textarea__group{border:2px solid #f69d9d}.ul-textarea--disabled .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--disabled .ul-textarea__field,.ul-textarea--disabled .ul-textarea__field:disabled::placeholder{color:#ffffff4d}.ul-textarea--read-only .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--read-only .ul-textarea__field,.ul-textarea--read-only .ul-textarea__field:read-only::placeholder{color:#ffffffb3}\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"] }] });
|
|
3870
4432
|
}
|
|
3871
4433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3872
4434
|
type: Component,
|
|
3873
|
-
args: [{ selector: 'ul-textarea', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: "<div\n class=\"ul-textarea ul-textarea--{{ size() }}\"\n [class.ul-textarea--error]=\"hasError()\"\n [class.ul-textarea--disabled]=\"disabled()\"\n [class.ul-textarea--read-only]=\"readOnly()\"\n [class.ul-textarea--required]=\"required()\"\n [class.ul-textarea--resize-none]=\"resize() === 'none'\"\n [class.ul-textarea--resize-vertical]=\"resize() === 'vertical'\"\n [class.ul-textarea--resize-horizontal]=\"resize() === 'horizontal'\"\n [class.ul-textarea--resize-both]=\"resize() === 'both'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n />\n\n <div\n class=\"ul-textarea__group\"\n [class.ul-textarea__group--focused]=\"groupFocusedState()\"\n [style.--ul-textarea-rows]=\"rows()\"\n >\n <div class=\"ul-textarea__left-elements\">\n <ng-content select=\"[ul-textarea-left-elements]\" />\n </div>\n\n <ng-content select=\"[ul-textarea-field]\" />\n @if (!customField()) {\n <textarea\n [id]=\"ids.controlId\"\n class=\"ul-textarea__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n ></textarea>\n }\n\n <div class=\"ul-textarea__right-elements\">\n <ng-content select=\"[ul-textarea-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"(errorText() || (hasError() && errors().length ? errors()[0].message : null)) ?? 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-textarea{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-textarea__group{display:flex;align-items:stretch;padding:12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-textarea__group--focused{border-color:#ffffff80}.ul-textarea:not(.ul-textarea--disabled) .ul-textarea__group:hover{border-color:#ffffff4d}.ul-textarea__field{all:unset;flex:1;min-height:0;resize:vertical}.ul-textarea__field::placeholder{color:#ffffff80}.ul-textarea__field:hover::placeholder{color:#fff}.ul-textarea__field--custom{display:flex;flex-direction:column;min-height:0}.ul-textarea__left-elements,.ul-textarea__right-elements{display:flex;gap:8px;align-items:flex-start;padding-top:8px}.ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--sm .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 20px + 2 * 8px);padding:8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-textarea--sm .ul-textarea__left-elements,.ul-textarea--sm .ul-textarea__right-elements{gap:4px;padding-top:4px}.ul-textarea--sm .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--sm .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-textarea--md .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 24px + 2 * 12px);padding:12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-textarea--md .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--md .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--lg .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 28px + 2 * 12px);padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-textarea--lg .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--lg .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-textarea--xl .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 36px + 2 * 16px);padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-textarea--xl .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--xl .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-textarea--resize-none .ul-textarea__field{resize:none}.ul-textarea--resize-vertical .ul-textarea__field{resize:vertical}.ul-textarea--resize-horizontal .ul-textarea__field{resize:horizontal}.ul-textarea--resize-both .ul-textarea__field{resize:both}.ul-textarea--error .ul-textarea__group{border:2px solid #f69d9d}.ul-textarea--disabled .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--disabled .ul-textarea__field,.ul-textarea--disabled .ul-textarea__field:disabled::placeholder{color:#ffffff4d}.ul-textarea--read-only .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--read-only .ul-textarea__field,.ul-textarea--read-only .ul-textarea__field:read-only::placeholder{color:#ffffffb3}\n"] }]
|
|
3874
|
-
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], groupFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupFocused", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], customField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextareaFieldDirective), { isSignal: true }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }] } });
|
|
4435
|
+
args: [{ selector: 'ul-textarea', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: "<div\n class=\"ul-textarea ul-textarea--{{ size() }}\"\n [class.ul-textarea--error]=\"hasError()\"\n [class.ul-textarea--disabled]=\"disabled()\"\n [class.ul-textarea--read-only]=\"readOnly()\"\n [class.ul-textarea--required]=\"required()\"\n [class.ul-textarea--resize-none]=\"resize() === 'none'\"\n [class.ul-textarea--resize-vertical]=\"resize() === 'vertical'\"\n [class.ul-textarea--resize-horizontal]=\"resize() === 'horizontal'\"\n [class.ul-textarea--resize-both]=\"resize() === 'both'\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n>\n <ul-form-field-label\n [label]=\"label()\"\n [required]=\"required()\"\n [for]=\"ids.controlId\"\n [size]=\"size()\"\n [showRequiredIndicator]=\"showRequiredIndicator()\"\n />\n\n <div\n class=\"ul-textarea__group\"\n [class.ul-textarea__group--focused]=\"groupFocusedState()\"\n [style.--ul-textarea-rows]=\"rows()\"\n >\n <div class=\"ul-textarea__left-elements\">\n <ng-content select=\"[ul-textarea-left-elements]\" />\n </div>\n\n <ng-content select=\"[ul-textarea-field]\" />\n @if (!customField()) {\n <textarea\n [id]=\"ids.controlId\"\n class=\"ul-textarea__field\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n [disabled]=\"disabled()\"\n [readonly]=\"readOnly()\"\n [required]=\"required()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.minlength]=\"minLength()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n ></textarea>\n }\n\n <div class=\"ul-textarea__right-elements\">\n <ng-content select=\"[ul-textarea-right-elements]\" />\n </div>\n </div>\n\n <ul-form-field-helper\n [id]=\"ids.helperId\"\n [helperText]=\"helperText()\"\n [errorText]=\"\n (errorText() || (hasError() && errors().length ? errors()[0].message : null)) ?? null\n \"\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-textarea{box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-textarea__group{display:flex;align-items:stretch;padding:12px;gap:8px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background-color:transparent;color:#fff;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-textarea__group--focused{border-color:#ffffff80}.ul-textarea:not(.ul-textarea--disabled) .ul-textarea__group:hover{border-color:#ffffff4d}.ul-textarea__field{all:unset;flex:1;min-height:0;resize:vertical}.ul-textarea__field::placeholder{color:#ffffff80}.ul-textarea__field:hover::placeholder{color:#fff}.ul-textarea__field--custom{display:flex;flex-direction:column;min-height:0}.ul-textarea__left-elements,.ul-textarea__right-elements{display:flex;gap:8px;align-items:flex-start;padding-top:8px}.ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--sm .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 20px + 2 * 8px);padding:8px;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-textarea--sm .ul-textarea__left-elements,.ul-textarea--sm .ul-textarea__right-elements{gap:4px;padding-top:4px}.ul-textarea--sm .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--sm .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:20px;line-height:20px}.ul-textarea--md .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 24px + 2 * 12px);padding:12px;font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-textarea--md .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--md .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:24px;line-height:24px}.ul-textarea--lg .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 28px + 2 * 12px);padding:8px 12px;font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400}.ul-textarea--lg .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--lg .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:28px;line-height:28px}.ul-textarea--xl .ul-textarea__group{min-height:calc(var(--ul-textarea-rows, 3) * 36px + 2 * 16px);padding:8px 16px;font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:400}.ul-textarea--xl .ul-textarea__left-elements ::ng-deep .ul-icon,.ul-textarea--xl .ul-textarea__right-elements ::ng-deep .ul-icon{font-size:32px;line-height:32px}.ul-textarea--resize-none .ul-textarea__field{resize:none}.ul-textarea--resize-vertical .ul-textarea__field{resize:vertical}.ul-textarea--resize-horizontal .ul-textarea__field{resize:horizontal}.ul-textarea--resize-both .ul-textarea__field{resize:both}.ul-textarea--error .ul-textarea__group{border:2px solid #f69d9d}.ul-textarea--disabled .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--disabled .ul-textarea__field,.ul-textarea--disabled .ul-textarea__field:disabled::placeholder{color:#ffffff4d}.ul-textarea--read-only .ul-textarea__group{border:2px solid rgba(255,255,255,.1);background-color:transparent}.ul-textarea--read-only .ul-textarea__field,.ul-textarea--read-only .ul-textarea__field:read-only::placeholder{color:#ffffffb3}\n"] }]
|
|
4436
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showRequiredIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredIndicator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], groupFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupFocused", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], customField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextareaFieldDirective), { isSignal: true }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }] } });
|
|
3875
4437
|
|
|
3876
4438
|
/*
|
|
3877
4439
|
* Public API Surface of ui
|
|
@@ -3881,5 +4443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3881
4443
|
* Generated bundle index. Do not edit.
|
|
3882
4444
|
*/
|
|
3883
4445
|
|
|
3884
|
-
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, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchSelectComponent, SelectComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
4446
|
+
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, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
|
|
3885
4447
|
//# sourceMappingURL=underlayerdev-ui.mjs.map
|