diff --git a/3rdpartylicenses.txt b/3rdpartylicenses.txt new file mode 100644 index 0000000..7b899fd --- /dev/null +++ b/3rdpartylicenses.txt @@ -0,0 +1,297 @@ +@angular/animations +MIT + +@angular/cdk +MIT +The MIT License + +Copyright (c) 2024 Google LLC. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. + + +@angular/common +MIT + +@angular/core +MIT + +@angular/forms +MIT + +@angular/material +MIT +The MIT License + +Copyright (c) 2024 Google LLC. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. + + +@angular/platform-browser +MIT + +mat-image-overlay +MIT + +rxjs +Apache-2.0 + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + + +zone.js +MIT +The MIT License + +Copyright (c) 2010-2024 Google LLC. https://angular.io/license + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..2ad47b9 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,210 @@ +# Changelog + +All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. + +## [17.0.3](https://github.com/BePo65/mat-image-overlay/compare/v17.0.2...v17.0.3) (2024-07-02) + +## [17.0.2](https://github.com/BePo65/mat-image-overlay/compare/v17.0.1...v17.0.2) (2024-03-02) + +### [17.0.1](https://github.com/BePo65/mat-image-overlay/compare/v17.0.0...v17.0.1) (2023-12-23) + + +### Bug Fixes + +* update peerDependencies in library project ([541e1da](https://github.com/BePo65/mat-image-overlay/commit/541e1dabdbadcbb2eab6f0ac8b4f5b4abd48e515)) + +## [17.0.0](https://github.com/BePo65/mat-image-overlay/compare/v16.0.0...v17.0.0) (2023-12-23) + + +### ⚠ BREAKING CHANGES + +* update to angular v17 + +### Features + +* change mat-tristate-checkbox to standalone components ([091c7c6](https://github.com/BePo65/mat-image-overlay/commit/091c7c624ddafeba219aac1c907626cc885a365f)) +* update to angular v17 ([5ce699b](https://github.com/BePo65/mat-image-overlay/commit/5ce699b44bcae2ebef8e22bc71610d4b93ac5dc1)) + +## [16.0.0](https://github.com/BePo65/mat-image-overlay/compare/v15.1.4...v16.0.0) (2023-12-21) + + +### ⚠ BREAKING CHANGES + +* tha project now requires angular v16 +* ElementDisplayPosition entries changed to 6 positions +* keydownEvents() changed to keydownEvents$ observable +* config object changed - use provider to get image data + +### Features + +* add data provider object as a config element - solve issue [#225](https://github.com/BePo65/mat-image-overlay/issues/225) ([3529929](https://github.com/BePo65/mat-image-overlay/commit/35299295d877718fd8e160fd9b3311f3929ce9d0)) +* add interface 'ThumbnailProvider' to add thumbnails to provider ([2b7baa7](https://github.com/BePo65/mat-image-overlay/commit/2b7baa7ec7462d1854cb95d304cda1e4dff27f0b)) +* define new positions for image description ([c0245b6](https://github.com/BePo65/mat-image-overlay/commit/c0245b66643a160acd28ba46b8abc4cd59d70c07)) +* **demo:** add alt and title tag to images of objectImages ([a4a2f99](https://github.com/BePo65/mat-image-overlay/commit/a4a2f99e5b840e4364d4bd5ca1e52c408bab2f9e)) +* **demo:** add option to select css class for backdrop ([aa89de1](https://github.com/BePo65/mat-image-overlay/commit/aa89de17ca771ddea9402796fceff23238c2a6e2)) +* **demo:** add trackBy function to ngFor of objectImages thumbnails ([d9aed51](https://github.com/BePo65/mat-image-overlay/commit/d9aed51a446aec5c04a3e097fb21d59560560853)) +* **demo:** dynamically set height and width of thumnail image ([25e1daa](https://github.com/BePo65/mat-image-overlay/commit/25e1daac1f1f5b0c438ed16d39d85ecd41dc3101)) +* **demo:** get thumbnails for object datasource from provider ([a31a9a4](https://github.com/BePo65/mat-image-overlay/commit/a31a9a455d31206e81379ab98c53e2f83da0eed8)) +* **demo:** image show and single image selection on all image sources ([4a63c51](https://github.com/BePo65/mat-image-overlay/commit/4a63c5191b8ca875d5dc33d197a6ccf2138382ac)) +* **demo:** make 'external navigation' show more variants ([bdc1503](https://github.com/BePo65/mat-image-overlay/commit/bdc15035b0eaaf8c82d6d01bcad0de679ccd6e21)) +* limit width of image description to width of image ([6b78deb](https://github.com/BePo65/mat-image-overlay/commit/6b78deb478962ae657a36bce8c6ef2259de2e025)) +* prepare to show thumbnail while loading - thumbnail still missing ([84680da](https://github.com/BePo65/mat-image-overlay/commit/84680daf5b54e16374adc5cc35fd97043aca965b)) +* show image description as tooltip of description element ([8199515](https://github.com/BePo65/mat-image-overlay/commit/8199515ea47c3c5e72e17c7540c418bbbd865f6c)) +* update to angular v16 ([a8446de](https://github.com/BePo65/mat-image-overlay/commit/a8446de327170aab1c5782e3d265f481a7f4fa1f)) + + +### Bug Fixes + +* change default value of data-loaded attribute from '' to 'false' ([795367b](https://github.com/BePo65/mat-image-overlay/commit/795367b8080104e93bee430acf7c846d7adbff35)) +* **demo:** use option for backdrop for second example too ([3ec357a](https://github.com/BePo65/mat-image-overlay/commit/3ec357a9a63c57fd4ee6a13e799e3f2f1829323a)) +* don't emit 'imageClicked' when clicking the navigation buttons ([aef33b5](https://github.com/BePo65/mat-image-overlay/commit/aef33b509b43d47a050358c1fe6bdaf98568a78a)) +* externally closing the overlay does not emit lastImageIndex ([8069ccf](https://github.com/BePo65/mat-image-overlay/commit/8069ccffc55415085815d9f1fcbfab559233b727)) +* give thumbnail the right dimensions ([dd10f61](https://github.com/BePo65/mat-image-overlay/commit/dd10f617b3732205172b3e2cf026d99bccd00f84)) +* initial size of thumbnail image ([8d1c08e](https://github.com/BePo65/mat-image-overlay/commit/8d1c08e2171b32a57e0650e8fdc7fd198dfb2414)) +* **lib:** mske MatImageOverlayRef._componentInstance protected ([094bd96](https://github.com/BePo65/mat-image-overlay/commit/094bd9660ba6ff5d7a9e5a8c6ded2e2394a10ffc)) +* **lib:** prevent hiding images, when going to image already shown ([5e7f396](https://github.com/BePo65/mat-image-overlay/commit/5e7f396b769c1f84f30e8ef45546c6895ec0388c)) +* make dafault max-x of images 0px instead of 0vw/0vh ([18f2a19](https://github.com/BePo65/mat-image-overlay/commit/18f2a1923c7dfbb4b0c09c6a600844acf8e37afd)) +* make description (position=top) move in from above ([ec7cb9d](https://github.com/BePo65/mat-image-overlay/commit/ec7cb9d3970fd8cbb2015ca6b107969d8a5139a0)) +* make description shown on top not to cover close button ([6d21487](https://github.com/BePo65/mat-image-overlay/commit/6d21487795a98c18a17d8d95fdd1b2f6b5c6ac40)) +* make image disappear without animation ([29d63c8](https://github.com/BePo65/mat-image-overlay/commit/29d63c83fdb83144b715ba535f10c852fa98a1b8)) +* make margin in objectSource same as in stringSource ([8168280](https://github.com/BePo65/mat-image-overlay/commit/8168280f112a8177262133e116117fc90010993a)) +* make resize events update image while resizing ([65d7528](https://github.com/BePo65/mat-image-overlay/commit/65d75287d9144624719d8823ee2fdeffc5fb5745)) +* make sure that all internal subscriptions get unsubscribed ([3dcdcbc](https://github.com/BePo65/mat-image-overlay/commit/3dcdcbca3fcd9548e844306823eb0ef15c6108f3)) +* make thumbnail hide on 'gotoImage' ([9360a6b](https://github.com/BePo65/mat-image-overlay/commit/9360a6ba7e4e8c39d2a8d9d799e7e92ad839f1ee)) +* prevent click event of navigation buttons to bubble up ([4c2a47b](https://github.com/BePo65/mat-image-overlay/commit/4c2a47b6bbca661aaae7fac768c2ef2564079140)) +* reactivate automatic image show in demo project ([1a53ff4](https://github.com/BePo65/mat-image-overlay/commit/1a53ff4d3961d7a4a6b0cc2129b9e0c58dff1ec3)) +* reduce decbounce time for resize events ([9a0a20c](https://github.com/BePo65/mat-image-overlay/commit/9a0a20c44e3bccd22caa9e8495f4110476edd620)) +* replace 'event.stopPropagation()' with angular way of doing it ([759cff1](https://github.com/BePo65/mat-image-overlay/commit/759cff15f4f1373d233ee0529b973a5146547dc7)) +* replace the global handler of click events by click handler of img ([a548d26](https://github.com/BePo65/mat-image-overlay/commit/a548d2699d88ced0d901ac88be1bea066376fe74)) +* reset data-loaded attributes when going to new image ([8dc01d7](https://github.com/BePo65/mat-image-overlay/commit/8dc01d7b511b2f1223e4c0a2670642c7c0e9ac0b)) +* set initial / default size of image ([1245df6](https://github.com/BePo65/mat-image-overlay/commit/1245df631b762ba4cc3c605c1cbe4ce30b41266f)) +* unsubscribe from subscriptions, when overlay is destroyed ([012fb5d](https://github.com/BePo65/mat-image-overlay/commit/012fb5d12238af0665ba269fe244c1bc059e5b77)) +* update declarations list in test of demo project ([a0742bc](https://github.com/BePo65/mat-image-overlay/commit/a0742bc248119de8cfdc325be14ced2fa4e4c33b)) +* update used images in demo project ([51621be](https://github.com/BePo65/mat-image-overlay/commit/51621be1b46d05fcbbb9d26722c7997c6eae3a46)) + +### [15.1.4](https://github.com/BePo65/mat-image-overlay/compare/v15.1.3...v15.1.4) (2023-11-02) + +### [15.1.3](https://github.com/BePo65/mat-image-overlay/compare/v15.1.2...v15.1.3) (2023-05-24) + +### [15.1.2](https://github.com/BePo65/mat-image-overlay/compare/v15.1.1...v15.1.2) (2023-05-24) + +### [15.1.1](https://github.com/BePo65/mat-image-overlay/compare/v15.1.0...v15.1.1) (2023-01-14) + +## [15.1.0](https://github.com/BePo65/mat-image-overlay/compare/v15.0.0...v15.1.0) (2023-01-14) + + +### ⚠ BREAKING CHANGES + +* drops 'imageClickHandler' from configuration and moves +it as an observable to 'MatImageOverlayRef' + +### Features + +* embed roboto font instead of linking it ([de1fab3](https://github.com/BePo65/mat-image-overlay/commit/de1fab36e67d4dc6e0c8f7781e240da87310c510)) +* replace option 'imageClickHandler' with observable ([70c9442](https://github.com/BePo65/mat-image-overlay/commit/70c94424276756d3890b1ede108b19d09feb1658)) + +## [15.0.0](https://github.com/BePo65/mat-image-overlay/compare/v3.0.3...v15.0.0) (2023-01-04) + + +### Bug Fixes + +* errors from stylelint ([99e4cea](https://github.com/BePo65/mat-image-overlay/commit/99e4cea75365476dac210157128b7e10f6068b69)) +* type error in event handler ([712b2c6](https://github.com/BePo65/mat-image-overlay/commit/712b2c61a96c0bd365d04488aa304b84baa450e6)) +* warnings from upgrading to angular v15 ([a87f141](https://github.com/BePo65/mat-image-overlay/commit/a87f14124353bef3db5e025b277955ff664ad34a)) + +### [3.0.3](https://github.com/BePo65/mat-image-overlay/compare/v3.0.2...v3.0.3) (2022-07-10) + +### [3.0.2](https://github.com/BePo65/mat-image-overlay/compare/v3.0.1...v3.0.2) (2022-01-30) + +### [3.0.1](https://github.com/BePo65/mat-image-overlay/compare/v3.0.0...v3.0.1) (2022-01-30) + +## [3.0.0](https://github.com/BePo65/mat-image-overlay/compare/v2.0.0...v3.0.0) (2022-01-30) + + +### ⚠ BREAKING CHANGES + +* remove 'with' and filter from MatImageOverlayHarness +as this feature is unnecessary (only 1 MatImageOverlay can be created +at one time). + +### Features + +* add 'imageUrl' and 'sendKeys' to MatImageOverlayHarness ([e08547a](https://github.com/BePo65/mat-image-overlay/commit/e08547a69ed9c5ef7451f80ca270cdff159ba856)) +* move host() of MatImageOverlayHarness to overlayContainer ([3becd0d](https://github.com/BePo65/mat-image-overlay/commit/3becd0d26312f4c19e4a6f034e5cbded4ce2761d)) +* remove 'with' and filter from MatImageOverlayHarness ([e577640](https://github.com/BePo65/mat-image-overlay/commit/e5776405db87f124a858804efc264a97dc58b9e4)) +* remove sendKeysWithModifiers as modifiers are not evaluated ([eb57718](https://github.com/BePo65/mat-image-overlay/commit/eb57718bd8679a9a6fe47d551ef72bd15c9c5f55)) + +## [2.0.0](https://github.com/BePo65/mat-image-overlay/compare/v1.0.0...v2.0.0) (2022-01-26) + + +### ⚠ BREAKING CHANGES + +* add navigation to ImageOverlayComponentRef. +'Law of demeter' says that accessing properties of components in +another component is bad practice. +* images in config is now required; optional parameters +don't have a default value anymore. +* use MatImageOverlayConfig as parameter of 'open' +to combine all parameters into one single parameter. +* 'open()' requires index of image not url +* component names changed to be consistent with project +names + +### Features + +* activate events ([58d57a2](https://github.com/BePo65/mat-image-overlay/commit/58d57a2bfecb6b8a241c360bb3f4c9389f1021fc)) +* add config class to public api ([742f65d](https://github.com/BePo65/mat-image-overlay/commit/742f65d5949ac1271e8222173d8de8a5afefdfbe)) +* add config option for position of description when style='onHover' ([94805ea](https://github.com/BePo65/mat-image-overlay/commit/94805ea89c724eba754055ef6a4af1c008e1bc30)) +* add demo with minimal required configuration ([2d0b664](https://github.com/BePo65/mat-image-overlay/commit/2d0b6646b6dab781e2c6694d93c5a347a459bf09)) +* add gotoImage and gotoLastImage to automatic demo ([fbcd5ed](https://github.com/BePo65/mat-image-overlay/commit/fbcd5edd7f5ed121c954b3b27281a55b5f25d602)) +* add home and end button to move in list of images ([4281aa1](https://github.com/BePo65/mat-image-overlay/commit/4281aa14a6f66d660246ca6f89f401b11d7d0ded)) +* add navigation buttons to overlay image ([cda1c84](https://github.com/BePo65/mat-image-overlay/commit/cda1c84b380e17dfb3a5f3ddcec1d7a8c470a30f)) +* add option 'descriptionForImage' to string source demo ([615bf8e](https://github.com/BePo65/mat-image-overlay/commit/615bf8e062ef5839c133aff6a791e9f53994f090)) +* add option for click event handler of image ([e054290](https://github.com/BePo65/mat-image-overlay/commit/e054290ea6815435372d3d2cafda87536bae8881)) +* add option to access description of image ([3e3f835](https://github.com/BePo65/mat-image-overlay/commit/3e3f83596b70931b80bac5525dc8bf870d1cf99a)) +* add option to set display style for overlay buttons ([f28d663](https://github.com/BePo65/mat-image-overlay/commit/f28d6636a6fe6dcb99eb62702835b6849e1d9ce9)) +* add property to optionally display an image description ([c01df2d](https://github.com/BePo65/mat-image-overlay/commit/c01df2de5e42fcb41d265779112294d24b4ab057)) +* add testHarness for mat-image-overlay ([1a12bba](https://github.com/BePo65/mat-image-overlay/commit/1a12bba725d7c108a583795d47fa74cdf0061967)) +* add title and short description to demo page ([72254c4](https://github.com/BePo65/mat-image-overlay/commit/72254c44cbe110c7bc9b949064ebe1817c3523a0)) +* add tooltip to link images of demo page ([9052f14](https://github.com/BePo65/mat-image-overlay/commit/9052f1429f22d1746c7935ca924c8381781fab13)) +* always show buttons on devices that do not support 'hover' ([f7198e5](https://github.com/BePo65/mat-image-overlay/commit/f7198e54bd84bdf852bb8b85fdeba56928e47d29)) +* change call signature of 'open' method of MatImageOverlay ([2dc7f02](https://github.com/BePo65/mat-image-overlay/commit/2dc7f0297d043cfea8c0ffeb8826db32f3e3d409)) +* default implementation for 'urlForImage' accecpts empty 'images' ([6b7fe6f](https://github.com/BePo65/mat-image-overlay/commit/6b7fe6f7378da1498a154a1af972aa3a10322066)) +* define start image in overlay via index (not url) ([8c1e980](https://github.com/BePo65/mat-image-overlay/commit/8c1e9809ea3752900430e544ca4e4ea0330bd29f)) +* descriptionDisplayStyle 'onHover' shows text on bottom of image ([d8de396](https://github.com/BePo65/mat-image-overlay/commit/d8de3964c66c9120163db1197c9a5d0241fecb34)) +* extend demo to show external navigation ([38d95cc](https://github.com/BePo65/mat-image-overlay/commit/38d95ccdb3e0978c218bee3b6e21c40d52be31d6)) +* hide buttons for next / previous image on limits of list ([2499c29](https://github.com/BePo65/mat-image-overlay/commit/2499c29c97f09c007826218d199f3d58b31681f6)) +* hide description if value is undefined or empty string ([461ced8](https://github.com/BePo65/mat-image-overlay/commit/461ced88f2048c398bb5b16e59f5482682c5bb35)) +* increase size of images to fill viewport ([db57483](https://github.com/BePo65/mat-image-overlay/commit/db57483302222fefbb0e1481545cf61de4d156ab)) +* make 'mat-image-overlay-ref' available in mat-image-overlay ([04ec39f](https://github.com/BePo65/mat-image-overlay/commit/04ec39fc37854331e7b25c64a0906b4cf45cb0b1)) +* make 'open' return a MatImageOverlayRef object ([c084f0f](https://github.com/BePo65/mat-image-overlay/commit/c084f0fb2b8bef01025e1769ee395dacf5654b7a)) +* make configuration of datasource more flexible ([4d5b766](https://github.com/BePo65/mat-image-overlay/commit/4d5b7668966e1ec60c38e18b3dfc802d6c2ca357)) +* make images a required parameter of MatImageOverlayConfig ([7082f31](https://github.com/BePo65/mat-image-overlay/commit/7082f317a359dab7ec7831af5efc8909d9be4c3d)) +* make MatImageOverlayConfig an interface ([560f6de](https://github.com/BePo65/mat-image-overlay/commit/560f6de525fbc72c16b9eb78bd471714d6cbcad9)) +* make option 'urlForImage' optional ([4511ad9](https://github.com/BePo65/mat-image-overlay/commit/4511ad96016a01625adf34df61b232ebbf546819)) +* make sure that only 1 instance of MatImageOverlay exists ([e03e01c](https://github.com/BePo65/mat-image-overlay/commit/e03e01c583ea23be20f40690a6f6796a83982db9)) +* remove 'panelClass' from config and mat-image-overlay-ref ([0ea0987](https://github.com/BePo65/mat-image-overlay/commit/0ea098705960863fb44b5c7cce9aa9a01631ec74)) +* remove access to OverlayComponent in OverlayComponentRef ([f8119d6](https://github.com/BePo65/mat-image-overlay/commit/f8119d67fb3e63f76d568c79ecd33e3b2d25ba7f)) +* show options in demo page in right column ([85fbb87](https://github.com/BePo65/mat-image-overlay/commit/85fbb871cb832c6a6ff8626f1f508429a309696c)) + + +### Bug Fixes + +* activate configuration parameter 'backdropClass' ([af220c7](https://github.com/BePo65/mat-image-overlay/commit/af220c707981d96d0718419282fb5e839291749f)) +* add css to keep ascpect ratio of image when resizing browser ([6fd2bcc](https://github.com/BePo65/mat-image-overlay/commit/6fd2bccd54662e8cff2069353fc266e498840966)) +* add visibility of public methods, remove unnecessary 'getState' ([b877798](https://github.com/BePo65/mat-image-overlay/commit/b8777988dd8c303e821a1320efc7d1ebe5971485)) +* change svg icons to constants ([dd18545](https://github.com/BePo65/mat-image-overlay/commit/dd185454c21e28a5c1f535eae1e33731ea155d6d)) +* prevent keystrokes from overlay to be sent to parent page ([e4f12c5](https://github.com/BePo65/mat-image-overlay/commit/e4f12c57decdb9c5455b2d1299d55ae33dd5d4b1)) +* remove base from index.html of demo ([01d21e0](https://github.com/BePo65/mat-image-overlay/commit/01d21e0f245518f7629076224e2355581dfa5f8a)) +* rename 'AngularMaterialImageOverlay...' to 'MatImageOverlay...' ([c55177b](https://github.com/BePo65/mat-image-overlay/commit/c55177b3cd4a528aee77d9fe8fc5f1f4cd8394bb)) +* stop loop when 'imgage show' is manually closed ([d632a93](https://github.com/BePo65/mat-image-overlay/commit/d632a93b614fc96126ac207a1bcb3544b6a972b7)) +* stylelint request shorthand for css grid ([5cec9fa](https://github.com/BePo65/mat-image-overlay/commit/5cec9faabf19a059aef0bd4b61d1be411f90259a)) +* update demo to show different data sources ([214be52](https://github.com/BePo65/mat-image-overlay/commit/214be522eb50b10772264c95134fc6502858b175)) +* update layout of demo page ([c0803a0](https://github.com/BePo65/mat-image-overlay/commit/c0803a0972ba4eb8da3d11f76d0cdba6bd714b83)) +* update tests to current version ([20479b8](https://github.com/BePo65/mat-image-overlay/commit/20479b83a9e8bc117f7b93756bc3f4e99af494bd)) + +## [1.0.0](///compare/v0.0.8-next...v1.0.0) (2021-12-16) + +# Changelog + +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0e6a700 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Rafael Santos + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..c2b6355 --- /dev/null +++ b/README.md @@ -0,0 +1,424 @@ +# Mat-Image-Overlay +![Version](https://img.shields.io/badge/version-17.0.3-blue.svg?cacheSeconds=2592000) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/kefranabg/readme-md-generator/blob/master/LICENSE) +![Angular version](https://img.shields.io/github/package-json/dependency-version/bepo65/mat-image-overlay/@angular/core?color=red&label=Angular&logo=angular&logoColor=red) +![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/bepo65/mat-image-overlay/@angular/material?color=red&label=Angular-Material&logo=angular&logoColor=red) + +An [Angular Material](https://material.angular.io/) based standalone component that shows images in an overlay. +The component is based on Rafasantos [angular-material-image-overlay](https://github.com/rafasantos/angular-material-image-overlay). + +## Demo + Try out the [demo page](https://bepo65.github.io/mat-image-overlay/). + +![Screenshot](assets/screenshot.jpg "Screenshot of the demo page") + +## Quick Start +Install the package: + +``` +npm install mat-image-overlay +``` + +Configure your angular application module (e.g: `app.module.ts`): +``` +... +import { MatImageOverlayModule } from 'mat-image-overlay'; + +@NgModule({ + ... + imports: [ + ... + MatImageOverlayModule + ] +}) +export class AppModule { } +``` + +Define a class based on MatImageDetailsProvider to get information about the images and create an instance of it in the mat-image-overlay configuration. Examples for classes based on MatImageDetailsProvider can be found in the 'examples/provider' directory of the mat-image-overlay component. +``` +images = [ + 'https://url/of/first/image.jpg', + 'https://url/of/second/image.jpg', + 'https://url/of/third/image.jpg', + 'https://url/of/fourth/image.jpg' +]; + +constructor(private imageOverlay: MatImageOverlay) { +} + +openImageOverlay(imageIndex?: number): void { + const config = { + imageDetails: new StringSourceImageDetailsProvider(this.images), + startImageIndex: imageIndex, + backdropClass: 'demo-backdrop-class' + } as MatImageOverlayConfig; + const imageOverlayRef = this.imageOverlay.open(config); +} +``` + +Open the overlay via a clickable element in your html template (e.g. `app.component.html`) +```html +

+ Click here to open the overlay +

+``` +## Navigation +When the overlay is shown, the keyboard can be used to navigate between the images (even when no navigational buttons are displayed on the image). The following keys are available: + +| key | function | +|-----|----------| +| Arrow Right | show next image | +| Arrow Down | show next image | +| Arrow Left | show previous image | +| Arrow Up | show previous image | +| Home | show first image | +| End | show last image | +| Escape | close overlay | + +## Used assets +The component is based on Angular Material and uses [Google Fonts](https://fonts.google.com/specimen/Roboto) and [Google Material Icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). +Both fonts are part of the project and not fetched via https. + +Some special icons are stored in the code as strings representing the icons as svg graphics. + +## Mat-Image-Overlay Demo +Demo project to show how `mat-image-overlay` works. + +``` +git clone git@github.com:BePo65/mat-image-overlay.git +cd mat-image-overlay +npm start +``` + +Navigate to http://localhost:4200 + +# API reference for Mat-Image-Overlay + +## Services +### MatImageOverlay +Service to open Mat-Image-Overlay as a modal overlay. + +**Properties** +| Name | Description | +|---|---| +| imageOverlayRef: MatImageOverlayRef | undefined | Reference of the opened image overlay. | +| afterOpened: Subject<MatImageOverlayRef> | Stream that gets notified when the image overlay has been opened. | +| afterClosed: Subject<number> | Stream that gets notified when the image overlay has been closed. | + +**Methods** +| open | | +|---|--| +| Opens the image overlay. | | +| *Parameters* | | +| config
MatImageOverlayConfig | Extra configuration options. | +| *Returns* | | +| MatImageOverlayRef | Reference to opened image overlay. + +| imageOverlayExists | | +|---|--| +| Checks whether the image overlay already exists. | | +| *Returns* | | +| boolean | true = image overlay exists | + +## Interfaces +### MatImageOverlayConfig +Configuration for opening a modal image overlay with the MatImageOverlay service. + +**Properties** +| Name | Description | +|---|---| +| imageDetails | Instance of a class derived from MatImageDetailsProvider. | +| startImageIndex | Index of the first image to be displayed (0 based). | +| backdropClass | CSS class to add to the backdrop, replacing the default backdrop css. This CSS class must be in the global styles of the application.
Default style is '`background: rgba(0 0 0 / 32%);`'
Optional parameter. | +| margin | Minimal margin in px around the loaded image.
Default value: 32
Optional parameter. | +| overlayButtonsStyle | Style of the buttons in the image overlay (using enum ElementDisplayStyle: never, onHover, always).
Default value: ElementDisplayStyle.onHover.
Optional parameter. | +| descriptionDisplayStyle | Style of the image description in the image overlay (using enum ElementDisplayStyle: never, onHover, always). Using this option requires a property named 'description' in the data source.
Default value: ElementDisplayStyle.never.
Optional parameter. | +| descriptionDisplayPosition | Position of the image description in the image overlay (using enum ElementDisplayPosition: bottomLeft, bottomCenter, bottomRight, topLeft, topCenter, topRight). Using this option requires a property named 'description' in the data source.
Default value: ElementDisplayPosition.bottomRight.
Optional parameter. | +| imageClickedAdditionalData | Object with arbitrary data that will be returned by the imageClicked event (added to the data returned by the 'imageDetails.imageInformation' method).
Optional parameter. | + +### MatImageDetailsProvider +Abstract base class to be derived by a real image details provider. This class is used to get all the required information about an image. + +**Properties** +| Name | Description | +|---|---| +| numberOfImages | Number of images that can be displayed (this property is readonly). | + +**Methods** +| urlForImage | | +|---|--| +| Gets the url for an image. | | +| *Parameters* | | +| imageIndex | Index of the image to be displayed (0 based). | +| *Returns* | | +| string | Url for the image to be displayed. | + +| descriptionForImage | | +|---|--| +| Gets the description for an image. | | +| *Parameters* | | +| imageIndex | Index of the image to be displayed (0 based). | +| *Returns* | | +| string | Url for the image to be displayed. | + +| imageInformation | | +|---|--| +| Gets a record that contains information about an image. | The returned object is part of the data returned by the imageClicked event. | +| *Parameters* | | +| imageIndex | Index of the clicked image (0 based). | +| *Returns* | | +| Record | Object with additional data about the image. | + +### ThumbnailProvider +Interface to add the handling of thumbnail images to a class derived from MatImageDetailsProvider. + +**Properties** +| Name | Description | +|---|---| +| thumbnailHeight | Height of the thumbnail images in px. | + +**Methods** +| urlForThumbnail | | +|---|--| +| Gets the url for a thumbnail image. | | +| *Parameters* | | +| imageIndex | Index of the thumbnail image to be displayed (0 based). | +| *Returns* | | +| string | Url for the thumbnail image to be displayed. | + +## Classes +### MatImageOverlayRef +Reference to an image overlay opened via the MatImageOverlay service. + +**Properties** +| Name | Description | +|---|---| +| numberOfImages | number of images that can be displayed. | +| keydownEvents$ | Observable that is notified by keydown events on the overlay. Navigation buttons don't get emitted. | + +**Methods** +| afterOpened | | +|---|--| +| Gets an observable that is notified when the image overlay is finished opening. | | +| *Returns* | | +| Observable<void> | Observable that fires, when the overlay has been opened. | + +| afterClosed | | +|---|--| +| Gets an observable that is notified when the image overlay is finished closing. | | +| *Returns* | | +| Observable<number> | Observable that returns the index of the last image displayed. | + +| imageChanged | | +|---|--| +| Gets an observable that is notified when a new image has been selected. | | +| *Returns* | | +| Observable<number> | Observable that returns the index of the image displayed. | + +| imageClicked | | +|---|--| +| Gets an observable that is notified when an image has been clicked. | | +| *Returns* | | +| Observable<ImageClickedEvent> | Observable that returns the object with data of the clicked image and the imageClickedConfiguration object from the config object. | + +| gotoNextImage | | +|---|--| +| Display the next image in the datasource. | | + +| gotoPreviousImage | | +|---|--| +| Display the previous image in the datasource. | | + +| gotoFirstImage | | +|---|--| +| Display the first image in the datasource. | | + +| gotoLastImage | | +|---|--| +| Display the last image in the datasource. | | + +| gotoImage | | +|---|--| +| Display the image in the datasource selected by the imageIndex. | | +| *Parameters* | | +| imageIndex | Index of the image to be displayed. | + +| close | | +|---|--| +| Close the image overlay. | | + +# API reference for Mat-Image-Overlay testing + +```typescript +import { MatImageOverlayHarness } from 'mat-image-overlay/testing'; +``` +## Classes +### MatImageOverlayHarness extends ContentContainerComponentHarness +Harness for interacting with a standard MatImageOverlay in tests. + +**Properties** +| Name | Description | +|---|---| +| static hostSelector: '.mat-image-overlay-container' | The selector for the host element of a MatImageOverlay instance. | + +**Methods** +| async overlayIsLoaded | | +|---|--| +| Gets a promise that fulfills to true, when the image overlay is visible. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to a flag that shows, if the image overlay is visible. + +| async close | | +|---|--| +| Closes the image overlay by pressing escape. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async clickBackdrop | | +|---|--| +| Closes the image overlay by clicking the backdrop of the image overlay. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async buttonCloseVisible | | +|---|--| +| Gets a promise that fulfills to true, when the 'close' button is visible. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to a flag that shows, if the 'close' button is visible. + +| async buttonPreviousVisible | | +|---|--| +| Gets a promise that fulfills to true, when the 'previous' button is visible. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to a flag that shows, if the 'previous' button is visible. + +| async buttonNextVisible | | +|---|--| +| Gets a promise that fulfills to true, when the 'next' button is visible. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to a flag that shows, if the 'next' button is visible. + +| async descriptionVisible | | +|---|--| +| Gets a promise that fulfills to true, when the 'description' of the image is visible. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to a flag that shows, if the 'description' is visible. + +| async clickCloseButton | | +|---|--| +| Clicks the 'close overlay' button of the image overlay. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async clickPreviousButton | | +|---|--| +| Clicks the 'goto previous image' button of the image overlay. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async clickNextButton | | +|---|--| +| Clicks the 'goto next image' button of the image overlay. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async figureHover | | +|---|--| +| Sets the figure tag of the overlay (the content of the overlay) into the hover state. | | +| *Returns* | | +| Promise<void> | Promise that fulfills, when the action completes. + +| async imageUrl | | +|---|--| +| Gets a promise that fulfills to the url of the current image in the overlay. | | +| *Returns* | | +| Promise<boolean> | Promise that fulfills to the url of the image or to an empty string. + +| async sendKeys | | +|---|--| +| Send keys to the overlay. | | +| *Parameters* | | +| ...keys | Array of 'TestKey' to be sent. Possible values are the arrow keys, the home and the end key. | +| *Returns* | | +| Promise<void> | Promise that resolves when the action completes. + +| async hasBackdropClass | | +|---|--| +| Gets a promise that fulfills to true, when the backdrop contains the given css class. | | +| *Parameters* | | +| classname | Name of the css class to be evaluated. | +| *Returns* | | +| Promise<boolean> | Promise fulfills to a flag that shows, if the backdrop contains the given css class. + +# Development +Build the library and the demo project: +``` +npm run build +``` + +Lint the library, the demo project with eslint and the scss files with stylelint: +``` +npm run lint +npm run lint:scss +``` + +Test the library and the demo project: +``` +npm run test +``` + +Run component tests for the library project with cypress once (e.g. for CI scenarios): +``` +npm run ct +``` + +Run end to end tests for the demo project with cypress once (e.g. for CI scenarios): +``` +npm run e2e +``` +The script 'build:ghpages' is used by the github automation to publish the demo to github pages, when the master branch is updated. + +# Contributing +## Changelog +The project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git. + +**The structure of commit messages is**: +``` +
+ + + +