monkey-style-guide-v2 0.0.80 → 0.0.82

package/fesm2022/monkey-style-guide-v2.mjs

@@ -4550,7 +4550,7 @@ class MonkeyDownloadButtonComponent {
         {{ safeProgress }}%
       </div>
     </monkey-button>
-  `, isInline: true, styles: [":host{position:relative;display:inline-block}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;display:flex;align-items:center;justify-content:flex-end;width:calc(var(--mecx-button-progress) - 10%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
+  `, isInline: true, styles: [":host{position:relative;display:inline-block}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:calc(var(--mecx-button-progress) - 10%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
             type: Component,
@@ -4583,7 +4583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         class: 'mecx-input-upload',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex'
-                    }, styles: [":host{position:relative;display:inline-block}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;display:flex;align-items:center;justify-content:flex-end;width:calc(var(--mecx-button-progress) - 10%)}\n"] }]
+                    }, styles: [":host{position:relative;display:inline-block}:host .content-download{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:calc(var(--mecx-button-progress) - 10%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progress: [{
                 type: Input
             }], disabled: [{
@@ -6142,6 +6142,12 @@ class MonkeyInputUploadComponent {
             };
         }
     }
+    get hasProgress() {
+        return typeof this.progress === 'number' && this.progress > 0;
+    }
+    get safeProgress() {
+        return Math.min(Math.max(this.progress, 0), 100);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyInputUploadComponent, isStandalone: true, selector: "monkey-input-upload", inputs: { progress: "progress", placeholder: "placeholder", maxSizeBytes: "maxSizeBytes", allowedExtensions: "allowedExtensions", loading: ["loading", "loading", booleanAttribute], tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-upload'", "class.mecx-input-upload-disabled": "_disabled", "class.mecx-input-upload-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-upload" }, providers: [
             // eslint-disable-next-line no-use-before-define
@@ -6158,11 +6164,15 @@ class MonkeyInputUploadComponent {
       [accept]="allowedExtensions.join(',')"
     />
     @if (loading) {
-      <div class="progress">
-        <div class="progress-bar" [style.width.%]="progress"></div>
+      <div
+        class="progress"
+        [style.--mecx-input-upload-progress]="hasProgress ? safeProgress + '%' : null"
+      >
+        <div class="progress-bar-fill">{{ safeProgress }}%</div>
+        <div class="progress-bar"></div>
       </div>
     }
-  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;inset:0;height:100%;width:100%}:host .progress .progress-bar-fill{position:absolute;width:calc(var(--mecx-input-upload-progress) - 5%);height:100%;left:0;top:0;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;transition:width .3s ease-in-out}:host .progress .progress-bar{position:relative;height:100%;transition:width .3s;overflow:hidden}:host .progress .progress-bar:before,:host .progress .progress-bar:after{content:\"\";position:absolute;inset:42px 0 0;width:100%;max-width:112px;height:105px;left:calc(var(--mecx-input-upload-progress) - 12.5%);background-color:var(--mecx-color-theme-300);border-radius:45% 47% 43% 46%;transform:translate(-50%,-70%) rotate(0);animation:rotate 6s linear infinite;z-index:1;transition:left .1s ease-in-out}:host .progress .progress-bar:after{border-radius:47% 60% 46% 44%;background-color:var(--mecx-color-theme-main);transform:translate(-50%,-70%) rotate(0);animation:rotate 7s linear -4s infinite;z-index:2}@keyframes rotate{50%{transform:translate(-50%,-73%) rotate(180deg)}to{transform:translate(-50%,-70%) rotate(360deg)}}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
             type: Component,
@@ -6178,8 +6188,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       [accept]="allowedExtensions.join(',')"
     />
     @if (loading) {
-      <div class="progress">
-        <div class="progress-bar" [style.width.%]="progress"></div>
+      <div
+        class="progress"
+        [style.--mecx-input-upload-progress]="hasProgress ? safeProgress + '%' : null"
+      >
+        <div class="progress-bar-fill">{{ safeProgress }}%</div>
+        <div class="progress-bar"></div>
       </div>
     }
   `, providers: [
@@ -6194,7 +6208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()'
-                    }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }]
+                    }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;inset:0;height:100%;width:100%}:host .progress .progress-bar-fill{position:absolute;width:calc(var(--mecx-input-upload-progress) - 5%);height:100%;left:0;top:0;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:3;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;transition:width .3s ease-in-out}:host .progress .progress-bar{position:relative;height:100%;transition:width .3s;overflow:hidden}:host .progress .progress-bar:before,:host .progress .progress-bar:after{content:\"\";position:absolute;inset:42px 0 0;width:100%;max-width:112px;height:105px;left:calc(var(--mecx-input-upload-progress) - 12.5%);background-color:var(--mecx-color-theme-300);border-radius:45% 47% 43% 46%;transform:translate(-50%,-70%) rotate(0);animation:rotate 6s linear infinite;z-index:1;transition:left .1s ease-in-out}:host .progress .progress-bar:after{border-radius:47% 60% 46% 44%;background-color:var(--mecx-color-theme-main);transform:translate(-50%,-70%) rotate(0);animation:rotate 7s linear -4s infinite;z-index:2}@keyframes rotate{50%{transform:translate(-50%,-73%) rotate(180deg)}to{transform:translate(-50%,-70%) rotate(360deg)}}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']