@apexara/ng-components 1.0.0 → 1.0.2-test.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +395 -395
- package/fesm2022/apexara-ng-components-button.mjs +9 -9
- package/fesm2022/apexara-ng-components-button.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-carousel.mjs +6 -6
- package/fesm2022/apexara-ng-components-carousel.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-checkbox.mjs +9 -9
- package/fesm2022/apexara-ng-components-checkbox.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-chip.mjs +6 -6
- package/fesm2022/apexara-ng-components-chip.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-datepicker.mjs +51 -51
- package/fesm2022/apexara-ng-components-datepicker.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-dialog.mjs +7 -7
- package/fesm2022/apexara-ng-components-dialog.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-drawer.mjs +7 -7
- package/fesm2022/apexara-ng-components-drawer.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-expander.mjs +7 -7
- package/fesm2022/apexara-ng-components-expander.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-image.mjs +11 -11
- package/fesm2022/apexara-ng-components-image.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-input.mjs +12 -12
- package/fesm2022/apexara-ng-components-input.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-listbox.mjs +9 -9
- package/fesm2022/apexara-ng-components-listbox.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-radiobutton.mjs +9 -9
- package/fesm2022/apexara-ng-components-radiobutton.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-select.mjs +15 -15
- package/fesm2022/apexara-ng-components-select.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-services.mjs +7 -7
- package/fesm2022/apexara-ng-components-services.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-snackbar.mjs +20 -20
- package/fesm2022/apexara-ng-components-snackbar.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-table.mjs +68 -41
- package/fesm2022/apexara-ng-components-table.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-textarea.mjs +9 -9
- package/fesm2022/apexara-ng-components-textarea.mjs.map +1 -1
- package/fesm2022/apexara-ng-components-tooltip.mjs +9 -9
- package/fesm2022/apexara-ng-components-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/types/apexara-ng-components-button.d.ts +7 -7
- package/types/apexara-ng-components-carousel.d.ts +4 -4
- package/types/apexara-ng-components-checkbox.d.ts +7 -7
- package/types/apexara-ng-components-chip.d.ts +4 -4
- package/types/apexara-ng-components-datepicker.d.ts +12 -12
- package/types/apexara-ng-components-dialog.d.ts +4 -4
- package/types/apexara-ng-components-drawer.d.ts +4 -4
- package/types/apexara-ng-components-expander.d.ts +4 -4
- package/types/apexara-ng-components-image.d.ts +8 -8
- package/types/apexara-ng-components-input.d.ts +9 -9
- package/types/apexara-ng-components-listbox.d.ts +12 -12
- package/types/apexara-ng-components-radiobutton.d.ts +11 -11
- package/types/apexara-ng-components-select.d.ts +13 -13
- package/types/apexara-ng-components-services.d.ts +4 -4
- package/types/apexara-ng-components-snackbar.d.ts +12 -12
- package/types/apexara-ng-components-table.d.ts +30 -26
- package/types/apexara-ng-components-textarea.d.ts +9 -9
- package/types/apexara-ng-components-tooltip.d.ts +5 -5
|
@@ -3,9 +3,9 @@ import { EventEmitter, HostListener, Output, Input, ViewChild, Component } from
|
|
|
3
3
|
import * as i1 from '@angular/cdk/scrolling';
|
|
4
4
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
5
5
|
import { fromEvent, tap, debounceTime } from 'rxjs';
|
|
6
|
-
import { TooltipPosition,
|
|
6
|
+
import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
|
|
7
7
|
|
|
8
|
-
class
|
|
8
|
+
class ApexListboxComponent {
|
|
9
9
|
constructor(elementRef, changeDetectorRef) {
|
|
10
10
|
this.elementRef = elementRef;
|
|
11
11
|
this.changeDetectorRef = changeDetectorRef;
|
|
@@ -269,15 +269,15 @@ class IpiListboxComponent {
|
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
273
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type:
|
|
272
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexListboxComponent, isStandalone: true, selector: "apex-listbox", inputs: { options: "options", virtualScroll: "virtualScroll", itemSize: "itemSize" }, outputs: { selectChange: "selectChange" }, host: { listeners: { "document:mouseup": "mouseup()", "keyup": "keyup($event)" } }, viewQueries: [{ propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n <div class=\"listbox-header\">\n @if (options.label) {\n <label>{{ options.label }}</label>\n }\n\n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n <div class=\"item\"\n *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n [attr.value]=\"i\"\n [style.height.px]=\"itemSize\"\n [style.line-height.px]=\"itemSize\"\n [class.selected]=\"isIndexSelected(i)\"\n (mousedown)=\"mousedown(i)\"\n (mouseover)=\"mouseover(i)\">\n {{ data.label }}\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"container-inner\">\n @for (data of options.data; track data.value) {\n <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n {{ data.label }}\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"footer\" [class.error]=\"controlInvalid\">\n {{ controlError }}\n </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
|
|
274
274
|
}
|
|
275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexListboxComponent, decorators: [{
|
|
276
276
|
type: Component,
|
|
277
|
-
args: [{ standalone: true, selector: '
|
|
277
|
+
args: [{ standalone: true, selector: 'apex-listbox', imports: [
|
|
278
278
|
ScrollingModule,
|
|
279
|
-
|
|
280
|
-
], template: "@if (options) {\n <div class=\"listbox-header\">\n @if (options.label) {\n <label>{{ options.label }}</label>\n }\n\n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [
|
|
279
|
+
ApexTooltipDirective,
|
|
280
|
+
], template: "@if (options) {\n <div class=\"listbox-header\">\n @if (options.label) {\n <label>{{ options.label }}</label>\n }\n\n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n <div class=\"item\"\n *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n [attr.value]=\"i\"\n [style.height.px]=\"itemSize\"\n [style.line-height.px]=\"itemSize\"\n [class.selected]=\"isIndexSelected(i)\"\n (mousedown)=\"mousedown(i)\"\n (mouseover)=\"mouseover(i)\">\n {{ data.label }}\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"container-inner\">\n @for (data of options.data; track data.value) {\n <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n {{ data.label }}\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"footer\" [class.error]=\"controlInvalid\">\n {{ controlError }}\n </div>\n}\n", styles: [":host{width:fit-content}.container-inner:focus{outline:none}:host(.no-margin) .container{margin-top:0}.listbox-header{display:flex;align-items:center;justify-content:flex-start}label{font-size:14px;font-weight:600;color:var(--apex-listbox-label-color, default);padding:2px}.tooltip-icon path{fill:var(--apex-listbox-tooltip-icon-fill, transparent);stroke:var(--apex-listbox-tooltip-icon-stroke, #C6C6C6)}.container{min-width:264px;outline:none;box-sizing:border-box;color:var(--apex-listbox-item-color, #00000099);background-color:var(--apex-listbox-background-color, #FFFFFF);border:1px solid var(--apex-listbox-border-color, #F2F2F2);border-radius:8px;padding:2px}.container:hover,.container:focus{border-color:var(--apex-listbox-border-hover-color, #4B5368)}.container.error{border-color:var(--apex-listbox-border-invalid-color, #F96138)}.container-inner{height:224px;overflow-y:scroll;padding:0}.cdk-listbox-viewport{height:224px;overflow-y:auto;padding:0}.item{-webkit-user-select:none;user-select:none;font-size:14px;padding:0 4px;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;z-index:1}.item.selected{color:var(--apex-listbox-item-selected-color, #F96138)}.item:after{width:5px;height:5px;position:absolute;top:50%;left:50%;content:\"\";background:#80808031;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-out}.item.selected:after{transform:translate(-50%,-50%) scale(50)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--apex-input-error-color, #F96138)}\n"] }]
|
|
281
281
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { listbox: [{
|
|
282
282
|
type: ViewChild,
|
|
283
283
|
args: ['listbox']
|
|
@@ -304,5 +304,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
304
304
|
* Generated bundle index. Do not edit.
|
|
305
305
|
*/
|
|
306
306
|
|
|
307
|
-
export {
|
|
307
|
+
export { ApexListboxComponent };
|
|
308
308
|
//# sourceMappingURL=apexara-ng-components-listbox.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apexara-ng-components-listbox.mjs","sources":["../../../../projects/apexara/ng-components/listbox/src/listbox.component.ts","../../../../projects/apexara/ng-components/listbox/src/listbox.component.html","../../../../projects/apexara/ng-components/listbox/apexara-ng-components-listbox.ts"],"sourcesContent":["import { Component, SimpleChanges, ViewChild, ElementRef, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { FormGroup, AbstractControl } from '@angular/forms';\n\nimport { Subscription, debounceTime, fromEvent, tap } from 'rxjs';\n\nimport { IpiSelectData } from '@apexara/ng-components/select';\nimport { IpiControlErrors } from '@apexara/ng-components/input';\nimport { IpiTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface IpiListBoxOptions {\n data: IpiSelectData[];\n label?: string;\n tooltip?: string;\n formGroup?: FormGroup;\n formControlName?: string;\n errors?: IpiControlErrors;\n}\n\n@Component({\n standalone: true,\n selector: 'ipi-listbox',\n templateUrl: './listbox.component.html',\n styleUrls: ['./listbox.component.css'],\n imports: [\n ScrollingModule,\n IpiTooltipDirective,\n ]\n})\n\nexport class IpiListboxComponent {\n\n constructor (\n private elementRef: ElementRef,\n private changeDetectorRef: ChangeDetectorRef) {\n }\n\n @ViewChild('listbox') listbox: ElementRef<HTMLDivElement> | null = null;\n @ViewChild(CdkVirtualScrollViewport) cdkViewport?: CdkVirtualScrollViewport;\n\n @Input() options!: IpiListBoxOptions;\n\n @Input() virtualScroll: boolean = false;\n @Input() itemSize: number = 28; // Must match CSS row height of an item\n\n @Output() selectChange = new EventEmitter<IpiSelectData[]>();\n\n public tooltipPosition = TooltipPosition;\n\n public controlError!: string;\n public controlInvalid = false;\n public control: AbstractControl | null = null; \n public controlSubscription: Subscription | null = null;\n\n private documentKeyupValue = '';\n private documentKeyupValueResetTime = 1000;\n private documentKeyDownSubscription!: Subscription;\n\n private isMetaHold = false;\n private isShiftHold = false;\n\n private listHeight: number = 224; // Default matches CSS\n\n private lastSelectedItemIndex = 0;\n private lastSelectedItemIndexOnShiftHold = 0;\n\n // Drag selection state\n private dragSelecting = false;\n private dragAnchorIndex = 0;\n\n private selectedItems!: (IpiSelectData | null)[];\n\n public ngOnInit(): void {\n this.control = this.getControl();\n \n this.selectedItems = new Array(this.options.data.length).fill(null);\n\n if (!this.virtualScroll) {\n this.changeDetectorRef.detach();\n }\n\n this.changeDetectorRef.detectChanges();\n }\n\n public ngAfterViewInit(): void {\n this.documentKeyDownSubscription = fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n .pipe(\n tap(event => { this.keydown(event) }),\n debounceTime(this.documentKeyupValueResetTime))\n .subscribe(() => { this.documentKeyupValue = '' });\n }\n\n public ngOnDestroy(): void {\n this.documentKeyDownSubscription.unsubscribe();\n\n if (this.controlSubscription) {\n this.controlSubscription?.unsubscribe();\n }\n }\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems) {\n this.selectedItems.length = 0;\n\n // Refresh virtual viewport if enabled\n setTimeout(() => {\n this.cdkViewport?.checkViewportSize();\n this.changeDetectorRef.detectChanges();\n });\n }\n }\n\n public mousedown(index: number): void {\n this.dragSelecting = true;\n this.dragAnchorIndex = index;\n\n if (this.isShiftHold) {\n const max = Math.max(index, this.lastSelectedItemIndexOnShiftHold);\n const min = Math.min(index, this.lastSelectedItemIndexOnShiftHold);\n\n const indices = [] as number[];\n\n for (let i = min; i <= max; i++) { indices.push(i); }\n\n this.clearAllSelections();\n this.addSelectedItems(indices);\n return;\n }\n\n if (this.isMetaHold) {\n if (this.isIndexSelected(index)) {\n this.removeSelectedItems(index);\n } else {\n this.addSelectedItems(index);\n }\n return;\n }\n\n this.clearAllSelections();\n this.addSelectedItems(index);\n }\n\n @HostListener('document:mouseup')\n public mouseup(): void {\n this.dragSelecting = false;\n }\n\n @HostListener('keyup', ['$event'])\n public keyup(event: KeyboardEvent): void {\n if (event.code.toLowerCase().includes('shift')) {\n this.isShiftHold = false;\n\n return;\n }\n\n if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n this.isMetaHold = false;\n }\n }\n\n public mouseover(index: number): void {\n if (!this.dragSelecting || this.isMetaHold || this.isShiftHold) {\n return;\n }\n\n const min = Math.min(this.dragAnchorIndex, index);\n const max = Math.max(this.dragAnchorIndex, index);\n\n const indices: number[] = [];\n for (let i = min; i <= max; i++) { indices.push(i); }\n\n this.clearAllSelections();\n this.addSelectedItems(indices);\n }\n\n private keydown(event: KeyboardEvent): void {\n if ((document.activeElement !== this.listbox?.nativeElement) && (document.activeElement !== this.listbox?.nativeElement.childNodes[0])) {\n return;\n }\n\n if (event.code.toLowerCase().includes('shift')) {\n this.isShiftHold = true;\n this.lastSelectedItemIndexOnShiftHold = this.lastSelectedItemIndex;\n }\n\n if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n this.isMetaHold = true;\n }\n\n if (event.code.toLowerCase().includes('arrowdown')) {\n event.preventDefault();\n\n this.documentArrowsKeyup(true);\n\n return;\n }\n\n if (event.code.toLowerCase().includes('arrowup')) {\n event.preventDefault();\n\n this.documentArrowsKeyup(false);\n\n return;\n }\n\n this.documentKeyup(event);\n }\n\n private documentArrowsKeyup(isDownArrow: boolean): void {\n const dataLength = this.options.data.length;\n\n let newIndex = isDownArrow ? this.lastSelectedItemIndex + 1 : this.lastSelectedItemIndex - 1;\n\n if (this.isShiftHold) {\n if (newIndex < 0 || newIndex === dataLength) {\n return;\n }\n\n if (this.isIndexSelected(newIndex)) {\n const indexForDeselect = isDownArrow ? newIndex - 1 : newIndex + 1;\n this.removeSelectedItems(indexForDeselect);\n } else {\n this.addSelectedItems(newIndex);\n }\n\n this.lastSelectedItemIndex = newIndex;\n this.scrollIndexIntoView(newIndex);\n\n return;\n }\n\n this.clearAllSelections();\n\n newIndex = newIndex < 0 ? 0 : newIndex;\n newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;\n\n this.addSelectedItems(newIndex);\n this.scrollIndexIntoView(newIndex);\n }\n\n private documentKeyup(event: KeyboardEvent): void {\n if (this.isMetaHold && event.key.toLowerCase() === 'a') {\n event.preventDefault();\n\n const itemsToAdd = [...this.options.data.keys()];\n this.addSelectedItems(itemsToAdd);\n\n return;\n }\n\n this.documentKeyupValue = this.documentKeyupValue + event.key.toLowerCase();\n\n let newIndex: number | null = null;\n\n for (let i = 0; i < this.options.data.length; i++) {\n const subLabel = this.options.data[i].label.substring(0, this.documentKeyupValue.length).toLowerCase();\n\n if (subLabel === this.documentKeyupValue) {\n newIndex = i;\n\n break;\n }\n }\n\n if (newIndex !== null) {\n this.clearAllSelections();\n this.addSelectedItems(newIndex);\n this.scrollIndexIntoView(newIndex);\n }\n }\n\n private addSelectedItems(index: number | number[]) {\n const isIndexNumber = typeof index === 'number';\n\n this.lastSelectedItemIndex = isIndexNumber ? index : index.slice(-1)[0];\n\n if (isIndexNumber) {\n this.selectedItems[index] = this.options.data[index];\n } else {\n for (let i of index) {\n this.selectedItems[i] = this.options.data[i];\n }\n }\n\n if (this.control) {\n this.control.setValue(this.selectedItems.filter(value => value !== null));\n }\n\n this.selectChange.emit(this.selectedItems.filter(Boolean) as IpiSelectData[]);\n\n this.changeDetectorRef.detectChanges();\n }\n\n private removeSelectedItems(index: number | number[]) {\n const isIndexNumber = typeof index === 'number';\n\n if (isIndexNumber) {\n this.selectedItems[index] = null;\n } else {\n for (let i of index) {\n this.selectedItems[i] = null;\n }\n }\n\n if (this.control) {\n this.control?.setValue(this.selectedItems.filter(value => value !== null));\n }\n\n this.selectChange.emit(this.selectedItems.filter(Boolean) as IpiSelectData[]);\n\n this.changeDetectorRef.detectChanges();\n }\n\n private clearAllSelections(): void {\n this.selectedItems = new Array(this.options.data.length).fill(null);\n\n if (this.control) {\n this.control.setValue([]);\n }\n\n this.selectChange.emit([]);\n }\n\n public isIndexSelected(index: number): boolean {\n return !!this.selectedItems[index];\n }\n\n public trackByIndex(index: number): number { return index; }\n\n private scrollIndexIntoView(index: number): void {\n if (this.virtualScroll && this.cdkViewport) {\n this.cdkViewport.scrollToIndex(index, 'smooth');\n return;\n }\n\n const container = this.listbox?.nativeElement;\n\n if (!container) {\n return;\n }\n\n const target = container.querySelector(`.item[value=\"${index}\"]`);\n target?.scrollIntoView({ block: 'nearest' });\n }\n\n public shouldShowViewportScroll(): boolean {\n if (!this.virtualScroll) {\n return false;\n }\n\n const renderedCount = this.options?.data ? this.options.data.length : 0;\n\n const rowsHeight = this.itemSize * renderedCount;\n\n return rowsHeight > this.listHeight;\n }\n\n private getControl(): AbstractControl | null {\n if (this.options.formGroup && this.options.formControlName) {\n this.controlSubscription = this.options.formGroup.controls[this.options.formControlName].valueChanges.subscribe(() => {\n if (!this.control) {\n return;\n }\n \n this.checkIfControlInvalid(this.control);\n\n this.getControlError(this.control);\n });\n\n return this.options.formGroup.get(this.options.formControlName);\n }\n \n return null;\n }\n\n private checkIfControlInvalid(control: AbstractControl): void {\n this.controlInvalid = control.invalid;\n }\n\n private getControlError(control: AbstractControl): void {\n this.controlError = '';\n\n const options = this.options!;\n\n if (options.errors && this.controlInvalid) {\n for (const error in options.errors) {\n if (control.hasError(error)) {\n this.controlError = options.errors[error];\n\n return;\n }\n }\n\n }\n }\n\n}\n","@if (options) {\n <div class=\"listbox-header\">\n @if (options.label) {\n <label>{{ options.label }}</label>\n }\n\n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n <div class=\"item\"\n *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n [attr.value]=\"i\"\n [style.height.px]=\"itemSize\"\n [style.line-height.px]=\"itemSize\"\n [class.selected]=\"isIndexSelected(i)\"\n (mousedown)=\"mousedown(i)\"\n (mouseover)=\"mouseover(i)\">\n {{ data.label }}\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"container-inner\">\n @for (data of options.data; track data.value) {\n <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n {{ data.label }}\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"footer\" [class.error]=\"controlInvalid\">\n {{ controlError }}\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"apexara-ng-components-listbox.mjs","sources":["../../../../projects/apexara/ng-components/listbox/src/listbox.component.ts","../../../../projects/apexara/ng-components/listbox/src/listbox.component.html","../../../../projects/apexara/ng-components/listbox/apexara-ng-components-listbox.ts"],"sourcesContent":["import { Component, SimpleChanges, ViewChild, ElementRef, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { FormGroup, AbstractControl } from '@angular/forms';\n\nimport { Subscription, debounceTime, fromEvent, tap } from 'rxjs';\n\nimport { ApexSelectData } from '@apexara/ng-components/select';\nimport { ApexControlErrors } from '@apexara/ng-components/input';\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexListBoxOptions {\n data: ApexSelectData[];\n label?: string;\n tooltip?: string;\n formGroup?: FormGroup;\n formControlName?: string;\n errors?: ApexControlErrors;\n}\n\n@Component({\n standalone: true,\n selector: 'apex-listbox',\n templateUrl: './listbox.component.html',\n styleUrls: ['./listbox.component.css'],\n imports: [\n ScrollingModule,\n ApexTooltipDirective,\n ]\n})\n\nexport class ApexListboxComponent {\n\n constructor (\n private elementRef: ElementRef,\n private changeDetectorRef: ChangeDetectorRef) {\n }\n\n @ViewChild('listbox') listbox: ElementRef<HTMLDivElement> | null = null;\n @ViewChild(CdkVirtualScrollViewport) cdkViewport?: CdkVirtualScrollViewport;\n\n @Input() options!: ApexListBoxOptions;\n\n @Input() virtualScroll: boolean = false;\n @Input() itemSize: number = 28; // Must match CSS row height of an item\n\n @Output() selectChange = new EventEmitter<ApexSelectData[]>();\n\n public tooltipPosition = TooltipPosition;\n\n public controlError!: string;\n public controlInvalid = false;\n public control: AbstractControl | null = null; \n public controlSubscription: Subscription | null = null;\n\n private documentKeyupValue = '';\n private documentKeyupValueResetTime = 1000;\n private documentKeyDownSubscription!: Subscription;\n\n private isMetaHold = false;\n private isShiftHold = false;\n\n private listHeight: number = 224; // Default matches CSS\n\n private lastSelectedItemIndex = 0;\n private lastSelectedItemIndexOnShiftHold = 0;\n\n // Drag selection state\n private dragSelecting = false;\n private dragAnchorIndex = 0;\n\n private selectedItems!: (ApexSelectData | null)[];\n\n public ngOnInit(): void {\n this.control = this.getControl();\n \n this.selectedItems = new Array(this.options.data.length).fill(null);\n\n if (!this.virtualScroll) {\n this.changeDetectorRef.detach();\n }\n\n this.changeDetectorRef.detectChanges();\n }\n\n public ngAfterViewInit(): void {\n this.documentKeyDownSubscription = fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n .pipe(\n tap(event => { this.keydown(event) }),\n debounceTime(this.documentKeyupValueResetTime))\n .subscribe(() => { this.documentKeyupValue = '' });\n }\n\n public ngOnDestroy(): void {\n this.documentKeyDownSubscription.unsubscribe();\n\n if (this.controlSubscription) {\n this.controlSubscription?.unsubscribe();\n }\n }\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes['options'] && changes['options'].currentValue['data'] && this.selectedItems) {\n this.selectedItems.length = 0;\n\n // Refresh virtual viewport if enabled\n setTimeout(() => {\n this.cdkViewport?.checkViewportSize();\n this.changeDetectorRef.detectChanges();\n });\n }\n }\n\n public mousedown(index: number): void {\n this.dragSelecting = true;\n this.dragAnchorIndex = index;\n\n if (this.isShiftHold) {\n const max = Math.max(index, this.lastSelectedItemIndexOnShiftHold);\n const min = Math.min(index, this.lastSelectedItemIndexOnShiftHold);\n\n const indices = [] as number[];\n\n for (let i = min; i <= max; i++) { indices.push(i); }\n\n this.clearAllSelections();\n this.addSelectedItems(indices);\n return;\n }\n\n if (this.isMetaHold) {\n if (this.isIndexSelected(index)) {\n this.removeSelectedItems(index);\n } else {\n this.addSelectedItems(index);\n }\n return;\n }\n\n this.clearAllSelections();\n this.addSelectedItems(index);\n }\n\n @HostListener('document:mouseup')\n public mouseup(): void {\n this.dragSelecting = false;\n }\n\n @HostListener('keyup', ['$event'])\n public keyup(event: KeyboardEvent): void {\n if (event.code.toLowerCase().includes('shift')) {\n this.isShiftHold = false;\n\n return;\n }\n\n if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n this.isMetaHold = false;\n }\n }\n\n public mouseover(index: number): void {\n if (!this.dragSelecting || this.isMetaHold || this.isShiftHold) {\n return;\n }\n\n const min = Math.min(this.dragAnchorIndex, index);\n const max = Math.max(this.dragAnchorIndex, index);\n\n const indices: number[] = [];\n for (let i = min; i <= max; i++) { indices.push(i); }\n\n this.clearAllSelections();\n this.addSelectedItems(indices);\n }\n\n private keydown(event: KeyboardEvent): void {\n if ((document.activeElement !== this.listbox?.nativeElement) && (document.activeElement !== this.listbox?.nativeElement.childNodes[0])) {\n return;\n }\n\n if (event.code.toLowerCase().includes('shift')) {\n this.isShiftHold = true;\n this.lastSelectedItemIndexOnShiftHold = this.lastSelectedItemIndex;\n }\n\n if (event.code.toLowerCase().includes('meta') || event.code.toLowerCase().includes('control')) {\n this.isMetaHold = true;\n }\n\n if (event.code.toLowerCase().includes('arrowdown')) {\n event.preventDefault();\n\n this.documentArrowsKeyup(true);\n\n return;\n }\n\n if (event.code.toLowerCase().includes('arrowup')) {\n event.preventDefault();\n\n this.documentArrowsKeyup(false);\n\n return;\n }\n\n this.documentKeyup(event);\n }\n\n private documentArrowsKeyup(isDownArrow: boolean): void {\n const dataLength = this.options.data.length;\n\n let newIndex = isDownArrow ? this.lastSelectedItemIndex + 1 : this.lastSelectedItemIndex - 1;\n\n if (this.isShiftHold) {\n if (newIndex < 0 || newIndex === dataLength) {\n return;\n }\n\n if (this.isIndexSelected(newIndex)) {\n const indexForDeselect = isDownArrow ? newIndex - 1 : newIndex + 1;\n this.removeSelectedItems(indexForDeselect);\n } else {\n this.addSelectedItems(newIndex);\n }\n\n this.lastSelectedItemIndex = newIndex;\n this.scrollIndexIntoView(newIndex);\n\n return;\n }\n\n this.clearAllSelections();\n\n newIndex = newIndex < 0 ? 0 : newIndex;\n newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;\n\n this.addSelectedItems(newIndex);\n this.scrollIndexIntoView(newIndex);\n }\n\n private documentKeyup(event: KeyboardEvent): void {\n if (this.isMetaHold && event.key.toLowerCase() === 'a') {\n event.preventDefault();\n\n const itemsToAdd = [...this.options.data.keys()];\n this.addSelectedItems(itemsToAdd);\n\n return;\n }\n\n this.documentKeyupValue = this.documentKeyupValue + event.key.toLowerCase();\n\n let newIndex: number | null = null;\n\n for (let i = 0; i < this.options.data.length; i++) {\n const subLabel = this.options.data[i].label.substring(0, this.documentKeyupValue.length).toLowerCase();\n\n if (subLabel === this.documentKeyupValue) {\n newIndex = i;\n\n break;\n }\n }\n\n if (newIndex !== null) {\n this.clearAllSelections();\n this.addSelectedItems(newIndex);\n this.scrollIndexIntoView(newIndex);\n }\n }\n\n private addSelectedItems(index: number | number[]) {\n const isIndexNumber = typeof index === 'number';\n\n this.lastSelectedItemIndex = isIndexNumber ? index : index.slice(-1)[0];\n\n if (isIndexNumber) {\n this.selectedItems[index] = this.options.data[index];\n } else {\n for (let i of index) {\n this.selectedItems[i] = this.options.data[i];\n }\n }\n\n if (this.control) {\n this.control.setValue(this.selectedItems.filter(value => value !== null));\n }\n\n this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n this.changeDetectorRef.detectChanges();\n }\n\n private removeSelectedItems(index: number | number[]) {\n const isIndexNumber = typeof index === 'number';\n\n if (isIndexNumber) {\n this.selectedItems[index] = null;\n } else {\n for (let i of index) {\n this.selectedItems[i] = null;\n }\n }\n\n if (this.control) {\n this.control?.setValue(this.selectedItems.filter(value => value !== null));\n }\n\n this.selectChange.emit(this.selectedItems.filter(Boolean) as ApexSelectData[]);\n\n this.changeDetectorRef.detectChanges();\n }\n\n private clearAllSelections(): void {\n this.selectedItems = new Array(this.options.data.length).fill(null);\n\n if (this.control) {\n this.control.setValue([]);\n }\n\n this.selectChange.emit([]);\n }\n\n public isIndexSelected(index: number): boolean {\n return !!this.selectedItems[index];\n }\n\n public trackByIndex(index: number): number { return index; }\n\n private scrollIndexIntoView(index: number): void {\n if (this.virtualScroll && this.cdkViewport) {\n this.cdkViewport.scrollToIndex(index, 'smooth');\n return;\n }\n\n const container = this.listbox?.nativeElement;\n\n if (!container) {\n return;\n }\n\n const target = container.querySelector(`.item[value=\"${index}\"]`);\n target?.scrollIntoView({ block: 'nearest' });\n }\n\n public shouldShowViewportScroll(): boolean {\n if (!this.virtualScroll) {\n return false;\n }\n\n const renderedCount = this.options?.data ? this.options.data.length : 0;\n\n const rowsHeight = this.itemSize * renderedCount;\n\n return rowsHeight > this.listHeight;\n }\n\n private getControl(): AbstractControl | null {\n if (this.options.formGroup && this.options.formControlName) {\n this.controlSubscription = this.options.formGroup.controls[this.options.formControlName].valueChanges.subscribe(() => {\n if (!this.control) {\n return;\n }\n \n this.checkIfControlInvalid(this.control);\n\n this.getControlError(this.control);\n });\n\n return this.options.formGroup.get(this.options.formControlName);\n }\n \n return null;\n }\n\n private checkIfControlInvalid(control: AbstractControl): void {\n this.controlInvalid = control.invalid;\n }\n\n private getControlError(control: AbstractControl): void {\n this.controlError = '';\n\n const options = this.options!;\n\n if (options.errors && this.controlInvalid) {\n for (const error in options.errors) {\n if (control.hasError(error)) {\n this.controlError = options.errors[error];\n\n return;\n }\n }\n\n }\n }\n\n}\n","@if (options) {\n <div class=\"listbox-header\">\n @if (options.label) {\n <label>{{ options.label }}</label>\n }\n\n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n\n <div #listbox tabindex=\"0\" class=\"container\" [class.error]=\"controlInvalid\">\n @if (virtualScroll) {\n <cdk-virtual-scroll-viewport class=\"cdk-listbox-viewport\" [itemSize]=\"itemSize\" [style.overflow-y]=\"shouldShowViewportScroll() ? 'auto' : 'hidden'\">\n <div class=\"item\"\n *cdkVirtualFor=\"let data of options.data; let i = index; trackBy: trackByIndex\"\n [attr.value]=\"i\"\n [style.height.px]=\"itemSize\"\n [style.line-height.px]=\"itemSize\"\n [class.selected]=\"isIndexSelected(i)\"\n (mousedown)=\"mousedown(i)\"\n (mouseover)=\"mouseover(i)\">\n {{ data.label }}\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div class=\"container-inner\">\n @for (data of options.data; track data.value) {\n <div class=\"item\" [attr.value]=\"$index\" [style.height.px]=\"itemSize\" [style.line-height.px]=\"itemSize\" [class.selected]=\"isIndexSelected($index)\" (mousedown)=\"mousedown($index)\" (mouseover)=\"mouseover($index)\">\n {{ data.label }}\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"footer\" [class.error]=\"controlInvalid\">\n {{ controlError }}\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import * as i0 from '@angular/core';
|
|
|
3
3
|
import { EventEmitter, Output, Input, Component } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
-
import { TooltipPosition,
|
|
6
|
+
import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
|
|
7
7
|
|
|
8
|
-
class
|
|
8
|
+
class ApexRadioButtonComponent {
|
|
9
9
|
constructor() {
|
|
10
10
|
this.selectChange = new EventEmitter();
|
|
11
11
|
// random ID for name of the radiobutton so no collision happen with other radio components
|
|
@@ -15,17 +15,17 @@ class IpiRadioButtonComponent {
|
|
|
15
15
|
onChange(item) {
|
|
16
16
|
this.selectChange.emit(item);
|
|
17
17
|
}
|
|
18
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type:
|
|
18
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexRadioButtonComponent, isStandalone: true, selector: "apex-radio-button", inputs: { options: "options" }, outputs: { selectChange: "selectChange" }, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </label>\n }\n </div>\n }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }] }); }
|
|
20
20
|
}
|
|
21
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
21
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexRadioButtonComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: '
|
|
23
|
+
args: [{ selector: 'apex-radio-button', imports: [
|
|
24
24
|
NgClass,
|
|
25
25
|
FormsModule,
|
|
26
26
|
ReactiveFormsModule,
|
|
27
|
-
|
|
28
|
-
], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [
|
|
27
|
+
ApexTooltipDirective,
|
|
28
|
+
], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </label>\n }\n </div>\n }\n}\n", styles: [".container{display:flex;flex-direction:column}.inline{flex-direction:row}.radio-button{display:flex;align-items:center;cursor:pointer}.container.inline label{margin-right:16px}.radio-button.disabled{opacity:.5;cursor:not-allowed}input[type=radio]{width:20px;height:20px;background-color:var(--apex-radio-button-background-color, #FFFFFF);cursor:pointer;transition:border .12s ease-in-out;appearance:none;-webkit-appearance:none;border:2px solid var(--apex-radio-button-unchecked-border-color, #E9E9E9);border-radius:50%;margin:0 8px 0 0}input[type=radio]:focus{outline:var(--apex-radio-button-outline-color, none)}input[type=radio]:checked{border:5px solid var(--apex-radio-button-checked-border-color, #F96138)}.radio-button.disabled input[type=radio]{border:5px solid var(--apex-radio-button-disabled-border-color, #E7E7E7)}.radio-button span{color:var(--apex-radio-button-text-color, #5D6068);font-size:14px;margin-right:4px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-radio-button-tooltip-icon-fill, transparent);stroke:var(--apex-radio-button-tooltip-icon-stroke, #C6C6C6)}\n"] }]
|
|
29
29
|
}], propDecorators: { options: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], selectChange: [{
|
|
@@ -36,5 +36,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
36
36
|
* Generated bundle index. Do not edit.
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
|
-
export {
|
|
39
|
+
export { ApexRadioButtonComponent };
|
|
40
40
|
//# sourceMappingURL=apexara-ng-components-radiobutton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"apexara-ng-components-radiobutton.mjs","sources":["../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.ts","../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.html","../../../../projects/apexara/ng-components/radiobutton/apexara-ng-components-radiobutton.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport {
|
|
1
|
+
{"version":3,"file":"apexara-ng-components-radiobutton.mjs","sources":["../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.ts","../../../../projects/apexara/ng-components/radiobutton/src/radio-button.component.html","../../../../projects/apexara/ng-components/radiobutton/apexara-ng-components-radiobutton.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { ApexTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface ApexRadioData {\n label: string;\n value: any;\n tooltip?: string;\n isHover?: boolean;\n}\n\nexport interface ApexRadioButtonOptions {\n checked?: number;\n inline?: boolean;\n data: ApexRadioData[];\n formGroup?: FormGroup;\n formControlName?: string;\n}\n\n@Component({\n selector: 'apex-radio-button',\n templateUrl: './radio-button.component.html',\n styleUrls: ['./radio-button.component.css'],\n imports: [\n NgClass,\n FormsModule,\n ReactiveFormsModule,\n ApexTooltipDirective,\n ]\n})\n\nexport class ApexRadioButtonComponent {\n\n @Input() options!: ApexRadioButtonOptions;\n\n @Output() selectChange = new EventEmitter<ApexRadioData>();\n\n // random ID for name of the radiobutton so no collision happen with other radio components\n public buttonGroupId = Math.random();\n\n public tooltipPositionAbove = TooltipPosition.Above;\n\n public onChange(item: ApexRadioData): void {\n this.selectChange.emit(item);\n }\n\n}\n","@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item) {\n <label class=\"radio-button\" [ngClass]=\"{ 'disabled': options.formGroup.controls[options.formControlName].disabled }\">\n <input type=\"radio\" [value]=\"item.value\" [formControlName]=\"options.formControlName\"/>\n \n <span>{{ item.label }}</span>\n </label>\n }\n </div>\n } @else {\n <div class=\"container\" [ngClass]=\"{ 'inline': options.inline }\">\n @for (item of options.data; track item; let i = $index) {\n <label class=\"radio-button\">\n <input type=\"radio\" [name]=\"buttonGroupId\" [checked]=\"i === options.checked\" (change)=\"onChange(item)\">\n\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"item.tooltip\" [tooltipPosition]=\"tooltipPositionAbove\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </label>\n }\n </div>\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAiCa,wBAAwB,CAAA;AAZrC,IAAA,WAAA,GAAA;AAgBY,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAiB;;AAGnD,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE;AAE7B,QAAA,IAAA,CAAA,oBAAoB,GAAG,eAAe,CAAC,KAAK;AAMpD,IAAA;AAJQ,IAAA,QAAQ,CAAC,IAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;IAC9B;8GAbW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjCrC,gvDAgCA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNI,OAAO,mFACP,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,iBAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIX,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EAGpB;wBACP,OAAO;wBACP,WAAW;wBACX,mBAAmB;wBACnB,oBAAoB;AACrB,qBAAA,EAAA,QAAA,EAAA,gvDAAA,EAAA,MAAA,EAAA,CAAA,glCAAA,CAAA,EAAA;;sBAKA;;sBAEA;;;AErCH;;AAEG;;;;"}
|
|
@@ -7,14 +7,14 @@ import { RouterLink } from '@angular/router';
|
|
|
7
7
|
import * as i3 from '@angular/cdk/scrolling';
|
|
8
8
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
9
9
|
import { fromEvent, tap, debounceTime } from 'rxjs';
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
10
|
+
import { ApexChipComponent } from '@apexara/ng-components/chip';
|
|
11
|
+
import { ApexImageComponent } from '@apexara/ng-components/image';
|
|
12
|
+
import { ApexCheckboxComponent } from '@apexara/ng-components/checkbox';
|
|
13
13
|
import * as i1 from '@apexara/ng-components/services';
|
|
14
14
|
import { MobileOS } from '@apexara/ng-components/services';
|
|
15
|
-
import { TooltipPosition,
|
|
15
|
+
import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
|
|
16
16
|
|
|
17
|
-
class
|
|
17
|
+
class ApexSelectComponent {
|
|
18
18
|
constructor(osService, elementRef, iterableDiffers, changeDetectorRef) {
|
|
19
19
|
this.osService = osService;
|
|
20
20
|
this.elementRef = elementRef;
|
|
@@ -573,22 +573,22 @@ class IpiSelectComponent {
|
|
|
573
573
|
window.removeEventListener('touchmove', this.wheelListener);
|
|
574
574
|
this.scrollBlockersAttached = false;
|
|
575
575
|
}
|
|
576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
577
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiSelectComponent, isStandalone: true, selector: "ipi-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n @if (options.label !== '') {\n <div class=\"header\">\n <div class=\"label-wrapper\">\n <label>{{ options.label }}</label>\n \n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n \n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <ipi-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></ipi-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <ipi-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</ipi-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </ipi-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--ipi-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--ipi-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--ipi-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-select-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--ipi-select-input-background-color, #ffffff00);border:solid var(--ipi-select-input-border-color, #E9E9E9);border-width:var(--ipi-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--ipi-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--ipi-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}ipi-img{width:16px;height:16px}ipi-img.prefix path{fill:var(--ipi-select-icon-prefix-fill, #C6C6C6);stroke:var(--ipi-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--ipi-chip-font-size: var(--ipi-select-chip-font-size, 10px);--ipi-chip-color: var(--ipi-select-chip-color, #FFFFFF);--ipi-chip-background-color: var(--ipi-select-chip-background-color, #0B1222);--ipi-chip-icon-color: var(--ipi-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--ipi-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--ipi-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--ipi-select-arrow-color, #5D6068);border-left:2px solid var(--ipi-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--ipi-select-arrow-checked-color, #F96138);border-left:2px solid var(--ipi-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--ipi-select-invalid-color, #F96138);border-width:var(--ipi-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--ipi-select-invalid-color, #F96138)}.input-field-wrapper ipi-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--ipi-select-dropdown-border-color, #E9E9E9);background-color:var(--ipi-select-dropdown-background-color, #FFFFFF);box-shadow:var(--ipi-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--ipi-checkbox-text-color: var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values ipi-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--ipi-select-options-divider-height, 1px);background-color:var(--ipi-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: IpiChipComponent, selector: "ipi-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IpiCheckboxComponent, selector: "ipi-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
|
|
576
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
577
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n @if (options.label !== '') {\n <div class=\"header\">\n <div class=\"label-wrapper\">\n <label>{{ options.label }}</label>\n \n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n \n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "ariaLabel"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
|
|
578
578
|
}
|
|
579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type:
|
|
579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, decorators: [{
|
|
580
580
|
type: Component,
|
|
581
|
-
args: [{ selector: '
|
|
581
|
+
args: [{ selector: 'apex-select', imports: [
|
|
582
582
|
NgClass,
|
|
583
583
|
RouterLink,
|
|
584
584
|
FormsModule,
|
|
585
585
|
ScrollingModule,
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
586
|
+
ApexChipComponent,
|
|
587
|
+
ApexImageComponent,
|
|
588
|
+
ApexTooltipDirective,
|
|
589
589
|
ReactiveFormsModule,
|
|
590
|
-
|
|
591
|
-
], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n @if (options.label !== '') {\n <div class=\"header\">\n <div class=\"label-wrapper\">\n <label>{{ options.label }}</label>\n \n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n \n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <ipi-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></ipi-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <ipi-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</ipi-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <ipi-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </ipi-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--ipi-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--ipi-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--ipi-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-select-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--ipi-select-input-background-color, #ffffff00);border:solid var(--ipi-select-input-border-color, #E9E9E9);border-width:var(--ipi-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--ipi-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--ipi-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}ipi-img{width:16px;height:16px}ipi-img.prefix path{fill:var(--ipi-select-icon-prefix-fill, #C6C6C6);stroke:var(--ipi-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--ipi-chip-font-size: var(--ipi-select-chip-font-size, 10px);--ipi-chip-color: var(--ipi-select-chip-color, #FFFFFF);--ipi-chip-background-color: var(--ipi-select-chip-background-color, #0B1222);--ipi-chip-icon-color: var(--ipi-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--ipi-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--ipi-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--ipi-select-arrow-color, #5D6068);border-left:2px solid var(--ipi-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--ipi-select-arrow-checked-color, #F96138);border-left:2px solid var(--ipi-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--ipi-select-invalid-color, #F96138);border-width:var(--ipi-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--ipi-select-invalid-color, #F96138)}.input-field-wrapper ipi-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--ipi-select-dropdown-border-color, #E9E9E9);background-color:var(--ipi-select-dropdown-background-color, #FFFFFF);box-shadow:var(--ipi-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--ipi-checkbox-text-color: var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--ipi-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values ipi-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--ipi-select-options-divider-height, 1px);background-color:var(--ipi-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
590
|
+
ApexCheckboxComponent,
|
|
591
|
+
], template: "@if (options) {\n @if (options.formGroup && options.formControlName) {\n <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n @if (options.label !== '') {\n <div class=\"header\">\n <div class=\"label-wrapper\">\n <label>{{ options.label }}</label>\n \n @if (options.tooltip) {\n <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n </g>\n </svg>\n }\n </div>\n \n @if (options.helperText) {\n <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n }\n </div>\n }\n\n <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n @if (options.prefixImg) {\n <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [ariaLabel]=\"'Select prefix icon'\"></apex-img>\n }\n\n @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n @if (options.counterAsValue) {\n <span class=\"multiple-count\">\n {{ this.showMultipleCount() }} selected\n </span>\n } @else {\n <div class=\"chips\">\n @for (data of options.data; track $index) {\n @if (isMultipleSelected(data)) {\n <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n }\n }\n </div>\n }\n }\n\n @if (options.searchable) {\n <!-- used for formControl data binding and reactivness -->\n <input #hiddenInput\n class=\"hidden\"\n [formControlName]=\"options.formControlName\">\n\n <!-- used for searching and data displaying -->\n <input #input\n [placeholder]=\"getPlaceholder()\"\n [readOnly]=\"!options.searchable\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n [disabled]=\"checkIfControlDisabled()\"\n (keydown)=\"handleKeydown($event)\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n (input)=\"onSearch(input.value, true)\"\n autocorrect=\"off\"\n spellcheck=\"false\">\n } @else {\n <input #input\n readonly\n [disabled]=\"checkIfControlDisabled()\"\n [placeholder]=\"getPlaceholder()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n [formControlName]=\"options.formControlName\"\n [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n (ngModelChange)=\"setVisibleValue($event)\"/>\n }\n \n <div class=\"arrow-wrapper\">\n <div class=\"arrow\" [class]=\"{ checked: this.isDropdown }\"></div>\n </div>\n </div>\n\n @if (isDropdown) {\n <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx\" class=\"dropdown\" #dropdown>\n <div class=\"option\"\n *cdkVirtualFor=\"let data of filteredData;\"\n [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n @if (options.multiple) {\n <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n <div class=\"multiple-checkbox-container\">\n <span>{{ data.label }}</span>\n @if (data.description) { <span>{{ data.description }}</span> }\n </div>\n </apex-checkbox>\n } @else {\n {{ data.label }}\n }\n </div>\n @if (filteredData.length === 0) {\n <div class=\"option disabled\">No options to select from.</div>\n }\n </cdk-virtual-scroll-viewport>\n }\n </div>\n }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
592
592
|
}], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
|
|
593
593
|
type: ViewChild,
|
|
594
594
|
args: ['input']
|
|
@@ -616,5 +616,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
616
616
|
* Generated bundle index. Do not edit.
|
|
617
617
|
*/
|
|
618
618
|
|
|
619
|
-
export {
|
|
619
|
+
export { ApexSelectComponent };
|
|
620
620
|
//# sourceMappingURL=apexara-ng-components-select.mjs.map
|