matcha-components 1.0.8 → 1.0.14

package/src/lib/matcha-progress-spinner/progress-spinner.stories.ts

@@ -1,44 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { progressSpinnerArgtypes } from './progress-spinner.argtype';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { config } from '@storybook/addon-designs';
-
-export default {
-    title: 'Atoms/Progress spinner',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [MatProgressSpinnerModule],
-            declarations: [MatchaProgressSpinnerDirective],
-        }),
-    ],
-    args: {
-        color: 'primary',
-        diameter: 50,
-        strokeWidth: 5,
-        value: 70,
-    },
-    argTypes: progressSpinnerArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-    },
-} as Meta;
-
-/** Ce é pixuloko  ce é biruleibe? */
-export const ProgressSpinnerOverview: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="determinate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
-    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="indeterminate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
-`,
-    }),
-    name: 'Progress Spinner Overview',
-};

package/src/lib/matcha-radio-button/matcha-radio-button.argtype.ts

@@ -1,85 +0,0 @@
-export const matchaRadioButtonArgtypes = {
-    color: {
-      description: 'Theme color for all of the radio buttons in the group.',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'primary',
-        'accent',
-        'warn',
-      ]
-    },
-    disabled: {
-        description: 'Whether the radio group is disabled',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    labelPosition: {
-      description: 'Whether the labels should appear after or before the radio-buttons. Defaults to "after"',
-      control: 'select',
-      defaultValue: 'after',
-      table: {
-        defaultValue: { summary: 'after' },
-      },
-      options: [
-        'before',
-        'after'
-      ]
-    },
-    // strokeWidth: {
-    //   description: 'Stroke width of the progress spinner',
-    //   defaultValue: 5,
-    //   table: {
-    //     type: { summary: 'number' },
-    //     defaultValue: { summary: 5 },
-    //   },
-    //   control: {
-    //     type: 'number'
-    //   }
-    // },
-    // value: {
-    //   description: 'Value of the progress circle',
-    //   defaultValue: 70,
-    //   table: {
-    //     type: { summary: 'range' },
-    //     defaultValue: { summary: 70 },
-    //   },
-    //   control: {
-    //     type: 'range',
-    //     min: 0,
-    //     max: 100,
-    //     step: 1
-    //   }
-    // }
-  }
-
-// Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
-
-// @Input()
-// name: string
-
-// Name of the radio button group. All radio buttons inside this group will use this name.
-
-// @Input()
-// required: boolean
-
-// Whether the radio group is required
-
-// @Input()
-// selected: T
-
-// The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button.
-
-// @Input()
-// value: any
-
-// Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value.
-
-// @Output()
-// change: EventEmitter<MatRadioChange>

package/src/lib/matcha-radio-button/matcha-radio-button.directive.ts

@@ -1,16 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[matchaRadioButton]'
-})
-export class MatchaRadioButtonDirective {
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2
-    ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-radio-button')
-    }
-
-}

package/src/lib/matcha-radio-button/matcha-radio-button.stories.ts

@@ -1,44 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { MatRadioModule } from '@angular/material/radio';
-
-import { matchaRadioButtonArgtypes } from './matcha-radio-button.argtype';
-import { MatchaRadioButtonDirective } from './matcha-radio-button.directive';
-
-/** Este é o card principal */
-export default {
-    title: 'Atoms/Radio Button',
-    decorators: [
-        moduleMetadata({
-            imports: [MatRadioModule],
-            declarations: [MatchaRadioButtonDirective],
-        }),
-    ],
-    tags: ['autodocs'],
-    args: {
-        color: 'primary',
-        diameter: 50,
-        strokeWidth: 5,
-        value: 70,
-    },
-    argTypes: matchaRadioButtonArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-    },
-} as Meta;
-
-export const WithBasicUsage: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-radio-group aria-label="Select an option" matchaRadioButton>
-            <mat-radio-button value="1">Option 1</mat-radio-button>
-            <mat-radio-button value="2">Option 2</mat-radio-button>
-        </mat-radio-group>
-        `,
-    }),
-    name: 'basic usage',
-};

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaRadioButtonDirective } from './matcha-radio-button.directive';
-
-@NgModule({
-  declarations: [MatchaRadioButtonDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaRadioButtonDirective]
-})
-export class MatchaRadioButtonModule { }

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

@@ -1,265 +0,0 @@
-export const selectArgtypes = {
-    'aria-label': {
-        description: 'Aria label of the select.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    'aria-labelledby': {
-        description: 'Input that can be used to specify the aria-labelledby attribute.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    compareWith: {
-        description: 'Function to compare the option values with the selected values.',
-        control: null, // Como é uma função, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    disableOptionCentering: {
-        description: 'Whether to center the active option over the trigger.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    disableRipple: {
-        description: 'Whether ripples are disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    disabled: {
-        description: 'Whether the component is disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    errorStateMatcher: {
-        description: 'Object used to control when error messages are shown.',
-        control: null, // Como é um objeto, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    hideSingleSelectionIndicator: {
-        description: 'Whether checkmark indicator for single-selection options is hidden.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    id: {
-        description: 'Unique id of the element.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    multiple: {
-        description: 'Whether the user should be allowed to select multiple options.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    panelClass: {
-        description: 'Classes to be passed to the select panel.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    panelWidth: {
-        description: 'Width of the panel.',
-        control: 'text',
-        defaultValue: 'auto',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    placeholder: {
-        description: 'Placeholder to be shown if no value has been selected.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    required: {
-        description: 'Whether the component is required.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    sortComparator: {
-        description: 'Function used to sort the values in a select in multiple mode.',
-        control: null, // Como é uma função, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    typeaheadDebounceInterval: {
-        description: 'Time to wait in milliseconds after the last keystroke before moving focus to an item.',
-        control: 'number',
-        defaultValue: 200,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    value: {
-        description: 'Value of the select control.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'any' },
-        },
-    },
-    openedChange: {
-        description: 'Event emitted when the select panel has been toggled.',
-        action: 'openedChange',
-    },
-    selectionChange: {
-        description: 'Event emitted when the selected value has been changed by the user.',
-        action: 'selectionChange',
-    },
-    controlType: {
-        description: 'A name for this control that can be used by mat-form-field.',
-        control: 'text',
-        defaultValue: 'mat-select',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    customTrigger: {
-        description: 'Custom trigger for the select.',
-        control: null, // Como é um componente, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    defaultTabIndex: {
-        description: 'Tabindex to which to fall back to if no value is set.',
-        control: 'number',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    empty: {
-        description: 'Whether the select has a value.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    errorState: {
-        description: 'Whether the component is in an error state.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    focused: {
-        description: 'Whether the select is focused.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    optionGroups: {
-        description: 'Option groups within the select.',
-        control: null, // Como é uma QueryList, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    optionSelectionChanges: {
-        description: "Combined stream of all of the child options' change events.",
-        control: null, // Como é um Observable, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    options: {
-        description: 'List of child options.',
-        control: null, // Como é uma QueryList, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    panel: {
-        description: 'Panel containing the select options.',
-        control: null, // Como é um ElementRef, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    panelOpen: {
-        description: 'Whether or not the overlay panel is open.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    selected: {
-        description: 'The currently selected option.',
-        control: null, // Como é um MatOption ou MatOption[], não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    shouldLabelFloat: {
-        description: 'Whether the label should float when the select has a value.',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    trigger: {
-        description: 'Trigger that opens the select.',
-        control: null, // Como é um ElementRef, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    triggerValue: {
-        description: 'The value displayed in the trigger.',
-        control: 'text',
-        defaultValue: '',
-        table: {
-            type: { summary: 'string' },
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-};

package/src/lib/matcha-select/select.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[matcha-select]',
-})
-export class MatchaSelectDirective {
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-select');
-    }
-}

package/src/lib/matcha-select/select.mdx

@@ -1,54 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./select.stories";
-
-<Meta title="Atoms / Select / Documentação" />
-
-# Select
-
-> _select_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Select - Date range picker comparison ranges</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SelectBasic} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <form>
-                    <mat-form-field appearance="outline">
-
-                        <mat-label>Choose an option</mat-label>
-                        <mat-select [disabled]="disableSelect.value">
-                            <mat-option value="option1">Option 1</mat-option>
-                            <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
-                            <mat-option value="option3">Option 3</mat-option>
-                        </mat-select>
-
-                    </mat-form-field>
-                </form>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatSelectModule} from '@angular/material/select';`
-
-[Official documentation](https://https://material.angular.io/components/select/overview)
-
-<br />

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaSelectDirective } from './select.directive';
-
-@NgModule({
-    declarations: [MatchaSelectDirective],
-    imports: [CommonModule],
-    exports: [MatchaSelectDirective],
-})
-export class MatchaSelectModule {}