fireflysemantics

import {
  Component,
  ChangeDetectionStrategy,
  HostListener,
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,

fireflysemantics

<form (ngSubmit)="onSubmit()" [formGroup]="form">
  <mat-form-field class="example-form-field" appearance="fill">
    <mat-label>Name</mat-label>
    <input matInput type="text" formControlName="name" />
    <button
      *ngIf="form.value.name"
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="form.controls.name.setValue('')"

fireflysemantics

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

fireflysemantics

  public form = new FormGroup<IContactForm>({
    name: new FormControl<string>('', { nonNullable: true }),
    email: new FormControl<string>('', { nonNullable: true }),
    phone: new FormControl<string | null>(`111-111-1111`, {
      nonNullable: false,
    }),
  });

fireflysemantics

@use 'sass:map';
@use '@angular/material' as mat;
@use '../../big/src/lib/theming' as theme;


$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
$my-theme-accent: mat.define-palette(mat.$cyan-palette);
$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);

$big-typography-level: mat.define-typography-level(

fireflysemantics

@use 'sass:map';
@use '@angular/material' as mat;
@use '@fireflysemantics/big-component-typography-example/theming' as theme;

// ============================================
// Only include core on time
// ============================================
@include mat.core();

// ============================================

fireflysemantics

@use "sass:map";
@use "@angular/material" as mat;

@mixin big-component-theme($theme) {
    $accent: map-get($theme, accent);
    fs-big {
        color: mat.get-color-from-palette($accent);
    }
}

fireflysemantics

@use '@angular/material' as mat;

/// Defines a light color theme with success and danger colors.
/// @param {Map} $primary The primary color palette.
/// @param {Map} $accent The accent color palette.
/// @param {Map} $warn The warn color palette.
/// @param {Map} $success The success color palette.
/// @param {Map} $danger The danger color palette.
/// @param {Boolean} $create-light-theme If true a light theme is created, otherwise a dark theme is created
@function el-theme(

fireflysemantics

/// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
/// of the Material Design hues.
/// @param {Map} $base-palette Map of hue keys to color values for the basis for this palette.
/// @param {String | Number} $default Default hue for this palette.
/// @param {String | Number} $lighter "lighter" hue for this palette.
/// @param {String | Number} $darker "darker" hue for this palette.
/// @param {String | Number} $text "text" hue for this palette.
/// @returns {Map} A complete Angular Material theming palette.
@function define-palette($base-palette, $default: 500, $lighter: 100, $darker: 700,
  $text: $default) {

fireflysemantics

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
})
export class FilterPipe implements PipeTransform {
  transform(products: any[], query: string): any[] {
    if (!products) return [];
    if (!query || query.length == 0) return products;
    return products.filter(