pdm-ui-kit 0.1.20 → 0.1.21

package/fesm2020/pdm-ui-kit.mjs

@@ -390,23 +390,40 @@ class PdmButtonComponent {
     get isDisabled() {
         return this.disabled || this.loading || this.variant === 'loading';
     }
+    get resolvedVariant() {
+        return this.isValidVariant(this.variant) ? this.variant : 'default';
+    }
+    get resolvedState() {
+        return this.state === 'hover' ? 'hover' : 'default';
+    }
+    get resolvedSize() {
+        if (this.size === 'small' || this.size === 'large') {
+            return this.size;
+        }
+        return 'default';
+    }
+    get showsIconSlot() {
+        const variant = this.resolvedVariant;
+        return variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded';
+    }
     get rootClasses() {
-        const currentState = this.state === 'hover' ? 'hover' : 'default';
-        const toneClass = this.toneClassMap[this.variant][currentState];
+        const currentState = this.resolvedState;
+        const variant = this.resolvedVariant;
+        const toneClass = this.toneClassMap[variant][currentState];
         return [
             'inline-flex items-center justify-center gap-2 rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
-            this.variant === 'link' ? 'px-4 py-2 h-9' : '',
-            this.variant === 'icon' ? 'h-9 w-9 p-0' : '',
-            this.variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
-            this.variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
-            this.variant !== 'icon' && this.variant !== 'icon-circle' && this.variant !== 'rounded'
-                ? this.size === 'small'
+            variant === 'link' ? 'px-4 py-2 h-9' : '',
+            variant === 'icon' ? 'h-9 w-9 p-0' : '',
+            variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
+            variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
+            variant !== 'icon' && variant !== 'icon-circle' && variant !== 'rounded'
+                ? this.resolvedSize === 'small'
                     ? 'h-8 px-3 text-xs'
-                    : this.size === 'large'
+                    : this.resolvedSize === 'large'
                         ? 'h-10 px-8'
                         : 'h-9 px-4'
                 : '',
-            this.variant === 'link' && this.state === 'hover' ? 'underline underline-offset-4' : '',
+            variant === 'link' && currentState === 'hover' ? 'underline underline-offset-4' : '',
             toneClass,
             this.className
         ];
@@ -416,12 +433,27 @@ class PdmButtonComponent {
             this.pressed.emit(event);
         }
     }
+    isValidVariant(value) {
+        return (value === 'default' ||
+            value === 'primary' ||
+            value === 'destructive' ||
+            value === 'outline' ||
+            value === 'subtle' ||
+            value === 'secondary' ||
+            value === 'ghost' ||
+            value === 'link' ||
+            value === 'with-icon' ||
+            value === 'icon' ||
+            value === 'icon-circle' ||
+            value === 'rounded' ||
+            value === 'loading');
+    }
 }
 PdmButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], variant: [{
@@ -1092,10 +1124,10 @@ class PdmIconComponent {
     }
 }
 PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n" }]
+            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { name: [{
                 type: Input
             }], library: [{