ca-components 2.1.152 → 2.1.161

package/lib/components/ca-filters/ca-filter.component.html

@@ -1,557 +0,0 @@
-<div
-    class="user-icon d-flex justify-content-center align-items-center"
-    app-ca-autoclose-popover
-    [customClass]="'filterpopovermain'"
-    [placement]="isCollapsibleFilter ? 'right' : 'bottom-left'"
-    autoClose="outside"
-    (closeFilter)="onFilterClose()"
-    (openFilter)="onFilterShown()"
-    [ngClass]="{
-        'active-options': isFilterActive && type !== 'timeFilterDropdown',
-        'clear-colors': isHoverClosed,
-        'filter-active-colors':
-            isFilterActiveColor && type !== 'timeFilterDropdown',
-        'active-collapsible':
-            isCollapsibleFilter && type !== 'timeFilterDropdown',
-        'c-pointer': !isDisabled,
-        'default-filter-state':
-            !isDisabled &&
-            !isFilterActive &&
-            !isHoverClosed &&
-            !isFilterActiveColor,
-        'w-126': type === 'timeFilterDropdown',
-        'time-filter background-bw2 background-hover-bw-9':
-            type === 'timeFilterDropdown' && !isFilterActive,
-        'background-black-2': type === 'timeFilterDropdown' && isFilterActive,
-    }"
-    [isDisabled]="isDisabled"
-    (mouseenter)="isFilterHoveredOver = true"
-    (mouseleave)="isFilterHoveredOver = false"
->
-    <div
-        mainContent
-        ngbTooltip
-        mainCaTooltip="{{
-            'mainTooltip'
-                | filterPopoverConditionsPipe
-                    : getComponentInstance()
-                    : caStatusFilter
-                    : caDispatcherFilter
-                    : caStateFilter
-                    : caTruckTypeFilter
-                    : caTrailerTypeFilter
-                    : caPmFilter
-        }}"
-        position="bottom"
-        tooltipBackground="{{ isFilterActive ? '#CCCCCC' : '#2F2F2F' }}"
-        tooltipColor="{{ isFilterActive ? '#2F2F2F' : '#FFFFFF' }}"
-        tooltipTextAlign="center"
-        class="main-icon-holder d-flex justify-content-center align-items-center"
-        [class]="{
-            'svg-fill-muted svg-hover-black': !isDisabled,
-        }"
-    >
-        <div
-            [ngClass]="{
-                'd-flex align-items-center w-126 p-x-6':
-                    type === 'timeFilterDropdown',
-            }"
-        >
-            @if (type !== 'timeFilterDropdown') {
-                <svg-icon
-                    class="d-flex svg-size-14"
-                    [class.svg-fill-light-grey-6]="isDisabled"
-                    [src]="icon | caSvg: 'common'"
-                ></svg-icon>
-            } @else {
-                <div
-                    class="flex-1 time-filter-title text-size-14 ca-font-extra-bold"
-                    [ngClass]="{
-                        'text-color-white': isFilterActive,
-                        'text-color-bw6-2': !isFilterActive,
-                    }"
-                >
-                    {{ selectedTimeValue ?? 'Time Filter' }}
-                </div>
-                <svg-icon
-                    class="time-filter-arrow ms-1 svg-size-14"
-                    [class.rotate-arrow]="isFilterActive"
-                    [src]="'ic_arrow_input' | caSvg: 'common'"
-                ></svg-icon>
-            }
-        </div>
-        @if (isFilterActiveColor && type !== 'timeFilterDropdown') {
-            @if (isFilterHoveredOver) {
-                <div
-                    class="filters-selected-value-holder svg-size-14 text-size-11 d-flex justify-content-center align-items-center"
-                    (mouseenter)="isHoverClosed = true"
-                    (mouseleave)="isHoverClosed = false"
-                    (click)="clearAllValues($event)"
-                >
-                    <svg-icon
-                        class="d-flex svg-size-14"
-                        [src]="'cancelViolation' | caSvg: 'common' : 'calendar'"
-                    ></svg-icon>
-                </div>
-            } @else {
-                @if (hasFilterCount) {
-                    <div
-                        class="filters-selected-value-holder svg-size-14 text-size-11 d-flex justify-content-center align-items-center ca-font-extra-bold"
-                    >
-                        {{ filterCount }}
-                    </div>
-                } @else {
-                    <div
-                        class="filters-selected-value-holder svg-size-14 text-size-11 d-flex justify-content-center align-items-center"
-                    >
-                        <svg-icon
-                            class="d-flex svg-size-14"
-                            [src]="'confirm' | caSvg: 'input'"
-                        ></svg-icon>
-                    </div>
-                }
-            }
-        }
-    </div>
-
-    <div popoverContent class="main-popover-body">
-        @if (isCollapsibleFilter) {
-            <app-ca-collapsible-filter
-                (onTagEmit)="setFilterValue($event)"
-                [filterArray]="pmFilterArray"
-                [type]="type"
-            ></app-ca-collapsible-filter>
-        }
-        @if (!isButtonFilter && !isCollapsibleFilter) {
-            <div
-                [@showAnimation]="!!isFilterActive"
-                class="filter-holder d-flex justify-content-start align-items-start"
-                [class.state-filter]="type === 'stateFilter'"
-                [class.department-filter]="hasNoLeftIcon"
-                [class.status-filter]="type === 'statusFilter'"
-                [class.pm-filter]="hasLeftSideIcon"
-                [class.truck-icon-holder]="hasLargeLeftIcon"
-                [class.money-filter]="
-                    type === 'moneyFilter' || type === 'milesFilter'
-                "
-                [class.location-filter]="type === 'locationFilter'"
-                [class.w-126]="type === 'timeFilterDropdown'"
-            >
-                @if (type !== 'timeFilterDropdown') {
-                    <div
-                        class="filter-header filter-text-part d-flex justify-content-between align-items-center"
-                        [class.activeHeader]="!isSearchExpanded"
-                        [class.inactiveHeader]="isSearchExpanded"
-                    >
-                        <div
-                            class="user-title-text counter-padd-title d-flex align-items-center ca-font-bold text-size-11"
-                        >
-                            {{ filterTitle | uppercase }}
-                            @if (
-                                (type === 'dispatcherFilter' ||
-                                    type === 'driverFilter' ||
-                                    type === 'fuelStopFilter' ||
-                                    type === 'brokerFilter') &&
-                                caDispatcherFilter?.selectedUser?.length
-                            ) {
-                                <div
-                                    class="user-filter-box d-flex flex-column justify-content-center align-items-center ca-font-bold ms-1 text-size-11"
-                                >
-                                    {{
-                                        caDispatcherFilter?.selectedUser?.length
-                                    }}
-                                </div>
-                            }
-
-                            @if (
-                                'userBox'
-                                    | filterPopoverConditionsPipe
-                                        : getComponentInstance()
-                                        : caStatusFilter
-                                        : caDispatcherFilter
-                                        : caStateFilter
-                                        : caTruckTypeFilter
-                                        : caTrailerTypeFilter
-                                        : caPmFilter
-                            ) {
-                                @let filterResult =
-                                    type
-                                        | filterConditionsUserBox
-                                            : caTruckTypeFilter
-                                            : caTrailerTypeFilter
-                                            : caStatusFilter
-                                            : caPmFilter;
-                                @if (filterResult) {
-                                    <div
-                                        class="user-filter-box d-flex flex-column justify-content-center align-items-center ca-font-bold ms-1 text-size-11"
-                                    >
-                                        {{ filterResult }}
-                                    </div>
-                                }
-                            }
-                        </div>
-                        @if (
-                            'sortItems'
-                                | filterPopoverConditionsPipe
-                                    : getComponentInstance()
-                                    : caStatusFilter
-                                    : caDispatcherFilter
-                                    : caStateFilter
-                                    : caTruckTypeFilter
-                                    : caTrailerTypeFilter
-                                    : caPmFilter
-                        ) {
-                            <div
-                                (click)="sortItems()"
-                                class="user-title-text text-size-11 sort-text ca-font-medium d-flex align-items-center justify-content-end"
-                            >
-                                {{
-                                    type === 'statusFilter' ||
-                                    type === 'dispatcherFilter' ||
-                                    type === 'driverFilter' ||
-                                    type === 'fuelStopFilter' ||
-                                    type === 'brokerFilter'
-                                        ? 'Count'
-                                        : 'Name'
-                                }}
-                                <svg-icon
-                                    class="sort-arrow ms-1 svg-size-18"
-                                    [class.rotate]="!isAscendingSortOrder"
-                                    [src]="'arrow_filter' | caSvg: 'common'"
-                                ></svg-icon>
-                            </div>
-                        } @else {
-                            @if (
-                                (type === 'truckFilter' ||
-                                    type === 'truckTypeFilter' ||
-                                    type === 'trailerFilter') &&
-                                isRepairFilter
-                            ) {
-                                <div
-                                    (click)="sortItems()"
-                                    class="user-title-text text-size-11 sort-text d-flex align-items-center justify-content-end"
-                                >
-                                    Count
-                                    <svg-icon
-                                        class="d-flex svg-size-14"
-                                        [src]="'arrow_filter' | caSvg: 'common'"
-                                    ></svg-icon>
-                                </div>
-                            } @else {
-                                @if (type === 'stateFilter') {
-                                    <div
-                                        class="user-filter-box d-flex flex-column justify-content-center align-items-center ca-font-bold ms-1 text-size-11"
-                                    >
-                                        {{
-                                            (caStateFilter
-                                                ?.canadaSelectedStates)!
-                                                .length +
-                                                (caStateFilter
-                                                    ?.usaSelectedStates)!.length
-                                        }}
-                                    </div>
-                                } @else {
-                                    <ng-template #searchState>
-                                        @if (!searchState) {
-                                            <div
-                                                class="search-icon-holder svg-fill-light-grey-2 svg-hover-bw6-2 svg-size-17 d-flex justify-content-center align-items-center"
-                                                (click)="showSearch()"
-                                            >
-                                                <svg-icon
-                                                    class="d-flex svg-size-14"
-                                                    [src]="
-                                                        'search'
-                                                            | caSvg: 'input'
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        }
-                                    </ng-template>
-                                }
-                            }
-                        }
-                    </div>
-                }
-                <div class="filter-body-holder">
-                    @switch (type) {}
-
-                    @switch (type) {
-                        @case ('statusFilter') {
-                            <app-ca-status-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [loadStatusOptionsArray]="
-                                    loadStatusOptionsArray
-                                "
-                            >
-                            </app-ca-status-filter>
-                        }
-                        @case ('timeFilter') {
-                            <app-ca-time-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [timeSubType]="timeSubType"
-                            >
-                            </app-ca-time-filter>
-                        }
-                        @case ('timeFilterDropdown') {
-                            <app-ca-time-filter-dropdown
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [timeSubType]="timeSubType"
-                                [selectedTimeValue]="selectedTimeValue"
-                                (itemSelected)="setFilterValue($event)"
-                            >
-                            </app-ca-time-filter-dropdown>
-                        }
-                        @case ('dispatcherFilter') {
-                            <app-ca-dispatcher-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [unselectedUser]="unselectedUser"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-dispatcher-filter>
-                        }
-                        @case ('driverFilter') {
-                            <app-ca-dispatcher-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [unselectedUser]="unselectedUser"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-dispatcher-filter>
-                        }
-                        @case ('fuelStopFilter') {
-                            <app-ca-dispatcher-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [unselectedUser]="unselectedUser"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-dispatcher-filter>
-                        }
-                        @case ('brokerFilter') {
-                            <app-ca-dispatcher-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [unselectedUser]="unselectedUser"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-dispatcher-filter>
-                        }
-                        @case ('stateFilter') {
-                            <app-ca-state-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [isSearchExpanded]="isSearchExpanded"
-                                [usaStates]="usaStates"
-                                [canadaStates]="canadaStates"
-                            >
-                            </app-ca-state-filter>
-                        }
-                        @case ('truckTypeFilter') {
-                            <app-ca-truck-type-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [isRepairFilter]="isRepairFilter"
-                                [truckTypeArray]="truckTypeArray"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-truck-type-filter>
-                        }
-                        @case ('trailerTypeFilter') {
-                            <app-ca-trailer-type-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [trailerTypeArray]="trailerTypeArray"
-                                [isRepairFilter]="isRepairFilter"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-trailer-type-filter>
-                        }
-                        @case ('pmFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('categoryRepairFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('fuelItemFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('departmentFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('parkingFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('tagFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('actionFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('labelFilter') {
-                            <app-ca-pm-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [pmFilterArray]="pmFilterArray"
-                            >
-                            </app-ca-pm-filter>
-                        }
-                        @case ('userFilter') {
-                            <app-ca-user-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [userGroup]="userGroup"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-user-filter>
-                        }
-                        @case ('moduleFilter') {
-                            <app-ca-user-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                                [userGroup]="userGroup"
-                                [isSearchExpanded]="isSearchExpanded"
-                            >
-                            </app-ca-user-filter>
-                        }
-
-                        @case ('violationFilter') {
-                            <app-ca-violation-filter
-                                (setFilter)="setFilterValue($event)"
-                                (clearAll)="clearAllValues($event)"
-                                [type]="type"
-                                [isFilterActive]="isFilterActive"
-                            >
-                            </app-ca-violation-filter>
-                        }
-                    }
-                </div>
-
-                @if (type !== 'timeFilterDropdown') {
-                    <div
-                        class="buttons-holder d-flex justify-content-between align-items-center"
-                        [class.buttons-long]="type === 'locationFilter'"
-                    >
-                        <div
-                            (click)="clearAllValues($event)"
-                            class="button-clear text-size-11 d-flex justify-content-center align-items-center ca-font-bold"
-                            [class.active]="
-                                type
-                                    | filterConditionsClear
-                                        : caStatusFilter
-                                        : caTimeFilter
-                                        : caDispatcherFilter
-                                        : caStateFilter
-                                        : caTruckTypeFilter
-                                        : caTrailerTypeFilter
-                                        : caPmFilter
-                                        : caUserFilter
-                                        : caViolationFilter
-                            "
-                        >
-                            Clear All
-                        </div>
-                        <div
-                            (click)="setFilterValue($event)"
-                            class="button-set text-size-11 d-flex justify-content-center align-items-center ca-font-bold"
-                            [class.active]="
-                                type
-                                    | filterConditionsSet
-                                        : caStatusFilter
-                                        : caTimeFilter
-                                        : caDispatcherFilter
-                                        : caStateFilter
-                                        : caTruckTypeFilter
-                                        : caTrailerTypeFilter
-                                        : caPmFilter
-                                        : caUserFilter
-                                        : caViolationFilter
-                                        : caTimeFilterDropdown
-                            "
-                        >
-                            Set
-                        </div>
-                    </div>
-                }
-            </div>
-        }
-    </div>
-</div>