sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Checkbox Styling with Sub Options

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-03-14 14:15:07 +01:00
parent 9bdb902a56
commit 72bbd2c36e
6 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/ui/checkbox/src/lib/checkbox.component.html
View File

@@ -1,3 +1,8 @@
<ui-icon *ngIf="showCheckbox" size="20px" [icon]="icon"></ui-icon>
<ui-icon *ngIf="showCheckbox && !indeterminate" size="20px" [icon]="icon"></ui-icon>
<ui-svg-icon
*ngIf="indeterminate"
[size]="16"
icon="mat-remove"
class="border-2 border-solid border-active-customer rounded text-active-customer"
></ui-svg-icon>
<ng-content></ng-content>

3
apps/ui/checkbox/src/lib/checkbox.component.ts
View File

@@ -24,6 +24,9 @@ export class UiCheckboxComponent implements ControlValueAccessor {
return this.selected == this.value;
}
@Input()
indeterminate = false;
get icon() {
if (this.showCheckbox) {
if (this.design === 'default') {

4
apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html
View File

@@ -6,7 +6,7 @@
[attr.data-selected]="uiOption?.selected"
[attr.data-target]="uiOption?.expanded"
>
<ui-checkbox [ngModel]="uiOption?.selected" (ngModelChange)="uiOption?.setSelected($event)">
<ui-checkbox [ngModel]="uiOption?.selected" (ngModelChange)="uiOption?.setSelected($event)" [indeterminate]="hasPartiallyCheckedChildren">
{{ uiOption?.label }}
</ui-checkbox>
<button
@@ -20,5 +20,5 @@
</button>
</div>
<ng-container *ngIf="uiOption?.expanded">
<ui-input-option-bool *ngFor="let subOption of uiOption?.values" [option]="subOption"></ui-input-option-bool>
<ui-input-option-bool class="ml-10" *ngFor="let subOption of uiOption?.values" [option]="subOption"></ui-input-option-bool>
</ng-container>

5
apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.ts
View File

@@ -29,6 +29,11 @@ export class UiFilterInputOptionBoolComponent implements OnDestroy {
optionChangeSubscription = new Subscription();
get hasPartiallyCheckedChildren() {
const options = this.uiOption?.values ?? [];
return !options.every((option) => option.selected) && options.some((option) => option.selected);
}
constructor(private cdr: ChangeDetectorRef) {}
ngOnDestroy() {

4
apps/ui/icon/src/lib/mat-icons.ts Normal file
View File

@@ -0,0 +1,4 @@
// SVG from https://fonts.google.com/icons?selected=Material+Symbols
export const matRemove =
'M6 13.575q-.65 0-1.112-.463-.463-.462-.463-1.112 0-.65.463-1.113.462-.462 1.112-.462h12q.65 0 1.113.462.462.463.462 1.113 0 .65-.462 1.112-.463.463-1.113.463Z';

5
apps/ui/icon/src/lib/ui-icon.module.ts
View File

@@ -19,6 +19,7 @@ import {
mdiShapeOutline,
mdiBugOutline,
} from '@mdi/js';
import { matRemove } from './mat-icons';
export function _rootIconRegistryFactory(config: UiIconConfig): IconRegistry {
const registry = new IconRegistry();
@@ -49,6 +50,10 @@ const DEFAULT_ICON_CONFIG: UiIconConfig = {
{ name: 'clipboard-check-outline', data: mdiClipboardCheckOutline },
{ name: 'shape-outline', data: mdiShapeOutline },
{ name: 'bug-outline', data: mdiBugOutline },
{
name: 'mat-remove',
data: matRemove,
},
],
};