@rlucan/ui 19.0.2 → 19.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rlucan-ui.mjs +8 -10
- package/fesm2022/rlucan-ui.mjs.map +1 -1
- package/lib/select/select.component.d.ts +4 -4
- package/package.json +1 -1
- package/scss/ui-defaults.scss +3 -2
- package/ui.scss +15 -7
package/fesm2022/rlucan-ui.mjs
CHANGED
|
@@ -740,20 +740,18 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
740
740
|
this.translateService = translateService;
|
|
741
741
|
this.multiple = false;
|
|
742
742
|
this.options = [];
|
|
743
|
+
this.optionFormatter = (o) => this.displayAttribute ? o[this.displayAttribute] : o;
|
|
744
|
+
this.panelClass = '';
|
|
743
745
|
this.allowEmptySelection = false;
|
|
744
746
|
this.lastCount = -1;
|
|
745
|
-
this.overoption = false;
|
|
746
747
|
this.optionToValue = (o) => this.valueAttribute ? o[this.valueAttribute] : o;
|
|
747
748
|
}
|
|
748
749
|
ngOnInit() {
|
|
749
750
|
super.ngOnInit();
|
|
750
|
-
if (this.optionFormatter === undefined) {
|
|
751
|
-
this.optionFormatter = o => this.displayAttribute ? o[this.displayAttribute] : o;
|
|
752
|
-
}
|
|
753
751
|
if (this.multiple && this.componentFormControl) {
|
|
754
752
|
this.lastCount = this.componentFormControl.value.length;
|
|
755
753
|
this.componentFormControl.valueChanges.subscribe(v => {
|
|
756
|
-
if (v.length === 1 && this.lastCount === 0 && this.overoption) {
|
|
754
|
+
if (v.length === 1 && this.lastCount === 0 && this.overoption !== undefined) {
|
|
757
755
|
this.select.selectionChange.emit(this.optionToValue(v));
|
|
758
756
|
this.select.close();
|
|
759
757
|
}
|
|
@@ -766,14 +764,14 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
766
764
|
}
|
|
767
765
|
ngOnChanges(changes) {
|
|
768
766
|
super.ngOnChanges(changes);
|
|
769
|
-
if (changes
|
|
767
|
+
if (changes['options'] && this.componentFormControl && this.trackBy) {
|
|
770
768
|
this.componentFormControl.setValue(this.mapValues(this.componentFormControl.value), { emitEvent: false });
|
|
771
769
|
}
|
|
772
770
|
}
|
|
773
771
|
mapValues(src) {
|
|
774
772
|
if (src && this.trackBy && this.options) {
|
|
775
773
|
if (this.multiple) {
|
|
776
|
-
return this.options.filter(o => src.find(v => v[this.trackBy] === o[this.trackBy]));
|
|
774
|
+
return this.options.filter(o => src.find((v) => v[this.trackBy] === o[this.trackBy]));
|
|
777
775
|
}
|
|
778
776
|
else {
|
|
779
777
|
return this.options.find(o => o[this.trackBy] === src[this.trackBy]);
|
|
@@ -793,7 +791,7 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
793
791
|
clearAll() {
|
|
794
792
|
this.componentFormControl.setValue([]);
|
|
795
793
|
}
|
|
796
|
-
setDisabledState(
|
|
794
|
+
setDisabledState() {
|
|
797
795
|
}
|
|
798
796
|
writeValue(obj) {
|
|
799
797
|
if (!this.ngControl) {
|
|
@@ -807,11 +805,11 @@ class SelectComponent extends UiSimpleComponent {
|
|
|
807
805
|
}
|
|
808
806
|
}
|
|
809
807
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
810
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: SelectComponent, isStandalone: false, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection", trackBy: "trackBy" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"
|
|
808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: SelectComponent, isStandalone: false, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection", trackBy: "trackBy" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"\r\n [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\"></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\"\r\n [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{ resetText }}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\">\r\n\r\n <div class=\"over-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n (mouseleave)=\"overoption = undefined\">\r\n </div>\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n (mouseleave)=\"overoption = undefined\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{option:o}\"></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{ optionFormatter(o) }}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\"\r\n (click)=\"selectOption(o, select)\">north_west\r\n </mat-icon>\r\n </div>\r\n\r\n <mat-icon class=\"select-one\" [ngClass]=\"{visible: overoption === options.indexOf(o)}\"\r\n *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">\r\n north_west\r\n </mat-icon>\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\"\r\n [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\"\r\n (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\"\r\n (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\"\r\n [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\"\r\n [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\"\r\n (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n </mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-mdc-select-panel mat-option{position:relative}::ng-deep .mat-mdc-select-panel mat-option .select-one{position:absolute;right:0;display:none}::ng-deep .mat-mdc-select-panel mat-option .select-one.visible{display:block}::ng-deep .mat-mdc-select-panel .over-container{position:absolute;inset:0 0 0 3em}::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
|
|
811
809
|
}
|
|
812
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, decorators: [{
|
|
813
811
|
type: Component,
|
|
814
|
-
args: [{ selector: 'ui-select', standalone: false, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"
|
|
812
|
+
args: [{ selector: 'ui-select', standalone: false, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n <mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"\r\n [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\"\r\n [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\"></ng-template>\r\n </mat-select-trigger>\r\n\r\n <mat-select-trigger *ngIf=\"triggerFormatter\"\r\n [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n <mat-option *ngIf=\"resetText\">{{ resetText }}</mat-option>\r\n\r\n <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\">\r\n\r\n <div class=\"over-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n (mouseleave)=\"overoption = undefined\">\r\n </div>\r\n\r\n <div class=\"option-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n (mouseleave)=\"overoption = undefined\">\r\n\r\n <ng-container *ngIf=\"optionTemplateRef\">\r\n <ng-template [ngTemplateOutlet]=\"optionTemplateRef\"\r\n [ngTemplateOutletContext]=\"{option:o}\"></ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!optionTemplateRef\">\r\n {{ optionFormatter(o) }}\r\n </ng-container>\r\n\r\n <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\"\r\n (click)=\"selectOption(o, select)\">north_west\r\n </mat-icon>\r\n </div>\r\n\r\n <mat-icon class=\"select-one\" [ngClass]=\"{visible: overoption === options.indexOf(o)}\"\r\n *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">\r\n north_west\r\n </mat-icon>\r\n </mat-option>\r\n\r\n <div class=\"buttons\" *ngIf=\"multiple\">\r\n <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\"\r\n [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\"\r\n (click)=\"clearAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\"\r\n (click)=\"selectAll()\"></ui-button>\r\n <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\"\r\n [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\"\r\n [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\"\r\n (click)=\"select.close()\"></ui-button>\r\n </div>\r\n\r\n </mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-mdc-select-panel mat-option{position:relative}::ng-deep .mat-mdc-select-panel mat-option .select-one{position:absolute;right:0;display:none}::ng-deep .mat-mdc-select-panel mat-option .select-one.visible{display:block}::ng-deep .mat-mdc-select-panel .over-container{position:absolute;inset:0 0 0 3em}::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"] }]
|
|
815
813
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
816
814
|
type: Optional
|
|
817
815
|
}, {
|