Merge branch 'angular-19' of github.com:swimlane/ngx-ui into angular-19

cypress/e2e/forms/checkbox.cy.ts

@@ -15,6 +15,7 @@ describe('Checkbox', () => {
     beforeEach(() => {
       cy.get('#section-1').as('SUT');
       cy.getByName('chk1').as('CUT');
+      cy.getByName('chk6').as('INDETERMINATE_CUT');
     });
 
     afterEach(() => {
@@ -46,6 +47,13 @@ describe('Checkbox', () => {
       cy.get('@CUT').ngxGetValue().should('equal', true);
     });
 
+    it('can uncheck from indeterminate state', () => {
+      cy.get('@INDETERMINATE_CUT').click();
+      cy.get('@INDETERMINATE_CUT').ngxGetValue().should('equal', false);
+      cy.get('@INDETERMINATE_CUT').click();
+      cy.get('@INDETERMINATE_CUT').ngxGetValue().should('equal', true);
+    });
+
     it('is keyboard accessible', () => {
       cy.get('@SUT').find('h1').contains('Demo').realClick();
 

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,9 +2,15 @@
 
 ## HEAD (unreleased)
 
+- Enhancement (`ngx-checkbox`): a new look is available that displays the `indeterminate` state.
+- Enhancement (`ngx-checkbox`): new `@Input` named `indeterminate` set to a `boolean`.
+- Enhancement (`ngx-checkbox`): implements an `EventEmitter` when `indeterminate` changes.
 - Enhancement: Support Angular 19, `standalone` now required in all `@Component`
-- Enhancement: Update SASS `include` to `use` and `forward` and update for latest standard libraries
-- Fix: CSS styles scoped to `webkit` that are now standardized
+- Fix: CSS styles previously scoped to `webkit` now standardized have been updated
+- Breaking: Updated SASS `@include` to `@use` and `@forward` and updated SASS for latest standard libraries
+
+Breaking: If your project depends on SASS exported from ngx-ui and your project still uses`@include`,
+you must update your SASS to fully comply with `@use`.
 
 ## 48.3.0 (2024-12-17)
 

projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.html

@@ -1,6 +1,9 @@
-<label class="ngx-checkbox--label" [attr.for]="id + '-chk'"
+<label
+  class="ngx-checkbox--label"
+  [attr.for]="id + '-chk'"
   [tabIndex]="disabled ? -1 : tabindex"
-  (keydown.space)="onKeyup($event)">
+  (keydown.space)="onKeyup($event)"
+>
   <input
     type="checkbox"
     [id]="id + '-chk'"
@@ -15,7 +18,8 @@
 
   <div
     class="ngx-checkbox--box"
-    [class.checked]="value"
+    [class.checked]="!indeterminate && value"
+    [class.indeterminate]="indeterminate"
     [style.width]="diameter"
     [style.height]="diameter"
     [style.min-width]="diameter"

projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.scss

@@ -37,7 +37,7 @@
       &:after {
         position: absolute;
         top: calc(50% - 7px);
-        left: calc(50% - 2px);
+        left: calc(50% - 3px);
         width: 6px;
         height: 12px;
         content: '';
@@ -47,15 +47,33 @@
         transition: all 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
       }
 
-      &.checked {
+      &.indeterminate {
         background-color: colors.$color-blue-400;
         border-radius: 2px;
         opacity: 1;
         border: 2px solid colors.$color-blue-400;
         transform: rotate(0deg) scale(1);
 
+        &:after {
+          width: 12px;
+          height: 2px;
+          top: calc(50% - 1px);
+          left: calc(50% - 6px);
+          border: none;
+          transform: rotate(0deg) scale(1);
+          background-color: colors.$color-white;
+        }
+      }
+
+      &.checked {
+        background-color: colors.$color-blue-400;
+        border-radius: 2px;
+        opacity: 1;
+        border: 2px solid colors.$color-blue-400;
+        transform: rotate(0deg) scale(1);
         &:after {
           transform: rotate(45deg) scale(1);
+          background-color: transparent;
         }
       }
     }

projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.spec.ts

@@ -37,6 +37,24 @@ describe('CheckboxComponent', () => {
       component.value = true;
       expect(component.value).toBe(true);
     });
+
+    it('should set value if indeterminate is false', () => {
+      component.indeterminate = false;
+      component.value = false;
+      expect(component.value).toBe(false);
+    });
+  });
+
+  describe('indeterminate', () => {
+    it('should set indeterminate', () => {
+      component.indeterminate = false;
+      expect(component.indeterminate).toBe(false);
+    });
+
+    it('should not set indeterminate if is equal to _indeterminate', () => {
+      component.indeterminate = true;
+      expect(component.indeterminate).toBe(true);
+    });
   });
 
   describe('onBlur', () => {

projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.ts

@@ -57,7 +57,7 @@ export class CheckboxComponent implements ControlValueAccessor {
   // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('checked')
   set value(value: boolean) {
-    if (this._value !== value) {
+    if (this._value !== value && !this.indeterminate) {
       this._value = value;
       this.cdr.markForCheck();
       this.onChangeCallback(this._value);
@@ -68,6 +68,18 @@ export class CheckboxComponent implements ControlValueAccessor {
     return this._value;
   }
 
+  @Input()
+  set indeterminate(value: boolean) {
+    if (this._indeterminate !== value) {
+      this._indeterminate = value;
+      this.cdr.markForCheck();
+      this.indeterminateChange.emit(this.indeterminate);
+    }
+  }
+  get indeterminate(): boolean {
+    return this._indeterminate;
+  }
+
   @Input()
   @CoerceNumberProperty()
   tabindex = 0;
@@ -82,10 +94,12 @@ export class CheckboxComponent implements ControlValueAccessor {
 
   @Output() change = new EventEmitter<Event>();
   @Output() checkedChange = new EventEmitter<boolean>();
+  @Output() indeterminateChange = new EventEmitter<boolean>();
   @Output() blur = new EventEmitter<FocusEvent>();
   @Output() focus = new EventEmitter<FocusEvent>();
 
   private _value = false;
+  private _indeterminate = false;
 
   constructor(private readonly cdr: ChangeDetectorRef) {}
 

src/app/forms/checkbox-page/checkbox-page.component.html

@@ -19,7 +19,8 @@ <h3>Simple</h3>
 
       <br />
       <br />
-
+
+      <h3>Disabled</h3>
       <ngx-checkbox name="chk2" [ngModel]="true" disabled>
         Alert the SOC
       </ngx-checkbox>
@@ -36,6 +37,26 @@ <h3>Simple</h3>
 
       <br />
       <br />
+
+      <h3>Indeterminate</h3>
+      <ngx-checkbox name="chk6" [ngModel]="isChecked" [indeterminate]="isIndeterminate" (change)="onChange()" (indeterminateChange)="onIndeterminateChange($event)">
+        Alert the SOC
+      </ngx-checkbox>
+
+      <app-prism>
+    <![CDATA[<ngx-checkbox
+      name="chk6"
+      [ngModel]="true"
+      [indeterminate]="true"
+    >
+      Alert the SOC
+    </ngx-checkbox>]]>
+      </app-prism>
+
+      <br />
+      <br />
+
+
 
       <h3>Large Label</h3>
       <ngx-checkbox name="chk3" [ngModel]="false">

src/app/forms/checkbox-page/checkbox-page.component.ts

@@ -9,8 +9,9 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 })
 export class CheckboxPageComponent {
   checked = false;
-
   alertType: UntypedFormGroup;
+  isChecked = true;
+  isIndeterminate = true;
 
   constructor(fb: UntypedFormBuilder) {
     this.alertType = fb.group({
@@ -23,4 +24,13 @@ export class CheckboxPageComponent {
   scrollTo(id: string) {
     (document.getElementById(id) as HTMLElement)?.scrollIntoView({ behavior: 'smooth' });
   }
+
+  onChange() {
+    this.isIndeterminate = false;
+    this.isChecked = true;
+  }
+
+  onIndeterminateChange(event) {
+    console.log('CheckboxPageComponent.onIndeterminateChange', event);
+  }
 }