feat: add cascader component

src/cascader/cascader.component.html

@@ -0,0 +1,102 @@
+<div
+  [class]="rootClass"
+  [class.isDisabled]="disabled"
+  [class.isClearable]="$hasSelected() && this.clearable && !this.disabled"
+  [class.isFilterable]="filterable"
+  [class.isOpened]="opened"
+  #selectRef
+  #tooltipRef="auiTooltip"
+  [auiTooltip]="templateRef"
+  auiTooltipAnimType="scaleY"
+  [auiTooltipDisabled]="disabled"
+  auiTooltipTrigger="click"
+  auiTooltipPosition="bottom start"
+  auiTooltipType="plain"
+  (auiTooltipVisibleChange)="onOptionsVisibleChange($event)"
+>
+  <aui-input-group>
+    <input
+      #inputRef
+      class="aui-cascader__input"
+      [class.aui-cascader__input-inaction]="inaction"
+      autocomplete="off"
+      aui-input
+      [disabled]="disabled"
+      [size]="size"
+      [readonly]="readonly || inaction"
+      [placeholder]="placeholder"
+      (input)="onInput($event)"
+      (blur)="closeOption()"
+    />
+    <span
+      auiInputSuffix
+      class="aui-cascader__icon-container"
+    >
+      <aui-icon
+        class="aui-cascader__indicator"
+        [icon]="loading ? 'spinner' : 'caret_down_s'"
+      ></aui-icon>
+      <aui-icon
+        class="aui-cascader__clear"
+        icon="xmark_small"
+        (click)="clearValue($event)"
+      ></aui-icon>
+    </span>
+    <div
+      *ngIf="$hasSelected() && !filterString"
+      class="aui-cascader__label-container aui-input aui-input--{{ size }}"
+      [attr.disabled]="disabled ? true : null"
+      [attr.readonly]="readonly ? true : null"
+    >
+      <div class="aui-cascader__label">
+        <ng-container *ngIf="onlyShowLastLabel; else label">
+          {{ $selectedOptions()?.at(-1)?.label }}
+        </ng-container>
+        <ng-template #label>
+          <ng-container
+            *ngFor="let option of $selectedOptions(); let i = index"
+          >
+            <span *ngIf="i !== 0">/</span>
+            {{ option.label }}
+          </ng-container>
+        </ng-template>
+      </div>
+    </div>
+  </aui-input-group>
+</div>
+
+<ng-template #templateRef>
+  <div
+    [class]="containerClass"
+    [style.minWidth]="$containerWidth()"
+    (mousedown)="$event.preventDefault()"
+  >
+    <div
+      *ngIf="$optionsVisible() && !loading"
+      [class]="$OptionsContentClass()"
+    >
+      <div
+        class="aui-cascader-option-container__column"
+        *ngFor="
+          let columnOptions of $any($visibleColumns());
+          let columnIndex = index;
+          trackBy: trackByOptions
+        "
+      >
+        <aui-cascader-option
+          *ngFor="let option of columnOptions; trackBy: trackByOption"
+          [option]="option"
+          (click)="onOptionClick(option, columnIndex); $event.stopPropagation()"
+          [activated]="isOptionActivated(option, columnIndex)"
+        ></aui-cascader-option>
+      </div>
+    </div>
+
+    <div
+      *ngIf="!$optionsVisible() || loading"
+      class="aui-cascader-option-container__placeholder"
+    >
+      <ng-content select="aui-option-placeholder"></ng-content>
+    </div>
+  </div>
+</ng-template>

src/cascader/cascader.component.scss

@@ -0,0 +1,105 @@
+@import '../theme/var';
+@import '../theme/mixin';
+
+.aui-cascader {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+
+  @include input-field-indicator;
+
+  &__label-container.aui-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    pointer-events: none;
+    background-color: transparent;
+    border-color: transparent;
+
+    &[readonly] {
+      pointer-events: auto;
+    }
+  }
+
+  &.isFilterable.isOpened &__label-container.aui-input {
+    color: use-rgb(n-4);
+  }
+
+  &__label {
+    width: 100%;
+    @include text-overflow;
+  }
+
+  &__input-inaction {
+    background-color: use-rgb(main-bg);
+    border-color: use-rgb(n-7) !important;
+    cursor: text;
+
+    &:focus {
+      border-color: use-rgb(primary);
+    }
+  }
+
+  &__input[disabled] {
+    background-color: use-rgb(n-8);
+    border-color: use-rgb(n-7);
+  }
+}
+
+aui-cascader.ng-invalid.ng-dirty,
+.ng-submitted aui-cascader.ng-invalid {
+  .aui-input {
+    @include input-error;
+  }
+}
+
+.aui-cascader-option-container {
+  padding: 8px 0;
+  max-width: 90vw;
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(popper-bg);
+  @include popper-shadow;
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    max-height: calc(#{use-var(inline-height-m)} * 10);
+    position: relative;
+    overflow: auto;
+
+    @include scroll-bar;
+  }
+
+  &__search-content {
+    max-height: calc(#{use-var(inline-height-m)} * 10);
+    position: relative;
+    overflow: auto;
+
+    @include scroll-bar;
+  }
+
+  &__placeholder {
+    color: use-rgb(n-4);
+    font-size: use-var(font-size-m);
+    text-align: center;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+  }
+
+  &__content &__column {
+    min-width: 92px;
+    max-width: 246px;
+  }
+
+  &__search-content &__column {
+    min-width: 0;
+    max-width: 90vw;
+  }
+
+  &__column + &__column {
+    border-left: 1px solid use-rgb(border);
+  }
+}