https://clarity.design/chunk-53VTJ3VK.js

1import{b as w}from"./chunk-MNZ2BLO4.js";import"./chunk-OOV4P5UE.js";import"./chunk-YLGERXK5.js";import{a as y}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{b as G}from"./chunk-7ZGOLTZD.js";import{a as I,b as A,c as L,d as k}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import{a as b}from"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{Ca as m,Da as s,Fe as C,Ga as l,Ie as v,Rc as x,Sd as D,U as a,Ua as t,Va as o,ck as E,je as h,pc as g,qb as c,ra as p,tb as e,ud as f,ve as S,zb as u}from"./chunk-MFI2B7BD.js";var d=(()=>{class i extends k{constructor(){super("drag-and-drop"),this.patternLinks=[w],D.addIcons(C,v,S,h)}static{this.\u0275fac=function(r){return new(r||i)}}static{this.\u0275cmp=m({type:i,selectors:[["clr-drag-and-drop-demo"]],hostVars:4,hostBindings:function(r,M){r&2&&c("content-area",!0)("dox-content-panel",!0)},features:[l],decls:64,vars:15,consts:[["tab","overview"],[1,"component-summary"],["id","drag-and-drop-group-service","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["cds-text","code"],["cds-text","section","id","methods",1,"clr-mt-32px"],[1,"table"],["width","400px"],[1,"left"],["tab","code"],["id","examples","cds-text","title",1,"clr-mt-48px"],["data-toc-item","","id","usage-example","cds-text","section",1,"clr-mt-32px"],[1,"language-typescript"]],template:function(r,M){r&1&&(t(0,"app-doc-tabs")(1,"app-doc-tab",0)(2,"p",1),e(3," AppFx Drag and Drop provides utilities to easily and declaratively work with CDK drag-and-drop within Angular applications. "),o(),t(4,"h2",2),e(5,"DragAndDropGroupService"),o(),t(6,"p",3),e(7," The "),t(8,"code",4),e(9,"DragAndDropGroupService"),o(),e(10," is a singleton Angular service that manages groups of items that can be dragged and dropped using Angular's CDK Drag and Drop functionality. It facilitates the organization and manipulation of draggable items by grouping them and providing methods for adding, retrieving, and removing drop lists ("),t(11,"code",4),e(12,"CdkDropList"),o(),e(13,") associated with specific groups. "),o(),t(14,"h3",5),e(15,"Methods"),o(),t(16,"table",6)(17,"thead")(18,"tr")(19,"th",7),e(20,"Method Signature"),o(),t(21,"th",8),e(22,"Description"),o()()(),t(23,"tbody")(24,"tr")(25,"td")(26,"code",4),e(27,"getGroupItems(group: string): readonly CdkDropList[]"),o()(),t(28,"td",8),e(29," Retrieves an array of "),t(30,"code",4),e(31,"CdkDropList"),o(),e(32," instances belonging to the specified group. If the group doesn't exist, it returns an empty array. "),o()(),t(33,"tr")(34,"td")(35,"code",4),e(36,"addGroupItem(group: string, item: CdkDropList): void"),o()(),t(37,"td",8),e(38," Adds a "),t(39,"code",4),e(40,"CdkDropList"),o(),e(41," instance to the specified group. If the group doesn't exist, it creates a new one. "),o()(),t(42,"tr")(43,"td")(44,"code",4),e(45,"removeGroupItem(group: string, item: CdkDropList): void"),o()(),t(46,"td",8),e(47," Removes a "),t(48,"code",4),e(49,"CdkDropList"),o(),e(50," instance from the specified group if it exists. "),o()()()()(),t(51,"app-doc-tab",9)(52,"h2",10),e(53,"Code & Examples"),o(),t(54,"h3",11),e(55,"Usage Example"),o(),t(56,"p",3),e(57," Below is an example of how to implement the "),t(58,"code",4),e(59,"DragAndDropGroupService"),o(),e(60," in a component. "),o(),t(61,"pre")(62,"code",12),e(63),o()()()()),r&2&&(p(63),u([`
2import `,"{"," DragAndDropGroupService ","}",` from '@clr/addons/drag-and-drop';
3
4@Component(`,"{",`
5   selector: 'example-drag-and-drop',
6   templateUrl: 'example-drag-and-drop.component.html',
7`,"}",`)
8export class ExampleDragAndDropComponent `,"{",`
9    @ViewChild(CdkDropList, `,"{"," static: true ","}",`)
10    public readonly dropList: CdkDropList;
11
12    private dropGroup: string;
13
14    public constructor(private groupService: DragAndDropGroupService) `,"{}",`
15
16    public dropGroup(group: string): readonly CdkDropList[] `,"{",`
17        return this.groupService.getGroupItems(group);
18    `,"}",`
19
20    public ngAfterViewInit(): void `,"{",`
21      this.groupService.addGroupItem(this.dropGroup, this.dropList);
22    `,"}",`
23
24    public ngOnDestroy(): void `,"{",`
25      this.groupService.removeGroupItem(this.dropGroup, this.dropList);
26    `,"}",`
27`,"}",`
28    `]))},dependencies:[A,L],encapsulation:2})}}return i})();var _=(()=>

28{class i{static{this.\u0275fac=function(r){return new(r||i)}}static{this.\u0275mod=s({type:i})}static{this.\u0275inj=a({imports:[g,E,f,x.forChild([{path:"",component:d}]),G,b,y,I,d]})}}return i})();export{_ as DragAndDropDemoModule};