<div class="label-header">
    <div class="all-caps-label">{{ label }}</div>
    <div class="actions">
        <div
            (click)="selectAll()"
            [class.disabled]="disabled"
            class="all-caps-label primary pointer"
            iqserStopPropagation
            translate="actions.all"
        ></div>
        <div
            (click)="deselectAll()"
            [class.disabled]="disabled"
            class="all-caps-label primary pointer"
            iqserStopPropagation
            translate="actions.none"
        ></div>
    </div>
</div>

<mat-chip-listbox [disabled]="disabled" [multiple]="multiple" class="options mat-mdc-chip-set-stacked" selectable>
    <mat-chip-option (selectionChange)="selectChange($event)" *ngFor="let option of options" [value]="valueMapper(option)">
        <ng-container
            [ngTemplateOutletContext]="{ option: option }"
            [ngTemplateOutlet]="optionTemplate || defaultOptionTemplate"
        ></ng-container>
        <mat-icon [svgIcon]="'iqser:check'" class="selected-mark"></mat-icon>
    </mat-chip-option>
</mat-chip-listbox>

<ng-template #defaultOptionTemplate let-option="option">
    {{ option.label | translate }}
</ng-template>
