@yoozsoft/yoozsoft-ng 5.3.1 → 5.3.3
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/yoozsoft-yoozsoft-ng-dropdown.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs +2 -2
- package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map +1 -1
- package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs +15 -24
- package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs.map +1 -1
- package/package.json +12 -12
- package/sidebar/index.d.ts +1 -0
- package/tiff-viewer/index.d.ts +4 -3
|
@@ -172,7 +172,7 @@ class YsDropdownComponent {
|
|
|
172
172
|
useExisting: forwardRef(() => YsDropdownComponent),
|
|
173
173
|
multi: true,
|
|
174
174
|
},
|
|
175
|
-
], ngImport: i0, template: "<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
|
|
175
|
+
], ngImport: i0, template: "<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" [disabled]=\"disabled\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\" [disabled]=\"disabled\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
|
|
176
176
|
}
|
|
177
177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDropdownComponent, decorators: [{
|
|
178
178
|
type: Component,
|
|
@@ -182,7 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
182
182
|
useExisting: forwardRef(() => YsDropdownComponent),
|
|
183
183
|
multi: true,
|
|
184
184
|
},
|
|
185
|
-
], template: "<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"] }]
|
|
185
|
+
], template: "<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" [disabled]=\"disabled\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\" [disabled]=\"disabled\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"] }]
|
|
186
186
|
}], propDecorators: { options: [{
|
|
187
187
|
type: Input
|
|
188
188
|
}], optionLabel: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-dropdown.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/dropdown/src/ys-dropdown/ys-dropdown.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/src/ys-dropdown/ys-dropdown.component.html","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/yoozsoft-yoozsoft-ng-dropdown.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ElementRef, EventEmitter, forwardRef, HostListener, inject, Input, Output, TemplateRef } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-dropdown',\r\n imports: [NgTemplateOutlet, FormsModule],\r\n templateUrl: './ys-dropdown.component.html',\r\n styleUrl: './ys-dropdown.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsDropdownComponent),\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class YsDropdownComponent implements ControlValueAccessor {\r\n\r\n /** لیست گزینهها */\r\n @Input() options: any[] = [];\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder: string = '';\r\n @Input() searchPlaceholder: string = '';\r\n @Input() selectedMaxLength: number = 3;\r\n @Input() selectedMaxLengthTemplate: string = '{length} items selected';\r\n @Input() selectionSeparator: string = \", \";\r\n\r\n /** انتخاب چندگانه یا تکی */\r\n @Input() multiple: boolean = false;\r\n\r\n @Input() showClear: boolean = false;\r\n\r\n /** تمپلیت سفارشی برای آیتمها */\r\n @Input() itemTemplate?: TemplateRef<any>;\r\n\r\n /** مقدار انتخابشده */\r\n @Input() selected: any[] | any = this.multiple ? [] : null;\r\n\r\n /** قابلیت جستجو */\r\n @Input() searchable: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n\r\n /** رویداد خروجی هنگام تغییر انتخاب */\r\n @Output() selectionChange = new EventEmitter<any>();\r\n\r\n searchTerm = '';\r\n isOpen = false;\r\n highlightedIndex: number = -1;\r\n\r\n private elRef = inject(ElementRef)\r\n\r\n private _onChange: (value: any) => void = () => { };\r\n private _onTouched: () => void = () => { };\r\n\r\n writeValue(obj: any): void {\r\n if (this.multiple) {\r\n this.selected = obj ? [...obj] : [];\r\n } else {\r\n this.selected = obj;\r\n }\r\n }\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n }\r\n\r\n get displayLabel(): string {\r\n if (this.multiple) {\r\n const count = Array.isArray(this.selected) ? this.selected.length : 0;\r\n return count ? `${count} مورد انتخاب شده` : 'انتخاب کنید';\r\n }\r\n\r\n // تکهی ایمن: از options (که همیشه آرایه است ولی بازهم چک میکنیم)\r\n const label = this.options?.find(o => o.value === this.selected)?.label;\r\n return label ?? 'انتخاب کنید';\r\n }\r\n\r\n get selectedLabels(): string {\r\n if (this.multiple && Array.isArray(this.selected)) {\r\n if (this.selected.length > this.selectedMaxLength) {\r\n return this.selectedMaxLengthTemplate.replace('{length}', this.selected.length + '')\r\n }\r\n return this.selected.map(x => x[this.optionLabel]).join(this.selectionSeparator);\r\n } else {\r\n return this.selected ? this.selected[this.optionLabel] : '';\r\n }\r\n }\r\n\r\n toggleDropdown() {\r\n this.isOpen = !this.isOpen;\r\n if (this.isOpen) {\r\n this.highlightedIndex = -1;\r\n }\r\n }\r\n\r\n filterOptions(): any[] {\r\n let list = this.options;\r\n if (this.searchable && this.searchTerm.trim()) {\r\n const term = this.searchTerm.toLowerCase();\r\n list = this.options.filter(opt =>\r\n opt[this.optionLabel].toLowerCase().includes(term)\r\n );\r\n }\r\n // هر بار جستجو انجام شد index ریست بشه\r\n this.highlightedIndex = Math.min(this.highlightedIndex, list.length - 1);\r\n return list;\r\n }\r\n\r\n selectOption(option: any) {\r\n if (option.disabled) return;\r\n\r\n if (this.multiple) {\r\n const exists = this.selected?.some((x: any) => x === option);\r\n this.selected = exists\r\n ? this.selected.filter((x: any) => x !== option)\r\n : [...(this.selected || []), option];\r\n } else {\r\n this.selected = option;\r\n this.isOpen = false;\r\n }\r\n\r\n this._onChange(this.selected);\r\n this._onTouched();\r\n this.selectionChange.emit(this.selected);\r\n }\r\n\r\n isSelected(option: any): boolean {\r\n return this.multiple\r\n ? this.selected?.includes(option)\r\n : this.selected === option;\r\n }\r\n\r\n clearSelection() {\r\n this.selected = this.multiple ? [] : null;\r\n this._onChange(this.selected);\r\n this._onTouched();\r\n this.selectionChange.emit(this.selected);\r\n }\r\n\r\n onKeyDown(event: KeyboardEvent) {\r\n const filtered = this.filterOptions();\r\n if (!filtered.length) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n this.highlightedIndex = (this.highlightedIndex + 1) % filtered.length;\r\n this.scrollToHighlighted();\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : filtered.length - 1;\r\n this.scrollToHighlighted();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n if (this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {\r\n this.selectOption(filtered[this.highlightedIndex]);\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n scrollToHighlighted() {\r\n // تأخیر جزئی برای اطمینان از رندر کامل\r\n setTimeout(() => {\r\n const dropdown = this.elRef.nativeElement.querySelector('.dropdown-menu');\r\n const items = dropdown?.querySelectorAll('.dropdown-item');\r\n const activeItem = items?.[this.highlightedIndex] as HTMLElement;\r\n if (activeItem && dropdown) {\r\n const itemTop = activeItem.offsetTop;\r\n const itemBottom = itemTop + activeItem.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n if (itemBottom > dropdownScrollTop + dropdownHeight) {\r\n dropdown.scrollTop = itemBottom - dropdownHeight;\r\n } else if (itemTop < dropdownScrollTop) {\r\n dropdown.scrollTop = itemTop;\r\n }\r\n }\r\n });\r\n }\r\n\r\n\r\n /** Close by clicking outside */\r\n @HostListener('document:click', ['$event'])\r\n onClickOutside(event: MouseEvent) {\r\n const clickedInside = this.elRef.nativeElement.contains(event.target);\r\n if (!clickedInside) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n}\r\n","<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>","/*\r\n * Public API Surface of ys-dropdown\r\n */\r\n\r\nexport * from './src/ys-dropdown/ys-dropdown.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-dropdown.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/dropdown/src/ys-dropdown/ys-dropdown.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/src/ys-dropdown/ys-dropdown.component.html","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/dropdown/yoozsoft-yoozsoft-ng-dropdown.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ElementRef, EventEmitter, forwardRef, HostListener, inject, Input, Output, TemplateRef } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-dropdown',\r\n imports: [NgTemplateOutlet, FormsModule],\r\n templateUrl: './ys-dropdown.component.html',\r\n styleUrl: './ys-dropdown.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsDropdownComponent),\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class YsDropdownComponent implements ControlValueAccessor {\r\n\r\n /** لیست گزینهها */\r\n @Input() options: any[] = [];\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder: string = '';\r\n @Input() searchPlaceholder: string = '';\r\n @Input() selectedMaxLength: number = 3;\r\n @Input() selectedMaxLengthTemplate: string = '{length} items selected';\r\n @Input() selectionSeparator: string = \", \";\r\n\r\n /** انتخاب چندگانه یا تکی */\r\n @Input() multiple: boolean = false;\r\n\r\n @Input() showClear: boolean = false;\r\n\r\n /** تمپلیت سفارشی برای آیتمها */\r\n @Input() itemTemplate?: TemplateRef<any>;\r\n\r\n /** مقدار انتخابشده */\r\n @Input() selected: any[] | any = this.multiple ? [] : null;\r\n\r\n /** قابلیت جستجو */\r\n @Input() searchable: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n\r\n /** رویداد خروجی هنگام تغییر انتخاب */\r\n @Output() selectionChange = new EventEmitter<any>();\r\n\r\n searchTerm = '';\r\n isOpen = false;\r\n highlightedIndex: number = -1;\r\n\r\n private elRef = inject(ElementRef)\r\n\r\n private _onChange: (value: any) => void = () => { };\r\n private _onTouched: () => void = () => { };\r\n\r\n writeValue(obj: any): void {\r\n if (this.multiple) {\r\n this.selected = obj ? [...obj] : [];\r\n } else {\r\n this.selected = obj;\r\n }\r\n }\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n }\r\n\r\n get displayLabel(): string {\r\n if (this.multiple) {\r\n const count = Array.isArray(this.selected) ? this.selected.length : 0;\r\n return count ? `${count} مورد انتخاب شده` : 'انتخاب کنید';\r\n }\r\n\r\n // تکهی ایمن: از options (که همیشه آرایه است ولی بازهم چک میکنیم)\r\n const label = this.options?.find(o => o.value === this.selected)?.label;\r\n return label ?? 'انتخاب کنید';\r\n }\r\n\r\n get selectedLabels(): string {\r\n if (this.multiple && Array.isArray(this.selected)) {\r\n if (this.selected.length > this.selectedMaxLength) {\r\n return this.selectedMaxLengthTemplate.replace('{length}', this.selected.length + '')\r\n }\r\n return this.selected.map(x => x[this.optionLabel]).join(this.selectionSeparator);\r\n } else {\r\n return this.selected ? this.selected[this.optionLabel] : '';\r\n }\r\n }\r\n\r\n toggleDropdown() {\r\n this.isOpen = !this.isOpen;\r\n if (this.isOpen) {\r\n this.highlightedIndex = -1;\r\n }\r\n }\r\n\r\n filterOptions(): any[] {\r\n let list = this.options;\r\n if (this.searchable && this.searchTerm.trim()) {\r\n const term = this.searchTerm.toLowerCase();\r\n list = this.options.filter(opt =>\r\n opt[this.optionLabel].toLowerCase().includes(term)\r\n );\r\n }\r\n // هر بار جستجو انجام شد index ریست بشه\r\n this.highlightedIndex = Math.min(this.highlightedIndex, list.length - 1);\r\n return list;\r\n }\r\n\r\n selectOption(option: any) {\r\n if (option.disabled) return;\r\n\r\n if (this.multiple) {\r\n const exists = this.selected?.some((x: any) => x === option);\r\n this.selected = exists\r\n ? this.selected.filter((x: any) => x !== option)\r\n : [...(this.selected || []), option];\r\n } else {\r\n this.selected = option;\r\n this.isOpen = false;\r\n }\r\n\r\n this._onChange(this.selected);\r\n this._onTouched();\r\n this.selectionChange.emit(this.selected);\r\n }\r\n\r\n isSelected(option: any): boolean {\r\n return this.multiple\r\n ? this.selected?.includes(option)\r\n : this.selected === option;\r\n }\r\n\r\n clearSelection() {\r\n this.selected = this.multiple ? [] : null;\r\n this._onChange(this.selected);\r\n this._onTouched();\r\n this.selectionChange.emit(this.selected);\r\n }\r\n\r\n onKeyDown(event: KeyboardEvent) {\r\n const filtered = this.filterOptions();\r\n if (!filtered.length) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n this.highlightedIndex = (this.highlightedIndex + 1) % filtered.length;\r\n this.scrollToHighlighted();\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : filtered.length - 1;\r\n this.scrollToHighlighted();\r\n break;\r\n case 'Enter':\r\n event.preventDefault();\r\n if (this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {\r\n this.selectOption(filtered[this.highlightedIndex]);\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n scrollToHighlighted() {\r\n // تأخیر جزئی برای اطمینان از رندر کامل\r\n setTimeout(() => {\r\n const dropdown = this.elRef.nativeElement.querySelector('.dropdown-menu');\r\n const items = dropdown?.querySelectorAll('.dropdown-item');\r\n const activeItem = items?.[this.highlightedIndex] as HTMLElement;\r\n if (activeItem && dropdown) {\r\n const itemTop = activeItem.offsetTop;\r\n const itemBottom = itemTop + activeItem.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n if (itemBottom > dropdownScrollTop + dropdownHeight) {\r\n dropdown.scrollTop = itemBottom - dropdownHeight;\r\n } else if (itemTop < dropdownScrollTop) {\r\n dropdown.scrollTop = itemTop;\r\n }\r\n }\r\n });\r\n }\r\n\r\n\r\n /** Close by clicking outside */\r\n @HostListener('document:click', ['$event'])\r\n onClickOutside(event: MouseEvent) {\r\n const clickedInside = this.elRef.nativeElement.contains(event.target);\r\n if (!clickedInside) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n}\r\n","<div class=\"dropdown ys-dropdown\">\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" [disabled]=\"disabled\" />\r\n\r\n @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\" [disabled]=\"disabled\">\r\n <i class=\"fa fa-times\"></i>\r\n </button>\r\n }\r\n\r\n <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\"\r\n [disabled]=\"disabled\">\r\n <i class=\"fa fa-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n @if(searchable){\r\n <div class=\"px-2\">\r\n <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n (keydown)=\"onKeyDown($event)\">\r\n </div>\r\n }\r\n\r\n @for (option of filterOptions(); track $index) {\r\n <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n [class.highlighted]=\"$index === highlightedIndex\">\r\n @if(itemTemplate){\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n </ng-container>\r\n }\r\n @else {\r\n @if(multiple){\r\n <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n }\r\n <span>{{option[optionLabel]}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>","/*\r\n * Public API Surface of ys-dropdown\r\n */\r\n\r\nexport * from './src/ys-dropdown/ys-dropdown.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ class YsSelectComponent {
|
|
|
78
78
|
useExisting: forwardRef(() => YsSelectComponent),
|
|
79
79
|
multi: true
|
|
80
80
|
}
|
|
81
|
-
], ngImport: i0, template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track
|
|
81
|
+
], ngImport: i0, template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n [multiple]=\"multiple\" [size]=\"size\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (showClear) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
82
82
|
}
|
|
83
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSelectComponent, decorators: [{
|
|
84
84
|
type: Component,
|
|
@@ -88,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
88
88
|
useExisting: forwardRef(() => YsSelectComponent),
|
|
89
89
|
multi: true
|
|
90
90
|
}
|
|
91
|
-
], template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track
|
|
91
|
+
], template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n [multiple]=\"multiple\" [size]=\"size\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (showClear) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}" }]
|
|
92
92
|
}], propDecorators: { id: [{
|
|
93
93
|
type: Input
|
|
94
94
|
}], options: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["\r\nimport { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-select',\r\n imports: [FormsModule, NgClass],\r\n templateUrl: './ys-select.component.html',\r\n styleUrl: './ys-select.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsSelectComponent),\r\n multi: true\r\n }\r\n ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n /**ُSelect element id */\r\n @Input() id: string = 'ys-select';\r\n @Input() options: any[] = [];\r\n /**Name of field to display in option title */\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder?: string;\r\n @Input() styleClass?: string;\r\n @Input() invalid?: boolean = false;\r\n @Input() invalidFeedback?: string;\r\n @Input() valid?: boolean = false;\r\n @Input() validFeedback?: string;\r\n /**Support multiple attribute */\r\n @Input() multiple?: boolean = false;\r\n /**Size of multiple attribute */\r\n @Input() size?: number;\r\n /**Display clear button */\r\n @Input() showClear?: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n @Output() selected: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n onChange: any = () => { }\r\n onTouched: any = () => { }\r\n\r\n value?: any;\r\n\r\n writeValue(obj: any): void {\r\n if (!this.multiple && this.placeholder && !obj) {\r\n this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (this.multiple && !obj) {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (!this.multiple && obj && Array.isArray(obj)) {\r\n if (obj.length) {\r\n this.value = obj[0];\r\n }\r\n else {\r\n this.value = null;\r\n }\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n this.value = obj;\r\n }\r\n registerOnChange(fn: any): void {\r\n this.onChange = fn;\r\n }\r\n registerOnTouched(fn: any): void {\r\n this.onTouched = fn;\r\n }\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n }\r\n\r\n onModelChange(option: any) {\r\n this.onChange(option);\r\n this.onTouched(option);\r\n this.selected.emit(option);\r\n }\r\n\r\n clearValue() {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onModelChange(this.value);\r\n }\r\n\r\n isObject(item: any) {\r\n return typeof item == 'object';\r\n }\r\n\r\n}\r\n","<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["\r\nimport { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'ys-select',\r\n imports: [FormsModule, NgClass],\r\n templateUrl: './ys-select.component.html',\r\n styleUrl: './ys-select.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsSelectComponent),\r\n multi: true\r\n }\r\n ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n /**ُSelect element id */\r\n @Input() id: string = 'ys-select';\r\n @Input() options: any[] = [];\r\n /**Name of field to display in option title */\r\n @Input() optionLabel: string = 'label';\r\n @Input() placeholder?: string;\r\n @Input() styleClass?: string;\r\n @Input() invalid?: boolean = false;\r\n @Input() invalidFeedback?: string;\r\n @Input() valid?: boolean = false;\r\n @Input() validFeedback?: string;\r\n /**Support multiple attribute */\r\n @Input() multiple?: boolean = false;\r\n /**Size of multiple attribute */\r\n @Input() size?: number;\r\n /**Display clear button */\r\n @Input() showClear?: boolean = false;\r\n\r\n @Input() disabled: boolean = false;\r\n @Output() selected: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n onChange: any = () => { }\r\n onTouched: any = () => { }\r\n\r\n value?: any;\r\n\r\n writeValue(obj: any): void {\r\n if (!this.multiple && this.placeholder && !obj) {\r\n this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (this.multiple && !obj) {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n if (!this.multiple && obj && Array.isArray(obj)) {\r\n if (obj.length) {\r\n this.value = obj[0];\r\n }\r\n else {\r\n this.value = null;\r\n }\r\n this.onChange(this.value);\r\n return;\r\n }\r\n\r\n this.value = obj;\r\n }\r\n registerOnChange(fn: any): void {\r\n this.onChange = fn;\r\n }\r\n registerOnTouched(fn: any): void {\r\n this.onTouched = fn;\r\n }\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n }\r\n\r\n onModelChange(option: any) {\r\n this.onChange(option);\r\n this.onTouched(option);\r\n this.selected.emit(option);\r\n }\r\n\r\n clearValue() {\r\n this.multiple ? this.value = [] : this.value = null;\r\n this.onModelChange(this.value);\r\n }\r\n\r\n isObject(item: any) {\r\n return typeof item == 'object';\r\n }\r\n\r\n}\r\n","<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n @if (!multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (multiple) {\r\n <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n [multiple]=\"multiple\" [size]=\"size\">\r\n @if (placeholder) {\r\n <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n </option>\r\n }\r\n @for (item of options; track $index; let i = $index) {\r\n <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n {{isObject(item) ? item[optionLabel] : item}}\r\n </option>\r\n }\r\n </select>\r\n }\r\n\r\n @if (showClear) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -104,11 +104,11 @@ class YsSidebarComponent {
|
|
|
104
104
|
// }
|
|
105
105
|
}
|
|
106
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
|
|
108
108
|
}
|
|
109
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsSidebarComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
111
|
-
args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n
|
|
111
|
+
args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
|
|
112
112
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
|
|
113
113
|
type: Input
|
|
114
114
|
}], profile: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n constructor() { }\r\n\r\n private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n /**\r\n * Sidebar toggled state. Default value is true.\r\n */\r\n get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n /**\r\n * Sidebar display state. Default value is false.\r\n */\r\n get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n /**\r\n * Change sidebar toggle state.\r\n */\r\n toggleSidebar() {\r\n this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n }\r\n\r\n /**\r\n * Set sidebar toggle state.\r\n * @param isToggled \r\n */\r\n setIsSidebarToggled(isToggled: boolean) {\r\n this._isSidebarToggled$.next(isToggled);\r\n }\r\n\r\n /**\r\n * Set sidebar toggle state.\r\n * @param isSidebar \r\n */\r\n setIsSidebar(isSidebar: boolean) {\r\n this._isSidebar$.next(isSidebar);\r\n }\r\n\r\n /**\r\n * Return sidebar toggle state.\r\n */\r\n get sidebarState() {\r\n return this._isSidebarToggled$.getValue()\r\n }\r\n\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-sidebar',\r\n imports: [NgClass, RouterLink, RouterLinkActive],\r\n templateUrl: './ys-sidebar.component.html',\r\n styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n private subscription: Subscription;\r\n private currentItem?: SidebarItemActive;\r\n private currentItemState: boolean[] = [];\r\n\r\n private _items: SidebarItemActive[] = [];\r\n @Input()\r\n get items(): SidebarItemActive[] { return this._items };\r\n set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n @Input() profile: UserProfile | null = null;\r\n @Input() styleClass?: string;\r\n @Input() itemsStyleClass?: string;\r\n\r\n constructor(private router: Router) {\r\n this.subscription = router.events.subscribe(e => {\r\n if (e instanceof NavigationEnd) {\r\n this.currentItem = undefined;\r\n this.currentItemState = [];\r\n }\r\n })\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscription.unsubscribe();\r\n }\r\n\r\n get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n openItem(item: SidebarItemActive): void {\r\n if (item.isOpen) {\r\n item.isOpen = !item.isOpen;\r\n return;\r\n }\r\n\r\n this.items.forEach(x => x.isOpen = false);\r\n item.isOpen = !item.isOpen;\r\n }\r\n\r\n isDropdown(item: SidebarItem): boolean {\r\n return (item.items?.length ?? 0) > 0;\r\n }\r\n\r\n onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n this.currentItemState.push(isActive);\r\n\r\n if (!isActive && this.currentItem == item) {\r\n if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n return;\r\n }\r\n }\r\n\r\n this.currentItem = item;\r\n item.isActive = isActive;\r\n // if (isActive) {\r\n // this.items.forEach(x => x.isOpen = false);\r\n // item.isOpen = true;\r\n // }\r\n }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div\r\n class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\"\r\n [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n role=\"button\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\"\r\n [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAMa,cAAc,CAAA;AAEzB,IAAA,WAAA,GAAA;AAEQ,IAAA,kBAAkB,GAAG,IAAI,eAAe,CAAU,IAAI,CAAC;AAEvD,IAAA,WAAW,GAAG,IAAI,eAAe,CAAU,KAAK,CAAC;AAEzD;;AAEG;IACH,IAAI,iBAAiB,GAAA,EAAK,OAAO,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;AAExE;;AAEG;IACH,IAAI,UAAU,GAAA,EAAK,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,CAAC;AAE1D;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;;AAG9D;;;AAGG;AACH,IAAA,mBAAmB,CAAC,SAAkB,EAAA;AACpC,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGzC;;;AAGG;AACH,IAAA,YAAY,CAAC,SAAkB,EAAA;AAC7B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGlC;;AAEG;AACH,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;;uGA7ChC,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAd,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA;;2FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCOY,kBAAkB,CAAA;AAeT,IAAA,MAAA;AAbZ,IAAA,YAAY;AACZ,IAAA,WAAW;IACX,gBAAgB,GAAc,EAAE;IAEhC,MAAM,GAAwB,EAAE;IACxC,IACI,KAAK,KAA0B,OAAO,IAAI,CAAC,MAAM,CAAA;;IACrD,IAAI,KAAK,CAAC,KAAoB,EAAA,EAAI,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IAE7C,OAAO,GAAuB,IAAI;AAClC,IAAA,UAAU;AACV,IAAA,eAAe;AAExB,IAAA,WAAA,CAAoB,MAAc,EAAA;QAAd,IAAA,CAAA,MAAM,GAAN,MAAM;QACxB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAG;AAC9C,YAAA,IAAI,CAAC,YAAY,aAAa,EAAE;AAC9B,gBAAA,IAAI,CAAC,WAAW,GAAG,SAAS;AAC5B,gBAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;;AAE9B,SAAC,CAAC;;IAGJ,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;;AAGjC,IAAA,IAAI,QAAQ,GAAA,EAAa,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAA,CAAE,CAAC;AAEvF,IAAA,QAAQ,CAAC,IAAuB,EAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;YAC1B;;AAGF,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC;AACzC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;;AAG5B,IAAA,UAAU,CAAC,IAAiB,EAAA;QAC1B,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;;IAGtC,kBAAkB,CAAC,QAAiB,EAAE,IAAuB,EAAA;AAC3D,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEpC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;gBAC9F;;;AAIJ,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;;;;;uGAtDf,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,oLCZ/B,8mJAkGQ,EAAA,MAAA,EAAA,CAAA,+mCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED1FI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,oOAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIpC,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,CAAC,OAAO,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,8mJAAA,EAAA,MAAA,EAAA,CAAA,+mCAAA,CAAA,EAAA;2EAY5C,KAAK,EAAA,CAAA;sBADR;gBAIQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;;;AEzBH;;AAEG;;ACFH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n constructor() { }\r\n\r\n private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n /**\r\n * Sidebar toggled state. Default value is true.\r\n */\r\n get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n /**\r\n * Sidebar display state. Default value is false.\r\n */\r\n get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n /**\r\n * Change sidebar toggle state.\r\n */\r\n toggleSidebar() {\r\n this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n }\r\n\r\n /**\r\n * Set sidebar toggle state.\r\n * @param isToggled \r\n */\r\n setIsSidebarToggled(isToggled: boolean) {\r\n this._isSidebarToggled$.next(isToggled);\r\n }\r\n\r\n /**\r\n * Set sidebar toggle state.\r\n * @param isSidebar \r\n */\r\n setIsSidebar(isSidebar: boolean) {\r\n this._isSidebar$.next(isSidebar);\r\n }\r\n\r\n /**\r\n * Return sidebar toggle state.\r\n */\r\n get sidebarState() {\r\n return this._isSidebarToggled$.getValue()\r\n }\r\n\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n selector: 'ys-sidebar',\r\n imports: [NgClass, RouterLink, RouterLinkActive],\r\n templateUrl: './ys-sidebar.component.html',\r\n styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n private subscription: Subscription;\r\n private currentItem?: SidebarItemActive;\r\n private currentItemState: boolean[] = [];\r\n\r\n private _items: SidebarItemActive[] = [];\r\n @Input()\r\n get items(): SidebarItemActive[] { return this._items };\r\n set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n @Input() profile: UserProfile | null = null;\r\n @Input() styleClass?: string;\r\n @Input() itemsStyleClass?: string;\r\n\r\n constructor(private router: Router) {\r\n this.subscription = router.events.subscribe(e => {\r\n if (e instanceof NavigationEnd) {\r\n this.currentItem = undefined;\r\n this.currentItemState = [];\r\n }\r\n })\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.subscription.unsubscribe();\r\n }\r\n\r\n get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n openItem(item: SidebarItemActive): void {\r\n if (item.isOpen) {\r\n item.isOpen = !item.isOpen;\r\n return;\r\n }\r\n\r\n this.items.forEach(x => x.isOpen = false);\r\n item.isOpen = !item.isOpen;\r\n }\r\n\r\n isDropdown(item: SidebarItem): boolean {\r\n return (item.items?.length ?? 0) > 0;\r\n }\r\n\r\n onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n this.currentItemState.push(isActive);\r\n\r\n if (!isActive && this.currentItem == item) {\r\n if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n return;\r\n }\r\n }\r\n\r\n this.currentItem = item;\r\n item.isActive = isActive;\r\n // if (isActive) {\r\n // this.items.forEach(x => x.isOpen = false);\r\n // item.isOpen = true;\r\n // }\r\n }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n @if (profile) {\r\n <div>\r\n @if (profile.image || fullName || profile.role) {\r\n <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n @if (profile.image) {\r\n <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n </div>\r\n </div>\r\n }\r\n @if (fullName || profile.role) {\r\n <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n @if (fullName) {\r\n <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n }\r\n @if (profile.role) {\r\n <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n <hr />\r\n </div>\r\n }\r\n\r\n <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n @for (item of items; track item) {\r\n @if (item.isDivider) {\r\n <hr class=\"sidebar-divider\" />\r\n }\r\n @if (!item.isDivider) {\r\n @if (!isDropdown(item)) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n @if (isDropdown(item)) {\r\n <li class=\"nav-item d-block dropend\">\r\n <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n @if (item.iconClass) {\r\n <i [ngClass]=\"item.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n @if (item.badgeLabel) {\r\n <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n }\r\n </a>\r\n <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n [ngClass]=\"{'show': item.isOpen}\">\r\n @for (subItem of item.items; track subItem) {\r\n @if (subItem.isDivider) {\r\n <hr class=\"sidebar-divider my-1\" />\r\n }\r\n @if (!subItem.isDivider) {\r\n <li class=\"nav-item d-block\">\r\n <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n @if (subItem.iconClass) {\r\n <i [ngClass]=\"subItem.iconClass\"></i>\r\n }\r\n <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n @if (subItem.badgeLabel) {\r\n <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n }\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { NgClass } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Input, Component } from '@angular/core';
|
|
3
|
+
import { Input, ViewChild, Component } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class YsTiffViewerComponent {
|
|
6
|
+
canvasRef;
|
|
6
7
|
canvas;
|
|
7
8
|
context;
|
|
8
9
|
/**image file directories */
|
|
@@ -26,6 +27,7 @@ class YsTiffViewerComponent {
|
|
|
26
27
|
styleClass;
|
|
27
28
|
/**Message displayed before filling the input buffer */
|
|
28
29
|
noFileMessage = "No image file";
|
|
30
|
+
noFileStyleClass;
|
|
29
31
|
/**First button icon class */
|
|
30
32
|
firstIconClass = 'fa fa-fast-backward';
|
|
31
33
|
/**Previous button icon class */
|
|
@@ -43,7 +45,7 @@ class YsTiffViewerComponent {
|
|
|
43
45
|
* @returns
|
|
44
46
|
*/
|
|
45
47
|
async convertSource(buffer) {
|
|
46
|
-
this.canvas =
|
|
48
|
+
this.canvas = this.canvasRef.nativeElement;
|
|
47
49
|
this.context = this.canvas.getContext("2d");
|
|
48
50
|
this.IFDs = [];
|
|
49
51
|
this.currentIFDIndex = 0;
|
|
@@ -52,13 +54,12 @@ class YsTiffViewerComponent {
|
|
|
52
54
|
return;
|
|
53
55
|
}
|
|
54
56
|
if (buffer instanceof File || buffer instanceof Blob) {
|
|
55
|
-
buffer = await this.getAsByteArray(buffer);
|
|
57
|
+
// buffer = await this.getAsByteArray(buffer);
|
|
58
|
+
buffer = await buffer.arrayBuffer();
|
|
56
59
|
}
|
|
57
60
|
this.isDecoding = true;
|
|
58
61
|
this.IFDs = UTIF.decode(buffer);
|
|
59
|
-
this.IFDs.forEach((ifd) =>
|
|
60
|
-
UTIF.decodeImage(buffer, ifd);
|
|
61
|
-
});
|
|
62
|
+
this.IFDs.forEach((ifd) => UTIF.decodeImage(buffer, ifd));
|
|
62
63
|
this.putImage(this.currentIFDIndex);
|
|
63
64
|
this.isDecoding = false;
|
|
64
65
|
}
|
|
@@ -100,28 +101,16 @@ class YsTiffViewerComponent {
|
|
|
100
101
|
this.currentIFDIndex = this.IFDs.length - 1;
|
|
101
102
|
this.putImage(this.currentIFDIndex);
|
|
102
103
|
}
|
|
103
|
-
async getAsByteArray(blob) {
|
|
104
|
-
var res = new Uint8Array(await this.readFile(blob));
|
|
105
|
-
return res;
|
|
106
|
-
}
|
|
107
|
-
async readFile(blob) {
|
|
108
|
-
return new Promise((resolve, reject) => {
|
|
109
|
-
// Create file reader
|
|
110
|
-
let reader = new FileReader();
|
|
111
|
-
// Register event listeners
|
|
112
|
-
reader.onload = () => resolve(reader.result);
|
|
113
|
-
reader.onerror = error => reject(error);
|
|
114
|
-
// Read file
|
|
115
|
-
reader.readAsArrayBuffer(blob);
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsTiffViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsTiffViewerComponent, isStandalone: true, selector: "ys-tiff-viewer", inputs: { buffer: "buffer", currentPageReportTemplate: "currentPageReportTemplate", styleClass: "styleClass", noFileMessage: "noFileMessage", firstIconClass: "firstIconClass", previousIconClass: "previousIconClass", nextIconClass: "nextIconClass", lastIconClass: "lastIconClass" }, ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"
|
|
105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsTiffViewerComponent, isStandalone: true, selector: "ys-tiff-viewer", inputs: { buffer: "buffer", currentPageReportTemplate: "currentPageReportTemplate", styleClass: "styleClass", noFileMessage: "noFileMessage", noFileStyleClass: "noFileStyleClass", firstIconClass: "firstIconClass", previousIconClass: "previousIconClass", nextIconClass: "nextIconClass", lastIconClass: "lastIconClass" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["tiffCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\" (click)=\"first()\"\r\n [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"firstIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"previousIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (isIFDs) {\r\n <span [innerHtml]=\"currentPageReportTemplate\">\r\n </span>\r\n }\r\n\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"nextIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"lastIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n @if (!isIFDs && noFileMessage) {\r\n <span class=\"my-4\" [ngClass]=\"noFileStyleClass\">{{noFileMessage}}</span>\r\n }\r\n <canvas #tiffCanvas class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n </div>\r\n <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
120
106
|
}
|
|
121
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsTiffViewerComponent, decorators: [{
|
|
122
108
|
type: Component,
|
|
123
|
-
args: [{ selector: 'ys-tiff-viewer', imports: [NgClass], template: "<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"
|
|
124
|
-
}], propDecorators: {
|
|
109
|
+
args: [{ selector: 'ys-tiff-viewer', imports: [NgClass], template: "<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\" (click)=\"first()\"\r\n [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"firstIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"previousIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (isIFDs) {\r\n <span [innerHtml]=\"currentPageReportTemplate\">\r\n </span>\r\n }\r\n\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"nextIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"lastIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n @if (!isIFDs && noFileMessage) {\r\n <span class=\"my-4\" [ngClass]=\"noFileStyleClass\">{{noFileMessage}}</span>\r\n }\r\n <canvas #tiffCanvas class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n </div>\r\n <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"] }]
|
|
110
|
+
}], propDecorators: { canvasRef: [{
|
|
111
|
+
type: ViewChild,
|
|
112
|
+
args: ['tiffCanvas', { static: true }]
|
|
113
|
+
}], buffer: [{
|
|
125
114
|
type: Input
|
|
126
115
|
}], currentPageReportTemplate: [{
|
|
127
116
|
type: Input
|
|
@@ -129,6 +118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
129
118
|
type: Input
|
|
130
119
|
}], noFileMessage: [{
|
|
131
120
|
type: Input
|
|
121
|
+
}], noFileStyleClass: [{
|
|
122
|
+
type: Input
|
|
132
123
|
}], firstIconClass: [{
|
|
133
124
|
type: Input
|
|
134
125
|
}], previousIconClass: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"yoozsoft-yoozsoft-ng-tiff-viewer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/src/ys-tiff-viewer/ys-tiff-viewer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/src/ys-tiff-viewer/ys-tiff-viewer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/yoozsoft-yoozsoft-ng-tiff-viewer.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\ndeclare var UTIF: any;\r\n\r\n@Component({\r\n selector: 'ys-tiff-viewer',\r\n imports: [NgClass],\r\n templateUrl: './ys-tiff-viewer.component.html',\r\n styleUrl: './ys-tiff-viewer.component.scss'\r\n})\r\nexport class YsTiffViewerComponent {\r\n\r\n private canvas: any;\r\n private context: any;\r\n /**image file directories */\r\n private IFDs: any[] = [];\r\n private currentIFDIndex: number = 0;\r\n isDecoding: boolean = false;\r\n\r\n private _buffer: ArrayBuffer | File | Blob | null | undefined;\r\n /**Uint8Array source */\r\n /**ArrayBuffer containing TIFF or EXIF data */\r\n @Input()\r\n get buffer(): ArrayBuffer | File | Blob | null | undefined { return this._buffer; }\r\n set buffer(value: ArrayBuffer | File | Blob | null | undefined) { this._buffer = value; this.convertSource(this._buffer); }\r\n\r\n _currentPageReportTemplate?: string = \"Page {current} of {total}\";\r\n /**Current page report template */\r\n @Input()\r\n get currentPageReportTemplate(): string | undefined {\r\n return this._currentPageReportTemplate?.\r\n replace('{current}', `<strong>${this.currentIFDIndex + 1}</strong>`).\r\n replace('{total}', `<strong>${this.IFDs.length}</strong>`);\r\n }\r\n set currentPageReportTemplate(value: string | undefined) { this._currentPageReportTemplate = value; }\r\n\r\n /**Canvas container style class */\r\n @Input() styleClass?: string;\r\n /**Message displayed before filling the input buffer */\r\n @Input() noFileMessage?: string = \"No image file\";\r\n\r\n /**First button icon class */\r\n @Input() firstIconClass: string = 'fa fa-fast-backward';\r\n /**Previous button icon class */\r\n @Input() previousIconClass: string = 'fa fa-step-backward';\r\n /**Next button icon class */\r\n @Input() nextIconClass: string = 'fa fa-step-forward';\r\n /**Last button icon class */\r\n @Input() lastIconClass: string = 'fa fa-fast-forward';\r\n\r\n get isIFDs(): boolean { return this.IFDs.length > 0; }\r\n get isFirstImage(): boolean { return !this.isIFDs || (this.currentIFDIndex == 0); }\r\n get isLastImage(): boolean { return !this.isIFDs || (this.currentIFDIndex == this.IFDs.length - 1); }\r\n\r\n\r\n /**\r\n * Convert buffer to an array of \"IFDs\" (image file directories)\r\n * @param buffer ArrayBuffer containing TIFF or EXIF data\r\n * @returns \r\n */\r\n async convertSource(buffer: ArrayBuffer | File | Blob | null | undefined) {\r\n this.canvas = document.getElementById(\"tiffCanvas\");\r\n this.context = this.canvas.getContext(\"2d\");\r\n this.IFDs = [];\r\n this.currentIFDIndex = 0;\r\n\r\n if (!buffer) {\r\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n return;\r\n }\r\n\r\n if (buffer instanceof File || buffer instanceof Blob) {\r\n buffer = await this.getAsByteArray(buffer);\r\n }\r\n\r\n this.isDecoding = true;\r\n\r\n this.IFDs = UTIF.decode(buffer);\r\n\r\n this.IFDs.forEach((ifd: any) => {\r\n UTIF.decodeImage(buffer, ifd);\r\n });\r\n\r\n this.putImage(this.currentIFDIndex);\r\n\r\n this.isDecoding = false;\r\n }\r\n\r\n putImage(index: number) {\r\n if (!this.IFDs.length) {\r\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n return;\r\n }\r\n\r\n const tiffImage = this.IFDs[index];\r\n const rgbaImage = UTIF.toRGBA8(tiffImage); // Uint8Array with RGBA pixels\r\n\r\n const data = new Uint8ClampedArray(rgbaImage);\r\n const imageData = new ImageData(data, tiffImage.width, tiffImage.height);\r\n\r\n this.context.canvas.width = tiffImage.width;\r\n this.context.canvas.height = tiffImage.height;\r\n // Draw image data to the canvas\r\n this.context.putImageData(imageData, 0, 0);\r\n }\r\n\r\n\r\n first() {\r\n this.currentIFDIndex = 0;\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n previous() {\r\n this.currentIFDIndex -= 1;\r\n if (this.currentIFDIndex < 0) {\r\n this.currentIFDIndex = 0;\r\n return;\r\n }\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n\r\n next() {\r\n this.currentIFDIndex += 1;\r\n if (this.currentIFDIndex > (this.IFDs.length - 1)) {\r\n this.currentIFDIndex = this.IFDs.length - 1;\r\n return;\r\n }\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n last() {\r\n this.currentIFDIndex = this.IFDs.length - 1;\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n\r\n async getAsByteArray(blob: Blob) {\r\n var res = new Uint8Array(await this.readFile(blob))\r\n return res;\r\n }\r\n\r\n async readFile(blob: Blob): Promise<ArrayBuffer> {\r\n return new Promise((resolve, reject) => {\r\n // Create file reader\r\n let reader = new FileReader()\r\n\r\n // Register event listeners\r\n reader.onload = () => resolve(reader.result as ArrayBuffer);\r\n reader.onerror = error => reject(error);\r\n\r\n // Read file\r\n reader.readAsArrayBuffer(blob);\r\n })\r\n }\r\n\r\n}\r\n","<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\"\r\n (click)=\"first()\" [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"firstIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"previousIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (isIFDs) {\r\n <span [innerHtml]=\"currentPageReportTemplate\">\r\n </span>\r\n }\r\n\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"nextIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"lastIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n @if (!isIFDs && noFileMessage) {\r\n <span>{{noFileMessage}}</span>\r\n }\r\n <canvas #tiffCanvas id=\"tiffCanvas\" class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n </div>\r\n <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/ys-tiff-viewer/ys-tiff-viewer.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"yoozsoft-yoozsoft-ng-tiff-viewer.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/src/ys-tiff-viewer/ys-tiff-viewer.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/src/ys-tiff-viewer/ys-tiff-viewer.component.html","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/tiff-viewer/yoozsoft-yoozsoft-ng-tiff-viewer.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, ElementRef, Input, ViewChild } from '@angular/core';\r\n\r\ndeclare var UTIF: any;\r\n\r\n@Component({\r\n selector: 'ys-tiff-viewer',\r\n imports: [NgClass],\r\n templateUrl: './ys-tiff-viewer.component.html',\r\n styleUrl: './ys-tiff-viewer.component.scss'\r\n})\r\nexport class YsTiffViewerComponent {\r\n\r\n @ViewChild('tiffCanvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;\r\n\r\n private canvas: any;\r\n private context: any;\r\n /**image file directories */\r\n private IFDs: any[] = [];\r\n private currentIFDIndex: number = 0;\r\n isDecoding: boolean = false;\r\n\r\n private _buffer: ArrayBuffer | File | Blob | null | undefined;\r\n /**Uint8Array source */\r\n /**ArrayBuffer containing TIFF or EXIF data */\r\n @Input()\r\n get buffer(): ArrayBuffer | File | Blob | null | undefined { return this._buffer; }\r\n set buffer(value: ArrayBuffer | File | Blob | null | undefined) { this._buffer = value; this.convertSource(this._buffer); }\r\n\r\n _currentPageReportTemplate?: string = \"Page {current} of {total}\";\r\n /**Current page report template */\r\n @Input()\r\n get currentPageReportTemplate(): string | undefined {\r\n return this._currentPageReportTemplate?.\r\n replace('{current}', `<strong>${this.currentIFDIndex + 1}</strong>`).\r\n replace('{total}', `<strong>${this.IFDs.length}</strong>`);\r\n }\r\n set currentPageReportTemplate(value: string | undefined) { this._currentPageReportTemplate = value; }\r\n\r\n /**Canvas container style class */\r\n @Input() styleClass?: string;\r\n /**Message displayed before filling the input buffer */\r\n @Input() noFileMessage?: string = \"No image file\";\r\n @Input() noFileStyleClass?: string;\r\n\r\n /**First button icon class */\r\n @Input() firstIconClass: string = 'fa fa-fast-backward';\r\n /**Previous button icon class */\r\n @Input() previousIconClass: string = 'fa fa-step-backward';\r\n /**Next button icon class */\r\n @Input() nextIconClass: string = 'fa fa-step-forward';\r\n /**Last button icon class */\r\n @Input() lastIconClass: string = 'fa fa-fast-forward';\r\n\r\n get isIFDs(): boolean { return this.IFDs.length > 0; }\r\n get isFirstImage(): boolean { return !this.isIFDs || (this.currentIFDIndex == 0); }\r\n get isLastImage(): boolean { return !this.isIFDs || (this.currentIFDIndex == this.IFDs.length - 1); }\r\n\r\n /**\r\n * Convert buffer to an array of \"IFDs\" (image file directories)\r\n * @param buffer ArrayBuffer containing TIFF or EXIF data\r\n * @returns \r\n */\r\n async convertSource(buffer: ArrayBuffer | File | Blob | null | undefined): Promise<void> {\r\n this.canvas = this.canvasRef.nativeElement;\r\n this.context = this.canvas.getContext(\"2d\");\r\n this.IFDs = [];\r\n this.currentIFDIndex = 0;\r\n\r\n if (!buffer) {\r\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n return;\r\n }\r\n\r\n if (buffer instanceof File || buffer instanceof Blob) {\r\n // buffer = await this.getAsByteArray(buffer);\r\n buffer = await buffer.arrayBuffer();\r\n }\r\n\r\n this.isDecoding = true;\r\n\r\n this.IFDs = UTIF.decode(buffer as ArrayBuffer);\r\n this.IFDs.forEach((ifd: any) => UTIF.decodeImage(buffer as ArrayBuffer, ifd));\r\n\r\n this.putImage(this.currentIFDIndex);\r\n this.isDecoding = false;\r\n }\r\n\r\n putImage(index: number): void {\r\n if (!this.IFDs.length) {\r\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n return;\r\n }\r\n\r\n const tiffImage = this.IFDs[index];\r\n const rgbaImage = UTIF.toRGBA8(tiffImage); // Uint8Array with RGBA pixels\r\n\r\n const data = new Uint8ClampedArray(rgbaImage);\r\n const imageData = new ImageData(data, tiffImage.width, tiffImage.height);\r\n\r\n this.context.canvas.width = tiffImage.width;\r\n this.context.canvas.height = tiffImage.height;\r\n // Draw image data to the canvas\r\n this.context.putImageData(imageData, 0, 0);\r\n }\r\n\r\n\r\n first(): void {\r\n this.currentIFDIndex = 0;\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n previous(): void {\r\n this.currentIFDIndex -= 1;\r\n if (this.currentIFDIndex < 0) {\r\n this.currentIFDIndex = 0;\r\n return;\r\n }\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n\r\n next(): void {\r\n this.currentIFDIndex += 1;\r\n if (this.currentIFDIndex > (this.IFDs.length - 1)) {\r\n this.currentIFDIndex = this.IFDs.length - 1;\r\n return;\r\n }\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n last(): void {\r\n this.currentIFDIndex = this.IFDs.length - 1;\r\n this.putImage(this.currentIFDIndex);\r\n }\r\n\r\n // async getAsByteArray(blob: Blob): Promise<ArrayBuffer> {\r\n // return new Promise((resolve, reject) => {\r\n // const reader = new FileReader();\r\n // reader.onload = () => resolve(reader.result as ArrayBuffer);\r\n // reader.onerror = reject;\r\n // reader.readAsArrayBuffer(blob);\r\n // });\r\n // }\r\n\r\n}\r\n","<div class=\"row\">\r\n <div class=\"col d-flex justify-content-between align-items-center\">\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\" (click)=\"first()\"\r\n [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"firstIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n <i [ngClass]=\"previousIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (isIFDs) {\r\n <span [innerHtml]=\"currentPageReportTemplate\">\r\n </span>\r\n }\r\n\r\n <div>\r\n <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"nextIconClass\"></i>\r\n </button>\r\n <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n [disabled]=\"isLastImage\">\r\n <i [ngClass]=\"lastIconClass\"></i>\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n</div>\r\n<div class=\"row\">\r\n <div class=\"col\">\r\n <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n @if (!isIFDs && noFileMessage) {\r\n <span class=\"my-4\" [ngClass]=\"noFileStyleClass\">{{noFileMessage}}</span>\r\n }\r\n <canvas #tiffCanvas class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n </div>\r\n <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n [ngClass]=\"{'d-none': !isDecoding}\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/ys-tiff-viewer/ys-tiff-viewer.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yoozsoft/yoozsoft-ng",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.3",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^20.0.0",
|
|
6
6
|
"@angular/core": "^20.0.0"
|
|
@@ -38,10 +38,6 @@
|
|
|
38
38
|
"types": "./index.d.ts",
|
|
39
39
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng.mjs"
|
|
40
40
|
},
|
|
41
|
-
"./directives": {
|
|
42
|
-
"types": "./directives/index.d.ts",
|
|
43
|
-
"default": "./fesm2022/yoozsoft-yoozsoft-ng-directives.mjs"
|
|
44
|
-
},
|
|
45
41
|
"./autocomplete": {
|
|
46
42
|
"types": "./autocomplete/index.d.ts",
|
|
47
43
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs"
|
|
@@ -50,6 +46,10 @@
|
|
|
50
46
|
"types": "./datepicker/index.d.ts",
|
|
51
47
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs"
|
|
52
48
|
},
|
|
49
|
+
"./directives": {
|
|
50
|
+
"types": "./directives/index.d.ts",
|
|
51
|
+
"default": "./fesm2022/yoozsoft-yoozsoft-ng-directives.mjs"
|
|
52
|
+
},
|
|
53
53
|
"./dropdown": {
|
|
54
54
|
"types": "./dropdown/index.d.ts",
|
|
55
55
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs"
|
|
@@ -78,10 +78,6 @@
|
|
|
78
78
|
"types": "./pagination/index.d.ts",
|
|
79
79
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-pagination.mjs"
|
|
80
80
|
},
|
|
81
|
-
"./password-strength": {
|
|
82
|
-
"types": "./password-strength/index.d.ts",
|
|
83
|
-
"default": "./fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs"
|
|
84
|
-
},
|
|
85
81
|
"./progress": {
|
|
86
82
|
"types": "./progress/index.d.ts",
|
|
87
83
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-progress.mjs"
|
|
@@ -90,6 +86,10 @@
|
|
|
90
86
|
"types": "./select/index.d.ts",
|
|
91
87
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-select.mjs"
|
|
92
88
|
},
|
|
89
|
+
"./sidebar": {
|
|
90
|
+
"types": "./sidebar/index.d.ts",
|
|
91
|
+
"default": "./fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs"
|
|
92
|
+
},
|
|
93
93
|
"./tiff-viewer": {
|
|
94
94
|
"types": "./tiff-viewer/index.d.ts",
|
|
95
95
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs"
|
|
@@ -98,9 +98,9 @@
|
|
|
98
98
|
"types": "./toast/index.d.ts",
|
|
99
99
|
"default": "./fesm2022/yoozsoft-yoozsoft-ng-toast.mjs"
|
|
100
100
|
},
|
|
101
|
-
"./
|
|
102
|
-
"types": "./
|
|
103
|
-
"default": "./fesm2022/yoozsoft-yoozsoft-ng-
|
|
101
|
+
"./password-strength": {
|
|
102
|
+
"types": "./password-strength/index.d.ts",
|
|
103
|
+
"default": "./fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs"
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
}
|
package/sidebar/index.d.ts
CHANGED
package/tiff-viewer/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
+
import { ElementRef } from '@angular/core';
|
|
2
3
|
|
|
3
4
|
declare class YsTiffViewerComponent {
|
|
5
|
+
canvasRef: ElementRef<HTMLCanvasElement>;
|
|
4
6
|
private canvas;
|
|
5
7
|
private context;
|
|
6
8
|
/**image file directories */
|
|
@@ -20,6 +22,7 @@ declare class YsTiffViewerComponent {
|
|
|
20
22
|
styleClass?: string;
|
|
21
23
|
/**Message displayed before filling the input buffer */
|
|
22
24
|
noFileMessage?: string;
|
|
25
|
+
noFileStyleClass?: string;
|
|
23
26
|
/**First button icon class */
|
|
24
27
|
firstIconClass: string;
|
|
25
28
|
/**Previous button icon class */
|
|
@@ -42,10 +45,8 @@ declare class YsTiffViewerComponent {
|
|
|
42
45
|
previous(): void;
|
|
43
46
|
next(): void;
|
|
44
47
|
last(): void;
|
|
45
|
-
getAsByteArray(blob: Blob): Promise<Uint8Array<ArrayBuffer>>;
|
|
46
|
-
readFile(blob: Blob): Promise<ArrayBuffer>;
|
|
47
48
|
static ɵfac: i0.ɵɵFactoryDeclaration<YsTiffViewerComponent, never>;
|
|
48
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<YsTiffViewerComponent, "ys-tiff-viewer", never, { "buffer": { "alias": "buffer"; "required": false; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "noFileMessage": { "alias": "noFileMessage"; "required": false; }; "firstIconClass": { "alias": "firstIconClass"; "required": false; }; "previousIconClass": { "alias": "previousIconClass"; "required": false; }; "nextIconClass": { "alias": "nextIconClass"; "required": false; }; "lastIconClass": { "alias": "lastIconClass"; "required": false; }; }, {}, never, never, true, never>;
|
|
49
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<YsTiffViewerComponent, "ys-tiff-viewer", never, { "buffer": { "alias": "buffer"; "required": false; }; "currentPageReportTemplate": { "alias": "currentPageReportTemplate"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "noFileMessage": { "alias": "noFileMessage"; "required": false; }; "noFileStyleClass": { "alias": "noFileStyleClass"; "required": false; }; "firstIconClass": { "alias": "firstIconClass"; "required": false; }; "previousIconClass": { "alias": "previousIconClass"; "required": false; }; "nextIconClass": { "alias": "nextIconClass"; "required": false; }; "lastIconClass": { "alias": "lastIconClass"; "required": false; }; }, {}, never, never, true, never>;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
export { YsTiffViewerComponent };
|