<app-notice [svg]="'assets/media/svg/icons/Tools/Compass.svg'">
  For more info please check the components's official demos & documentation
  <a
    class="font-weight-bold"
    href="https://material.angular.io/components/select/overview"
    target="_blank"
    >demos & documentation</a
  >
</app-notice>

<div class="row">
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleBasicSelect">
      <div class="example-preview">
        <span>
          <code>mat-select</code> is a form control for selecting a value from a
          set of options, similar to the native
          <code>&lt;select&gt;</code> element. You can read more about selects
          in the Material Design spec. It is designed to work inside of a
          <code>mat-form-field</code> element.
        </span>
        <div class="separator separator-dashed my-6"></div>
        <div class="example-container">
          <mat-form-field>
            <mat-select placeholder="Favorite food">
              <mat-option *ngFor="let food of foods" [value]="food.value">
                {{ food.viewValue }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWith2WayValueBinding">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select [(value)]="selected">
              <mat-option>None</mat-option>
              <mat-option value="option1">Option 1</mat-option>
              <mat-option value="option2">Option 2</mat-option>
              <mat-option value="option3">Option 3</mat-option>
            </mat-select>
          </mat-form-field>
          <div class="separator separator-dashed my-6"></div>

          You selected:
          <mark *ngIf="selected">{{ selected }}</mark>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectInAForm">
      <div class="example-preview">
        <div class="example-container">
          <form class="example-container">
            <mat-form-field>
              <mat-select
                placeholder="Favorite food"
                [(ngModel)]="selectedValue"
                name="food"
              >
                <mat-option *ngFor="let food of foods" [value]="food.value">
                  {{ food.viewValue }}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div class="separator separator-dashed my-6"></div>
            Selected value:
            <mark *ngIf="selectedValue">{{ selectedValue }}</mark>
          </form>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithFormFieldFeature">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select
              placeholder="Favorite animal"
              [formControl]="animalControl"
              required
            >
              <mat-option>--</mat-option>
              <mat-option *ngFor="let animal of animals" [value]="animal">
                {{ animal.name }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="animalControl.hasError('required')"
              >Please choose an animal</mat-error
            >
            <mat-hint>{{ animalControl.value?.sound }}</mat-hint>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithResetOption">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select placeholder="State">
              <mat-option>None</mat-option>
              <mat-option *ngFor="let state of states" [value]="state">{{
                state
              }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>
  </div>
  <div class="col-xl-6">
    <app-code-preview [viewItem]="exampleSelectWithOptionGroups">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
              <mat-option>-- None --</mat-option>
              <mat-optgroup
                *ngFor="let group of pokemonGroups"
                [label]="group.name"
                [disabled]="group.disabled"
              >
                <mat-option
                  *ngFor="let pokemon of group.pokemon"
                  [value]="pokemon.value"
                >
                  {{ pokemon.viewValue }}
                </mat-option>
              </mat-optgroup>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithMultipleSelection">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select
              placeholder="Toppings"
              [formControl]="toppings"
              multiple
            >
              <mat-option
                *ngFor="let topping of toppingList"
                [value]="topping"
                >{{ topping }}</mat-option
              >
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithCustomTriggerText">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select
              placeholder="Toppings"
              [formControl]="toppings2"
              multiple
            >
              <mat-select-trigger>
                {{ toppings2.value ? toppings2.value[0] : "" }}
                <span
                  *ngIf="toppings2.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{ toppings2.value.length - 1 }} others)
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let topping of toppingList2"
                [value]="topping"
                >{{ topping }}</mat-option
              >
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithCustomPanelStyling">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select
              placeholder="Panel color"
              [formControl]="panelColor"
              panelClass="example-panel-{{ panelColor.value }}"
            >
              <mat-option value="red">Red</mat-option>
              <mat-option value="green">Green</mat-option>
              <mat-option value="blue">Blue</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>

    <app-code-preview [viewItem]="exampleSelectWithACustomErrorStateMatcher">
      <div class="example-preview">
        <div class="example-container">
          <mat-form-field>
            <mat-select
              placeholder="Choose one"
              [formControl]="selected2"
              [errorStateMatcher]="matcher"
            >
              <mat-option>Clear</mat-option>
              <mat-option value="valid">Valid option</mat-option>
              <mat-option value="invalid">Invalid option</mat-option>
            </mat-select>
            <mat-hint>Errors appear instantly!</mat-hint>
            <mat-error *ngIf="selected2.hasError('required')"
              >You must make a selection</mat-error
            >
            <mat-error
              *ngIf="
                selected2.hasError('pattern') && !selected2.hasError('required')
              "
            >
              Your selection is invalid
            </mat-error>
          </mat-form-field>
        </div>
      </div>
    </app-code-preview>
  </div>
</div>
