monkey-style-guide-v2 0.0.82 → 0.0.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6142,12 +6142,6 @@ class MonkeyInputUploadComponent {
6142
6142
  };
6143
6143
  }
6144
6144
  }
6145
- get hasProgress() {
6146
- return typeof this.progress === 'number' && this.progress > 0;
6147
- }
6148
- get safeProgress() {
6149
- return Math.min(Math.max(this.progress, 0), 100);
6150
- }
6151
6145
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6152
6146
  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: [
6153
6147
  // eslint-disable-next-line no-use-before-define
@@ -6164,15 +6158,11 @@ class MonkeyInputUploadComponent {
6164
6158
  [accept]="allowedExtensions.join(',')"
6165
6159
  />
6166
6160
  @if (loading) {
6167
- <div
6168
- class="progress"
6169
- [style.--mecx-input-upload-progress]="hasProgress ? safeProgress + '%' : null"
6170
- >
6171
- <div class="progress-bar-fill">{{ safeProgress }}%</div>
6172
- <div class="progress-bar"></div>
6161
+ <div class="progress">
6162
+ <div class="progress-bar" [style.width.%]="progress"></div>
6173
6163
  </div>
6174
6164
  }
6175
- `, 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"] }); }
6165
+ `, 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:4px;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"] }); }
6176
6166
  }
6177
6167
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
6178
6168
  type: Component,
@@ -6188,12 +6178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
6188
6178
  [accept]="allowedExtensions.join(',')"
6189
6179
  />
6190
6180
  @if (loading) {
6191
- <div
6192
- class="progress"
6193
- [style.--mecx-input-upload-progress]="hasProgress ? safeProgress + '%' : null"
6194
- >
6195
- <div class="progress-bar-fill">{{ safeProgress }}%</div>
6196
- <div class="progress-bar"></div>
6181
+ <div class="progress">
6182
+ <div class="progress-bar" [style.width.%]="progress"></div>
6197
6183
  </div>
6198
6184
  }
6199
6185
  `, providers: [
@@ -6208,7 +6194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
6208
6194
  '[attr.tabindex]': 'disabled ? -1 : tabIndex',
6209
6195
  '(focus)': '_onFocus()',
6210
6196
  '(blur)': '_onBlur()'
6211
- }, 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"] }]
6197
+ }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:4px;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"] }]
6212
6198
  }], ctorParameters: () => [], propDecorators: { fileInput: [{
6213
6199
  type: ViewChild,
6214
6200
  args: ['fileInput']