@inspark/inspark-components 19.0.49 → 19.0.51

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,32 @@
+@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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,301 @@
+<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

@@ -0,0 +1,148 @@
+@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);
+  }
+}