pdm-ui-kit 0.3.0 → 0.3.1

package/fesm2020/pdm-ui-kit.mjs

@@ -315,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 const ROOT_LAYOUT = {
-    horizontal: "flex flex-col sm:flex-row sm:items-center sm:flex-wrap",
+    horizontal: "w-full flex flex-row items-center overflow-x-auto",
     vertical: "flex flex-col items-stretch",
 };
 const ATTACHMENT_EDGE_CLASSES = {
@@ -343,7 +343,9 @@ const ATTACHMENT_CONTROL_CLASSES = {
         "[&>pdm-button:first-child>button]:!rounded-l-md",
         "[&>pdm-button:last-child>button]:!rounded-r-md",
         "[&>pdm-input]:flex-1",
+        "[&>pdm-input]:min-w-0",
         "[&>pdm-input>div]:w-full",
+        "[&>pdm-input>div]:min-w-0",
         "[&>pdm-input>div]:!rounded-none",
         "[&>pdm-input>div]:shadow-none",
         "[&>pdm-input>div>input]:!rounded-none",
@@ -353,6 +355,7 @@ const ATTACHMENT_CONTROL_CLASSES = {
         "[&>pdm-input:last-child>div]:!rounded-r-md",
         "[&>pdm-input:first-child>div>input]:!rounded-l-md",
         "[&>pdm-input:last-child>div>input]:!rounded-r-md",
+        "[&>pdm-input-group]:min-w-0",
         "[&>pdm-input-group>div]:!rounded-none",
         "[&>pdm-input-group>div]:shadow-none",
         "[&>pdm-input-group:first-child>div]:!rounded-l-md",
@@ -5408,10 +5411,10 @@ class PdmSelectComponent {
     }
 }
 PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
                 type: Input
             }], value: [{