@haloduck/ui 2.0.11 → 2.0.13
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/haloduck-ui.mjs +39 -3
- package/fesm2022/haloduck-ui.mjs.map +1 -1
- package/index.d.ts +10 -1
- package/package.json +1 -1
- package/src/tailwind.css +130 -43
package/fesm2022/haloduck-ui.mjs
CHANGED
|
@@ -2985,7 +2985,7 @@ class TagInputComponent {
|
|
|
2985
2985
|
multi: true,
|
|
2986
2986
|
},
|
|
2987
2987
|
provideTranslocoScope('haloduck'),
|
|
2988
|
-
], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive
|
|
2988
|
+
], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <ng-container *ngFor=\"let tag of tags; let i = index\">\n <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n {{ tag }}\n @if (!disabled) {\n <button type=\"button\" (click)=\"removeTag(i)\" class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\">\n \u00D7\n </button>\n }\n </span>\n </ng-container>\n\n <input #inputEl\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
2989
2989
|
}
|
|
2990
2990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagInputComponent, decorators: [{
|
|
2991
2991
|
type: Component,
|
|
@@ -2996,7 +2996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
2996
2996
|
multi: true,
|
|
2997
2997
|
},
|
|
2998
2998
|
provideTranslocoScope('haloduck'),
|
|
2999
|
-
], template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive
|
|
2999
|
+
], template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"tag-input-wrapper block w-full rounded-md bg-light-control dark:bg-dark-control disabled:bg-light-control/60 dark:disabled:bg-dark-control/80 px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control disabled:cursor-not-allowed disabled:text-light-on-control/60 dark:disabled:text-dark-on-control/80 outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive placeholder:text-light-inactive dark:placeholder:text-dark-inactive sm:text-sm/6\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <ng-container *ngFor=\"let tag of tags; let i = index\">\n <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n {{ tag }}\n @if (!disabled) {\n <button type=\"button\" (click)=\"removeTag(i)\" class=\"text-light-on-secondary/80 hover:text-light-on-secondary dark:text-dark-on-secondary/80 dark:hover:text-dark-on-secondary hover:cursor-pointer\">\n \u00D7\n </button>\n }\n </span>\n </ng-container>\n\n <input #inputEl\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n class=\"flex-1 min-w-[8rem] bg-transparent outline-none placeholder:text-light-inactive dark:placeholder:text-dark-inactive\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tag-input-wrapper:focus-within{outline-width:2px;outline-offset:2px;outline-color:var(--color-light-primary)!important}@media (prefers-color-scheme: dark){.tag-input-wrapper:focus-within{outline-color:var(--color-dark-primary)!important}}\n"] }]
|
|
3000
3000
|
}], propDecorators: { label: [{
|
|
3001
3001
|
type: ViewChild,
|
|
3002
3002
|
args: ['label']
|
|
@@ -3015,6 +3015,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3015
3015
|
type: Output
|
|
3016
3016
|
}] } });
|
|
3017
3017
|
|
|
3018
|
+
class TagViewerComponent {
|
|
3019
|
+
label;
|
|
3020
|
+
tags = [];
|
|
3021
|
+
// Accept input as `value` for consistency with tag-input
|
|
3022
|
+
set value(tags) {
|
|
3023
|
+
if (Array.isArray(tags)) {
|
|
3024
|
+
this.tags = tags
|
|
3025
|
+
.map((t) => (t ?? '').trim())
|
|
3026
|
+
.filter((t) => t.length > 0);
|
|
3027
|
+
}
|
|
3028
|
+
else {
|
|
3029
|
+
this.tags = [];
|
|
3030
|
+
}
|
|
3031
|
+
}
|
|
3032
|
+
ngAfterViewInit() {
|
|
3033
|
+
// hide label if no projected content
|
|
3034
|
+
if (this.label && this.label.nativeElement) {
|
|
3035
|
+
const hasContent = this.label.nativeElement.textContent?.trim();
|
|
3036
|
+
if (!hasContent) {
|
|
3037
|
+
this.label.nativeElement.style.display = 'none';
|
|
3038
|
+
}
|
|
3039
|
+
}
|
|
3040
|
+
}
|
|
3041
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: TagViewerComponent, isStandalone: true, selector: "haloduck-tag-viewer", inputs: { value: "value" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <ng-container *ngFor=\"let tag of tags\">\n <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n {{ tag }}\n </span>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
3043
|
+
}
|
|
3044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TagViewerComponent, decorators: [{
|
|
3045
|
+
type: Component,
|
|
3046
|
+
args: [{ selector: 'haloduck-tag-viewer', imports: [CommonModule], providers: [provideTranslocoScope('haloduck')], template: "<div class=\"flex flex-col gap-2\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control text-left\">\n <ng-content></ng-content>\n </label>\n\n <div class=\"block w-full rounded-md px-2 py-1.5 text-base text-light-on-control dark:text-dark-on-control sm:text-sm/6\">\n <div class=\"flex flex-wrap items-center gap-2\">\n <ng-container *ngFor=\"let tag of tags\">\n <span class=\"inline-flex items-center gap-1 rounded-md bg-light-secondary dark:bg-dark-secondary text-light-on-secondary dark:text-dark-on-secondary px-2 py-0.5 text-xs\">\n {{ tag }}\n </span>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
3047
|
+
}], propDecorators: { label: [{
|
|
3048
|
+
type: ViewChild,
|
|
3049
|
+
args: ['label']
|
|
3050
|
+
}], value: [{
|
|
3051
|
+
type: Input
|
|
3052
|
+
}] } });
|
|
3053
|
+
|
|
3018
3054
|
class BreadcrumbService {
|
|
3019
3055
|
router;
|
|
3020
3056
|
coreService = inject(CoreService);
|
|
@@ -3127,5 +3163,5 @@ const provideHaloduckTransloco = () => provideTranslocoScope({
|
|
|
3127
3163
|
* Generated bundle index. Do not edit.
|
|
3128
3164
|
*/
|
|
3129
3165
|
|
|
3130
|
-
export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, TagInputComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
|
|
3166
|
+
export { AuthenticateComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TabsComponent, TagInputComponent, TagViewerComponent, ToggleComponent, dateToString, provideHaloduckTransloco };
|
|
3131
3167
|
//# sourceMappingURL=haloduck-ui.mjs.map
|