@semantic-components/ui 0.7.0 → 0.9.0

package/fesm2022/semantic-components-ui.mjs

@@ -10605,26 +10605,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScMenuCheckboxItem {
     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);
+    }
     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.1.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 } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1$5.CdkMenuItemCheckbox }], ngImport: i0, template: `
-    <span class="absolute left-2 flex size-3.5 items-center justify-center">
-      <svg-check-icon class="size-4" />
-    </span>
-
+    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: `
+    @if (scChecked()) {
+      <span class="absolute left-2 flex size-3.5 items-center justify-center">
+        <svg-check-icon class="size-4" />
+      </span>
+    }
     <ng-content />
   `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: SvgCheckIcon, selector: "svg-check-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: ScMenuCheckboxItem, decorators: [{
             type: Component,
             args: [{ selector: 'button[sc-menu-checkbox-item]', imports: [SvgCheckIcon], template: `
-    <span class="absolute left-2 flex size-3.5 items-center justify-center">
-      <svg-check-icon class="size-4" />
-    </span>
-
+    @if (scChecked()) {
+      <span class="absolute left-2 flex size-3.5 items-center justify-center">
+        <svg-check-icon class="size-4" />
+      </span>
+    }
     <ng-content />
   `, host: {
                         '[class]': 'classes()',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkMenuItemCheckbox] }]
+                        '(click)': 'toggle()',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: CdkMenuItemCheckbox,
+                            inputs: ['cdkMenuItemChecked: scChecked'],
+                            outputs: ['cdkMenuItemTriggered: scTriggered'],
+                        },
+                    ] }]
         }] });
 
 class ScMenuRadioGroup {