@underlayerdev/ui 0.4.0 → 0.5.1
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.
|
@@ -1748,11 +1748,11 @@ class DockItemComponent {
|
|
|
1748
1748
|
hasContentSlot = computed(() => !!this.contentSlot(), /* @ts-ignore */
|
|
1749
1749
|
...(ngDevMode ? [{ debugName: "hasContentSlot" }] : /* istanbul ignore next */ []));
|
|
1750
1750
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: DockItemComponent, isStandalone: true, selector: "ul-dock-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentSlot", first: true, predicate: DockItemContentSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\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-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% -
|
|
1751
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: DockItemComponent, isStandalone: true, selector: "ul-dock-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentSlot", first: true, predicate: DockItemContentSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\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-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;border-radius:4096px;background-color:#6f3de0;color:#fff;font-size:10px;line-height:16px;text-align:center}.ul-dock-item:disabled,.ul-dock-item[disabled]{cursor:not-allowed;color:#ffffff4d}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ul-icon", inputs: ["size", "weight", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1752
1752
|
}
|
|
1753
1753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DockItemComponent, decorators: [{
|
|
1754
1754
|
type: Component,
|
|
1755
|
-
args: [{ selector: 'ul-dock-item', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\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-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% -
|
|
1755
|
+
args: [{ selector: 'ul-dock-item', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"ul-dock-item\"\n [class.ul-dock-item--active]=\"active()\"\n [class.ul-dock-item--accent]=\"variant() === 'accent'\"\n [disabled]=\"disabled()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n>\n @if (hasContentSlot()) {\n <ng-content select=\"[ul-dock-item-content]\" />\n } @else {\n <ul-icon [icon]=\"icon()!\" size=\"6\" />\n @if (label()) {\n <span class=\"ul-dock-item__label\">{{ label() }}</span>\n }\n }\n @if (badge()) {\n <span class=\"ul-dock-item__badge\">{{ badge() }}</span>\n }\n</button>\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-dock-item{position:relative;cursor:pointer;border:none;background:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;padding:4px;border-radius:8px;color:#ffffffb3;font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-dock-item:focus-visible,.ul-dock-item:focus{outline-offset:2px;outline:rgba(255,255,255,.3) solid 2px}.ul-dock-item--active{color:#c2a8ff}.ul-dock-item--accent{color:#fff}.ul-dock-item--accent .ul-icon{background-color:#6f3de0;border-radius:4096px;padding:8px;box-sizing:content-box}.ul-dock-item--accent:hover .ul-icon{background-color:#7e4af7}.ul-dock-item--accent.ul-dock-item--active .ul-icon{background-color:#5935af}.ul-dock-item__label{line-height:1}.ul-dock-item__badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;border-radius:4096px;background-color:#6f3de0;color:#fff;font-size:10px;line-height:16px;text-align:center}.ul-dock-item:disabled,.ul-dock-item[disabled]{cursor:not-allowed;color:#ffffff4d}\n"] }]
|
|
1756
1756
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], contentSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DockItemContentSlotDirective), { isSignal: true }] }] } });
|
|
1757
1757
|
|
|
1758
1758
|
class ListItemComponent {
|
|
@@ -1780,6 +1780,7 @@ class ListItemComponent {
|
|
|
1780
1780
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: ListItemComponent, isStandalone: true, selector: "ul-list-item", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideFocusOutline: { classPropertyName: "hideFocusOutline", publicName: "hideFocusOutline", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1781
1781
|
<ul-skeleton [show]="loading()" variant="rect">
|
|
1782
1782
|
<button
|
|
1783
|
+
type="button"
|
|
1783
1784
|
class="ul-list-item ul-list-item--{{ theme() }}"
|
|
1784
1785
|
[class.ul-list-item--no-focus-outline]="hideFocusOutline()"
|
|
1785
1786
|
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked"
|
|
@@ -1803,6 +1804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
1803
1804
|
args: [{ selector: 'ul-list-item', standalone: true, imports: [SkeletonComponent], template: `
|
|
1804
1805
|
<ul-skeleton [show]="loading()" variant="rect">
|
|
1805
1806
|
<button
|
|
1807
|
+
type="button"
|
|
1806
1808
|
class="ul-list-item ul-list-item--{{ theme() }}"
|
|
1807
1809
|
[class.ul-list-item--no-focus-outline]="hideFocusOutline()"
|
|
1808
1810
|
[class.ul-list-item--selected]="selected() || !!checkbox()?.checked"
|
|
@@ -1954,6 +1956,12 @@ class DropdownComponent {
|
|
|
1954
1956
|
* Emitted when a new item is selected from the dropdown.
|
|
1955
1957
|
*/
|
|
1956
1958
|
selectedItemChange = output();
|
|
1959
|
+
/**
|
|
1960
|
+
* Emitted when the menu closes, whether or not a selection was made —
|
|
1961
|
+
* the closest thing this component has to a "blur" for form controls
|
|
1962
|
+
* built on top of it (see ul-select's touch output).
|
|
1963
|
+
*/
|
|
1964
|
+
closed = output();
|
|
1957
1965
|
/**
|
|
1958
1966
|
* Handles the selection of a dropdown item.
|
|
1959
1967
|
* @param index - The index of the selected item
|
|
@@ -1967,14 +1975,15 @@ class DropdownComponent {
|
|
|
1967
1975
|
}
|
|
1968
1976
|
onMenuClosed() {
|
|
1969
1977
|
this.isOpen.set(false);
|
|
1978
|
+
this.closed.emit();
|
|
1970
1979
|
}
|
|
1971
1980
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1972
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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" }, ngImport: i0, 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"], 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: "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"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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" }, ngImport: i0, 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"], 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: "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"] }, { kind: "component", type: ButtonComponent, selector: "ul-button", inputs: ["size", "theme", "iconOnly", "vertical", "disabled", "type", "ariaLabel"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1973
1982
|
}
|
|
1974
1983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
1975
1984
|
type: Component,
|
|
1976
1985
|
args: [{ selector: 'ul-dropdown', standalone: true, imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem, NgTemplateOutlet, ListItemComponent, IconComponent, ButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
1977
|
-
}], 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"] }] } });
|
|
1986
|
+
}], 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"] }] } });
|
|
1978
1987
|
|
|
1979
1988
|
/**
|
|
1980
1989
|
* File input component with label, helper/error text, and optional slots.
|
|
@@ -2013,6 +2022,8 @@ class FileInputComponent {
|
|
|
2013
2022
|
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2014
2023
|
touched = model(false, /* @ts-ignore */
|
|
2015
2024
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2025
|
+
/** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
|
|
2026
|
+
touch = output();
|
|
2016
2027
|
error = input(false, /* @ts-ignore */
|
|
2017
2028
|
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2018
2029
|
value = model(null, /* @ts-ignore */
|
|
@@ -2062,6 +2073,7 @@ class FileInputComponent {
|
|
|
2062
2073
|
onBlur(event) {
|
|
2063
2074
|
this.isFocused.set(false);
|
|
2064
2075
|
this.touched.set(true);
|
|
2076
|
+
this.touch.emit();
|
|
2065
2077
|
this.inputBlur.emit(event);
|
|
2066
2078
|
}
|
|
2067
2079
|
onFocus(event) {
|
|
@@ -2079,12 +2091,12 @@ class FileInputComponent {
|
|
|
2079
2091
|
el.focus();
|
|
2080
2092
|
}
|
|
2081
2093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2082
|
-
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", 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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2094
|
+
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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2083
2095
|
}
|
|
2084
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2085
2097
|
type: Component,
|
|
2086
2098
|
args: [{ selector: 'ul-file-input', standalone: true, imports: [FormFieldLabelComponent, FormFieldHelperComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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;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"] }]
|
|
2087
|
-
}], 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"] }], 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"] }] } });
|
|
2099
|
+
}], 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"] }] } });
|
|
2088
2100
|
|
|
2089
2101
|
class FooterComponent {
|
|
2090
2102
|
socialLinks = input([], /* @ts-ignore */
|
|
@@ -2392,6 +2404,8 @@ class InputComponent {
|
|
|
2392
2404
|
/** FormUiControl optional: control sets on blur */
|
|
2393
2405
|
touched = model(false, /* @ts-ignore */
|
|
2394
2406
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2407
|
+
/** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
|
|
2408
|
+
touch = output();
|
|
2395
2409
|
value = model('', /* @ts-ignore */
|
|
2396
2410
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2397
2411
|
ids = createFormFieldIds('ul-input');
|
|
@@ -2429,6 +2443,7 @@ class InputComponent {
|
|
|
2429
2443
|
onBlur(event) {
|
|
2430
2444
|
this.isFocused.set(false);
|
|
2431
2445
|
this.touched.set(true);
|
|
2446
|
+
this.touch.emit();
|
|
2432
2447
|
this.inputBlur.emit(event);
|
|
2433
2448
|
}
|
|
2434
2449
|
onFocus(event) {
|
|
@@ -2455,12 +2470,12 @@ class InputComponent {
|
|
|
2455
2470
|
inputEl?.select();
|
|
2456
2471
|
}
|
|
2457
2472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2458
|
-
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 }, 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", 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]=\"pattern()\"\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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2473
|
+
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 }, 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]=\"pattern()\"\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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2459
2474
|
}
|
|
2460
2475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: InputComponent, decorators: [{
|
|
2461
2476
|
type: Component,
|
|
2462
2477
|
args: [{ selector: 'ul-input', standalone: true, imports: [FormFieldLabelComponent, FormFieldHelperComponent, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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]=\"pattern()\"\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;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"] }]
|
|
2463
|
-
}], 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 }] }], 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"] }], 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"] }] } });
|
|
2478
|
+
}], 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 }] }], 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"] }] } });
|
|
2464
2479
|
|
|
2465
2480
|
class ModalComponent {
|
|
2466
2481
|
/** Whether the modal is open. Supports two-way binding with [(open)]. */
|
|
@@ -3412,7 +3427,7 @@ class SearchSelectComponent {
|
|
|
3412
3427
|
}
|
|
3413
3428
|
}
|
|
3414
3429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3415
|
-
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", "autocomplete", "controlId", "showPasswordLabel", "hidePasswordLabel", "invalid", "errors", "touched", "value"], outputs: ["touchedChange", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3430
|
+
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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3416
3431
|
}
|
|
3417
3432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SearchSelectComponent, decorators: [{
|
|
3418
3433
|
type: Component,
|
|
@@ -3457,6 +3472,8 @@ class SelectComponent {
|
|
|
3457
3472
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3458
3473
|
errors = input([], /* @ts-ignore */
|
|
3459
3474
|
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3475
|
+
/** FormUiControl optional: [formField] listens to this to mark the bound field touched when the dropdown closes */
|
|
3476
|
+
touch = output();
|
|
3460
3477
|
value = model(null, /* @ts-ignore */
|
|
3461
3478
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3462
3479
|
selectedIndex = model(0, /* @ts-ignore */
|
|
@@ -3499,13 +3516,16 @@ class SelectComponent {
|
|
|
3499
3516
|
this.selectedIndex.set(index);
|
|
3500
3517
|
this.value.set(option?.value ?? null);
|
|
3501
3518
|
}
|
|
3519
|
+
onDropdownClosed() {
|
|
3520
|
+
this.touch.emit();
|
|
3521
|
+
}
|
|
3502
3522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3503
|
-
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: { 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 />\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;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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3523
|
+
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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3504
3524
|
}
|
|
3505
3525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
3506
3526
|
type: Component,
|
|
3507
|
-
args: [{ selector: 'ul-select', standalone: true, imports: [DropdownComponent, FormFieldLabelComponent, FormFieldHelperComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 />\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;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"] }]
|
|
3508
|
-
}], 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 }] }], 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"] }] } });
|
|
3527
|
+
args: [{ selector: 'ul-select', standalone: true, imports: [DropdownComponent, FormFieldLabelComponent, FormFieldHelperComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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;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"] }]
|
|
3528
|
+
}], 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"] }] } });
|
|
3509
3529
|
|
|
3510
3530
|
class SidebarComponent {
|
|
3511
3531
|
items = input([], /* @ts-ignore */
|
|
@@ -3683,7 +3703,7 @@ class TableComponent {
|
|
|
3683
3703
|
return this.sortDirection() === 'asc' ? 'ascending' : 'descending';
|
|
3684
3704
|
}
|
|
3685
3705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3686
|
-
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", "autocomplete", "controlId", "showPasswordLabel", "hidePasswordLabel", "invalid", "errors", "touched", "value"], outputs: ["touchedChange", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3706
|
+
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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3687
3707
|
}
|
|
3688
3708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
3689
3709
|
type: Component,
|
|
@@ -3750,6 +3770,8 @@ class TextareaComponent {
|
|
|
3750
3770
|
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3751
3771
|
touched = model(false, /* @ts-ignore */
|
|
3752
3772
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3773
|
+
/** FormUiControl optional: [formField] listens to this to mark the bound field touched on blur */
|
|
3774
|
+
touch = output();
|
|
3753
3775
|
value = model('', /* @ts-ignore */
|
|
3754
3776
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3755
3777
|
customField = contentChild(TextareaFieldDirective, /* @ts-ignore */
|
|
@@ -3772,6 +3794,7 @@ class TextareaComponent {
|
|
|
3772
3794
|
onBlur(event) {
|
|
3773
3795
|
this.isFocused.set(false);
|
|
3774
3796
|
this.touched.set(true);
|
|
3797
|
+
this.touch.emit();
|
|
3775
3798
|
this.inputBlur.emit(event);
|
|
3776
3799
|
}
|
|
3777
3800
|
onFocus(event) {
|
|
@@ -3789,12 +3812,12 @@ class TextareaComponent {
|
|
|
3789
3812
|
el?.select();
|
|
3790
3813
|
}
|
|
3791
3814
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3792
|
-
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", 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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3815
|
+
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;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3793
3816
|
}
|
|
3794
3817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3795
3818
|
type: Component,
|
|
3796
3819
|
args: [{ selector: 'ul-textarea', standalone: true, imports: [FormFieldLabelComponent, FormFieldHelperComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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;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"] }]
|
|
3797
|
-
}], 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"] }], 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"] }] } });
|
|
3820
|
+
}], 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"] }] } });
|
|
3798
3821
|
|
|
3799
3822
|
/*
|
|
3800
3823
|
* Public API Surface of ui
|