{"id":26278690,"url":"https://github.com/acrodata/rnd-dialog","last_synced_at":"2025-05-07T00:43:08.692Z","repository":{"id":279241499,"uuid":"937415128","full_name":"acrodata/rnd-dialog","owner":"acrodata","description":"🖱 Resizable \u0026 draggable dialog","archived":false,"fork":false,"pushed_at":"2025-05-03T14:41:25.000Z","size":1808,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-03T14:47:27.593Z","etag":null,"topics":["angular","cdk","dialog","draggable","draggable-dialog","draggable-modal","modal","ngx-modal","resizable","resizable-dialog","resizable-modal"],"latest_commit_sha":null,"homepage":"https://acrodata.github.io/rnd-dialog/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acrodata.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-23T01:45:39.000Z","updated_at":"2025-05-03T14:39:01.000Z","dependencies_parsed_at":"2025-03-13T16:28:18.107Z","dependency_job_id":"b3c3b8c1-d250-47ee-9dec-b62b51dfcc63","html_url":"https://github.com/acrodata/rnd-dialog","commit_stats":null,"previous_names":["acrodata/rnd-dialog"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrodata%2Frnd-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrodata%2Frnd-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrodata%2Frnd-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrodata%2Frnd-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acrodata","download_url":"https://codeload.github.com/acrodata/rnd-dialog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252793558,"owners_count":21805053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","cdk","dialog","draggable","draggable-dialog","draggable-modal","modal","ngx-modal","resizable","resizable-dialog","resizable-modal"],"created_at":"2025-03-14T13:17:22.463Z","updated_at":"2025-05-07T00:43:08.685Z","avatar_url":"https://github.com/acrodata.png","language":"TypeScript","readme":"# RnD Dialog\n\n[![npm](https://img.shields.io/npm/v/@acrodata/rnd-dialog.svg)](https://www.npmjs.com/package/@acrodata/rnd-dialog)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/acrodata/rnd-dialog/blob/main/LICENSE)\n\n![screenshot](https://repository-images.githubusercontent.com/937415128/066bb68f-6707-4a8a-a374-8ca21323cfff)\n\nResizable and draggable dialog based on CDK dialog.\n\n#### Quick links\n\n[Documentation](https://github.com/acrodata/rnd-dialog?tab=readme-ov-file#rnd-dialog) |\n[Playground](https://acrodata.github.io/rnd-dialog/)\n\n## Installation\n\n```bash\nnpm install @acrodata/rnd-dialog --save\n```\n\n## Usage\n\nIf you use the Material as default lib, you don't need to import any styles.\n\n```scss\n@import '@angular/cdk/overlay-prebuilt.css';\n\n// or\n\n@use '@angular/cdk' as cdk;\n\n@include cdk.overlay();\n```\n\n```ts\nimport { Component } from '@angular/core';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { RndDialog, RndDialogDragHandle } from '@acrodata/rnd-dialog';\n\n@Component({\n  selector: 'your-app',\n  template: `\n    \u003cbutton (click)=\"openDialog()\"\u003eOpen dialog\u003c/button\u003e\n  `,\n  standalone: true,\n  imports: [],\n})\nexport class YourAppComponent {\n  private rndDialog = inject(RndDialog);\n\n  openDialog() {\n    this.rndDialog.open(ExampleDialog, {\n      data: 'Hello, World!',\n      width: '600px',\n      height: '400px',\n    });\n  }\n}\n\n@Component({\n  selector: 'example-dialog',\n  template: `\n    \u003cdiv class=\"drag-handle\" rndDialogDragHandle\u003e\n      Drag handle\n      \u003cbutton (click)=\"dialogRef.close()\"\u003eclose\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cp\u003e{{ data }}\u003c/p\u003e\n  `,\n  standalone: true,\n  imports: [RndDialogDragHandle],\n})\nexport class ExampleDialog {\n  dialogRef = inject\u003cDialogRef\u003cstring\u003e\u003e(DialogRef);\n  data = inject(DIALOG_DATA);\n}\n```\n\n## API\n\nThe rnd-dialog simply provides a customized container for [CDK dialog](https://material.angular.io/cdk/dialog/api), so all APIs are the same with CDK dialog.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrodata%2Frnd-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facrodata%2Frnd-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrodata%2Frnd-dialog/lists"}