codexly-ui 0.4.0 → 0.4.1

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.
Files changed (4) hide show
  1. package/fesm2022/codexly-ui.mjs +49 -42
  2. package/fesm2022/codexly-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/codexly-ui.d.ts +0 -1
package/fesm2022/codexly-ui.mjs CHANGED
@@ -4933,8 +4933,7 @@ class ClxUploadComponent {
4933
4933
  _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
4934
4934
  _sizeConfig = computed(() => UPLOAD_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
4935
4935
  _isError = computed(() => this._errorKey() !== null, ...(ngDevMode ? [{ debugName: "_isError" }] : /* istanbul ignore next */ []));
4936
- _thumbClass = computed(() => `relative group aspect-square ${resolveRadius(this._themeSvc.config().borderRadius)} overflow-hidden border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
4937
- _fileCardClass = computed(() => `relative group aspect-square ${resolveRadius(this._themeSvc.config().borderRadius)} border border-clx-border bg-clx-surface-2 flex flex-col items-center justify-center gap-1 p-2`, ...(ngDevMode ? [{ debugName: "_fileCardClass" }] : /* istanbul ignore next */ []));
4936
+ _thumbClass = computed(() => `relative group flex flex-col ${resolveRadius(this._themeSvc.config().borderRadius)} overflow-hidden border border-clx-border bg-clx-surface-2`, ...(ngDevMode ? [{ debugName: "_thumbClass" }] : /* istanbul ignore next */ []));
4938
4937
  _previewItems = computed(() => {
4939
4938
  const existing = this.existingFiles().map(f => ({
4940
4939
  kind: 'existing',
@@ -5226,11 +5225,17 @@ class ClxUploadComponent {
5226
5225
 
5227
5226
  <!-- ── Preview list (existing + new files, images get a real thumbnail) ───── -->
5228
5227
  @if (_previewItems().length) {
5229
- <div class="mt-3 grid grid-cols-3 sm:grid-cols-4 gap-2">
5228
+ <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
5230
5229
  @for (item of _previewItems(); track item.key) {
5231
- @if (item.isImage) {
5232
- <div [class]="_thumbClass()">
5233
- <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
5230
+ <div [class]="_thumbClass()">
5231
+ <div class="relative aspect-square w-full overflow-hidden">
5232
+ @if (item.isImage) {
5233
+ <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
5234
+ } @else {
5235
+ <div class="w-full h-full flex items-center justify-center bg-clx-surface-3">
5236
+ <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
5237
+ </div>
5238
+ }
5234
5239
 
5235
5240
  @if (item.status === 'PENDING' || item.status === 'PROCESSING') {
5236
5241
  <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1">
@@ -5243,29 +5248,27 @@ class ClxUploadComponent {
5243
5248
  }
5244
5249
 
5245
5250
  <button
5251
+ clx-button
5246
5252
  type="button"
5247
- class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity bg-black/60 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
5253
+ variant="solid"
5254
+ color="red"
5255
+ shape="circle"
5256
+ size="xs"
5257
+ icon="close"
5258
+ [iconOnly]="true"
5259
+ class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shadow-md"
5248
5260
  [disabled]="_disabled()"
5249
5261
  (click)="_removeItem(item); $event.stopPropagation()">
5250
- <span clx-icon name="close" size="xs"></span>
5251
5262
  </button>
5252
5263
  </div>
5253
- } @else {
5254
- <div [class]="_fileCardClass()">
5255
- <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
5256
- <span class="text-xs text-clx-text-label font-medium text-center truncate w-full px-1">{{ item.name }}</span>
5264
+
5265
+ <div class="px-1.5 py-1 w-full min-w-0">
5266
+ <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
5257
5267
  @if (item.size !== undefined) {
5258
- <span class="text-[11px] text-clx-text-muted">{{ _formatSize(item.size) }}</span>
5268
+ <p class="text-[10px] leading-tight text-clx-text-muted">{{ _formatSize(item.size) }}</p>
5259
5269
  }
5260
- <button
5261
- type="button"
5262
- class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity bg-black/60 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
5263
- [disabled]="_disabled()"
5264
- (click)="_removeItem(item); $event.stopPropagation()">
5265
- <span clx-icon name="close" size="xs"></span>
5266
- </button>
5267
5270
  </div>
5268
- }
5271
+ </div>
5269
5272
  }
5270
5273
  </div>
5271
5274
  }
@@ -5277,14 +5280,14 @@ class ClxUploadComponent {
5277
5280
  {{ _errorMessage() }}
5278
5281
  </p>
5279
5282
  }
5280
- `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5283
+ `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5281
5284
  }
5282
5285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxUploadComponent, decorators: [{
5283
5286
  type: Component,
5284
5287
  args: [{
5285
5288
  selector: 'clx-upload',
5286
5289
  standalone: true,
5287
- imports: [ClxIconComponent],
5290
+ imports: [ClxIconComponent, ClxButtonComponent],
5288
5291
  template: `
5289
5292
  <!-- Hidden file input -->
5290
5293
  <input
@@ -5331,11 +5334,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
5331
5334
 
5332
5335
  <!-- ── Preview list (existing + new files, images get a real thumbnail) ───── -->
5333
5336
  @if (_previewItems().length) {
5334
- <div class="mt-3 grid grid-cols-3 sm:grid-cols-4 gap-2">
5337
+ <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 gap-2">
5335
5338
  @for (item of _previewItems(); track item.key) {
5336
- @if (item.isImage) {
5337
- <div [class]="_thumbClass()">
5338
- <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
5339
+ <div [class]="_thumbClass()">
5340
+ <div class="relative aspect-square w-full overflow-hidden">
5341
+ @if (item.isImage) {
5342
+ <img [src]="item.thumbUrl" [alt]="item.name" loading="lazy" class="w-full h-full object-cover" />
5343
+ } @else {
5344
+ <div class="w-full h-full flex items-center justify-center bg-clx-surface-3">
5345
+ <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
5346
+ </div>
5347
+ }
5339
5348
 
5340
5349
  @if (item.status === 'PENDING' || item.status === 'PROCESSING') {
5341
5350
  <div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-1">
@@ -5348,29 +5357,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
5348
5357
  }
5349
5358
 
5350
5359
  <button
5360
+ clx-button
5351
5361
  type="button"
5352
- class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity bg-black/60 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
5362
+ variant="solid"
5363
+ color="red"
5364
+ shape="circle"
5365
+ size="xs"
5366
+ icon="close"
5367
+ [iconOnly]="true"
5368
+ class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shadow-md"
5353
5369
  [disabled]="_disabled()"
5354
5370
  (click)="_removeItem(item); $event.stopPropagation()">
5355
- <span clx-icon name="close" size="xs"></span>
5356
5371
  </button>
5357
5372
  </div>
5358
- } @else {
5359
- <div [class]="_fileCardClass()">
5360
- <span clx-icon [name]="item.fileIcon" size="lg" [class]="'text-' + item.fileColor + '-500'"></span>
5361
- <span class="text-xs text-clx-text-label font-medium text-center truncate w-full px-1">{{ item.name }}</span>
5373
+
5374
+ <div class="px-1.5 py-1 w-full min-w-0">
5375
+ <p class="text-[11px] leading-tight text-clx-text-label font-medium truncate" [title]="item.name">{{ item.name }}</p>
5362
5376
  @if (item.size !== undefined) {
5363
- <span class="text-[11px] text-clx-text-muted">{{ _formatSize(item.size) }}</span>
5377
+ <p class="text-[10px] leading-tight text-clx-text-muted">{{ _formatSize(item.size) }}</p>
5364
5378
  }
5365
- <button
5366
- type="button"
5367
- class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity bg-black/60 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
5368
- [disabled]="_disabled()"
5369
- (click)="_removeItem(item); $event.stopPropagation()">
5370
- <span clx-icon name="close" size="xs"></span>
5371
- </button>
5372
5379
  </div>
5373
- }
5380
+ </div>
5374
5381
  }
5375
5382
  </div>
5376
5383
  }