matcha-components 20.15.0 → 20.16.0

package/src/lib/matcha-button/button/button.component.ts

@@ -1,182 +0,0 @@
-import { Component, ElementRef, HostBinding, Inject, Input, OnChanges, OnInit, Renderer2 } from '@angular/core';
-
-@Component({
-    selector: '[matcha-button]',
-    templateUrl: './button.component.html',
-    styleUrls: ['./button.component.scss'],
-    standalone: false
-})
-export class MatchaButtonComponent implements OnChanges, OnInit {
-    @Input('size') size: string | null = null;
-
-    @Input('size-xs') sizeXs: string | null = null;
-    @Input('size-sm') sizeSm: string | null = null;
-    @Input('size-md') sizeMd: string | null = null;
-    @Input('size-lg') sizeLg: string | null = null;
-    @Input('size-xl') sizeXl: string | null = null;
-
-    @Input('color') color: string | null = 'basic';
-
-    @HostBinding('attr.color')
-    get colorAttr(): string | null {
-        return this.color;
-    }
-
-    private _basic = false;
-    @Input() get basic() { return this._basic; }
-    set basic(v: boolean | string) { this._basic = v === 'false' ? false : !!v; }
-
-    private _outline = false;
-    @Input() get outline() { return this._outline; }
-    set outline(v: boolean | string) { this._outline = v === 'false' ? false : !!v;}
-
-    private _alpha = false;
-    @Input() get alpha() { return this._alpha; }
-    set alpha(v: boolean | string) { this._alpha = v === 'false' ? false : !!v;}
-
-    private _pill = false;
-    @Input() get pill() { return this._pill; }
-    set pill(v: boolean | string) { this._pill = v === 'false' ? false : !!v;}
-
-    private _link = false;
-    @Input() get link() { return this._link; }
-    set link(v: boolean | string) { this._link = v === 'false' ? false : !!v;}
-
-    private _icon = false;
-    @Input() get icon() { return this._icon; }
-    set icon(v: boolean | string) { this._icon = v === 'false' ? false : !!v;}
-
-    constructor(@Inject(ElementRef) private _elementRef: ElementRef, @Inject(Renderer2) private _renderer: Renderer2) {}
-
-    private _config: any = {
-        sizeXs: 'tiny',
-        sizeSm: 'small',
-        sizeMd: 'medium',
-        sizeLg: 'large',
-        sizeXl: 'huge',
-        size: 'medium',
-        basic: false,
-        outline: false,
-        pill: false,
-        icon: false,
-        link: false
-    };
-
-    ngOnInit() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
-        this.setConfig();
-        // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
-        const buttons = document.querySelectorAll('.matcha-button');
-        buttons.forEach(button => {
-            // mouse down event
-            button.addEventListener('mousedown', this.addRippleEffect, false);
-        });
-    }
-
-    ngOnChanges() {
-        this.setConfig();
-    }
-
-    private clearConfig() {
-        //size
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${this._config.size}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xs-${this._config.sizeXs}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-sm-${this._config.sizeSm}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
-        //basic
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
-        //outline
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-outline`);
-        //pill
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
-        //icon
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        //link
-        this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-
-    private setConfig() {
-        this.clearConfig();
-        this.size ? this.setSize() : null;
-        (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
-        (this.pill === true || this.pill === 'true') ? this.setPill() : null;
-        (this.link === true || this.link === 'true') ? this.setLink() : null;
-        (this.basic === true || this.basic === 'true') ? this.setBasic() : null;
-        (this.icon === true || this.icon === 'true') ? this.setIcon() : null;
-    }
-
-    private setSize() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
-        this._config.size = this.size;
-        if(this.sizeXs) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xs-${this.sizeXs}`);
-            this._config.sizeXs = this.sizeXs;
-        }
-        if(this.sizeSm) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-sm-${this.sizeSm}`);
-            this._config.sizeSm = this.sizeSm;
-        }
-        if(this.sizeMd) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-md-${this.sizeMd}`);
-            this._config.sizeMd = this.sizeMd;
-        }
-        if(this.sizeLg) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-lg-${this.sizeLg}`);
-            this._config.sizeLg = this.sizeLg;
-        }
-        if(this.sizeXl) {
-            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-xl-${this.sizeXl}`);
-            this._config.sizeXl = this.sizeXl;
-        }
-    }
-
-    private setOutline() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
-    }
-
-    private setPill() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
-    }
-
-    private setLink() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-link`);
-    }
-
-    private setBasic() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-basic`);
-        this._renderer.addClass(this._elementRef.nativeElement, `basic`);
-    }
-
-    private setIcon() {
-        this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
-    }
-
-    private addRippleEffect(e: any) {
-        var target = e.target;
-        if (target.tagName.toLowerCase() !== 'button') return false;
-        var rect = target.getBoundingClientRect();
-        var ripple = target.querySelector('.ripple');
-        if (!ripple) {
-            ripple = document.createElement('span');
-            ripple.className = `ripple`;
-            ripple.style.height = ripple.style.width = target.offsetWidth + 'px';
-            target.appendChild(ripple);
-        }
-        ripple.classList.remove('show');
-        var top = e.pageY - rect.top - ripple.offsetHeight / 2 - window.scrollY;
-        var left = e.pageX - rect.left - ripple.offsetWidth / 2 - window.scrollX;
-        ripple.style.top = top + 'px';
-        ripple.style.left = left + 'px';
-        ripple.classList.add('show');
-        return false;
-    }
-
-    ngOnDestroy() {
-        const buttons = document.querySelectorAll('.matcha-button');
-        buttons.forEach(button => {
-            button.removeEventListener('click', this.addRippleEffect, false);
-        });
-    }
-}

package/src/lib/matcha-button/button.argtypes.ts

@@ -1,105 +0,0 @@
-export const buttonArgtypes = {
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: [ '', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 'warn', 'brown', 'grey', 'blue-grey', 'primary', 'accent', 'warn'],
-    },
-    size: {
-        description: 'size of the button',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXs:{
-        description: 'size of the button in screen xs',
-        control: 'select',
-        defaultValue: 'tiny',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeSm:{
-        description: 'size of the button in screen sm',
-        control: 'select',
-        defaultValue: 'small',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeMd:{
-        description: 'size of the button in screen md',
-        control: 'select',
-        defaultValue: 'medium',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeLg:{
-        description: 'size of the button in screen lg',
-        control: 'select',
-        defaultValue: 'large',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    sizeXl:{
-        description: 'size of the button in screen xl',
-        control: 'select',
-        defaultValue: 'huge',
-        table: {
-            defaultValue: { summary: 'medium' },
-        },
-        options: ['', 'tiny', 'small', 'medium', 'large', 'huge'],
-    },
-    basic: {
-        description: 'basic button',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    outline: {
-        description: 'border of the button',
-        control: 'boolean',
-        defaultValue: 'false',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    pill: {
-        description: 'Round button',
-        control: 'boolean',
-        defaultValue: 'true',
-        table: {
-            defaultValue: { summary: 'true' },
-        },
-    },
-    link: {
-        description: 'Link button',
-        control: 'boolean',
-        defaultValue: 'true',
-        table: {
-            defaultValue: { summary: 'true' },
-        },
-    },
-    icon: {
-        description: 'Icon button',
-        control: 'boolean',
-        defaultValue: 'true',
-        table: {
-            defaultValue: { summary: 'true' },
-        },
-    },
-};

package/src/lib/matcha-button/button.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { MatchaButtonComponent } from './button/button.component';
-
-@NgModule({
-    declarations: [MatchaButtonComponent],
-    imports: [],
-    exports: [MatchaButtonComponent],
-})
-export class MatchaButtonModule {}