{"id":13808750,"url":"https://github.com/GreenFlag31/modal-library","last_synced_at":"2025-05-14T03:31:25.979Z","repository":{"id":217841655,"uuid":"743769865","full_name":"GreenFlag31/modal-library","owner":"GreenFlag31","description":"ngx-modal-ease is a versatile Angular library providing a lightweight, simple, and performant modal.","archived":false,"fork":false,"pushed_at":"2024-06-02T11:38:53.000Z","size":1178,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"V18-without-rxjs","last_synced_at":"2024-11-05T19:19:32.947Z","etag":null,"topics":["angular","library","modal"],"latest_commit_sha":null,"homepage":"https://greenflag31.github.io/modal-library/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GreenFlag31.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-01-16T00:22:39.000Z","updated_at":"2024-07-23T16:22:26.000Z","dependencies_parsed_at":"2024-06-02T08:52:27.189Z","dependency_job_id":"0d48b5d1-17d5-49b0-971c-b4b29d41aa39","html_url":"https://github.com/GreenFlag31/modal-library","commit_stats":null,"previous_names":["greenflag31/modal-library"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreenFlag31%2Fmodal-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreenFlag31%2Fmodal-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreenFlag31%2Fmodal-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GreenFlag31%2Fmodal-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GreenFlag31","download_url":"https://codeload.github.com/GreenFlag31/modal-library/tar.gz/refs/heads/V18-without-rxjs","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273264,"owners_count":17448074,"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","library","modal"],"created_at":"2024-08-04T01:01:51.045Z","updated_at":"2024-11-19T00:31:03.057Z","avatar_url":"https://github.com/GreenFlag31.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Modals"],"readme":"# ngx-modal-ease\n\n# Description\n\nngx-modal-ease is a versatile Angular library providing a lightweight, simple, and performant modal. This library supports data communication between components, opening of multiple modals, custom animations, and a range of customisable options.\n\nSupport Angular version starts at v16 (see changelog).\n\n# Demo\n\nLive demonstration of the ngx-modal-ease library [here](https://greenflag31.github.io/modal-library/ngx-modal-ease).\n\n# Installation\n\n| Version | Command                    | Description                                                                                         |\n| ------- | -------------------------- | --------------------------------------------------------------------------------------------------- |\n| V16     | npm i ngx-modal-ease@0.0.6 | Install the V16 compatible version.                                                                 |\n| V17     | npm i ngx-modal-ease@0.0.9 | Install the V17 compatible version.                                                                 |\n| V18     | npm i ngx-modal-ease       | Install the V18 compatible version. This version is compatible with a zoneless Angular application. |\n\n# Options\n\nThe modal supports a range of customisable options:\n\n```javascript\nOptions {\n  modal?: {\n    enter?: string;\n    leave?: string;\n    top?: string;\n    left?: string;\n  };\n  overlay?: {\n    enter?: string;\n    leave?: string;\n    backgroundColor?: string;\n  };\n  size?: {\n    height?: string;\n    maxHeight?: string;\n    width?: string;\n    maxWidth?: string;\n    padding?: string;\n  };\n  actions?: {\n    escape?: boolean;\n    click?: boolean;\n  };\n  data?: {\n    [key: string]: unknown;\n  };\n}\n```\n\n| Name                                                           | Default                                                            | Description                                                                                                                                                                                                       |\n| -------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003eenter\u003c/span\u003e           | \u003cspan style=\"background-color:#f2f2f2;\"\u003e\u003c/span\u003e                    | \u003cspan style=\"background-color:#f2f2f2;\"\u003eDefine the enter animation for the modal or the overlay respecting the [shorthand animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).\u003c/span\u003e |\n| leave                                                          |                                                                    | Define the leave animation for the modal or the overlay respecting the [shorthand animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).                                                |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003etop\u003c/span\u003e             | \u003cspan style=\"background-color:#f2f2f2;\"\u003e50\u003c/span\u003e                  | \u003cspan style=\"background-color:#f2f2f2;\"\u003eTop position of the modal in percent. Can be defined in any measure unit.\u003c/span\u003e                                                                                          |\n| left                                                           | 50                                                                 | Left position of the modal in percent. Can be defined in any measure unit.                                                                                                                                        |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003ebackgroundColor\u003c/span\u003e | \u003cspan style=\"background-color:#f2f2f2;\"\u003ergba(0, 0, 0, 0.4);\u003c/span\u003e | \u003cspan style=\"background-color:#f2f2f2;\"\u003eBackground color of the overlay. Can be defined in any color notation (rgba, hex, hsl, ...).\u003c/span\u003e                                                                       |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003eminHeight\u003c/span\u003e       | \u003cspan style=\"background-color:#f2f2f2;\"\u003e\u003c/span\u003e                    | \u003cspan style=\"background-color:#f2f2f2;\"\u003eMinimum height of the modal. Can be defined in any measure unit.\u003c/span\u003e                                                                                                   |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003eheight\u003c/span\u003e          | \u003cspan style=\"background-color:#f2f2f2;\"\u003e\u003c/span\u003e                    | \u003cspan style=\"background-color:#f2f2f2;\"\u003eHeight of the modal. Can be defined in any measure unit.\u003c/span\u003e                                                                                                           |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003ewidth\u003c/span\u003e           | \u003cspan style=\"background-color:#f2f2f2;\"\u003e\u003c/span\u003e                    | \u003cspan style=\"background-color:#f2f2f2;\"\u003eWidth of the modal. Can be defined in any measure unit.\u003c/span\u003e                                                                                                            |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003emaxWidth\u003c/span\u003e        | \u003cspan style=\"background-color:#f2f2f2;\"\u003e100\u003c/span\u003e                 | \u003cspan style=\"background-color:#f2f2f2;\"\u003eMax width of the modal in percent. Can be defined in any measure unit.\u003c/span\u003e                                                                                             |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003epadding\u003c/span\u003e         | \u003cspan style=\"background-color:#f2f2f2;\"\u003e0.5\u003c/span\u003e                 | \u003cspan style=\"background-color:#f2f2f2;\"\u003ePadding to be applied on the modal in rem. Can be defined in any measure unit.\u003c/span\u003e                                                                                     |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003eescape\u003c/span\u003e          | \u003cspan style=\"background-color:#f2f2f2;\"\u003etrue\u003c/span\u003e                | \u003cspan style=\"background-color:#f2f2f2;\"\u003eEnable escape to close the current modal.\u003c/span\u003e                                                                                                                          |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003eclick\u003c/span\u003e           | \u003cspan style=\"background-color:#f2f2f2;\"\u003etrue\u003c/span\u003e                | \u003cspan style=\"background-color:#f2f2f2;\"\u003eEnable click outside of the modal to close the current modal.\u003c/span\u003e                                                                                                      |\n| \u003cspan style=\"background-color:#f2f2f2;\"\u003edata\u003c/span\u003e            | \u003cspan style=\"background-color:#f2f2f2;\"\u003e\u003c/span\u003e                    | \u003cspan style=\"background-color:#f2f2f2;\"\u003eData communication between components under the form of key-value pairs. Any type of data is supported.\u003c/span\u003e                                                            |\n\n# Complete Example\n\nInject the ModalService through regular dependency injection in your component.\n\nIn the following example, `ModalContentComponent` is the content of the modal and should be provided as first parameter. As second parameter, provide an object respecting the `Options` interface (see above).\n\nNB: _From the V18 compatible version, observables have been transformed to regular Promises to anticipate the future optional RxJS._\n\n```javascript\n  this.modalService.open(ModalContentComponent, {\n    modal: {\n      // animation\n      enter: 'enter-scale-down 0.1s ease-out',\n    },\n    overlay: {\n      // animation\n      leave: 'fade-out 0.3s',\n    },\n    size: {\n      // modal configuration\n      width: '400px',\n    },\n    data: {\n      // data to ModalContentComponent\n      type: 'Angular modal library',\n    },\n  })\n  // .then() or async / await for V18 compatible version\n  .subscribe((dataFromModalContentComponent) =\u003e {\n    ...\n  });\n```\n\nAny type of data can be provided between components. Create the corresponding property (here, `type`) in your component (here, `ModalContentComponent`) and the property will be assigned with the provided value.\n\nIn your `ModalContentComponent`:\nTo pass information from the `ModalContentComponent` to your current component, inject the `ModalService` through regular dependency injection and call the `close(data)` method from the service with any data you wish to send back to your component. This method returns an RxJs subject (_a promise for V18 compatible version_), so subscribe to it as shown in the above example. It is not necessary to unsubscribe from the subscription since it will automatically `complete()` in the service.\n\n```javascript\n  // Inside ModalContentComponent\n  onClose() {\n    this.modalService.close(this.dataToSendBack);\n  }\n```\n\nPublicly available methods have been exhaustively documented and typed, so you should get autocomplete and help from your code editor. Press on `CTRL + space` to get help on the available properties in the `Options` object.\n\n# ModalService\n\nThis library exposes a `ModalService` that contains the following API:\n\n```javascript\n// Opens a component inside the modal\nopen\u003cC\u003e(componentToCreate: Type\u003cC\u003e, options?: Options);\n\n// Close a modal with optional data to send back\nclose(data?: unknown);\n\n// Close all opened modals\ncloseAll();\n```\n\nNB: Z-index of overlay and modal start at 1000 and 2000 respectively. In case of multiple modals, z-indexes will be incremented by 1000.\n\n# Ready-to-use animations keyframes\n\nThis library comes with predefined and ready-to-use animations keyframes. Just fill in the `name`, `duration` and `easing function` (more info on the `animation CSS shorthand` [here](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)). Those animations are _position agnostic_, so if you wish to position your modal at other `top` and `left` values than default, it will correctly work. Of course, you can create your own keyframes too.\n\n```css\n/* Recommended: 0.2s ease-out */\n@keyframes enter-going-down {\n  from {\n    transform: translate(-50%, -60%);\n  }\n  to {\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Recommended: 0.2s linear */\n@keyframes enter-scaling {\n  from {\n    transform: scale(0.8) translate(-50%, -50%);\n    transform-origin: left;\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n    transform-origin: left;\n  }\n}\n\n/* Recommended: 0.1s ease-out */\n@keyframes enter-scale-down {\n  from {\n    transform: scale(1.5) translate(-50%, -60%);\n    transform-origin: left;\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n    transform-origin: left;\n  }\n}\n\n/* Recommended: 0.3s linear */\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Recommended: 0.3s linear */\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Recommended: 0.7s linear */\n@keyframes bounce-in {\n  0% {\n    transform: translate(-50%, -85%);\n  }\n  18% {\n    transform: translate(-50%, -50%);\n  }\n  60% {\n    transform: translate(-50%, -65%);\n  }\n  80% {\n    transform: translate(-50%, -50%);\n  }\n  90% {\n    transform: translate(-50%, -53%);\n  }\n  100% {\n    transform: translate(-50%, -50%);\n  }\n}\n\n/* Recommended: 1s linear */\n@keyframes scale-rotate {\n  30% {\n    transform: scale(1.05) translate(-50%, -50%);\n    transform-origin: left;\n  }\n  40%,\n  60% {\n    transform: rotate(-3deg) scale(1.05) translate(-50%, -50%);\n    transform-origin: left;\n  }\n  50% {\n    transform: rotate(3deg) scale(1.05) translate(-50%, -50%);\n    transform-origin: left;\n  }\n  70% {\n    transform: rotate(0deg) scale(1.05) translate(-50%, -50%);\n    transform-origin: left;\n  }\n  100% {\n    transform: scale(1) translate(-50%, -50%);\n    transform-origin: left;\n  }\n}\n```\n\nIf you create your own keyframes, I would recommend to create a new file `modal-animations` (.css or preprocessor), and @import it in your `styles.css` (or preprocessor) at the root of the application.\n\n# SSR (Server Side Rendering)\n\nThis library supports Server Side Rendering (SSR). The modal will not instantiate during server-side execution, as it requires access to the DOM API.\n\n# DX Friendly\n\nThis library has been documented and should provide autocomplete and help from your code editor. Tested on VS Code.\n\n# Performance\n\nEmphasis has been placed on performance, adopting `ChangeDetectionStrategy.OnPush` strategy. This library respects Angular's mindset and use the Angular API to create components. Modal components will be removed from the DOM after closing.\n\n# Change log\n\nVersion 0.0.4: Fixed of a communication bug between components. Every modal has now its own subject to send back data to the calling component.\n\nVersion 0.0.5: Fixed a bug between components that prevented the component from closing when applying different animations with multiple stacked modals.\n\nVersion 0.0.6: Added V16 backward compatibility support.\n\nVersion 0.0.8: Incorporated internal component destruction to ensure proper invocation of the child's OnDestroy lifecycle hook.\n\nVersion 0.1.0: Added the V18 version. This version is compatible with a zoneless Angular application. Optional RxJS has been anticipated, observables have been transformed to regular Promises / event listeners.\n\n# Report a Bug\n\nPlease provide a detailed description of the encountered bug, including your options and the steps/actions that led to the issue. An accurate description will help me to reproduce the issue.\n\n# Ngx-ease serie\n\nYou like this library? Discover the ngx-ease serie [here](https://www.npmjs.com/~greenflag31).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGreenFlag31%2Fmodal-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGreenFlag31%2Fmodal-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGreenFlag31%2Fmodal-library/lists"}