@cqa-lib/cqa-ui 1.1.455 → 1.1.456
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/esm2020/lib/segment-control/segment-control.component.mjs +11 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +10 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +10 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/segment-control/segment-control.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe,
|
|
2
|
+
import { EventEmitter, Component, Input, Output, HostListener, HostBinding, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
@@ -613,6 +613,8 @@ class SegmentControlComponent {
|
|
|
613
613
|
this.indicatorStyle = {};
|
|
614
614
|
this.indicatorVisible = false;
|
|
615
615
|
}
|
|
616
|
+
get hostDisplay() { return this.fullWidth ? 'block' : null; }
|
|
617
|
+
get hostWidth() { return this.fullWidth ? '100%' : null; }
|
|
616
618
|
ngOnChanges(changes) {
|
|
617
619
|
if (changes['segments'] || changes['value']) {
|
|
618
620
|
this.ensureSelectedValue();
|
|
@@ -809,7 +811,7 @@ class SegmentControlComponent {
|
|
|
809
811
|
}
|
|
810
812
|
}
|
|
811
813
|
SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
812
|
-
SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n [ngClass]=\"{\n 'cqa-flex-1 cqa-min-w-0': fullWidth,\n 'cqa-flex-none': !fullWidth,\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n \n <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n {{ segment?.icon }}\n </mat-icon>\n\n {{ segment.label }}\n\n <span *ngIf=\"segment?.tooltip\"\n style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n [matTooltip]=\"segment.tooltip\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"0\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n </span>\n </span>\n </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
814
|
+
SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n [ngClass]=\"{\n 'cqa-flex-1 cqa-min-w-0': fullWidth,\n 'cqa-flex-none': !fullWidth,\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n \n <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n {{ segment?.icon }}\n </mat-icon>\n\n {{ segment.label }}\n\n <span *ngIf=\"segment?.tooltip\"\n style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n [matTooltip]=\"segment.tooltip\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"0\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n </span>\n </span>\n </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
813
815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
|
|
814
816
|
type: Component,
|
|
815
817
|
args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n <div\n #segmentContainer\n class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n role=\"tablist\"\n [attr.aria-disabled]=\"disabled || null\"\n [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n >\n <div\n class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n role=\"tab\"\n class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n [ngClass]=\"{\n 'cqa-flex-1 cqa-min-w-0': fullWidth,\n 'cqa-flex-none': !fullWidth,\n 'cqa-text-white cqa-font-medium': isSelected(segment),\n 'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n 'cqa-cursor-not-allowed': disabled || segment.disabled,\n 'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n 'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n <span\n class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n \n <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n {{ segment?.icon }}\n </mat-icon>\n\n {{ segment.label }}\n\n <span *ngIf=\"segment?.tooltip\"\n style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n [matTooltip]=\"segment.tooltip\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"0\"\n (click)=\"$event.stopPropagation()\">\n <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n </span>\n </span>\n </button>\n</div>", styles: [] }]
|
|
@@ -823,6 +825,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
823
825
|
type: Input
|
|
824
826
|
}], fullWidth: [{
|
|
825
827
|
type: Input
|
|
828
|
+
}], hostDisplay: [{
|
|
829
|
+
type: HostBinding,
|
|
830
|
+
args: ['style.display']
|
|
831
|
+
}], hostWidth: [{
|
|
832
|
+
type: HostBinding,
|
|
833
|
+
args: ['style.width']
|
|
826
834
|
}], valueChange: [{
|
|
827
835
|
type: Output
|
|
828
836
|
}], segmentButtons: [{
|