@cuby-ui/core 0.0.137 → 0.0.138
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/components/select/select.component.d.ts +1 -1
- package/esm2020/components/select/select.component.mjs +5 -4
- package/fesm2015/cuby-ui-core.mjs +4 -3
- package/fesm2015/cuby-ui-core.mjs.map +1 -1
- package/fesm2020/cuby-ui-core.mjs +4 -3
- package/fesm2020/cuby-ui-core.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1942,7 +1942,8 @@ class CuiSelectComponent {
|
|
|
1942
1942
|
this.isDisabled = isDisabled;
|
|
1943
1943
|
this.changeDetectorRef.markForCheck();
|
|
1944
1944
|
}
|
|
1945
|
-
onSelect(option) {
|
|
1945
|
+
onSelect(event, option) {
|
|
1946
|
+
event.stopPropagation();
|
|
1946
1947
|
if (option.isDisabled) {
|
|
1947
1948
|
return;
|
|
1948
1949
|
}
|
|
@@ -2015,14 +2016,14 @@ CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
2015
2016
|
CUI_TEXT_FILED_CONTROLLER_PROVIDER,
|
|
2016
2017
|
cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
|
|
2017
2018
|
CuiDestroyService
|
|
2018
|
-
], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n #button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\n [class.c-button_active]=\"isOpened\"\n [class.c-button_with-error]=\"isError\"\n (click)=\"onSwitch()\"\n>\n <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n {{ selectedOption.label }}\n </ng-container>\n <ng-template #placeholderTemplate>\n <span class=\"c-placeholder\">{{ placeholder }}</span>\n </ng-template>\n <cui-svg\n icon=\"cuiIconChevronDown\"\n color=\"var(--cui-base-500)\"\n />\n</button>\n<ng-template #optionsWrapper>\n <div\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n </div>\n</ng-template>\n<div\n #getOptionsListHeightContainer\n class=\"c-get-options-list-height-container\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n <ul\n class=\"c-options\"\n [class.c-options_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngIf=\"options.length; else empty\">\n <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\n [disabled]=\"option.isDisabled\"\n (click)=\"onSelect(option)\"\n >\n <span>{{ option.label }}</span>\n <cui-svg\n *ngIf=\"selectedOption === option\"\n icon=\"cuiIconCheckSm\"\n color=\"var(--cui-info)\"\n class=\"c-option-button__icon\"\n />\n </button>\n </li>\n </ng-container>\n <ng-template #empty>\n <li *ngIf=\"defaultOptionText\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n (click)=\"onClose()\"\n >\n {{ defaultOptionText }}\n </button>\n </li>\n </ng-template>\n </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2019
|
+
], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }, { propertyName: "optionsWrapper", first: true, predicate: ["optionsWrapper"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n #button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\n [class.c-button_active]=\"isOpened\"\n [class.c-button_with-error]=\"isError\"\n (click)=\"onSwitch()\"\n>\n <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n {{ selectedOption.label }}\n </ng-container>\n <ng-template #placeholderTemplate>\n <span class=\"c-placeholder\">{{ placeholder }}</span>\n </ng-template>\n <cui-svg\n icon=\"cuiIconChevronDown\"\n color=\"var(--cui-base-500)\"\n />\n</button>\n<ng-template #optionsWrapper>\n <div\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n </div>\n</ng-template>\n<div\n #getOptionsListHeightContainer\n class=\"c-get-options-list-height-container\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n <ul\n class=\"c-options\"\n [class.c-options_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngIf=\"options.length; else empty\">\n <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\n [disabled]=\"option.isDisabled\"\n (click)=\"onSelect($event, option)\"\n >\n <span>{{ option.label }}</span>\n <cui-svg\n *ngIf=\"selectedOption === option\"\n icon=\"cuiIconCheckSm\"\n color=\"var(--cui-info)\"\n class=\"c-option-button__icon\"\n />\n </button>\n </li>\n </ng-container>\n <ng-template #empty>\n <li *ngIf=\"defaultOptionText\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n (click)=\"onClose()\"\n >\n {{ defaultOptionText }}\n </button>\n </li>\n </ng-template>\n </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2019
2020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, decorators: [{
|
|
2020
2021
|
type: Component,
|
|
2021
2022
|
args: [{ selector: 'cui-select[options]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2022
2023
|
CUI_TEXT_FILED_CONTROLLER_PROVIDER,
|
|
2023
2024
|
cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
|
|
2024
2025
|
CuiDestroyService
|
|
2025
|
-
], hostDirectives: [CuiClickOutsideDirective], template: "<button\n #button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\n [class.c-button_active]=\"isOpened\"\n [class.c-button_with-error]=\"isError\"\n (click)=\"onSwitch()\"\n>\n <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n {{ selectedOption.label }}\n </ng-container>\n <ng-template #placeholderTemplate>\n <span class=\"c-placeholder\">{{ placeholder }}</span>\n </ng-template>\n <cui-svg\n icon=\"cuiIconChevronDown\"\n color=\"var(--cui-base-500)\"\n />\n</button>\n<ng-template #optionsWrapper>\n <div\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n </div>\n</ng-template>\n<div\n #getOptionsListHeightContainer\n class=\"c-get-options-list-height-container\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n <ul\n class=\"c-options\"\n [class.c-options_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngIf=\"options.length; else empty\">\n <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\n [disabled]=\"option.isDisabled\"\n (click)=\"onSelect(option)\"\n >\n <span>{{ option.label }}</span>\n <cui-svg\n *ngIf=\"selectedOption === option\"\n icon=\"cuiIconCheckSm\"\n color=\"var(--cui-info)\"\n class=\"c-option-button__icon\"\n />\n </button>\n </li>\n </ng-container>\n <ng-template #empty>\n <li *ngIf=\"defaultOptionText\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n (click)=\"onClose()\"\n >\n {{ defaultOptionText }}\n </button>\n </li>\n </ng-template>\n </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"] }]
|
|
2026
|
+
], hostDirectives: [CuiClickOutsideDirective], template: "<button\n #button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\n [class.c-button_active]=\"isOpened\"\n [class.c-button_with-error]=\"isError\"\n (click)=\"onSwitch()\"\n>\n <ng-container *ngIf=\"selectedOption; else placeholderTemplate\">\n {{ selectedOption.label }}\n </ng-container>\n <ng-template #placeholderTemplate>\n <span class=\"c-placeholder\">{{ placeholder }}</span>\n </ng-template>\n <cui-svg\n icon=\"cuiIconChevronDown\"\n color=\"var(--cui-base-500)\"\n />\n</button>\n<ng-template #optionsWrapper>\n <div\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n </div>\n</ng-template>\n<div\n #getOptionsListHeightContainer\n class=\"c-get-options-list-height-container\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\n<ng-template #optionsList>\n <ul\n class=\"c-options\"\n [class.c-options_top]=\"isOptionsListAbove\"\n >\n <ng-container *ngIf=\"options.length; else empty\">\n <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\n [disabled]=\"option.isDisabled\"\n (click)=\"onSelect($event, option)\"\n >\n <span>{{ option.label }}</span>\n <cui-svg\n *ngIf=\"selectedOption === option\"\n icon=\"cuiIconCheckSm\"\n color=\"var(--cui-info)\"\n class=\"c-option-button__icon\"\n />\n </button>\n </li>\n </ng-container>\n <ng-template #empty>\n <li *ngIf=\"defaultOptionText\">\n <button\n type=\"button\"\n class=\"c-option-button\"\n (click)=\"onClose()\"\n >\n {{ defaultOptionText }}\n </button>\n </li>\n </ng-template>\n </ul>\n</ng-template>\n", styles: [":host{display:block;font-family:var(--cui-main-font);position:relative}.c-button{border:0;flex-shrink:0;outline:none;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:0 13px;font-weight:400;font-size:14px;line-height:20px;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid var(--cui-base-200);border-radius:8px;cursor:pointer;background:var(--cui-input);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.c-button_active.c-button_active,.c-button:focus{box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.c-button:disabled{cursor:not-allowed;opacity:.5;background:var(--cui-base-50);border-color:var(--cui-base-200)}.c-button[data-size=sm]{padding-top:7px;padding-bottom:7px}.c-button[data-size=md]{padding-top:8px;padding-bottom:8px}.c-button_with-error{border-color:var(--cui-danger)}.c-button_with-error:focus{box-shadow:0 0 0 2px #d92d2040;border-color:var(--cui-danger)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;font-family:var(--cui-main-font);z-index:1}.c-get-options-list-height-container{position:fixed;visibility:hidden}.c-options{padding:7px 0;margin:0;list-style:none;font-weight:400;font-size:14px;line-height:20px;box-shadow:0 1px 4px #0000000a,0 1px 4px #0000000a;overflow:auto;max-height:180px;border:1px solid var(--cui-base-200);border-radius:8px;background:var(--cui-base-0);color:var(--cui-base-900)}.c-option-button{padding:8px 11px 8px 0;border:0;flex-shrink:0;outline:none;cursor:pointer;appearance:none;color:inherit;font:inherit;background:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;padding:8px 11px;width:100%;display:flex;align-items:center;gap:12px}.c-option-button:active{background:var(--cui-base-50)}@media (hover: hover){.c-option-button:hover{background:var(--cui-base-50)}}.c-option-button_selected{background:var(--cui-base-50)}.c-option-button:disabled{background:unset;opacity:50%}.c-option-button__icon{margin-left:auto}\n"] }]
|
|
2026
2027
|
}], propDecorators: { options: [{
|
|
2027
2028
|
type: Input
|
|
2028
2029
|
}], defaultOptionText: [{
|