@cuby-ui/core 0.0.45 → 0.0.46
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.
|
@@ -2024,14 +2024,14 @@ CuiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
2024
2024
|
CUI_TEXT_FILED_CONTROLLER_PROVIDER,
|
|
2025
2025
|
cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
|
|
2026
2026
|
CuiDestroyService
|
|
2027
|
-
], viewQueries: [{ propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\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<div\n *ngIf=\"isOpened\"\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\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 <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\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 </ul>\n</ng-template>\n", styles: [":host{position:relative;z-index:1;display:block;font-family:var(--cui-main-font)}.c-button{border: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-gray-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.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)}:host-context([cuiTheme=dark]) .c-button{background:var(--cui-slate-700)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.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;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;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__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 });
|
|
2027
|
+
], viewQueries: [{ propertyName: "getOptionsListHeightContainer", first: true, predicate: ["getOptionsListHeightContainer"], descendants: true }], hostDirectives: [{ directive: i2.CuiClickOutsideDirective }], ngImport: i0, template: "<button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\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<div\n *ngIf=\"isOpened\"\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\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 <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\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 </ul>\n</ng-template>\n", styles: [":host{position:relative;z-index:1;display:block;font-family:var(--cui-main-font)}.c-button{border: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-gray-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.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)}:host-context([cuiTheme=dark]) .c-button{background:var(--cui-slate-700)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.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;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;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__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 });
|
|
2028
2028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CuiSelectComponent, decorators: [{
|
|
2029
2029
|
type: Component,
|
|
2030
2030
|
args: [{ selector: 'cui-select[options]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2031
2031
|
CUI_TEXT_FILED_CONTROLLER_PROVIDER,
|
|
2032
2032
|
cuiProvide(NG_VALUE_ACCESSOR, CuiSelectComponent, true),
|
|
2033
2033
|
CuiDestroyService
|
|
2034
|
-
], hostDirectives: [CuiClickOutsideDirective], template: "<button\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\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<div\n *ngIf=\"isOpened\"\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\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 <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\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 </ul>\n</ng-template>\n", styles: [":host{position:relative;z-index:1;display:block;font-family:var(--cui-main-font)}.c-button{border: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-gray-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.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)}:host-context([cuiTheme=dark]) .c-button{background:var(--cui-slate-700)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.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;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;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__icon{margin-left:auto}\n"] }]
|
|
2034
|
+
], hostDirectives: [CuiClickOutsideDirective], template: "<button\n type=\"button\"\n [attr.id]=\"id\"\n [attr.data-size]=\"size\"\n [disabled]=\"isDisabled\"\n class=\"c-button\"\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<div\n *ngIf=\"isOpened\"\n class=\"c-options__wrapper\"\n [class.c-options__wrapper_top]=\"isOptionsListAbove\"\n>\n <ng-container *ngTemplateOutlet=\"optionsList\"/>\n</div>\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 <li *ngFor=\"let option of options; trackBy: trackByFn\">\n <button\n class=\"c-option-button\"\n [class.c-option-button_selected]=\"selectedOption === option\"\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 </ul>\n</ng-template>\n", styles: [":host{position:relative;z-index:1;display:block;font-family:var(--cui-main-font)}.c-button{border: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-gray-10);color:var(--cui-base-900);font-family:var(--cui-main-font)}.c-button:hover{border-color:var(--cui-base-300)}.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)}:host-context([cuiTheme=dark]) .c-button{background:var(--cui-slate-700)}.c-placeholder{color:var(--cui-base-400)}.c-options__wrapper{position:absolute;top:calc(100% + var(--c-gap));width:100%}.c-options__wrapper_top{top:unset;bottom:calc(100% + var(--c-gap))}.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;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;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__icon{margin-left:auto}\n"] }]
|
|
2035
2035
|
}], propDecorators: { options: [{
|
|
2036
2036
|
type: Input
|
|
2037
2037
|
}], getOptionsListHeightContainer: [{
|