@softpak/components 19.4.0 → 19.5.0-beta.2

package/fesm2022/softpak-components-spx-button.mjs

@@ -1,109 +1,51 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { input, output, viewChild, Component, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
+import { IsSeverityPipe } from '@softpak/components/spx-pipes';
 
 class SpxButtonComponent {
     constructor() {
-        this.spxDisabled = false;
-        this.spxSeverity = SpxSeverityEnum.info;
-        this.spxSize = 'lg';
-        this.spxType = 'submit';
-        this.spxClick = new EventEmitter();
+        this.spxDisabled = input(false);
+        this.spxClass = input();
+        this.spxClassObject = input();
+        this.spxForm = input();
+        this.spxFullHeight = input();
+        this.spxFullWidth = input();
+        this.spxSeverity = input(SpxSeverityEnum.info);
+        this.spxSize = input('lg');
+        this.spxTabIndex = input();
+        this.spxType = input('submit');
+        this.spxClick = output();
+        this.buttonRef = viewChild('buttonRef');
+        this.SpxSeverity = SpxSeverityEnum;
         this.hasShadowDom = (el) => {
             return !!el.shadowRoot && !!el.attachShadow;
         };
         this.handleClick = () => {
-            if (!this.spxDisabled) {
+            if (!this.spxDisabled()) {
                 this.spxClick.emit();
             }
         };
     }
-    get hostClassBlock() { return this.spxFullWidth; }
-    get hostClassHFull() { return this.spxFullHeight; }
-    get hostClassWFull() { return this.spxFullWidth; }
-    get severityError() { return this.spxSeverity === SpxSeverityEnum.error; }
-    get severityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }
-    get severitySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }
-    get severityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }
+    get hostClassBlock() {
+        return this.spxFullWidth();
+    }
+    get hostClassHFull() {
+        return this.spxFullHeight();
+    }
+    get hostClassWFull() {
+        return this.spxFullWidth();
+    }
     spxSetFocus() {
-        console.log(this.buttonRef);
-        this.buttonRef?.nativeElement?.focus();
+        this.buttonRef()?.nativeElement?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SpxButtonComponent, isStandalone: true, selector: "spx-button", inputs: { spxDisabled: "spxDisabled", spxClass: "spxClass", spxClassObject: "spxClassObject", spxForm: "spxForm", spxFullHeight: "spxFullHeight", spxFullWidth: "spxFullWidth", spxSeverity: "spxSeverity", spxSize: "spxSize", spxTabIndex: "spxTabIndex", spxType: "spxType" }, outputs: { spxClick: "spxClick" }, host: { properties: { "class.block": "this.hostClassBlock", "class.h-full": "this.hostClassHFull", "class.w-full": "this.hostClassWFull" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true, static: true }], ngImport: i0, template: `
-  <button
-    #buttonRef
-    class="border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r"
-    [class.h-full]="this.spxFullHeight"
-    [class.w-full]="this.spxFullWidth"
-    [class.bg-blue-600]="!this.spxSeverity || this.severityInfo"
-    [class.focus:ring-blue-600]="!this.spxSeverity || this.severityInfo"
-    [class.from-red-400]="this.severityError"
-    [class.to-red-600]="this.severityError"
-    [class.focus:ring-red-600]="this.severityError"
-    [class.from-lime-400]="this.severitySuccess"
-    [class.to-lime-600]="this.severitySuccess"
-    [class.focus:ring-lime-600]="this.severitySuccess"
-    [class.from-amber-400]="this.severityWarning"
-    [class.to-amber-600]="this.severityWarning"
-    [class.focus:ring-amber-600]="this.severityWarning"
-    [class.py-2]="!this.spxSize || this.spxSize === 'lg'"
-    [class.py-4]="!this.spxSize || this.spxSize === 'xl'"
-    [class.text-xl]="this.spxSize === 'xl'"
-    [class.text-lg]="this.spxSize === 'lg'"
-    [class.cursor-pointer]="!this.spxDisabled"
-    [class.cursor-not-allowed]="this.spxDisabled"
-    [class.opacity-50]="this.spxDisabled"
-    [class.focus:ring-0]="this.spxDisabled"
-    [ngClass]="this.spxClass ? this.spxClass : undefined"
-    [attr.disabled]="this.spxDisabled ? this.spxDisabled : undefined"
-    [attr.form]="this.spxForm ? this.spxForm : undefined"
-    [attr.tabindex]="this.spxTabIndex ? this.spxTabIndex : undefined"
-    [attr.type]="this.spxType ? this.spxType : undefined"
-    (click)="this.handleClick()"
-    part="button"><ng-content></ng-content></button>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", type: SpxButtonComponent, isStandalone: true, selector: "spx-button", inputs: { spxDisabled: { classPropertyName: "spxDisabled", publicName: "spxDisabled", isSignal: true, isRequired: false, transformFunction: null }, spxClass: { classPropertyName: "spxClass", publicName: "spxClass", isSignal: true, isRequired: false, transformFunction: null }, spxClassObject: { classPropertyName: "spxClassObject", publicName: "spxClassObject", isSignal: true, isRequired: false, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: false, transformFunction: null }, spxFullHeight: { classPropertyName: "spxFullHeight", publicName: "spxFullHeight", isSignal: true, isRequired: false, transformFunction: null }, spxFullWidth: { classPropertyName: "spxFullWidth", publicName: "spxFullWidth", isSignal: true, isRequired: false, transformFunction: null }, spxSeverity: { classPropertyName: "spxSeverity", publicName: "spxSeverity", isSignal: true, isRequired: false, transformFunction: null }, spxSize: { classPropertyName: "spxSize", publicName: "spxSize", isSignal: true, isRequired: false, transformFunction: null }, spxTabIndex: { classPropertyName: "spxTabIndex", publicName: "spxTabIndex", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClick: "spxClick" }, host: { properties: { "class.block": "this.hostClassBlock", "class.h-full": "this.hostClassHFull", "class.w-full": "this.hostClassWFull" } }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\r\n    #buttonRef\r\n    class=\"border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r\"\r\n    [class.h-full]=\"this.spxFullHeight()\"\r\n    [class.w-full]=\"this.spxFullWidth()\"\r\n    [class.bg-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.focus:ring-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.from-red-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.to-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.focus:ring-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.from-lime-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.to-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.focus:ring-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.from-amber-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.to-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.focus:ring-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.py-2]=\"!this.spxSize() || this.spxSize() === 'lg'\"\r\n    [class.py-4]=\"!this.spxSize() || this.spxSize() === 'xl'\"\r\n    [class.text-xl]=\"this.spxSize() === 'xl'\"\r\n    [class.text-lg]=\"this.spxSize() === 'lg'\"\r\n    [class.cursor-pointer]=\"!this.spxDisabled()\"\r\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\r\n    [class.opacity-50]=\"this.spxDisabled()\"\r\n    [class.focus:ring-0]=\"this.spxDisabled()\"\r\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\"\r\n    [attr.disabled]=\"this.spxDisabled() ? this.spxDisabled() : undefined\"\r\n    [attr.form]=\"this.spxForm() ? this.spxForm() : undefined\"\r\n    [attr.tabindex]=\"this.spxTabIndex() ? this.spxTabIndex() : undefined\"\r\n    [attr.type]=\"this.spxType() ? this.spxType() : undefined\"\r\n    (click)=\"this.handleClick()\"\r\n    part=\"button\">\r\n    <ng-content></ng-content>\r\n  </button>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'spx-button',
-                    imports: [
-                        NgClass,
-                    ],
-                    template: `
-  <button
-    #buttonRef
-    class="border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r"
-    [class.h-full]="this.spxFullHeight"
-    [class.w-full]="this.spxFullWidth"
-    [class.bg-blue-600]="!this.spxSeverity || this.severityInfo"
-    [class.focus:ring-blue-600]="!this.spxSeverity || this.severityInfo"
-    [class.from-red-400]="this.severityError"
-    [class.to-red-600]="this.severityError"
-    [class.focus:ring-red-600]="this.severityError"
-    [class.from-lime-400]="this.severitySuccess"
-    [class.to-lime-600]="this.severitySuccess"
-    [class.focus:ring-lime-600]="this.severitySuccess"
-    [class.from-amber-400]="this.severityWarning"
-    [class.to-amber-600]="this.severityWarning"
-    [class.focus:ring-amber-600]="this.severityWarning"
-    [class.py-2]="!this.spxSize || this.spxSize === 'lg'"
-    [class.py-4]="!this.spxSize || this.spxSize === 'xl'"
-    [class.text-xl]="this.spxSize === 'xl'"
-    [class.text-lg]="this.spxSize === 'lg'"
-    [class.cursor-pointer]="!this.spxDisabled"
-    [class.cursor-not-allowed]="this.spxDisabled"
-    [class.opacity-50]="this.spxDisabled"
-    [class.focus:ring-0]="this.spxDisabled"
-    [ngClass]="this.spxClass ? this.spxClass : undefined"
-    [attr.disabled]="this.spxDisabled ? this.spxDisabled : undefined"
-    [attr.form]="this.spxForm ? this.spxForm : undefined"
-    [attr.tabindex]="this.spxTabIndex ? this.spxTabIndex : undefined"
-    [attr.type]="this.spxType ? this.spxType : undefined"
-    (click)="this.handleClick()"
-    part="button"><ng-content></ng-content></button>`
-                }]
+            args: [{ selector: 'spx-button', imports: [NgClass, IsSeverityPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n    #buttonRef\r\n    class=\"border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r\"\r\n    [class.h-full]=\"this.spxFullHeight()\"\r\n    [class.w-full]=\"this.spxFullWidth()\"\r\n    [class.bg-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.focus:ring-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.from-red-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.to-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.focus:ring-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.from-lime-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.to-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.focus:ring-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.from-amber-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.to-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.focus:ring-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.py-2]=\"!this.spxSize() || this.spxSize() === 'lg'\"\r\n    [class.py-4]=\"!this.spxSize() || this.spxSize() === 'xl'\"\r\n    [class.text-xl]=\"this.spxSize() === 'xl'\"\r\n    [class.text-lg]=\"this.spxSize() === 'lg'\"\r\n    [class.cursor-pointer]=\"!this.spxDisabled()\"\r\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\r\n    [class.opacity-50]=\"this.spxDisabled()\"\r\n    [class.focus:ring-0]=\"this.spxDisabled()\"\r\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\"\r\n    [attr.disabled]=\"this.spxDisabled() ? this.spxDisabled() : undefined\"\r\n    [attr.form]=\"this.spxForm() ? this.spxForm() : undefined\"\r\n    [attr.tabindex]=\"this.spxTabIndex() ? this.spxTabIndex() : undefined\"\r\n    [attr.type]=\"this.spxType() ? this.spxType() : undefined\"\r\n    (click)=\"this.handleClick()\"\r\n    part=\"button\">\r\n    <ng-content></ng-content>\r\n  </button>" }]
         }], propDecorators: { hostClassBlock: [{
                 type: HostBinding,
                 args: ['class.block']
@@ -113,31 +55,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }], hostClassWFull: [{
                 type: HostBinding,
                 args: ['class.w-full']
-            }], spxDisabled: [{
-                type: Input
-            }], spxClass: [{
-                type: Input
-            }], spxClassObject: [{
-                type: Input
-            }], spxForm: [{
-                type: Input
-            }], spxFullHeight: [{
-                type: Input
-            }], spxFullWidth: [{
-                type: Input
-            }], spxSeverity: [{
-                type: Input
-            }], spxSize: [{
-                type: Input
-            }], spxTabIndex: [{
-                type: Input
-            }], spxType: [{
-                type: Input
-            }], spxClick: [{
-                type: Output
-            }], buttonRef: [{
-                type: ViewChild,
-                args: ['buttonRef', { static: true }]
             }] } });
 
 /**

package/fesm2022/softpak-components-spx-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n    selector: 'spx-button',\n    imports: [\n        NgClass,\n    ],\n    template: `\n  <button\n    #buttonRef\n    class=\"border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r\"\n    [class.h-full]=\"this.spxFullHeight\"\n    [class.w-full]=\"this.spxFullWidth\"\n    [class.bg-blue-600]=\"!this.spxSeverity || this.severityInfo\"\n    [class.focus:ring-blue-600]=\"!this.spxSeverity || this.severityInfo\"\n    [class.from-red-400]=\"this.severityError\"\n    [class.to-red-600]=\"this.severityError\"\n    [class.focus:ring-red-600]=\"this.severityError\"\n    [class.from-lime-400]=\"this.severitySuccess\"\n    [class.to-lime-600]=\"this.severitySuccess\"\n    [class.focus:ring-lime-600]=\"this.severitySuccess\"\n    [class.from-amber-400]=\"this.severityWarning\"\n    [class.to-amber-600]=\"this.severityWarning\"\n    [class.focus:ring-amber-600]=\"this.severityWarning\"\n    [class.py-2]=\"!this.spxSize || this.spxSize === 'lg'\"\n    [class.py-4]=\"!this.spxSize || this.spxSize === 'xl'\"\n    [class.text-xl]=\"this.spxSize === 'xl'\"\n    [class.text-lg]=\"this.spxSize === 'lg'\"\n    [class.cursor-pointer]=\"!this.spxDisabled\"\n    [class.cursor-not-allowed]=\"this.spxDisabled\"\n    [class.opacity-50]=\"this.spxDisabled\"\n    [class.focus:ring-0]=\"this.spxDisabled\"\n    [ngClass]=\"this.spxClass ? this.spxClass : undefined\"\n    [attr.disabled]=\"this.spxDisabled ? this.spxDisabled : undefined\"\n    [attr.form]=\"this.spxForm ? this.spxForm : undefined\"\n    [attr.tabindex]=\"this.spxTabIndex ? this.spxTabIndex : undefined\"\n    [attr.type]=\"this.spxType ? this.spxType : undefined\"\n    (click)=\"this.handleClick()\"\n    part=\"button\"><ng-content></ng-content></button>`\n})\nexport class SpxButtonComponent {\n  @HostBinding('class.block') get hostClassBlock() { return this.spxFullWidth; }\n  @HostBinding('class.h-full') get hostClassHFull() { return this.spxFullHeight; }\n  @HostBinding('class.w-full') get hostClassWFull() { return this.spxFullWidth; }\n  @Input() spxDisabled = false;\n  @Input() spxClass?: string;\n  @Input() spxClassObject?: object;\n  @Input() spxForm?: string;\n  @Input() spxFullHeight?: boolean;\n  @Input() spxFullWidth?: boolean;\n  @Input() spxSeverity?: SpxSeverityEnum = SpxSeverityEnum.info;\n  @Input() spxSize: 'lg' | 'xl' = 'lg';\n  @Input() spxTabIndex?: number;\n  @Input() spxType: 'button' | 'submit' = 'submit';\n  @Output() spxClick: EventEmitter<void> = new EventEmitter<void>();\n  @ViewChild('buttonRef', { static: true }) buttonRef?: ElementRef<HTMLInputElement>;\n\n  get severityError() { return this.spxSeverity === SpxSeverityEnum.error; }\n  get severityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }\n  get severitySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }\n  get severityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }\n\n  hasShadowDom = (el: HTMLElement) => {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n  };\n  handleClick = () => {\n    if (!this.spxDisabled) {\n      this.spxClick.emit();\n    }\n  }\n\n  spxSetFocus(): void {\n    console.log(this.buttonRef);\n    this.buttonRef?.nativeElement?.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/spx-button.component.html","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  HostBinding,\r\n  input,\r\n  output,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\nimport { IsSeverityPipe } from '@softpak/components/spx-pipes';\r\n\r\n@Component({\r\n  selector: 'spx-button',\r\n  imports: [NgClass, IsSeverityPipe],\r\n  templateUrl: './spx-button.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SpxButtonComponent {\r\n  @HostBinding('class.block') get hostClassBlock() {\r\n    return this.spxFullWidth();\r\n  }\r\n  @HostBinding('class.h-full') get hostClassHFull() {\r\n    return this.spxFullHeight();\r\n  }\r\n  @HostBinding('class.w-full') get hostClassWFull() {\r\n    return this.spxFullWidth();\r\n  }\r\n\r\n  readonly spxDisabled = input(false);\r\n  readonly spxClass = input<string>();\r\n  readonly spxClassObject = input<object>();\r\n  readonly spxForm = input<string>();\r\n  readonly spxFullHeight = input<boolean>();\r\n  readonly spxFullWidth = input<boolean>();\r\n  readonly spxSeverity = input<SpxSeverityEnum | undefined>(\r\n    SpxSeverityEnum.info\r\n  );\r\n  readonly spxSize = input<'lg' | 'xl'>('lg');\r\n  readonly spxTabIndex = input<number>();\r\n  readonly spxType = input<'button' | 'submit'>('submit');\r\n  spxClick = output();\r\n  buttonRef = viewChild<ElementRef<HTMLInputElement>>('buttonRef');\r\n  SpxSeverity = SpxSeverityEnum;\r\n\r\n  hasShadowDom = (el: HTMLElement) => {\r\n    return !!el.shadowRoot && !!(el as any).attachShadow;\r\n  };\r\n  handleClick = () => {\r\n    if (!this.spxDisabled()) {\r\n      this.spxClick.emit();\r\n    }\r\n  };\r\n\r\n  spxSetFocus(): void {\r\n    this.buttonRef()?.nativeElement?.focus();\r\n  }\r\n}\r\n","<button\r\n    #buttonRef\r\n    class=\"border border-transparent font-bold px-4 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gradient-to-r\"\r\n    [class.h-full]=\"this.spxFullHeight()\"\r\n    [class.w-full]=\"this.spxFullWidth()\"\r\n    [class.bg-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.focus:ring-blue-600]=\"!this.spxSeverity() || (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\r\n    [class.from-red-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.to-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.focus:ring-red-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\r\n    [class.from-lime-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.to-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.focus:ring-lime-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\r\n    [class.from-amber-400]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.to-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.focus:ring-amber-600]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\r\n    [class.py-2]=\"!this.spxSize() || this.spxSize() === 'lg'\"\r\n    [class.py-4]=\"!this.spxSize() || this.spxSize() === 'xl'\"\r\n    [class.text-xl]=\"this.spxSize() === 'xl'\"\r\n    [class.text-lg]=\"this.spxSize() === 'lg'\"\r\n    [class.cursor-pointer]=\"!this.spxDisabled()\"\r\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\r\n    [class.opacity-50]=\"this.spxDisabled()\"\r\n    [class.focus:ring-0]=\"this.spxDisabled()\"\r\n    [ngClass]=\"this.spxClass() ? this.spxClass() : undefined\"\r\n    [attr.disabled]=\"this.spxDisabled() ? this.spxDisabled() : undefined\"\r\n    [attr.form]=\"this.spxForm() ? this.spxForm() : undefined\"\r\n    [attr.tabindex]=\"this.spxTabIndex() ? this.spxTabIndex() : undefined\"\r\n    [attr.type]=\"this.spxType() ? this.spxType() : undefined\"\r\n    (click)=\"this.handleClick()\"\r\n    part=\"button\">\r\n    <ng-content></ng-content>\r\n  </button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/softpak-components-spx-capitalize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-capitalize.mjs","sources":["../../../../projects/softpak/components/spx-capitalize/spx-capitalize.pipe.ts","../../../../projects/softpak/components/spx-capitalize/softpak-components-spx-capitalize.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'capitalize',\n  standalone: true,\n})\nexport class SpxCapitalizePipe implements PipeTransform {\n\n  transform(value: string, ..._args: unknown[]): string {\n    return value = value ? value.charAt(0).toUpperCase() + value.substr(1) : '';\n  }\n\n  static transform(value: string, ..._args: unknown[]): string {\n    return new SpxCapitalizePipe().transform(value, _args);\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,iBAAiB,CAAA;AAE5B,IAAA,SAAS,CAAC,KAAa,EAAE,GAAG,KAAgB,EAAA;QAC1C,OAAO,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;;AAG7E,IAAA,OAAO,SAAS,CAAC,KAAa,EAAE,GAAG,KAAgB,EAAA;QACjD,OAAO,IAAI,iBAAiB,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;;8GAP7C,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;4GAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,YAAY;AAClB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACLD;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-capitalize.mjs","sources":["../../../../projects/softpak/components/spx-capitalize/spx-capitalize.pipe.ts","../../../../projects/softpak/components/spx-capitalize/softpak-components-spx-capitalize.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\n\r\n@Pipe({\r\n  name: 'capitalize',\r\n  standalone: true,\r\n})\r\nexport class SpxCapitalizePipe implements PipeTransform {\r\n\r\n  transform(value: string, ..._args: unknown[]): string {\r\n    return value = value ? value.charAt(0).toUpperCase() + value.substr(1) : '';\r\n  }\r\n\r\n  static transform(value: string, ..._args: unknown[]): string {\r\n    return new SpxCapitalizePipe().transform(value, _args);\r\n  }\r\n\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,iBAAiB,CAAA;AAE5B,IAAA,SAAS,CAAC,KAAa,EAAE,GAAG,KAAgB,EAAA;QAC1C,OAAO,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;;AAG7E,IAAA,OAAO,SAAS,CAAC,KAAa,EAAE,GAAG,KAAgB,EAAA;QACjD,OAAO,IAAI,iBAAiB,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;;8GAP7C,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;4GAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,YAAY;AAClB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACLD;;AAEG;;;;"}