feat(nxt-dropzone-wrapper)!: align naming with angular guidelines

BREAKING CHANGE: renamed `<dropzone>` to `<nxt-dropzone>` and `[dropzone]` to `[nxtDropzone]`
Liquid-JS · Mar 3, 2023 · 7634a15 · 7634a15
1 parent f184316
commit 7634a15
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 56 deletions.
diff --git a/packages/demo/src/app/dropzone-wrapper/dropzone-wrapper.component.html b/packages/demo/src/app/dropzone-wrapper/dropzone-wrapper.component.html
@@ -70,7 +70,7 @@
                 fxLayout="column"
                 fxLayoutAlign="stretch"
                 fxFlex="auto">
-                <dropzone *ngIf="type === 'component'"
+                <nxt-dropzone *ngIf="type === 'component'"
                     class="dropzone-container"
                     [config]="config"
                     [disabled]="disabled"
@@ -80,11 +80,11 @@
                     [message]="'Click or drag images here to upload'"
                     (init)="onUploadInit($event)"
                     (error)="onUploadError($event)"
-                    (success)="onUploadSuccess($event)"></dropzone>
+                    (success)="onUploadSuccess($event)"></nxt-dropzone>
 
                 <div *ngIf="type === 'directive'"
                     class="dropzone dropzone-container"
-                    [dropzone]="config"
+                    [nxtDropzone]="config"
                     [disabled]="disabled"
                     (init)="onUploadInit($event)"
                     (error)="onUploadError($event)"

diff --git a/packages/dropzone-wrapper/README.md b/packages/dropzone-wrapper/README.md
@@ -76,7 +76,7 @@ Simply replace the element that would ordinarily be passed to `Dropzone` with th
 **NOTE:** Component provides couple additional features from directive such as the placeholder image. If you don't need them or want to create custom component then you might want to use the directive instead.
 
 ```html
-<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
+<nxt-dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></nxt-dropzone>
 ```
 
 ```javascript
@@ -109,11 +109,11 @@ When using only the directive you need to provide your own theming or import the
 Dropzone directive can be used in form or div element with optional custom configuration:
 
 ```html
-<div class="dropzone" [dropzone]="config" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></div>
+<div class="dropzone" [nxtDropzone]="config" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></div>
 ```
 
 ```javascript
-[dropzone]              // Can be used to provide optional custom config.
+[nxtDropzone]           // Can be used to provide optional custom config.
 
 [disabled]              // Disables / detaches Dropzone from the element.
 

diff --git a/packages/dropzone-wrapper/package.json b/packages/dropzone-wrapper/package.json
@@ -1,6 +1,10 @@
 {
     "name": "nxt-dropzone-wrapper",
-    "version": "0.0.1",
+    "description": "Angular wrapper library for Dropzone",
+    "bugs": "https://github.com/Liquid-JS/nxt-components/issues",
+    "version": "14.0.0",
+    "license": "MIT",
+    "repository": "https://github.com/Liquid-JS/nxt-components.git",
     "peerDependencies": {
         "@angular/common": "^14.2.0",
         "@angular/core": "^14.2.0",

diff --git a/packages/dropzone-wrapper/src/lib/dropzone.component.html b/packages/dropzone-wrapper/src/lib/dropzone.component.html
@@ -1,6 +1,6 @@
 <div class="dz-wrapper"
     [class.dropzone]="useDropzoneClass"
-    [dropzone]="config"
+    [nxtDropzone]="config"
     [disabled]="disabled"
     (init)="DZ_INIT.emit($event)">
     <div class="dz-message"

diff --git a/...ne-wrapper/src/lib/dropzone.component.css → ...e-wrapper/src/lib/dropzone.component.scss b/...ne-wrapper/src/lib/dropzone.component.css → ...e-wrapper/src/lib/dropzone.component.scss
@@ -1,10 +1,10 @@
-dropzone {
+nxt-dropzone {
   display: block;
   width: 100%;
   height: auto;
 }
 
-dropzone[fxflex] {
+nxt-dropzone[fxflex] {
   display: flex;
   flex-direction: inherit;
   min-width: 0;
@@ -14,15 +14,15 @@ dropzone[fxflex] {
   -webkit-box-orient: inherit;
 }
 
-dropzone[fxflex] > .dropzone.dz-wrapper {
+nxt-dropzone[fxflex] > .dropzone.dz-wrapper {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
 
   -webkit-box-flex: 1;
 }
 
-dropzone[fxlayout] {
+nxt-dropzone[fxlayout] {
   align-items: inherit;
   align-content: inherit;
   justify-content: inherit;
@@ -31,7 +31,7 @@ dropzone[fxlayout] {
   -webkit-box-pack: inherit;
 }
 
-dropzone[fxlayout] > .dropzone.dz-wrapper.dz-single {
+nxt-dropzone[fxlayout] > .dropzone.dz-wrapper.dz-single {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -44,7 +44,7 @@ dropzone[fxlayout] > .dropzone.dz-wrapper.dz-single {
   -webkit-box-pack: center;
 }
 
-dropzone[fxlayout] > .dropzone.dz-wrapper.dz-multiple {
+nxt-dropzone[fxlayout] > .dropzone.dz-wrapper.dz-multiple {
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
@@ -57,7 +57,7 @@ dropzone[fxlayout] > .dropzone.dz-wrapper.dz-multiple {
   -webkit-box-pack: flex-start;
 }
 
-dropzone > .dropzone.dz-wrapper {
+nxt-dropzone > .dropzone.dz-wrapper {
   position: relative;
 
   overflow: auto;
@@ -71,7 +71,7 @@ dropzone > .dropzone.dz-wrapper {
   background: transparent;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message {
   position: relative;
 
   display: inline-block;
@@ -87,7 +87,7 @@ dropzone > .dropzone.dz-wrapper .dz-message {
   background-color: #eee;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message .dz-text {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message .dz-text {
   position: absolute;
   top: 50%;
 
@@ -99,7 +99,7 @@ dropzone > .dropzone.dz-wrapper .dz-message .dz-text {
   transform: translateY(-50%);
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message .dz-image {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message .dz-image {
   width: 100%;
   height: 100%;
 
@@ -108,19 +108,19 @@ dropzone > .dropzone.dz-wrapper .dz-message .dz-image {
   background-position: 50% 50%;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.disabled {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.disabled {
   cursor: not-allowed;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.disabled .dz-text {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.disabled .dz-text {
   opacity: 0.5;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder {
   border-color: rgba(#aaa, 0);
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder .dz-text {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder .dz-text {
   position: absolute;
   z-index: 1;
   top: 0;
@@ -139,40 +139,40 @@ dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder .dz-text {
     border-color 250ms ease-in-out;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) {
   border-color: #aaa;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) .dz-text {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) .dz-text {
   opacity: 1;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) .dz-image {
+nxt-dropzone > .dropzone.dz-wrapper .dz-message.dz-placeholder:hover:not(.disabled) .dz-image {
   -webkit-filter: blur(8px);
 
   filter: blur(8px);
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview {
   margin: 8px;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview .dz-details {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview .dz-details {
   padding: 24px;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview .dz-progress {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview .dz-progress {
   width: 80%;
   margin-left: -40%;
   border: 1px solid #aaa;
   border-radius: 4px;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview .dz-progress .dz-upload {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview .dz-progress .dz-upload {
   background-color: #666;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview .dz-filename span {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview .dz-filename span {
   display: block;
   overflow: hidden;
   width: 100%;
@@ -181,47 +181,47 @@ dropzone > .dropzone.dz-wrapper .dz-preview .dz-filename span {
   text-overflow: ellipsis;
 }
 
-dropzone > .dropzone.dz-wrapper .dz-preview .dz-filename span:hover {
+nxt-dropzone > .dropzone.dz-wrapper .dz-preview .dz-filename span:hover {
   overflow: visible;
 
   white-space: normal;
   word-wrap: break-word;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single .dz-message {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single .dz-message {
   width: 100%;
   height: 100%;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single.dz-started .dz-message {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single.dz-started .dz-message {
   display: none;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview {
   width: calc(100% - 16px);
   height: 100%;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview .dz-image {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview .dz-image {
   width: 100%;
   height: 100%;
   border-radius: 0;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview .dz-image img {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single .dz-preview .dz-image img {
   display: block;
   width: 100%;
   height: auto;
   margin: 0;
 }
 
-dropzone > .dropzone.dz-wrapper.dz-single .dz-error-message {
+nxt-dropzone > .dropzone.dz-wrapper.dz-single .dz-error-message {
   top: 50%;
   left: 50%;
 
   transform: translateX(-50%) translateY(100%);
 }
 
-dropzone > .dropzone.dz-wrapper.dz-multiple.dz-started .dz-message {
+nxt-dropzone > .dropzone.dz-wrapper.dz-multiple.dz-started .dz-message {
   display: inline-block;
 }
diff --git a/packages/dropzone-wrapper/src/lib/dropzone.component.ts b/packages/dropzone-wrapper/src/lib/dropzone.component.ts
@@ -4,11 +4,11 @@ import { DropzoneDirective } from './dropzone.directive'
 import { DropzoneConfigInterface, DropzoneEvent, DropzoneEvents } from './dropzone.interfaces'
 
 @Component({
-    selector: 'dropzone',
-    exportAs: 'ngxDropzone',
+    selector: 'nxt-dropzone',
+    exportAs: 'nxtDropzone',
     templateUrl: './dropzone.component.html',
     styleUrls: [
-        './dropzone.component.css',
+        './dropzone.component.scss',
         '../../../../node_modules/dropzone/dist/dropzone.css'
     ],
     encapsulation: ViewEncapsulation.None

diff --git a/packages/dropzone-wrapper/src/lib/dropzone.directive.ts b/packages/dropzone-wrapper/src/lib/dropzone.directive.ts
@@ -1,16 +1,11 @@
-import Dropzone from 'dropzone'
-
 import { isPlatformBrowser } from '@angular/common'
 import { Directive, DoCheck, ElementRef, EventEmitter, Inject, Input, KeyValueDiffer, KeyValueDiffers, NgZone, OnChanges, OnDestroy, OnInit, Optional, Output, PLATFORM_ID, Renderer2, SimpleChanges } from '@angular/core'
-
-import {
-    DropzoneConfig, DropzoneConfigInterface,
-    DropzoneEvent, DropzoneEvents, DROPZONE_CONFIG
-} from './dropzone.interfaces'
+import Dropzone from 'dropzone'
+import { DropzoneConfig, DropzoneConfigInterface, DropzoneEvent, DropzoneEvents, DROPZONE_CONFIG } from './dropzone.interfaces'
 
 @Directive({
-    selector: '[dropzone]',
-    exportAs: 'ngxDropzone'
+    selector: '[nxtDropzone]',
+    exportAs: 'nxtDropzone'
 })
 export class DropzoneDirective implements OnInit, OnDestroy, DoCheck, OnChanges {
     private instance: any
@@ -19,7 +14,7 @@ export class DropzoneDirective implements OnInit, OnDestroy, DoCheck, OnChanges
 
     @Input() disabled: boolean = false
 
-    @Input('dropzone') config?: DropzoneConfigInterface
+    @Input('nxtDropzone') config?: DropzoneConfigInterface
 
     @Output('init') DZ_INIT = new EventEmitter<any>()
 

diff --git a/packages/dropzone-wrapper/src/lib/dropzone.module.ts b/packages/dropzone-wrapper/src/lib/dropzone.module.ts
@@ -4,9 +4,16 @@ import { DropzoneComponent } from './dropzone.component'
 import { DropzoneDirective } from './dropzone.directive'
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [DropzoneComponent, DropzoneDirective],
-    exports: [CommonModule, DropzoneComponent, DropzoneDirective]
+    declarations: [
+        DropzoneComponent,
+        DropzoneDirective
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        DropzoneComponent,
+        DropzoneDirective
+    ]
 })
-export class DropzoneModule {
-}
+export class DropzoneModule { }