@besaitech/ng-design-system 0.0.55 → 0.0.56

package/fesm2022/besaitech-ng-design-system.mjs

@@ -6734,6 +6734,10 @@ function sdsFileMatchesAccept(file, accept) {
  * affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
  * English defaults.
  *
+ * `appearance="button"` drops the zone and renders only the Browse button (files can still be dropped
+ * on it) — for a "Replace photo" / "Upload logo" / "Add document" action next to a preview, with the
+ * same accept/size/count checks and error messages. `browse()` opens the picker from your own control.
+ *
  * @example
  * <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
  *                label="Drop photos here" browseLabel="Choose photos"
@@ -6752,6 +6756,10 @@ class SdsFileDrop {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Icon in the zone at rest. */
     icon = input('upload', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** `zone` (default): the dashed drop zone with a Browse button. `button`: the Browse button alone. */
+    appearance = input('zone', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** `button` appearance: size of the button. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     label = input('Drag and drop files here', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Shown while files are dragged over the zone. */
     dropLabel = input('Drop to add', ...(ngDevMode ? [{ debugName: "dropLabel" }] : []));
@@ -6788,6 +6796,14 @@ class SdsFileDrop {
             ? `${base} cursor-copy border-brand-500 bg-brand-50 dark:bg-muted`
             : `${base} cursor-pointer border-border bg-muted/50 hover:border-ink-faint`;
     }, ...(ngDevMode ? [{ debugName: "zoneClass" }] : []));
+    buttonClass = computed(() => {
+        const size = this.size() === 'sm' ? 'h-8 px-3' : 'h-9 px-3.5';
+        const drag = this.dragging() ? ' border-brand-500 bg-brand-50 dark:bg-muted' : ' border-border bg-surface hover:bg-muted';
+        return (`inline-flex ${size} items-center gap-1.5 rounded-control border text-sm font-semibold text-ink shadow-sm ` +
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+            'disabled:cursor-not-allowed disabled:opacity-60' +
+            drag);
+    }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
     /** Open the native file picker. */
     browse(event) {
         event?.stopPropagation();
@@ -6881,7 +6897,35 @@ class SdsFileDrop {
         this.errors.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFileDrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (appearance() === 'button') {
+      <button
+        type="button"
+        [class]="buttonClass()"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
+        [attr.data-dragging]="dragging() ? 'true' : null"
+        (click)="browse($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        {{ dragging() ? dropLabel() : browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    } @else {
     <div
       [class]="zoneClass()"
       [attr.aria-disabled]="disabled() ? 'true' : null"
@@ -6926,6 +6970,7 @@ class SdsFileDrop {
         (change)="onInputChange($event)"
       />
     </div>
+    }
 
     <div aria-live="polite" aria-atomic="true">
       @if (errors().length) {
@@ -6949,6 +6994,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     imports: [SdsIcon],
                     host: { class: 'block' },
                     template: `
+    @if (appearance() === 'button') {
+      <button
+        type="button"
+        [class]="buttonClass()"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
+        [attr.data-dragging]="dragging() ? 'true' : null"
+        (click)="browse($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        {{ dragging() ? dropLabel() : browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    } @else {
     <div
       [class]="zoneClass()"
       [attr.aria-disabled]="disabled() ? 'true' : null"
@@ -6993,6 +7066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (change)="onInputChange($event)"
       />
     </div>
+    }
 
     <div aria-live="polite" aria-atomic="true">
       @if (errors().length) {
@@ -7008,7 +7082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
 
 let nextId$8 = 0;
 /**