@almoamendev/ngx-md3 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almoamendev/ngx-md3",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "MD3-style Angular components & style library",
   "author": "Murtadha (Hussain) Almoamen",
   "license": "MIT",

package/src/lib/styles/md3.scss

@@ -195,7 +195,7 @@ li {
         }
     }
 
-    &.draggable:active {
+    &.draggable:active, &.draggable.cdk-drag-preview {
         .md3-state-layer {
             background-color: var(--state-color, transparent);
             opacity: 0.16;

package/types/almoamendev-ngx-md3.d.ts

@@ -4,7 +4,9 @@ import { FlexibleConnectedPositionStrategyOrigin, ConnectedPosition, OverlayRef
 import { Observable, Subject } from 'rxjs';
 import * as i1 from '@angular/cdk/scrolling';
 import { AbstractControl, ControlValueAccessor } from '@angular/forms';
-import * as i1$1 from '@angular/router';
+import * as i1$1 from '@angular/cdk/drag-drop';
+import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import * as i1$2 from '@angular/router';
 import { CdkDialogContainer, DialogRef as DialogRef$1 } from '@angular/cdk/dialog';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
 
@@ -1443,12 +1445,14 @@ declare class Slider {
 
 declare class List {
     private el;
+    private dropList;
     variant: _angular_core.InputSignal<"expressive" | "baseline">;
     type: _angular_core.InputSignal<"standard" | "segmented">;
-    constructor(el: ElementRef);
+    draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    constructor(el: ElementRef, dropList: CdkDropList);
     get element(): HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<List, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<List, "md3-list", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<List, "md3-list", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1$1.CdkDropList; inputs: {}; outputs: { "cdkDropListDropped": "dropped"; }; }]>;
 }
 
 declare class ListItemPrimaryAction {
@@ -1458,16 +1462,20 @@ declare class ListItemPrimaryAction {
 declare class ListItem implements AfterViewInit {
     private el;
     private state;
+    private drag;
+    private list;
     slotsAlignment: _angular_core.InputSignal<"start" | "center" | "end">;
     selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    isActionTag: boolean;
+    dragDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    isActionTag: _angular_core.WritableSignal<boolean>;
     private isLabelTag;
     private checkbox;
     private radioButton;
     private switch;
     isSelected: _angular_core.Signal<boolean>;
     isInputDisabled: _angular_core.Signal<boolean | undefined>;
-    constructor(el: ElementRef, state: StateComponent);
+    isDraggable: _angular_core.Signal<boolean>;
+    constructor(el: ElementRef, state: StateComponent, drag: CdkDrag, list: List | null);
     get element(): HTMLElement;
     ngAfterViewInit(): void;
     protected onFocusIn(event: FocusEvent): void;
@@ -1477,8 +1485,8 @@ declare class ListItem implements AfterViewInit {
     private getLabelInputs;
     private focusLabel;
     private isInputElement;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItem, "md3-list-item, label[md3-list-item], button[md3-list-item], a[md3-list-item]", never, { "slotsAlignment": { "alias": "slots-alignment"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, ["checkbox", "radioButton", "switch"], ["[md3-item-primary-action]", "md3-list-leading", "[md3-list-slot=content]", "[md3-list-slot=trailing]"], true, [{ directive: typeof StateComponent; inputs: {}; outputs: {}; }]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItem, [null, null, null, { optional: true; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItem, "md3-list-item, label[md3-list-item], button[md3-list-item], a[md3-list-item]", never, { "slotsAlignment": { "alias": "slots-alignment"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dragDisabled": { "alias": "drag-disabled"; "required": false; "isSignal": true; }; }, {}, ["checkbox", "radioButton", "switch"], ["[md3-item-primary-action]", "md3-list-leading", "[md3-list-slot=content]", "[md3-list-slot=trailing]"], true, [{ directive: typeof StateComponent; inputs: {}; outputs: {}; }, { directive: typeof i1$1.CdkDrag; inputs: {}; outputs: {}; }]>;
 }
 
 declare class ListLeading {
@@ -1710,7 +1718,7 @@ declare class NavigationItem {
     get active(): boolean;
     get element(): HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationItem, "button[md3-nav-item], a[md3-nav-item]", ["md3NavItem"], { "collapseMode": { "alias": "collapse-mode"; "required": false; "isSignal": true; }; }, {}, ["icons", "badge"], ["[md3-icon-element=active]", "[md3-icon-element]", "*", "md3-badge"], true, [{ directive: typeof i1$1.RouterLinkActive; inputs: { "routerLinkActiveOptions": "routerLinkActiveOptions"; "ariaCurrentWhenActive": "ariaCurrentWhenActive"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NavigationItem, "button[md3-nav-item], a[md3-nav-item]", ["md3NavItem"], { "collapseMode": { "alias": "collapse-mode"; "required": false; "isSignal": true; }; }, {}, ["icons", "badge"], ["[md3-icon-element=active]", "[md3-icon-element]", "*", "md3-badge"], true, [{ directive: typeof i1$2.RouterLinkActive; inputs: { "routerLinkActiveOptions": "routerLinkActiveOptions"; "ariaCurrentWhenActive": "ariaCurrentWhenActive"; }; outputs: {}; }]>;
 }
 
 declare class NavigationGroup {
@@ -2263,6 +2271,12 @@ declare class MenuItem {
     supportingText: _angular_core.InputSignal<string | null>;
     trailingText: _angular_core.InputSignal<string | null>;
     selected: _angular_core.ModelSignal<boolean | null>;
+    /**
+     * When true (default), a click toggles the selected state of the item.
+     * Set it to false when a parent owns the selection, for example md3-select-field.
+     * The item then shows the bound selected value only.
+     */
+    toggleOnClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private iconElements;
     get leading(): IconElement | undefined;
     get trailing(): IconElement | undefined;
@@ -2271,7 +2285,7 @@ declare class MenuItem {
     constructor(el: ElementRef<HTMLElement>);
     get element(): HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItem, "button[md3-menu-item], a[md3-menu-item]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "supportingText": { "alias": "supporting-text"; "required": false; "isSignal": true; }; "trailingText": { "alias": "trailing-text"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["iconElements"], ["[md3-icon-element=leading]", "md3-badge", "[md3-icon-element=trailing]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuItem, "button[md3-menu-item], a[md3-menu-item]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "supportingText": { "alias": "supporting-text"; "required": false; "isSignal": true; }; "trailingText": { "alias": "trailing-text"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "toggleOnClick": { "alias": "toggle-on-click"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["iconElements"], ["[md3-icon-element=leading]", "md3-badge", "[md3-icon-element=trailing]"], true, never>;
 }
 
 declare class SideSheet implements AfterContentInit {