@semantic-components/ui 0.9.0 → 0.10.0

package/fesm2022/semantic-components-ui.mjs

@@ -8930,11 +8930,15 @@ class ScCheckbox {
     checkboxClasses = computed(() => cn('peer appearance-none h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', this.checkboxClass()));
     svgClass = input('');
     svgClasses = computed(() => cn('absolute top-0 left-0 w-4 h-4 outline-none cursor-pointer text-primary-foreground', this.svgClass()));
+    indeterminate = model(false);
+    ariaLabel = input(null, { alias: 'aria-label' });
     checked = model(false);
     disabled = model(false);
+    change = output();
     state = computed(() => {
         return this.checked() ? 'checked' : 'unchecked';
     });
+    host = inject(ElementRef);
     constructor() {
         effect(() => {
             if (this.checked() !== true && this.checked() !== false) {
@@ -8943,6 +8947,7 @@ class ScCheckbox {
             if (this.disabled() !== true && this.disabled() !== false) {
                 this.disabled.update((v) => coerceBooleanProperty(v));
             }
+            this.host.nativeElement.indeterminate = this.indeterminate();
         });
     }
     toggle() {
@@ -8951,6 +8956,10 @@ class ScCheckbox {
         }
         const v = !this.checked();
         this.checked.set(v);
+        this.change.emit(v);
+        if (this.indeterminate() === true) {
+            this.indeterminate.set(false);
+        }
         this.onChange(v);
         this._cdr.markForCheck();
     }
@@ -8970,8 +8979,14 @@ class ScCheckbox {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
+    _onInteractionEvent(event) {
+        // We always have to stop propagation on the change event.
+        // Otherwise the change event, from the input element, will bubble up and
+        // emit its event object to the `change` output.
+        event.stopPropagation();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScCheckbox, isStandalone: true, selector: "sc-checkbox", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange" }, host: { listeners: { "click": "toggle()" }, properties: { "class": "classes()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScCheckbox, isStandalone: true, selector: "sc-checkbox", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, svgClass: { classPropertyName: "svgClass", publicName: "svgClass", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", checked: "checkedChange", disabled: "disabledChange", change: "change" }, host: { listeners: { "click": "toggle()" }, properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ScCheckbox),
@@ -8979,28 +8994,38 @@ class ScCheckbox {
             },
         ], ngImport: i0, template: `
     <input
+      [attr.aria-label]="ariaLabel()"
       [class]="checkboxClasses()"
       [disabled]="disabled()"
+      [checked]="checked()"
       [attr.data-state]="state()"
+      (change)="_onInteractionEvent($event)"
       type="checkbox"
     />
 
-    @if (checked() === true) {
+    @if (this.indeterminate() === true) {
+      <svg-minus-icon [class]="svgClasses()" />
+    } @else if (checked() === true) {
       <svg-check-icon [class]="svgClasses()" />
     }
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-icon", inputs: ["class", "svgClass"] }, { kind: "component", type: SvgMinusIcon, selector: "svg-minus-icon", inputs: ["class", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-checkbox', imports: [SvgCheckIcon], template: `
+            args: [{ selector: 'sc-checkbox', imports: [SvgCheckIcon, SvgMinusIcon], template: `
     <input
+      [attr.aria-label]="ariaLabel()"
       [class]="checkboxClasses()"
       [disabled]="disabled()"
+      [checked]="checked()"
       [attr.data-state]="state()"
+      (change)="_onInteractionEvent($event)"
       type="checkbox"
     />
 
-    @if (checked() === true) {
+    @if (this.indeterminate() === true) {
+      <svg-minus-icon [class]="svgClasses()" />
+    } @else if (checked() === true) {
       <svg-check-icon [class]="svgClasses()" />
     }
   `, host: {
@@ -10603,18 +10628,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class ScMenuCheckboxItem {
+    _cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
     class = input('');
     classes = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class()));
     disabled = input(false, {
         transform: booleanAttribute,
     });
-    scChecked = model();
-    scTriggered = output();
-    toggle() {
-        this.scChecked.update((v) => !v);
+    constructor() {
+        effect(() => {
+            this._cdkMenuItemCheckbox.disabled = this.disabled();
+        });
     }
+    scChecked = input(false, {
+        transform: booleanAttribute,
+    });
+    scTriggered = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scChecked: "scCheckedChange", scTriggered: "scTriggered" }, host: { listeners: { "click": "toggle()" }, properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScMenuCheckboxItem, isStandalone: true, selector: "button[sc-menu-checkbox-item]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scChecked: { classPropertyName: "scChecked", publicName: "scChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scTriggered: "scTriggered" }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemCheckbox, inputs: ["cdkMenuItemChecked", "scChecked"], outputs: ["cdkMenuItemTriggered", "scTriggered"] }], ngImport: i0, template: `
     @if (scChecked()) {
       <span class="absolute left-2 flex size-3.5 items-center justify-center">
         <svg-check-icon class="size-4" />
@@ -10634,7 +10664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     <ng-content />
   `, host: {
                         '[class]': 'classes()',
-                        '(click)': 'toggle()',
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: CdkMenuItemCheckbox,
@@ -10642,7 +10671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             outputs: ['cdkMenuItemTriggered: scTriggered'],
                         },
                     ] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class ScMenuRadioGroup {
     class = input('');