feat(cropper): add LyImageCropperBase without Alyle UI dependency

A-l-y-l-e · Oct 10, 2024 · 6087f22 · 6087f22
1 parent 20375f8
commit 6087f22
Show file tree

Hide file tree

Showing 33 changed files with 2,598 additions and 2,002 deletions.
diff --git a/src/api/docs/components/image-cropper.html b/src/api/docs/components/image-cropper.html
@@ -8,7 +8,7 @@ <h2 id="basic-usage">Basic Usage</h2>
   <aui-cropper-basic-usage></aui-cropper-basic-usage>
 </demo-view>
 <p>Add the <code class="ttm ttx"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper</span><span class="tt18 ttae">></span></span></code> to your template:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper-base</span>
   <span class="tt18 ttbx">[config]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>myConfig<span class="tt18 ttae">"</span></span>
   <span class="tt18 ttbx">[(scale)]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>scale<span class="tt18 ttae">"</span></span>
   <span class="tt18 ttbx">(ready)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>onReady($event)<span class="tt18 ttae">"</span></span>
@@ -19,7 +19,7 @@ <h2 id="basic-usage">Basic Usage</h2>
   <span class="tt18 ttbx">(error)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>onError($event)<span class="tt18 ttae">"</span></span>
 <span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>span</span><span class="tt18 ttae">></span></span>Drag and drop image<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>span</span><span class="tt18 ttae">></span></span>
-<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper-base</span><span class="tt18 ttae">></span></span>
 
 <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ng-container</span> <span class="tt18 ttbx">*ngIf</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-slider</span>

diff --git a/src/api/docs/demos/cropper-basic-usage.component.html.html b/src/api/docs/demos/cropper-basic-usage.component.html.html
@@ -7,7 +7,7 @@
 <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span> <span class="tt18 ttbx">*ngIf</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>button</span> <span class="tt18 ttbx">(click)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>cropper.rotate(-90)<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">ly-button</span> <span class="tt18 ttbx">appearance</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>icon<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-icon</span><span class="tt18 ttae">></span></span>rotate_90_degrees_ccw<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-icon</span><span class="tt18 ttae">></span></span><span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>button</span><span class="tt18 ttae">></span></span>
 <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
-<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper</span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper-base</span>
   <span class="tt18 ttbx">[config]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>myConfig<span class="tt18 ttae">"</span></span>
   <span class="tt18 ttbx">(ready)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready = true<span class="tt18 ttae">"</span></span>
   <span class="tt18 ttbx">(cleaned)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready = false<span class="tt18 ttae">"</span></span>
@@ -16,7 +16,7 @@
   <span class="tt18 ttbx">(error)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>onError($event)<span class="tt18 ttae">"</span></span>
 <span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>span</span><span class="tt18 ttae">></span></span>Drag and drop image<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>span</span><span class="tt18 ttae">></span></span>
-<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper</span><span class="tt18 ttae">></span></span>
+<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper-base</span><span class="tt18 ttae">></span></span>
 
 <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>button</span> <span class="tt18 ttbx">ly-button</span> <span class="tt18 ttbx">*ngIf</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">color</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>accent<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">(click)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>cropper.crop()<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-icon</span><span class="tt18 ttae">></span></span>crop<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-icon</span><span class="tt18 ttae">></span></span>crop

diff --git a/src/api/docs/demos/cropper-basic-usage.component.ts.html b/src/api/docs/demos/cropper-basic-usage.component.ts.html
@@ -1,19 +1,17 @@
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> Component<span class="tt18 ttae">,</span> ChangeDetectionStrategy<span class="tt18 ttae">,</span> ViewChild <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
-<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> StyleRenderer<span class="tt18 ttae">,</span> lyl<span class="tt18 ttae">,</span> ThemeVariables<span class="tt18 ttae">,</span> SelectorsFn <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> StyleRenderer<span class="tt18 ttae">,</span> lyl<span class="tt18 ttae">,</span> ThemeVariables <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui'</span><span class="tt18 ttae">;</span>
 
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span>
   ImgCropperConfig<span class="tt18 ttae">,</span>
   ImgCropperEvent<span class="tt18 ttae">,</span>
-  LyImageCropper<span class="tt18 ttae">,</span>
+  LyImageCropperBase<span class="tt18 ttae">,</span>
   ImgCropperErrorEvent<span class="tt18 ttae">,</span>
-  <span class="tt18 ttbb">STYLES</span> <span class="tt18 tt1j">as</span> <span class="tt18 ttbb">CROPPER_STYLES</span>
 <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/image-cropper'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> <span class="tt18 tteo tta3">STYLES</span> <span class="tt18 ttb0">=</span> <span class="tt18 ttae">(</span>_theme<span class="tt18 ttb0">:</span> ThemeVariables<span class="tt18 ttae">,</span> selectors<span class="tt18 ttb0">:</span> SelectorsFn<span class="tt18 ttae">)</span> <span class="tt18 ttb0">=></span> <span class="tt18 ttae">&#123;</span>
-  <span class="tt18 tt1j">const</span> cropper <span class="tt18 ttb0">=</span> <span class="tt18 tta3">selectors</span><span class="tt18 ttae">(</span><span class="tt18 ttbb">CROPPER_STYLES</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> <span class="tt18 tteo tta3">STYLES</span> <span class="tt18 ttb0">=</span> <span class="tt18 ttae">(</span>_theme<span class="tt18 ttb0">:</span> ThemeVariables<span class="tt18 ttae">)</span> <span class="tt18 ttb0">=></span> <span class="tt18 ttae">&#123;</span>
   <span class="tt18 tt1j">return</span> <span class="tt18 ttae">&#123;</span>
     root<span class="tt18 ttb0">:</span> lyl <span class="tt18 lyl-template-string"><span class="tt18 tt3z language-css"><span class="tt18 ttd5">`</span><span class="tt18 ttae">&#123;</span>
-      </span><span class="tt18 interpolation"><span class="tt18 interpolation-punctuation ttae">$&#123;</span>cropper<span class="tt18 ttae">.</span>root<span class="tt18 interpolation-punctuation ttae">&#125;</span></span><span class="tt18 tt3z language-css"> <span class="tt18 ttae">&#123;</span>
+      <span class="tt18 ttd5">.ly-cropper-root</span> <span class="tt18 ttae">&#123;</span>
         <span class="tt18 ttcu">aspect-ratio</span><span class="tt18 ttae">:</span> 3 / 2
         <span class="tt18 ttcu">max-width</span><span class="tt18 ttae">:</span> 600px
       <span class="tt18 ttae">&#125;</span>
@@ -38,7 +36,7 @@
   $$ <span class="tt18 ttb0">=</span> <span class="tt18 tt1j">this</span><span class="tt18 ttae">.</span>sRenderer<span class="tt18 ttae">.</span><span class="tt18 tta3">renderSheet</span><span class="tt18 ttae">(</span><span class="tt18 ttbb">STYLES</span><span class="tt18 ttae">,</span> <span class="tt18 tt3z">'root'</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span>
   croppedImage<span class="tt18 ttb0">?</span><span class="tt18 ttb0">:</span> <span class="tt18 ttcj">string</span> <span class="tt18 ttb0">|</span> <span class="tt18 tt1j">null</span> <span class="tt18 ttb0">=</span> <span class="tt18 tt1j">null</span><span class="tt18 ttae">;</span>
   ready <span class="tt18 ttb0">=</span> <span class="tt18 tted">false</span><span class="tt18 ttae">;</span>
-  <span class="tt18 ttdr"><span class="tt18 ttdg ttb0">@</span><span class="tt18 tta3">ViewChild</span></span><span class="tt18 ttae">(</span>LyImageCropper<span class="tt18 ttae">)</span> <span class="tt18 tt1j">readonly</span> cropper<span class="tt18 ttb0">!</span><span class="tt18 ttb0">:</span> LyImageCropper<span class="tt18 ttae">;</span>
+  <span class="tt18 ttdr"><span class="tt18 ttdg ttb0">@</span><span class="tt18 tta3">ViewChild</span></span><span class="tt18 ttae">(</span>LyImageCropperBase<span class="tt18 ttae">)</span> <span class="tt18 tt1j">readonly</span> cropper<span class="tt18 ttb0">!</span><span class="tt18 ttb0">:</span> LyImageCropperBase<span class="tt18 ttae">;</span>
   myConfig<span class="tt18 ttb0">:</span> ImgCropperConfig <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
     width<span class="tt18 ttb0">:</span> <span class="tt18 ttap">200</span><span class="tt18 ttae">,</span> <span class="tt18 tt3o">// Default `250`</span>
     height<span class="tt18 ttb0">:</span> <span class="tt18 ttap">200</span><span class="tt18 ttae">,</span> <span class="tt18 tt3o">// Default `200`</span>

diff --git a/src/api/docs/demos/cropper-basic-usage.module.ts.html b/src/api/docs/demos/cropper-basic-usage.module.ts.html
@@ -1,7 +1,7 @@
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> NgModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/core'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> CommonModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@angular/common'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> CropperBasicUsageComponent <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'./cropper-basic-usage.component'</span><span class="tt18 ttae">;</span>
-<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyImageCropperModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/image-cropper'</span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyImageCropperBaseModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/image-cropper'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyButtonModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/button'</span><span class="tt18 ttae">;</span>
 <span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> LyIconModule <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/icon'</span><span class="tt18 ttae">;</span>
 
@@ -13,7 +13,7 @@
   <span class="tt18 ttae">]</span><span class="tt18 ttae">,</span>
   imports<span class="tt18 ttb0">:</span> <span class="tt18 ttae">[</span>
     CommonModule<span class="tt18 ttae">,</span>
-    LyImageCropperModule<span class="tt18 ttae">,</span>
+    LyImageCropperBaseModule<span class="tt18 ttae">,</span>
     LyButtonModule<span class="tt18 ttae">,</span>
     LyIconModule
   <span class="tt18 ttae">]</span>

diff --git a/src/api/docs/demos/cropper-dialog.html.html b/src/api/docs/demos/cropper-dialog.html.html
@@ -10,7 +10,7 @@
     <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>button</span> <span class="tt18 ttbx">(click)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>cropper.setScale(1)<span class="tt18 ttae">"</span></span> <span class="tt18 ttbx">ly-button</span><span class="tt18 ttae">></span></span>1:1<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>button</span><span class="tt18 ttae">></span></span>
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>div</span><span class="tt18 ttae">></span></span>
 
-  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper</span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>ly-img-cropper-base</span>
     <span class="tt18 ttbx">[config]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>myConfig<span class="tt18 ttae">"</span></span>
     <span class="tt18 ttbx">[(scale)]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>scale<span class="tt18 ttae">"</span></span>
     <span class="tt18 ttbx">(ready)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>ready = true<span class="tt18 ttae">"</span></span>
@@ -22,7 +22,7 @@
     <span class="tt18 ttbx">(error)</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>onError($event)<span class="tt18 ttae">"</span></span>
   <span class="tt18 ttae">></span></span>
     <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>span</span><span class="tt18 ttae">></span></span>Drag and drop image<span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>span</span><span class="tt18 ttae">></span></span>
-  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper</span><span class="tt18 ttae">></span></span>
+  <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;/</span>ly-img-cropper-base</span><span class="tt18 ttae">></span></span>
 
   <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span> <span class="tt18 ttbx">[className]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>classes.sliderContainer<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>
     <span class="tt18 tt5i"><span class="tt18 tt5i"><span class="tt18 ttae">&lt;</span>div</span> <span class="tt18 ttbx">[class]</span><span class="tt18 ttbm"><span class="tt18 ttae attr-equals">=</span><span class="tt18 ttae">"</span>classes.slider<span class="tt18 ttae">"</span></span><span class="tt18 ttae">></span></span>