import { Component, Input, HostBinding } from '@angular/core';
import { checkTruthAttribute, validateStringValue } from '../../utils/attribute.util';
import { iconsC } from '../../interfaces/icon.interface';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
import * as i2 from "@angular/common";
import * as i3 from "../icon/icon.component";
import * as i4 from "../../directives/button-loader.directive";
import * as i5 from "../spinner/spinner.component";
export class ButtonComponent {
    type = 'primary';
    disabled;
    alert;
    action;
    white;
    snug;
    accent;
    fontSize;
    iconStart;
    iconEnd;
    loading;
    loadingText;
    customColor;
    get parentEvents() {
        if (this.disabled) {
            return 'none';
        }
        return 'auto';
    }
    inputType = 'primary';
    inputFontSize = undefined;
    inputDisabled = false;
    inputAlert = false;
    inputAction = false;
    inputSnug = false;
    inputAccent = false;
    inputWhite = false;
    inputIconStart = undefined;
    inputIconEnd = undefined;
    inputLoading = false;
    inputCustomColor = '';
    ngOnChanges(changes) {
        this.inputType =
            validateStringValue(changes, 'type', ['primary', 'secondary', 'tertiary'], this.inputType) || 'primary';
        this.inputFontSize = validateStringValue(changes, 'fontSize', ['small', 'large'], this.inputFontSize);
        this.inputDisabled = checkTruthAttribute(changes, 'disabled', this.inputDisabled);
        this.inputAlert = checkTruthAttribute(changes, 'alert', this.inputAlert);
        this.inputAction = checkTruthAttribute(changes, 'action', this.inputAction);
        this.inputSnug = checkTruthAttribute(changes, 'snug', this.inputSnug);
        this.inputAccent = checkTruthAttribute(changes, 'accent', this.inputAccent);
        this.inputWhite = checkTruthAttribute(changes, 'white', this.inputWhite);
        this.inputIconStart = validateStringValue(changes, 'iconStart', iconsC.slice(), this.inputIconStart);
        this.inputIconEnd = validateStringValue(changes, 'iconEnd', iconsC.slice(), this.inputIconEnd);
        this.inputLoading = checkTruthAttribute(changes, 'loading', this.inputLoading);
        if (changes['customColor']?.currentValue)
            this.inputCustomColor = this.checkCustomColor(changes['customColor'].currentValue);
    }
    checkCustomColor(color) {
        if (color.startsWith('var'))
            return color;
        if (color.startsWith('#') && (color.length === 4 || color.length === 7) && color.split('').every((char) => char.match(/[#0-9a-fA-F]+/)))
            return color;
        return '';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ButtonComponent, selector: "cf-btn", inputs: { type: "type", disabled: "disabled", alert: "alert", action: "action", white: "white", snug: "snug", accent: "accent", fontSize: "fontSize", iconStart: "iconStart", iconEnd: "iconEnd", loading: "loading", loadingText: "loadingText", customColor: "customColor" }, host: { properties: { "style.pointer-events": "this.parentEvents" } }, usesOnChanges: true, ngImport: i0, template: "<ion-button\n  [style]=\"'--custom-color: ' + inputCustomColor\"\n  [ngClass]=\"{\n    'cf-button-primary': inputType === 'primary',\n    'cf-button-secondary': inputType === 'secondary',\n    'cf-button-tertiary': inputType === 'tertiary',\n    'text-large': inputFontSize === 'large',\n    'text-small': inputFontSize === 'small',\n    alert: inputAlert,\n    action: inputAction,\n    snug: inputSnug,\n    accent: inputAccent,\n    white: inputWhite\n  }\"\n  mode=\"md\"\n  [disabled]=\"inputDisabled || inputLoading\">\n  <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n  <ng-container *ngIf=\"loadingText && inputLoading; else originalText\">\n    <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n    <p>{{ loadingText }}</p>\n  </ng-container>\n  <ng-template #originalText>\n    <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n  </ng-template>\n  <cf-icon *ngIf=\"inputIconEnd\" [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));width:100%;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{font-size:1rem}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-disabled);--button-text-color: #9d9d9d}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:.2rem solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-secondary[class*=disabled]::part(native){border:.2rem solid var(--cf-app-system-color-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-background-light)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor"] }, { kind: "directive", type: i4.ButtonLoaderDirective, selector: "[cfButtonLoader]", inputs: ["cfButtonLoader"] }, { kind: "component", type: i5.SpinnerComponent, selector: "cf-spinner", inputs: ["size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-btn', template: "<ion-button\n  [style]=\"'--custom-color: ' + inputCustomColor\"\n  [ngClass]=\"{\n    'cf-button-primary': inputType === 'primary',\n    'cf-button-secondary': inputType === 'secondary',\n    'cf-button-tertiary': inputType === 'tertiary',\n    'text-large': inputFontSize === 'large',\n    'text-small': inputFontSize === 'small',\n    alert: inputAlert,\n    action: inputAction,\n    snug: inputSnug,\n    accent: inputAccent,\n    white: inputWhite\n  }\"\n  mode=\"md\"\n  [disabled]=\"inputDisabled || inputLoading\">\n  <cf-icon *ngIf=\"inputIconStart\" [icon]=\"inputIconStart\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n  <ng-container *ngIf=\"loadingText && inputLoading; else originalText\">\n    <cf-spinner [icon]=\"inputIconStart\" [size]=\"inputFontSize === 'large' ? 16 : inputFontSize === 'small' ? 10 : 12\"></cf-spinner>\n    <p>{{ loadingText }}</p>\n  </ng-container>\n  <ng-template #originalText>\n    <p *cfButtonLoader=\"inputLoading\"><ng-content></ng-content></p>\n  </ng-template>\n  <cf-icon *ngIf=\"inputIconEnd\" [icon]=\"inputIconEnd\" style=\"--cf-svg-overwrite-stroke-color: var(--button-text-color)\"></cf-icon>\n</ion-button>\n", styles: ["ion-button[class^=cf-button-]{--custom-color: var(--cf-app-color-primary);--core: var(--custom-color, var(--cf-app-color-primary));width:100%;min-height:5.6rem;border-radius:1rem .4rem 1rem 1rem;text-transform:capitalize;overflow:hidden;margin:0;--padding-top: 1.6rem;--padding-bottom: 1.6rem;--padding-start: 2.4rem;--padding-end: 2.4rem;font-size:1.2rem}ion-button[class^=cf-button-]>p{width:fit-content;font-weight:500;font-style:normal;line-height:auto;color:var(--button-text-color)}ion-button[class^=cf-button-]>:not(:first-child){margin-left:2rem}ion-button[class^=cf-button-]::part(native){border-radius:1rem .4rem 1rem 1rem;box-shadow:none}ion-button[class^=cf-button-].action{border-radius:.6rem;min-height:3.6rem;--padding-top: .6rem;--padding-bottom: .6rem;--padding-start: 2rem;--padding-end: 2rem}ion-button[class^=cf-button-].action::part(native){border-radius:.6rem}ion-button[class^=cf-button-].snug{width:fit-content}ion-button[class^=cf-button-].text-large{font-size:1.6rem}ion-button[class^=cf-button-].text-small{font-size:1rem}.cf-button-primary{--background: var(--core);--button-text-color: var(--cf-app-text-color-light)}.cf-button-primary[class*=disabled]{--background: var(--cf-app-system-color-disabled);--button-text-color: #9d9d9d}.cf-button-primary.accent:not([class*=disabled]){--background: var(--cf-app-color-accent)}.cf-button-primary.alert:not([class*=disabled]){--background: var(--cf-app-system-color-error)}.cf-button-primary.white:not([class*=disabled]){--background: var(--cf-app-background-light);--button-text-color: var(--cf-app-text-color-default)}.cf-button-secondary{--background: transparent;--button-text-color: var(--core)}.cf-button-secondary::part(native){border:.2rem solid var(--core)}.cf-button-secondary[class*=disabled]{--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-secondary[class*=disabled]::part(native){border:.2rem solid var(--cf-app-system-color-disabled)}.cf-button-secondary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-secondary.accent:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-color-accent)}.cf-button-secondary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-secondary.alert:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-system-color-error)}.cf-button-secondary.white:not([class*=disabled]){--background: var(--cf-app-color-primary);--button-text-color: var(--cf-app-text-color-light)}.cf-button-secondary.white:not([class*=disabled])::part(native){border:.2rem solid var(--cf-app-background-light)}.cf-button-tertiary{--background: transparent;--button-text-color: var(--core)}.cf-button-tertiary[class*=disabled]{--button-text-color: var(--cf-app-system-color-disabled)}.cf-button-tertiary.accent:not([class*=disabled]){--button-text-color: var(--cf-app-color-accent)}.cf-button-tertiary.alert:not([class*=disabled]){--button-text-color: var(--cf-app-system-color-error)}.cf-button-tertiary.white:not([class*=disabled]){--button-text-color: var(--cf-app-text-color-light)}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], disabled: [{
                type: Input
            }], alert: [{
                type: Input
            }], action: [{
                type: Input
            }], white: [{
                type: Input
            }], snug: [{
                type: Input
            }], accent: [{
                type: Input
            }], fontSize: [{
                type: Input
            }], iconStart: [{
                type: Input
            }], iconEnd: [{
                type: Input
            }], loading: [{
                type: Input
            }], loadingText: [{
                type: Input
            }], customColor: [{
                type: Input
            }], parentEvents: [{
                type: HostBinding,
                args: ['style.pointer-events']
            }] } });
//# sourceMappingURL=data:application/json;base64, 