@inspark/inspark-components 19.0.51 → 19.0.53

package/src/components/table/table-columns-multiselect/table-columns-multiselect.component.ts

@@ -1,26 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {TableColumns} from "../../../interface";
-
-@Component({
-  standalone: false,
-  selector: 'in-table-columns-multiselect',
-  templateUrl: './table-columns-multiselect.component.html',
-  styleUrls: ['./table-columns-multiselect.component.scss']
-})
-export class TableColumnsMultiselectComponent implements OnInit {
-  public isExpanded = false;
-  @Input() columns: TableColumns[];
-  /**
-   * true - все активные чекбоксы становятся неактивными
-   * false - не влияет на чекбоксы
-   */
-  @Input() disableActiveCheckboxes = false;
-  @Output() columnsChange = new EventEmitter<{event: any, column: TableColumns}>();
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}

package/src/components/table/table-menu-overlay/table-menu-overlay-blue.component.scss

@@ -1,8 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-:host-context(.theme-blue) {
-  .c-overlay__body {
-    background-color: $color-base-black;
-    background-color: var(--colorBgLevel1, $color-base-black);
-  }
-}

package/src/components/table/table-menu-overlay/table-menu-overlay-contrast.component.scss

@@ -1,8 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-:host-context(.theme-contrast) {
-  .c-overlay__body {
-    background-color: $color-gray-5;
-    background-color: var(--ids-theme-color-gray-5, $color-gray-5);
-  }
-}

package/src/components/table/table-menu-overlay/table-menu-overlay-green.component.scss

@@ -1,8 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-:host-context(.theme-green) {
-  .c-overlay__body {
-    background-color: $color-gray-5;
-    background-color: var(--ids-theme-color-gray-5, $color-gray-5);
-  }
-}

package/src/components/table/table-menu-overlay/table-menu-overlay-light.component.scss

@@ -1,8 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-:host-context(.theme-light) {
-  .c-overlay__body {
-    background-color: $color-gray-5;
-    background-color: var(--ids-theme-color-gray-5, $color-gray-5);
-  }
-}

package/src/components/table/table-menu-overlay/table-menu-overlay.component.html

@@ -1,13 +0,0 @@
-<div class="c-overlay is-dropdown_open">
-  <div (click)="isExpanded  = !isExpanded;"
-       class="c-overlay__toggle">
-    <ng-content select="host"></ng-content>
-  </div>
-  <ng-container *ngIf="isExpanded">
-    <div (clickedOutside)="isClickedOutsideOverlay($event)" class="c-overlay__body"
-         inClickOutside>
-      <!--{{positionClass}}-->
-      <ng-content select="body"></ng-content>
-    </div>
-  </ng-container>
-</div>

package/src/components/table/table-menu-overlay/table-menu-overlay.component.scss

@@ -1,32 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-
-.c-overlay {
-  position: relative;
-  display: inline-block;
-}
-
-.c-overlay__toggle {
-  display: inline-block;
-}
-
-.c-overlay__body {
-  text-align: left;
-  position: absolute;
-  top: 100%;
-  padding: $unit-tiny $unit-small;
-  z-index: $zindex-dropdown;
-  box-shadow: $box-shadow-default;
-  max-height: 500px;
-  overflow: auto;
-}
-
-._c-overlay {
-}
-
-:host-context(.theme-dark) {
-  .c-overlay__body {
-    background-color: $color-gray-35;
-    background-color: var(--ids-theme-color-gray-35, $color-gray-35);
-  }
-}

package/src/components/table/table-menu-overlay/table-menu-overlay.component.ts

@@ -1,22 +0,0 @@
-import {ChangeDetectionStrategy, Component, ElementRef, Input} from '@angular/core';
-
-@Component({
-  standalone: false,
-  selector: 'in-table-menu-overlay',
-  templateUrl: './table-menu-overlay.component.html',
-  styleUrls: ['./table-menu-overlay.component.scss', './table-menu-overlay-contrast.component.scss', './table-menu-overlay-light.component.scss', './table-menu-overlay-green.component.scss', './table-menu-overlay-blue.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TableMenuOverlayComponent {
-  @Input() isExpanded = false;
-  @Input() positionClass: string;
-
-  constructor(private element: ElementRef) {
-  }
-
-  public isClickedOutsideOverlay(event) {
-    if (!this.element.nativeElement.contains(event.target)) {
-      this.isExpanded = false;
-    }
-  }
-}

package/src/components/table/table.component.html

@@ -1,301 +0,0 @@
-<span *ngIf="label" class="c-label">
-        {{label}}
-  <span *ngIf="required" class="c-label__req">*</span>
-  <span *ngIf="error" class="c-label__sub_is-error">{{error}}</span>
-</span>
-<p-table #dt
-         (onFilter) = onFilter($event)
-         (onSort)="onSort()"
-         (onStateRestore)="restoreSearchText()"
-         (onStateSave)="stateSave($event)"
-         (sortFunction)="sortFunction? sortFunction.emit($event): null"
-         [(selection)]="selectionValue"
-         [class]="class"
-         [columns]="filteredColumns"
-         [customSort]="customSort"
-         [dataKey]="dataKey || 'id'"
-         [globalFilterFields]="globalFilteredColumns"
-         [resizableColumns]="resizableColumns"
-         [scrollHeight]="scrollHeight"
-         [scrollable]="scrollable"
-         [selectionMode]="selectionMode"
-         [sortField]="sortField || 'id'"
-         [sortOrder]="isAscending ? 1 : -1"
-         [stateKey]="stateKey"
-         [stateStorage]="'local'"
-         [style]="style"
-         [value]="values"
-         [columnResizeMode]="columnResizeMode"
->
-  <ng-template *ngIf="colGroupTemplate" let-columns pTemplate="colgroup">
-    <ng-container
-      *ngTemplateOutlet="colGroupTemplate; context: {$implicit: { columns: columns}}"></ng-container>
-  </ng-template>
-
-  <ng-template *ngIf="!colGroupTemplate" let-columns pTemplate="colgroup">
-    <colgroup *ngIf="!isMobileView">
-      <col *ngIf="checkboxSelection" style="width: 44px;">
-      <col *ngFor="let col of filteredColumns; let idx = index">
-    </colgroup>
-  </ng-template>
-
-  <ng-template let-columns pTemplate="header">
-    <ng-container *ngIf="showHeader">
-      <ng-container *ngIf="headerTemplate; else defaultHeaderTemplate">
-        <ng-container
-          *ngTemplateOutlet="headerTemplate; context: {$implicit: columns, columns: columns}"></ng-container>
-      </ng-container>
-      <ng-template #defaultHeaderTemplate>
-        <tr>
-          <th *ngIf="checkboxSelection" class="u-position-relative u-text_center" pResizableColumn style="width: 44px;">
-            <!-- Native header checkbox bypasses dt.processedData (O(N log N) sort) used
-                 by p-tableHeaderCheckbox.toggleRowsWithCheckbox() on select all. -->
-            <input type="checkbox"
-                   class="in-table-checkbox"
-                   [checked]="_isAllSelected()"
-                   (change)="_onHeaderCheckboxChange($event)"
-                   (click)="$event.stopPropagation()"
-            >
-          </th>
-          <th *ngFor="let col of filteredColumns" [pSortableColumn]="col.field" class="u-position-relative"
-              pResizableColumn>
-            <div class="p-table-thead-title"
-                 title="{{col.label | translate}}">
-              {{col.label | translate}}
-            </div>
-            <p-sortIcon *ngIf="isSortIcon" [field]="col.field"
-                        class="u-position-absolute u-position-absolute-right c-sorticon"
-                        style="display: flex; width: 18px; top: 0; height: 100%;"></p-sortIcon>
-          </th>
-        </tr>
-        <tr *ngIf="toolbar && toolbar.filter && toolbar.filter.active">
-          <th *ngIf="checkboxSelection" class="u-position-relative u-text_center" pResizableColumn
-              style="width: 44px;"></th>
-          <th *ngFor="let col of columns" [ngSwitch]="col.field">
-            <input
-              (input)="dt.filter($any($event.target).value, col.field, 'contains')"
-              *ngSwitchCase="colFilter(col.field)?.type === 'text' ? col.field : ''"
-              autofocus=""
-              class="c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
-              pInputText
-              type="text">
-
-            <p-dropdown (onChange)="dt.filter($event.value, col.field, 'equals')"
-                        *ngSwitchCase="colFilter(col.field)?.type === 'dropdown' ? col.field : ''"
-                        [options]="colFilter(col.field)?.options"
-                        [style]="{ width: '100%', overflow: 'visible' }"
-                        appendTo="body"></p-dropdown>
-
-            <p-multiSelect (onChange)="dt.filter($event.value, col.field, 'in')"
-                           *ngSwitchCase="colFilter(col.field)?.type === 'multiselect' ? col.field : ''"
-                           [options]="colFilter(col.field)?.options"
-                           [style]="{ width: '100%', overflow: 'visible' }" appendTo="body"
-                           defaultLabel="{{'All' | translate}}"></p-multiSelect>
-            <input
-              (input)="dt.filter($any($event.target).value, col.field + '2filter', 'contains')"
-              *ngSwitchCase="colFilter(col.field)?.type === 'datetext' ? col.field : ''"
-              autofocus=""
-              class="c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
-              pInputText
-              type="text">
-          </th>
-        </tr>
-      </ng-template>
-    </ng-container>
-  </ng-template>
-
-  <ng-template *ngIf="bodyTemplate" let-columns="columns" let-rowData let-rowIndex="rowIndex" pTemplate="body">
-    <ng-container
-      *ngTemplateOutlet="bodyTemplate; context: {$implicit: { rowIndex: rowIndex, rowData: rowData, columns: columns}}"></ng-container>
-  </ng-template>
-
-  <ng-template *ngIf="!bodyTemplate" let-columns="columns" let-index="rowIndex" let-rowData pTemplate="body">
-    <tr
-      (click)="toggleGroup(index, rowData.groupKey[groupMode])"
-      *ngIf="isGrouped && isShowGroup(rowData.groupKey[groupMode], index)"
-      class="row_hover_highlight">
-      <td [colSpan]="countVisibleColumns() + 1">
-        <span>
-          <i
-            [ngClass]="groupInfo[rowData.groupKey[groupMode]].isExpanded ? 'in fa-fw in-chevron-down' : 'in fa-fw in-chevron-right'"></i>
-          <span>{{rowData.groupKey[groupMode] | translate }} ({{countGroup(rowData.groupKey[groupMode], groupMode)}}
-            )</span>
-        </span>
-      </td>
-    </tr>
-    <tr *ngIf="!isGrouped || groupInfo[(rowData.groupKey[groupMode])].isExpanded"
-        [ngClass]="{row_active: isRowActive(rowData)}"
-        [pSelectableRow]="rowData"
-        class="row">
-      <td *ngIf="checkboxSelection" [ngClass]="{
-            'row_status_success': rowData.sdirparamstatecolor === 'success',
-            'row_status_error': rowData.sdirparamstatecolor === 'error',
-            'row_status_warning': rowData.sdirparamstatecolor === 'warning',
-            'row_status_critical': rowData.sdirparamstatecolor === 'critical',
-            'row_status_falsevalue': rowData.sdirparamstatecolor === 'falsevalue',
-            'row_status_pending': rowData.sdirparamstatecolor === 'pending'
-          }" class="u-text_center"
-          style="width: 44px"
-      >
-        <!-- Native checkbox — no Angular component overhead (no NgModel/CVA/signals).
-             Uses Set for O(1) state lookup instead of p-tableCheckbox's O(M) isSelected(). -->
-        <input type="checkbox"
-               class="in-table-checkbox"
-               [checked]="_isRowSelected(rowData)"
-               [style.pointer-events]="(selectionMode === 'single' || (selectionMode === 'multiple' && checkboxSelection)) ? 'none' : 'auto'"
-               (change)="_onCheckboxChange($event, rowData)"
-               (click)="$event.stopPropagation()"
-        >
-      </td>
-      <td (click)="activeChange.emit(rowData)"
-          *ngFor="let col of filteredColumns"
-          class="u-overflow-visible">
-        <div (mouseover)="showTooltip($event)" *ngIf="!valueTemplate" class="p-table-tbody-content" title>
-          {{col.translatable ? (rowData | propertyValue: col.field | translate) : (rowData | propertyValue: col.field)}}
-        </div>
-        <ng-container
-          *ngTemplateOutlet="valueTemplate; context: {$implicit: { data: rowData, col: col}}"></ng-container>
-      </td>
-    </tr>
-  </ng-template>
-
-  <ng-template *ngIf="toolbar" pTemplate="caption">
-
-    <div class="o-grid o-grid_no-gutter">
-      <div class="c-tree-table__toolbar-content u-display-inline-flex">
-        <div *ngIf="isTextSearch" class="c-form c-form_inline u-display-inline-block">
-          <form class="c-label">
-            <div class="input-wrapper u-margin-right-tiny">
-              <input #searchTextInput
-                     (input)="localSearch(dt, searchText)"
-                     [(ngModel)]="searchText"
-                     [ngModelOptions]="{standalone: true}"
-                     autofocus=""
-                     class="search-box c-input c-input_small ng-pristine ng-valid ng-scope ng-empty ng-touched"
-                     pInputText
-                     placeholder="{{('SHARED.SEARCH' | translate) + ':'}}"
-                     required
-                     style="padding-right: 28px"
-                     tabindex="1"
-                     type="search"
-              >
-              <button (click)="clear()" class="button-reset" type="reset"
-                      [attr.title]="'Reset' | translate">
-                <i class="in in-close"></i>
-              </button>
-            </div>
-          </form>
-        </div>
-        <div class="c-btn c-btn_border-free c-btn_small">
-          <in-table-columns-multiselect (columnsChange)="columnsChange($event)"
-                                        [columns]="primaryColumns"
-                                        [disableActiveCheckboxes]="countVisibleColumns() === 1"></in-table-columns-multiselect>
-        </div>
-
-        <button (click)="onFilterToolbar($event)" *ngIf="toolbar.filter"
-                class="c-btn c-btn_border-free c-btn_small"
-        >
-          <i class="in in-filter" title="{{'Service filter' | translate}}"></i>
-        </button>
-
-        <button (click)="treeAction.emit($event)" *ngIf="toolbar.tree" [disabled]="toolbar.tree.disabled"
-                class="c-btn c-btn_border-free c-btn_small"
-        >
-          <i class="in in-list" title="{{'Filter by rubric' | translate}}"></i>
-        </button>
-
-        <button (click)="addAction.emit($event)" *ngIf="toolbar.add" [disabled]="toolbar.add.disabled"
-                class="c-btn c-btn_border-free c-btn_small"
-        >
-          <i class="in in-plus" title="{{'Add' | translate}}"></i>
-        </button>
-
-        <button (click)="linkAction.emit($event)" *ngIf="toolbar.link" [disabled]="toolbar.link.disabled"
-                class="c-btn c-btn_border-free c-btn_small"
-        >
-          <i class="in in-link" title="{{'Link' | translate}}"></i>
-        </button>
-        <button (click)="csvAction.emit($event)" *ngIf="toolbar.csv" [disabled]="toolbar.csv.disabled"
-                class="c-btn c-btn_border-free c-btn_small"
-        >
-          <!--Todo: заменить на in-file-csv-->
-          <i class="in in-file-excel-outline" title="{{'LOGS.SAVE_TO_CSV' | translate}}"></i>
-        </button>
-        <button (click)="saveAction.emit($event)" *ngIf="toolbar.save"
-                [disabled]="toolbar.save.disabled"
-                class="c-btn c-btn_primary c-btn_small"
-                title="{{'Save' | translate}}"
-        >
-          {{'Save' | translate}}
-        </button>
-        <button (click)="groupEditAction.emit($event)" *ngIf="toolbar.groupEdit && toolbar.groupEdit.active"
-                [disabled]="toolbar.groupEdit.disabled"
-                class="c-btn c-btn_border-free c-btn_small">
-          <i class="in in-pencil" title="{{'groupEdit' | translate}}"></i>
-        </button>
-        <ng-content select="[buttons]"></ng-content>
-        <button (click)="paramsEditAction.emit($event)" *ngIf="toolbar.paramsEdit && toolbar.paramsEdit.active"
-                [disabled]="toolbar.paramsEdit.disabled"
-                class="c-btn c-btn_border-free c-btn_small">
-          <i class="in in-pencil" title="{{'paramsEdit' | translate}}"></i>
-        </button>
-
-
-        <button (click)="removeAction.emit($event)" *ngIf="toolbar.remove && toolbar.remove.active"
-                [disabled]="toolbar.remove.disabled"
-                class="c-btn c-btn_border-free c-btn_small">
-          <i class="in in-trash" title="{{'Delete' | translate}}"></i>
-        </button>
-        <button (click)="unlinkAction.emit($event)" *ngIf="toolbar.unlink" [disabled]="toolbar.unlink.disabled"
-                class="c-btn c-btn_border-free c-btn_small">
-          <i class="in in-link-off" title="{{'Detach tag from selected items' | translate}}"></i>
-        </button>
-        <button (click)="toggleNodes(true)"
-                *ngIf="toolbar.expandAll"
-                class="c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free"
-                title="{{'Expand all' | translate}}">
-          <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M20 2H4v2h16V2zM4 20v2h16v-2H4zM12 5l5 6H7l5-6zM17 13l-5 6-5-6h10z"/>
-          </svg>
-        </button>
-        <button (click)="toggleNodes(false)"
-                *ngIf="toolbar.expandAll"
-                class="c-btn c-btn_small c-btn_svg-24 c-icon c-icon_svg c-icon_svg-24 c-btn_border-free"
-                title="{{'Collapse all' | translate}}">
-          <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-            <path clip-rule="evenodd" d="M17 3l-5 6-5-6h10zM4 13v-2h16v2H4zm8 2l5 6H7l5-6z" fill-rule="evenodd"/>
-          </svg>
-        </button>
-
-        <div *ngIf="toolbar.groupSort"
-             class="c-btn-group"
-             container="body"
-             ngbDropdown>
-
-          <button class="c-btn c-btn_border-free c-btn_small"
-                  id="dropdownGroupType"
-                  ngbDropdownToggle
-                  title="{{'Change the way parameters are grouped' | translate}}">
-            <i aria-hidden="true" class="in in-object-group"></i>
-            <i aria-hidden="true" class="c-caret"></i>
-          </button>
-
-          <ul aria-labelledby="dropdownGroupType"
-              class="c-dropdown-menu c-dropdown-menu_right ng-star-inserted"
-              ngbDropdownMenu
-              role="menu">
-            <li *ngFor="let item of toolbar.groupSort.label"
-                [ngClass]="{'is-dropdown-menu__listitem_active': item.value === groupMode}"
-                class="c-dropdown-menu__listitem is-dropdown-menu__listitem_active"
-                ngbDropdownItem
-                role="menuitem">
-              <a (click)="toggleMode(item.value)" class="c-dropdown-menu__content">
-                {{item.label}}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </ng-template>
-</p-table>

package/src/components/table/table.component.scss

@@ -1,148 +0,0 @@
-@use "@inspark/components-web/src/variables" as *;
-
-/* Временное решение до устранения SEM-1532 после перехода на нормальные тултипы убурать заглушку*/
-.u-overflow-visible {
-  overflow: visible !important;
-}
-
-.row_status_success {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-success, #31AC51) !important;
-}
-
-.row_status_error {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-error, #F95C5D) !important;
-}
-
-.row_status_warning {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-warning, #EE9946) !important;
-}
-
-.row_status_critical {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-critical, #F95C5D) !important;
-}
-
-.row_status_falsevalue {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-falsevalue, #85B3CB) !important;
-}
-
-.row_status_disabled {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-disabled) !important;
-}
-
-.row_status_none {
-  padding-left: 9px !important;
-  border-left: 4px solid transparent !important;
-}
-
-.row_status_pending {
-  padding-left: 9px !important;
-  border-left: 4px solid var(--ids-theme-status-pending, $color-blue) !important;
-}
-
-.button-reset {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 6px;
-  top: 5px;
-  padding: 6px 6px;
-  font-size: 15px;
-  border: none;
-  outline: 0;
-  cursor: pointer;
-  color: var(--colorTextMuted);
-  background-color: transparent;
-}
-
-.button-reset:hover {
-  color: var(--ids-theme-btn-default-color, $btn-default-color);
-}
-
-.input-wrapper{
-  position: relative;
-  display: flex;
-  align-items: baseline;
-}
-
-.search-box:focus {
-}
-
-.c-input:not(:valid) ~ .button-reset {
-  display: none;
-}
-
-/* Light / contrast themes: darker border so checkbox is visible on white background */
-:host-context(.theme-light),
-:host-context(.theme-contrast) {
-  .in-table-checkbox {
-    border-color: rgba(0, 0, 0, 0.45);
-
-    &:hover:not(:checked):not(:indeterminate) {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-  }
-}
-
-/* Native checkbox replacing p-tableCheckbox — styled to match PrimeNG checkbox tokens */
-.in-table-checkbox {
-  appearance: none;
-  -webkit-appearance: none;
-  width: var(--p-checkbox-width, 20px);
-  height: var(--p-checkbox-height, 20px);
-  border: 1px solid var(--p-checkbox-border-color, #B3B3B3);
-  border-radius: var(--p-checkbox-border-radius, 2px);
-  background: var(--p-checkbox-background, transparent);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  flex-shrink: 0;
-  transition: border-color var(--p-checkbox-transition-duration, 0.15s),
-              background var(--p-checkbox-transition-duration, 0.15s);
-
-  &:checked {
-    background: var(--p-checkbox-checked-background, #387382);
-    border-color: var(--p-checkbox-checked-border-color, #387382);
-
-    &::after {
-      content: '';
-      display: block;
-      width: var(--p-checkbox-icon-size, 14px);
-      height: var(--p-checkbox-icon-size, 14px);
-      background-color: var(--p-checkbox-icon-checked-color, #ffffff);
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='currentColor' d='M5.25 10.15l-2.8-2.8-.7.7 3.5 3.5 7.5-7.5-.7-.7z'/%3E%3C/svg%3E");
-      mask-size: contain;
-      -webkit-mask-size: contain;
-      mask-repeat: no-repeat;
-      -webkit-mask-repeat: no-repeat;
-      mask-position: center;
-      -webkit-mask-position: center;
-    }
-  }
-
-  &:indeterminate {
-    background: var(--p-checkbox-checked-background, #387382);
-    border-color: var(--p-checkbox-checked-border-color, #387382);
-
-    &::after {
-      content: '';
-      display: block;
-      width: calc(var(--p-checkbox-icon-size, 14px) - 2px);
-      height: 2px;
-      background-color: var(--p-checkbox-icon-checked-color, #ffffff);
-      margin: auto;
-    }
-  }
-
-  &:hover:not(:checked):not(:indeterminate) {
-    border-color: var(--p-checkbox-hover-border-color, #999999);
-  }
-}