@edmicro/olkit 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/edmicro-olkit.mjs +112 -20
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/types/edmicro-olkit.d.ts +42 -9
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, output, inject, forwardRef, ChangeDetectionStrategy, Component, contentChildren, computed, signal, Injectable, ElementRef, effect, HostListener, ViewContainerRef, Directive, ViewChildren, ViewChild } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { input, model, output, inject, forwardRef, ChangeDetectionStrategy, Component, contentChildren, computed, signal, Injectable, ElementRef, effect, HostListener, ViewContainerRef, Directive, DestroyRef, viewChild, ViewChildren, ViewChild } from '@angular/core';
|
|
3
|
+
import { CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -235,7 +235,11 @@ class AvatarComponent {
|
|
|
235
235
|
...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
|
|
236
236
|
alt = input('', /* @ts-ignore */
|
|
237
237
|
...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
|
|
238
|
-
|
|
238
|
+
text = input('', /* @ts-ignore */
|
|
239
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
240
|
+
initials = input('', /* @ts-ignore */
|
|
241
|
+
...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
242
|
+
size = input('base', /* @ts-ignore */
|
|
239
243
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
240
244
|
shape = input('circle', /* @ts-ignore */
|
|
241
245
|
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
@@ -243,22 +247,44 @@ class AvatarComponent {
|
|
|
243
247
|
...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
244
248
|
status = input(null, /* @ts-ignore */
|
|
245
249
|
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
250
|
+
statusPosition = input('bottom-right', /* @ts-ignore */
|
|
251
|
+
...(ngDevMode ? [{ debugName: "statusPosition" }] : /* istanbul ignore next */ []));
|
|
252
|
+
removable = input(false, /* @ts-ignore */
|
|
253
|
+
...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
|
|
254
|
+
// Group label props
|
|
255
|
+
name = input('', /* @ts-ignore */
|
|
256
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
257
|
+
helper = input('', /* @ts-ignore */
|
|
258
|
+
...(ngDevMode ? [{ debugName: "helper" }] : /* istanbul ignore next */ []));
|
|
259
|
+
showHelper = input(true, /* @ts-ignore */
|
|
260
|
+
...(ngDevMode ? [{ debugName: "showHelper" }] : /* istanbul ignore next */ []));
|
|
261
|
+
remove = output();
|
|
262
|
+
onRemoveClick(event) {
|
|
263
|
+
event.stopPropagation();
|
|
264
|
+
this.remove.emit(event);
|
|
265
|
+
}
|
|
246
266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AvatarComponent, isStandalone: true, selector: "ol-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"relative inline-block shrink-0\">\r\n @if (src()) {\r\n <img\r\n [src]=\"src()\"\r\n [alt]=\"alt()\"\r\n class=\"object-cover\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-base]=\"shape() === 'rounded'\"\r\n [class.w-6]=\"size() === 'xs'\"\r\n [class.h-6]=\"size() === 'xs'\"\r\n [class.w-8]=\"size() === 'sm'\"\r\n [class.h-8]=\"size() === 'sm'\"\r\n [class.w-10]=\"size() === 'md'\"\r\n [class.h-10]=\"size() === 'md'\"\r\n [class.w-12]=\"size() === 'lg'\"\r\n [class.h-12]=\"size() === 'lg'\"\r\n [class.w-16]=\"size() === 'xl'\"\r\n [class.h-16]=\"size() === 'xl'\"\r\n [class.w-20]=\"size() === '2xl'\"\r\n [class.h-20]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-default]=\"bordered()\"\r\n />\r\n } @else {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-neutral-secondary text-body font-semibold border border-default\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-base]=\"shape() === 'rounded'\"\r\n [class.w-6]=\"size() === 'xs'\"\r\n [class.h-6]=\"size() === 'xs'\"\r\n [class.text-2xs]=\"size() === 'xs'\"\r\n [class.w-8]=\"size() === 'sm'\"\r\n [class.h-8]=\"size() === 'sm'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.w-10]=\"size() === 'md'\"\r\n [class.h-10]=\"size() === 'md'\"\r\n [class.text-sm]=\"size() === 'md'\"\r\n [class.w-12]=\"size() === 'lg'\"\r\n [class.h-12]=\"size() === 'lg'\"\r\n [class.text-base]=\"size() === 'lg'\"\r\n [class.w-16]=\"size() === 'xl'\"\r\n [class.h-16]=\"size() === 'xl'\"\r\n [class.text-xl]=\"size() === 'xl'\"\r\n [class.w-20]=\"size() === '2xl'\"\r\n [class.h-20]=\"size() === '2xl'\"\r\n [class.text-2xl]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-default]=\"bordered()\"\r\n >\r\n <ng-content />\r\n </div>\r\n }\r\n\r\n @if (status()) {\r\n <span\r\n class=\"absolute bottom-0 right-0 rounded-full ring-2 ring-neutral-primary\"\r\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.w-2.5]=\"size() === 'md'\"\r\n [class.h-2.5]=\"size() === 'md'\"\r\n [class.w-3]=\"size() === 'lg'\"\r\n [class.h-3]=\"size() === 'lg'\"\r\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.bg-green-500]=\"status() === 'online'\"\r\n [class.bg-gray-400]=\"status() === 'offline'\"\r\n [class.bg-red-500]=\"status() === 'busy'\"\r\n [class.bg-yellow-400]=\"status() === 'away'\"\r\n ></span>\r\n }\r\n</div>\r\n\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AvatarComponent, isStandalone: true, selector: "ol-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusPosition: { classPropertyName: "statusPosition", publicName: "statusPosition", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, showHelper: { classPropertyName: "showHelper", publicName: "showHelper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"inline-flex items-center\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\r\n <!-- Avatar Icon/Image Node -->\r\n <div class=\"relative inline-block shrink-0 leading-none select-none\">\r\n @if (src()) {\r\n <img\r\n [src]=\"src()\"\r\n [alt]=\"alt()\"\r\n class=\"object-cover\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n />\r\n } @else if (initials() || text()) {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 font-semibold uppercase\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.text-[10px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.text-xl]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.text-2xl]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n {{ initials() || text() }}\r\n </div>\r\n } @else {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-400 font-semibold\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n <ng-content>\r\n <!-- Default Figma User Placeholder Icon -->\r\n <svg\r\n class=\"w-full h-full p-1 fill-current opacity-80\"\r\n viewBox=\"0 0 20 20\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\r\n clip-rule=\"evenodd\"\r\n ></path>\r\n </svg>\r\n </ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Status Dot -->\r\n @if (status()) {\r\n <span\r\n class=\"absolute rounded-full ring-2 ring-white dark:ring-neutral-900 shrink-0\"\r\n [class.bottom-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.right-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.top-0]=\"statusPosition() === 'top-right'\"\r\n [class.w-1.5]=\"size() === 'xs'\"\r\n [class.h-1.5]=\"size() === 'xs'\"\r\n [class.w-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-2.5]=\"size() === 'sm'\"\r\n [class.h-2.5]=\"size() === 'sm'\"\r\n [class.w-3]=\"size() === 'lg'\"\r\n [class.h-3]=\"size() === 'lg'\"\r\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.bg-[#007A55]]=\"status() === 'online'\"\r\n [class.bg-[#C70036]]=\"status() === 'offline'\"\r\n [class.bg-[#D1D5DB]]=\"status() === 'alternative'\"\r\n [class.dark:bg-neutral-500]=\"status() === 'alternative'\"\r\n [class.bg-red-500]=\"status() === 'busy'\"\r\n [class.bg-amber-400]=\"status() === 'away'\"\r\n ></span>\r\n }\r\n\r\n <!-- Remove Button -->\r\n @if (removable()) {\r\n <button\r\n type=\"button\"\r\n (click)=\"onRemoveClick($event)\"\r\n class=\"absolute -top-1 -right-1 z-10 inline-flex items-center justify-center rounded-full bg-[#F3F4F6] hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-[#4A5565] dark:text-neutral-200 shadow-sm border border-white dark:border-neutral-900 cursor-pointer transition-transform active:scale-95\"\r\n [class.w-3]=\"size() === 'xs'\"\r\n [class.h-3]=\"size() === 'xs'\"\r\n [class.w-3.5]=\"size() === 'sm'\"\r\n [class.h-3.5]=\"size() === 'sm'\"\r\n [class.w-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n aria-label=\"Remove avatar\"\r\n >\r\n <svg\r\n class=\"shrink-0\"\r\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.w-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Label Details (Name & Helper Text) -->\r\n @if (name()) {\r\n <div class=\"flex flex-col min-w-0\">\r\n <span\r\n class=\"font-medium text-heading truncate\"\r\n [class.text-xs]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-base]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ name() }}\r\n </span>\r\n @if (helper() && showHelper()) {\r\n <span\r\n class=\"text-[#4A5565] dark:text-neutral-400 truncate\"\r\n [class.text-[10px]]=\"size() === 'xs'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'lg'\"\r\n [class.text-base]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ helper() }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
248
268
|
}
|
|
249
269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
250
270
|
type: Component,
|
|
251
|
-
args: [{ selector: 'ol-avatar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block shrink-0\">\r\n
|
|
252
|
-
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
|
|
271
|
+
args: [{ selector: 'ol-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-flex items-center\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\r\n <!-- Avatar Icon/Image Node -->\r\n <div class=\"relative inline-block shrink-0 leading-none select-none\">\r\n @if (src()) {\r\n <img\r\n [src]=\"src()\"\r\n [alt]=\"alt()\"\r\n class=\"object-cover\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n />\r\n } @else if (initials() || text()) {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 font-semibold uppercase\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.text-[10px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.text-xl]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.text-2xl]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n {{ initials() || text() }}\r\n </div>\r\n } @else {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-400 font-semibold\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-[18px]]=\"size() === 'xs'\"\r\n [class.h-[18px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-[44px]]=\"size() === 'lg'\"\r\n [class.h-[44px]]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n <ng-content>\r\n <!-- Default Figma User Placeholder Icon -->\r\n <svg\r\n class=\"w-full h-full p-1 fill-current opacity-80\"\r\n viewBox=\"0 0 20 20\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\r\n clip-rule=\"evenodd\"\r\n ></path>\r\n </svg>\r\n </ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Status Dot -->\r\n @if (status()) {\r\n <span\r\n class=\"absolute rounded-full ring-2 ring-white dark:ring-neutral-900 shrink-0\"\r\n [class.bottom-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.right-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.top-0]=\"statusPosition() === 'top-right'\"\r\n [class.w-1.5]=\"size() === 'xs'\"\r\n [class.h-1.5]=\"size() === 'xs'\"\r\n [class.w-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-2.5]=\"size() === 'sm'\"\r\n [class.h-2.5]=\"size() === 'sm'\"\r\n [class.w-3]=\"size() === 'lg'\"\r\n [class.h-3]=\"size() === 'lg'\"\r\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.bg-[#007A55]]=\"status() === 'online'\"\r\n [class.bg-[#C70036]]=\"status() === 'offline'\"\r\n [class.bg-[#D1D5DB]]=\"status() === 'alternative'\"\r\n [class.dark:bg-neutral-500]=\"status() === 'alternative'\"\r\n [class.bg-red-500]=\"status() === 'busy'\"\r\n [class.bg-amber-400]=\"status() === 'away'\"\r\n ></span>\r\n }\r\n\r\n <!-- Remove Button -->\r\n @if (removable()) {\r\n <button\r\n type=\"button\"\r\n (click)=\"onRemoveClick($event)\"\r\n class=\"absolute -top-1 -right-1 z-10 inline-flex items-center justify-center rounded-full bg-[#F3F4F6] hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-[#4A5565] dark:text-neutral-200 shadow-sm border border-white dark:border-neutral-900 cursor-pointer transition-transform active:scale-95\"\r\n [class.w-3]=\"size() === 'xs'\"\r\n [class.h-3]=\"size() === 'xs'\"\r\n [class.w-3.5]=\"size() === 'sm'\"\r\n [class.h-3.5]=\"size() === 'sm'\"\r\n [class.w-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n aria-label=\"Remove avatar\"\r\n >\r\n <svg\r\n class=\"shrink-0\"\r\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.w-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Label Details (Name & Helper Text) -->\r\n @if (name()) {\r\n <div class=\"flex flex-col min-w-0\">\r\n <span\r\n class=\"font-medium text-heading truncate\"\r\n [class.text-xs]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-base]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ name() }}\r\n </span>\r\n @if (helper() && showHelper()) {\r\n <span\r\n class=\"text-[#4A5565] dark:text-neutral-400 truncate\"\r\n [class.text-[10px]]=\"size() === 'xs'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'lg'\"\r\n [class.text-base]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ helper() }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n" }]
|
|
272
|
+
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusPosition", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], showHelper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelper", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
|
|
253
273
|
|
|
254
274
|
class AvatarGroupComponent {
|
|
275
|
+
size = input('base', /* @ts-ignore */
|
|
276
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
277
|
+
counter = input(null, /* @ts-ignore */
|
|
278
|
+
...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
|
|
279
|
+
counterAriaLabel = input('Thành viên khác', /* @ts-ignore */
|
|
280
|
+
...(ngDevMode ? [{ debugName: "counterAriaLabel" }] : /* istanbul ignore next */ []));
|
|
255
281
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
282
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AvatarGroupComponent, isStandalone: true, selector: "ol-avatar-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, counterAriaLabel: { classPropertyName: "counterAriaLabel", publicName: "counterAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"flex items-center rtl:space-x-reverse\"\n [class.-space-x-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.-space-x-3.5]=\"size() === 'base' || size() === 'md'\"\n [class.-space-x-4]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n>\n <ng-content />\n\n @if (counter()) {\n <div\n class=\"inline-flex items-center justify-center font-medium bg-[#E5E7EB] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 ring-2 ring-white dark:ring-neutral-900 rounded-full shrink-0 z-0 select-none\"\n [class.w-[18px]]=\"size() === 'xs'\"\n [class.h-[18px]]=\"size() === 'xs'\"\n [class.text-[10px]]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.text-[10px]]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.text-xs]=\"size() === 'base' || size() === 'md'\"\n [class.w-[44px]]=\"size() === 'lg'\"\n [class.h-[44px]]=\"size() === 'lg'\"\n [class.text-sm]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.text-base]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.text-lg]=\"size() === '2xl'\"\n [attr.aria-label]=\"counterAriaLabel()\"\n >\n {{ counter() }}\n </div>\n }\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
283
|
}
|
|
258
284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AvatarGroupComponent, decorators: [{
|
|
259
285
|
type: Component,
|
|
260
|
-
args: [{ selector: 'ol-avatar-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
261
|
-
}] });
|
|
286
|
+
args: [{ selector: 'ol-avatar-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex items-center rtl:space-x-reverse\"\n [class.-space-x-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.-space-x-3.5]=\"size() === 'base' || size() === 'md'\"\n [class.-space-x-4]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n>\n <ng-content />\n\n @if (counter()) {\n <div\n class=\"inline-flex items-center justify-center font-medium bg-[#E5E7EB] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 ring-2 ring-white dark:ring-neutral-900 rounded-full shrink-0 z-0 select-none\"\n [class.w-[18px]]=\"size() === 'xs'\"\n [class.h-[18px]]=\"size() === 'xs'\"\n [class.text-[10px]]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.text-[10px]]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.text-xs]=\"size() === 'base' || size() === 'md'\"\n [class.w-[44px]]=\"size() === 'lg'\"\n [class.h-[44px]]=\"size() === 'lg'\"\n [class.text-sm]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.text-base]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.text-lg]=\"size() === '2xl'\"\n [attr.aria-label]=\"counterAriaLabel()\"\n >\n {{ counter() }}\n </div>\n }\n</div>\n\n" }]
|
|
287
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], counterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterAriaLabel", required: false }] }] } });
|
|
262
288
|
|
|
263
289
|
class BadgeComponent {
|
|
264
290
|
color = input('default', /* @ts-ignore */
|
|
@@ -1977,9 +2003,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
1977
2003
|
args: [{ selector: 'ol-drawer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n @if (backdrop()) {\n <div (click)=\"close()\" class=\"bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30\"></div>\n }\n <div\n tabindex=\"-1\"\n class=\"fixed z-40 p-4 overflow-y-auto transition-transform bg-white w-80 dark:bg-gray-800\"\n [class.top-0]=\"placement() === 'left' || placement() === 'right' || placement() === 'top'\"\n [class.left-0]=\"placement() === 'left' || placement() === 'top' || placement() === 'bottom'\"\n [class.right-0]=\"placement() === 'right' || placement() === 'top' || placement() === 'bottom'\"\n [class.bottom-0]=\"placement() === 'bottom'\"\n [class.h-screen]=\"placement() === 'left' || placement() === 'right'\"\n >\n <button\n type=\"button\"\n (click)=\"close()\"\n class=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white\"\n >\n <svg class=\"w-3 h-3\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n </svg>\n <span class=\"sr-only\">Close menu</span>\n </button>\n <ng-content />\n </div>\n}\n" }]
|
|
1978
2004
|
}], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1979
2005
|
|
|
2006
|
+
let nextDropdownId = 0;
|
|
2007
|
+
/** Delay (ms) before closing a hover-triggered dropdown, to avoid flicker when
|
|
2008
|
+
* moving the pointer from the trigger button across the gap into the menu. */
|
|
2009
|
+
const HOVER_HIDE_DELAY_MS = 150;
|
|
1980
2010
|
class DropdownComponent {
|
|
1981
2011
|
elementRef = inject(ElementRef);
|
|
1982
|
-
|
|
2012
|
+
destroyRef = inject(DestroyRef);
|
|
2013
|
+
uid = nextDropdownId++;
|
|
2014
|
+
buttonId = `ol-dropdown-button-${this.uid}`;
|
|
2015
|
+
menuId = `ol-dropdown-menu-${this.uid}`;
|
|
2016
|
+
triggerButtonRef = viewChild('triggerButton', /* @ts-ignore */
|
|
2017
|
+
...(ngDevMode ? [{ debugName: "triggerButtonRef" }] : /* istanbul ignore next */ []));
|
|
2018
|
+
menuRef = viewChild('menu', /* @ts-ignore */
|
|
2019
|
+
...(ngDevMode ? [{ debugName: "menuRef" }] : /* istanbul ignore next */ []));
|
|
2020
|
+
hideTimeoutId = null;
|
|
2021
|
+
suppressOutsideClickTimeoutId = null;
|
|
2022
|
+
suppressOutsideClick = false;
|
|
2023
|
+
label = input(null, /* @ts-ignore */
|
|
1983
2024
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1984
2025
|
isOpen = model(false, /* @ts-ignore */
|
|
1985
2026
|
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -1987,8 +2028,31 @@ class DropdownComponent {
|
|
|
1987
2028
|
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
1988
2029
|
trigger = input('click', /* @ts-ignore */
|
|
1989
2030
|
...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
|
|
2031
|
+
triggerClass = input('', /* @ts-ignore */
|
|
2032
|
+
...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
|
|
1990
2033
|
opened = output();
|
|
1991
2034
|
closed = output();
|
|
2035
|
+
constructor() {
|
|
2036
|
+
effect(() => {
|
|
2037
|
+
if (this.isOpen()) {
|
|
2038
|
+
queueMicrotask(() => this.focusFirstMenuItem());
|
|
2039
|
+
}
|
|
2040
|
+
});
|
|
2041
|
+
this.destroyRef.onDestroy(() => {
|
|
2042
|
+
this.clearHideTimeout();
|
|
2043
|
+
if (this.suppressOutsideClickTimeoutId !== null) {
|
|
2044
|
+
clearTimeout(this.suppressOutsideClickTimeoutId);
|
|
2045
|
+
}
|
|
2046
|
+
});
|
|
2047
|
+
}
|
|
2048
|
+
triggerButtonClasses = computed(() => {
|
|
2049
|
+
const base = 'inline-flex items-center gap-2 ';
|
|
2050
|
+
const hover = 'hover:bg-neutral-secondary-medium';
|
|
2051
|
+
const shape = this.label() ? 'px-5 py-2.5 text-center' : 'p-2.5';
|
|
2052
|
+
const extra = this.triggerClass();
|
|
2053
|
+
return extra ? `${base} ${shape} ${extra}` : `${base} ${hover} ${shape}`;
|
|
2054
|
+
}, /* @ts-ignore */
|
|
2055
|
+
...(ngDevMode ? [{ debugName: "triggerButtonClasses" }] : /* istanbul ignore next */ []));
|
|
1992
2056
|
menuPlacementClasses = computed(() => {
|
|
1993
2057
|
switch (this.placement()) {
|
|
1994
2058
|
case 'top':
|
|
@@ -2010,6 +2074,8 @@ class DropdownComponent {
|
|
|
2010
2074
|
}, /* @ts-ignore */
|
|
2011
2075
|
...(ngDevMode ? [{ debugName: "menuPlacementClasses" }] : /* istanbul ignore next */ []));
|
|
2012
2076
|
onDocumentClick(event) {
|
|
2077
|
+
if (this.suppressOutsideClick)
|
|
2078
|
+
return;
|
|
2013
2079
|
if (!this.isOpen())
|
|
2014
2080
|
return;
|
|
2015
2081
|
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
@@ -2019,16 +2085,22 @@ class DropdownComponent {
|
|
|
2019
2085
|
onEscape() {
|
|
2020
2086
|
if (this.isOpen()) {
|
|
2021
2087
|
this.hide();
|
|
2088
|
+
this.triggerButtonRef()?.nativeElement.focus();
|
|
2022
2089
|
}
|
|
2023
2090
|
}
|
|
2024
2091
|
onMouseEnter() {
|
|
2025
2092
|
if (this.trigger() === 'hover') {
|
|
2093
|
+
this.clearHideTimeout();
|
|
2026
2094
|
this.show();
|
|
2027
2095
|
}
|
|
2028
2096
|
}
|
|
2029
2097
|
onMouseLeave() {
|
|
2030
2098
|
if (this.trigger() === 'hover') {
|
|
2031
|
-
this.
|
|
2099
|
+
this.clearHideTimeout();
|
|
2100
|
+
this.hideTimeoutId = setTimeout(() => {
|
|
2101
|
+
this.hideTimeoutId = null;
|
|
2102
|
+
this.hide();
|
|
2103
|
+
}, HOVER_HIDE_DELAY_MS);
|
|
2032
2104
|
}
|
|
2033
2105
|
}
|
|
2034
2106
|
show() {
|
|
@@ -2054,15 +2126,25 @@ class DropdownComponent {
|
|
|
2054
2126
|
isVisible() {
|
|
2055
2127
|
return this.isOpen();
|
|
2056
2128
|
}
|
|
2129
|
+
focusFirstMenuItem() {
|
|
2130
|
+
const firstItem = this.menuRef()?.nativeElement.querySelector('[role="menuitem"]');
|
|
2131
|
+
firstItem?.focus();
|
|
2132
|
+
}
|
|
2133
|
+
clearHideTimeout() {
|
|
2134
|
+
if (this.hideTimeoutId !== null) {
|
|
2135
|
+
clearTimeout(this.hideTimeoutId);
|
|
2136
|
+
this.hideTimeoutId = null;
|
|
2137
|
+
}
|
|
2138
|
+
}
|
|
2057
2139
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2058
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownComponent, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block text-left" }, ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n
|
|
2140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownComponent, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block text-left" }, viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <button\r\n #triggerButton\r\n type=\"button\"\r\n [id]=\"buttonId\"\r\n (click)=\"toggle()\"\r\n aria-haspopup=\"true\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-label]=\"label() ?? 'Toggle menu'\"\r\n [class]=\"triggerButtonClasses()\"\r\n >\r\n <ng-content select=\"[triggerIcon]\" />\r\n @if (label()) {\r\n <span>{{ label() }}</span>\r\n <svg\r\n class=\"w-3 h-3 shrink-0 transition-transform duration-200\"\r\n [class.rotate-180]=\"isOpen()\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 10 6\"\r\n >\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (isOpen()) {\r\n <div\r\n class=\"z-50 absolute min-w-[12rem] bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800 rounded-xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in zoom-in-95 duration-150\"\r\n [class]=\"menuPlacementClasses()\"\r\n >\r\n <ul\r\n #menu\r\n [id]=\"menuId\"\r\n role=\"menu\"\r\n [attr.aria-labelledby]=\"buttonId\"\r\n class=\"py-2 text-sm text-slate-700 dark:text-slate-200\"\r\n >\r\n <ng-content />\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2059
2141
|
}
|
|
2060
2142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
2061
2143
|
type: Component,
|
|
2062
2144
|
args: [{ selector: 'ol-dropdown', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2063
2145
|
class: 'relative inline-block text-left',
|
|
2064
|
-
}, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <button\n type=\"button\"\n (click)=\"toggle()\"\n
|
|
2065
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
|
|
2146
|
+
}, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <button\r\n #triggerButton\r\n type=\"button\"\r\n [id]=\"buttonId\"\r\n (click)=\"toggle()\"\r\n aria-haspopup=\"true\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-label]=\"label() ?? 'Toggle menu'\"\r\n [class]=\"triggerButtonClasses()\"\r\n >\r\n <ng-content select=\"[triggerIcon]\" />\r\n @if (label()) {\r\n <span>{{ label() }}</span>\r\n <svg\r\n class=\"w-3 h-3 shrink-0 transition-transform duration-200\"\r\n [class.rotate-180]=\"isOpen()\"\r\n aria-hidden=\"true\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 10 6\"\r\n >\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 4 4 4-4\"/>\r\n </svg>\r\n }\r\n </button>\r\n\r\n @if (isOpen()) {\r\n <div\r\n class=\"z-50 absolute min-w-[12rem] bg-white dark:bg-slate-900 divide-y divide-slate-100 dark:divide-slate-800 rounded-xl shadow-xl border border-slate-200/80 dark:border-slate-800 animate-in fade-in zoom-in-95 duration-150\"\r\n [class]=\"menuPlacementClasses()\"\r\n >\r\n <ul\r\n #menu\r\n [id]=\"menuId\"\r\n role=\"menu\"\r\n [attr.aria-labelledby]=\"buttonId\"\r\n class=\"py-2 text-sm text-slate-700 dark:text-slate-200\"\r\n >\r\n <ng-content />\r\n </ul>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
2147
|
+
}], ctorParameters: () => [], propDecorators: { triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], menuRef: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
|
|
2066
2148
|
type: HostListener,
|
|
2067
2149
|
args: ['document:click', ['$event']]
|
|
2068
2150
|
}], onEscape: [{
|
|
@@ -2078,11 +2160,11 @@ class DropdownItemComponent {
|
|
|
2078
2160
|
this.itemClick.emit(event);
|
|
2079
2161
|
}
|
|
2080
2162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2081
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownItemComponent, isStandalone: true, selector: "ol-dropdown-item", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<li>\n @if (href()) {\n <a
|
|
2163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DropdownItemComponent, isStandalone: true, selector: "ol-dropdown-item", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ng-template #itemContent>\r\n <ng-content />\r\n</ng-template>\r\n\r\n<li role=\"none\">\r\n @if (href()) {\r\n <a\r\n [href]=\"href()\"\r\n role=\"menuitem\"\r\n class=\"block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors font-medium\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"itemContent\" />\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n role=\"menuitem\"\r\n (click)=\"handleClick($event)\"\r\n class=\"block w-full text-left px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 cursor-pointer font-medium\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"itemContent\" />\r\n </button>\r\n }\r\n</li>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2082
2164
|
}
|
|
2083
2165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
2084
2166
|
type: Component,
|
|
2085
|
-
args: [{ selector: 'ol-dropdown-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li>\n @if (href()) {\n <a
|
|
2167
|
+
args: [{ selector: 'ol-dropdown-item', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent>\r\n <ng-content />\r\n</ng-template>\r\n\r\n<li role=\"none\">\r\n @if (href()) {\r\n <a\r\n [href]=\"href()\"\r\n role=\"menuitem\"\r\n class=\"block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors font-medium\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"itemContent\" />\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n role=\"menuitem\"\r\n (click)=\"handleClick($event)\"\r\n class=\"block w-full text-left px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 cursor-pointer font-medium\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"itemContent\" />\r\n </button>\r\n }\r\n</li>\r\n" }]
|
|
2086
2168
|
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
2087
2169
|
|
|
2088
2170
|
class FooterComponent {
|
|
@@ -2217,6 +2299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
2217
2299
|
args: [{ selector: 'ol-select', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n @if (label()) {\n <div class=\"flex items-center justify-between mb-1.5\">\n <label [for]=\"id()\" class=\"inline-flex items-center gap-1 text-sm font-medium text-slate-800 dark:text-gray-200\">\n <span>{{ label() }}</span>\n @if (required() || showAsterisk()) {\n <span class=\"text-danger font-bold\">*</span>\n }\n </label>\n </div>\n }\n\n <div class=\"relative flex items-center w-full\">\n @if (leftIcon()) {\n <div class=\"absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none text-body-subtle dark:text-gray-400\">\n <ng-content select=\"[leftIcon]\" />\n </div>\n }\n\n <select\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"value\"\n class=\"block w-full border border-default shadow-xs outline-none appearance-none cursor-pointer pe-10 font-normal\"\n [class.rounded-lg]=\"true\"\n [class.ps-10]=\"leftIcon()\"\n [class.ps-3.5]=\"!leftIcon()\"\n [class.h-9]=\"size() === 'sm'\"\n [class.text-sm]=\"size() === 'sm' || size() === 'md'\"\n [class.h-10]=\"size() === 'md'\"\n [class.h-12]=\"size() === 'lg'\"\n [class.text-base]=\"size() === 'lg'\"\n [class.bg-neutral-secondary]=\"state() === 'default' && !disabled()\"\n [class.text-body]=\"state() === 'default' && !disabled()\"\n [class.focus:border-brand-700]=\"state() === 'default' && !disabled()\"\n [class.focus:ring-2]=\"!disabled()\"\n [class.focus:ring-brand-100]=\"state() === 'default' && !disabled()\"\n [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n [class.border-danger]=\"state() === 'error' && !disabled()\"\n [class.text-danger-strong]=\"state() === 'error' && !disabled()\"\n [class.focus:border-danger-strong]=\"state() === 'error' && !disabled()\"\n [class.focus:ring-red-100]=\"state() === 'error' && !disabled()\"\n [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n [class.border-success]=\"state() === 'success' && !disabled()\"\n [class.text-success-strong]=\"state() === 'success' && !disabled()\"\n [class.focus:border-success-strong]=\"state() === 'success' && !disabled()\"\n [class.focus:ring-green-100]=\"state() === 'success' && !disabled()\"\n [class.bg-disabled]=\"disabled()\"\n [class.text-fg-disabled]=\"disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n >\n @if (options().length > 0) {\n @for (opt of options(); track opt.value) {\n <option [value]=\"opt.value\" [disabled]=\"opt.disabled\">{{ opt.label }}</option>\n }\n } @else {\n <ng-content />\n }\n </select>\n\n <!-- Chevron Down Icon -->\n <div class=\"absolute inset-y-0 end-0 flex items-center pe-3.5 pointer-events-none text-body-subtle dark:text-gray-400\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"/>\n </svg>\n </div>\n </div>\n\n @if (helperText()) {\n <p\n class=\"mt-1.5 text-xs\"\n [class.text-body]=\"state() === 'default'\"\n [class.dark:text-gray-400]=\"state() === 'default'\"\n [class.text-danger-strong]=\"state() === 'error'\"\n [class.dark:text-red-400]=\"state() === 'error'\"\n [class.text-success-strong]=\"state() === 'success'\"\n [class.dark:text-green-400]=\"state() === 'success'\"\n >\n {{ helperText() }}\n </p>\n }\n</div>\n\n" }]
|
|
2218
2300
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
2219
2301
|
|
|
2302
|
+
let uniqueCheckboxId = 0;
|
|
2220
2303
|
class CheckboxComponent {
|
|
2221
2304
|
checked = model(false, /* @ts-ignore */
|
|
2222
2305
|
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
@@ -2228,14 +2311,19 @@ class CheckboxComponent {
|
|
|
2228
2311
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2229
2312
|
id = input('', /* @ts-ignore */
|
|
2230
2313
|
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2314
|
+
/** Falls back to an auto-generated id so the label stays associated with the input even when consumers don't pass one. */
|
|
2315
|
+
generatedId = `ol-checkbox-${uniqueCheckboxId++}`;
|
|
2316
|
+
inputId = computed(() => this.id() || this.generatedId, /* @ts-ignore */
|
|
2317
|
+
...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
2231
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CheckboxComponent, isStandalone: true, selector: "ol-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div class=\"flex items-start\">\n <div class=\"flex items-center h-5\">\n <input\n [id]=\"
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CheckboxComponent, isStandalone: true, selector: "ol-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div class=\"flex items-start\">\r\n <div class=\"flex items-center h-5\">\r\n <input\r\n [id]=\"inputId()\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"checked\"\r\n [disabled]=\"disabled()\"\r\n class=\"w-4 h-4 text-brand-600 bg-neutral-primary border-gray-300 rounded focus:outline-none focus-visible:ring-brand-500 dark:focus-visible:ring-brand-600 dark:ring-offset-gray-800 focus-visible:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\"\r\n />\r\n </div>\r\n @if (label() || description()) {\r\n <div class=\"ms-2.5 text-sm\">\r\n @if (label()) {\r\n <label [for]=\"inputId()\" class=\"font-medium text-[#101828] dark:text-gray-200 cursor-pointer select-none\">\r\n {{ label() }}\r\n </label>\r\n }\r\n @if (description()) {\r\n <p class=\"text-xs text-[#4A5565] dark:text-gray-400 mt-0.5\">\r\n {{ description() }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2233
2320
|
}
|
|
2234
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2235
2322
|
type: Component,
|
|
2236
|
-
args: [{ selector: 'ol-checkbox', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-start\">\n <div class=\"flex items-center h-5\">\n <input\n [id]=\"
|
|
2323
|
+
args: [{ selector: 'ol-checkbox', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-start\">\r\n <div class=\"flex items-center h-5\">\r\n <input\r\n [id]=\"inputId()\"\r\n type=\"checkbox\"\r\n [(ngModel)]=\"checked\"\r\n [disabled]=\"disabled()\"\r\n class=\"w-4 h-4 text-brand-600 bg-neutral-primary border-gray-300 rounded focus:outline-none focus-visible:ring-brand-500 dark:focus-visible:ring-brand-600 dark:ring-offset-gray-800 focus-visible:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\"\r\n />\r\n </div>\r\n @if (label() || description()) {\r\n <div class=\"ms-2.5 text-sm\">\r\n @if (label()) {\r\n <label [for]=\"inputId()\" class=\"font-medium text-[#101828] dark:text-gray-200 cursor-pointer select-none\">\r\n {{ label() }}\r\n </label>\r\n }\r\n @if (description()) {\r\n <p class=\"text-xs text-[#4A5565] dark:text-gray-400 mt-0.5\">\r\n {{ description() }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n" }]
|
|
2237
2324
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
2238
2325
|
|
|
2326
|
+
let uniqueRadioId = 0;
|
|
2239
2327
|
class RadioComponent {
|
|
2240
2328
|
name = input('', /* @ts-ignore */
|
|
2241
2329
|
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
@@ -2253,6 +2341,10 @@ class RadioComponent {
|
|
|
2253
2341
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2254
2342
|
id = input('', /* @ts-ignore */
|
|
2255
2343
|
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2344
|
+
/** Falls back to an auto-generated id so the label stays associated with the input even when consumers don't pass one. */
|
|
2345
|
+
generatedId = `ol-radio-${uniqueRadioId++}`;
|
|
2346
|
+
inputId = computed(() => this.id() || this.generatedId, /* @ts-ignore */
|
|
2347
|
+
...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
2256
2348
|
get currentValue() {
|
|
2257
2349
|
return this.selectedValue() !== null ? this.selectedValue() : this.modelValue();
|
|
2258
2350
|
}
|
|
@@ -2261,11 +2353,11 @@ class RadioComponent {
|
|
|
2261
2353
|
this.modelValue.set(val);
|
|
2262
2354
|
}
|
|
2263
2355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2264
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RadioComponent, isStandalone: true, selector: "ol-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", modelValue: "modelValueChange" }, ngImport: i0, template: "<div class=\"flex items-start\">\n <div class=\"flex items-center h-5\">\n <input\n [id]=\"
|
|
2356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RadioComponent, isStandalone: true, selector: "ol-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", modelValue: "modelValueChange" }, ngImport: i0, template: "<div class=\"flex items-start\">\r\n <div class=\"flex items-center h-5\">\r\n <input\r\n [id]=\"inputId()\"\r\n type=\"radio\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [ngModel]=\"currentValue\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n [disabled]=\"disabled()\"\r\n class=\"w-4 h-4 text-brand-600 bg-neutral-primary border-gray-300 focus:outline-none focus-visible:ring-brand-500 dark:focus-visible:ring-brand-600 dark:ring-offset-gray-800 focus-visible:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\"\r\n />\r\n </div>\r\n @if (label() || description()) {\r\n <div class=\"ms-2.5 text-sm\">\r\n @if (label()) {\r\n <label [for]=\"inputId()\" class=\"font-medium text-[#101828] dark:text-gray-200 cursor-pointer select-none\">\r\n {{ label() }}\r\n </label>\r\n }\r\n @if (description()) {\r\n <p class=\"text-xs text-[#4A5565] dark:text-gray-400 mt-0.5\">\r\n {{ description() }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2265
2357
|
}
|
|
2266
2358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2267
2359
|
type: Component,
|
|
2268
|
-
args: [{ selector: 'ol-radio', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-start\">\n <div class=\"flex items-center h-5\">\n <input\n [id]=\"
|
|
2360
|
+
args: [{ selector: 'ol-radio', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-start\">\r\n <div class=\"flex items-center h-5\">\r\n <input\r\n [id]=\"inputId()\"\r\n type=\"radio\"\r\n [name]=\"name()\"\r\n [value]=\"value()\"\r\n [ngModel]=\"currentValue\"\r\n (ngModelChange)=\"onModelChange($event)\"\r\n [disabled]=\"disabled()\"\r\n class=\"w-4 h-4 text-brand-600 bg-neutral-primary border-gray-300 focus:outline-none focus-visible:ring-brand-500 dark:focus-visible:ring-brand-600 dark:ring-offset-gray-800 focus-visible:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\"\r\n />\r\n </div>\r\n @if (label() || description()) {\r\n <div class=\"ms-2.5 text-sm\">\r\n @if (label()) {\r\n <label [for]=\"inputId()\" class=\"font-medium text-[#101828] dark:text-gray-200 cursor-pointer select-none\">\r\n {{ label() }}\r\n </label>\r\n }\r\n @if (description()) {\r\n <p class=\"text-xs text-[#4A5565] dark:text-gray-400 mt-0.5\">\r\n {{ description() }}\r\n </p>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n" }]
|
|
2269
2361
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
2270
2362
|
|
|
2271
2363
|
class ToggleComponent {
|