@inspark/inspark-components 19.0.49 → 19.0.51

package/src/pipes/time.pipe.ts

@@ -0,0 +1,197 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+
+function isTime(value: string | number) {
+  return /^[0-9]{1,2}\:[0-9]{1,2}$/.test(value.toString());
+}
+
+function addLeadZero(num, isNegative = false) {
+  return (isNegative ? '-' : '') + ('000' + Math.abs(num)).slice(-2);
+}
+
+export function parseIntervalToMinutes(interval: string) {
+  if (!isTime(interval)) {
+    return 0;
+  }
+
+  const parts = interval.split(':');
+  const hours = parseInt(parts[0], 10);
+  const minutes = parseInt(parts[1], 10);
+  if (isNaN(hours) || isNaN(minutes)) {
+    throw new Error(interval + ' не может быть обработан как время HH:MM');
+  }
+  return 60 * hours + minutes;
+}
+
+export function shortWeekdayToNum(dayKey: string) {
+  switch (dayKey) {
+    case 'sun':
+      return 0;
+    case 'mon':
+      return 1;
+    case 'tue':
+      return 2;
+    case 'wed':
+      return 3;
+    case 'thu':
+      return 4;
+    case 'fri':
+      return 5;
+    case 'sat':
+      return 6;
+    case 'd1':
+      return 7;
+    case 'd2':
+      return 8;
+  }
+  return -1;
+}
+
+export function formatNumberToTime(num) {
+  if (isTime(num)) {
+    return num;
+  }
+  const value = parseInt(num, 10);
+  const isNegative = value < 0 ? true : false;
+  const absValue = Math.abs(value);
+  return addLeadZero(Math.floor(absValue / 60), isNegative) + ':' + addLeadZero(absValue % 60);
+}
+
+export function numToShortWeekday(num) {
+  const days = [
+    'sun',
+    'mon',
+    'tue',
+    'wed',
+    'thu',
+    'fri',
+    'sat',
+    'd1',
+    'd2'
+  ];
+  return days[parseInt(num, 10)] ? days[parseInt(num, 10)] : 'custom';
+}
+
+export function shortToFullWeekday(day) {
+  const days = {
+    'sun': 'sunday',
+    'mon': 'monday',
+    'tue': 'tuesday',
+    'wed': 'wednesday',
+    'thu': 'thursday',
+    'fri': 'friday',
+    'sat': 'saturday',
+    'd1': 'day1',
+    'd2': 'day2'
+  };
+  return days[day];
+}
+
+
+@Pipe({
+  standalone: false,
+  name: 'shortToFullWeekday'
+})
+export class ShortToFullWeekdayPipe implements PipeTransform {
+  transform(value: any, args?: any): any {
+    return shortToFullWeekday(value);
+  }
+}
+
+/**
+ * Pipe используется для преобразования числа в день недели
+ * 0-6 - вс-сб, 7,8 - день1, день2
+ */
+@Pipe({
+  standalone: false,
+  name: 'numToShortWeekday'
+})
+export class NumToShortWeekdayPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    return numToShortWeekday(value);
+  }
+
+}
+
+@Pipe({
+  standalone: false,
+  name: 'formatNumToTime'
+})
+export class FormatNumToTime implements PipeTransform {
+  transform(value: any, args?: any): any {
+    if (args) {
+      let isHour = false;
+      let isMin = false;
+      let isSec = false;
+      if ((args as string).indexOf('HH') !== -1) {
+          isHour = true;
+      }
+      if ((args as string).indexOf('mm') !== -1) {
+        isMin = true;
+      }
+      if ((args as string).indexOf('SS') !== -1) {
+        isSec = true;
+      }
+      const absValue = Math.floor(Math.abs(value / 1000));
+      let hours = 0;
+      let hh = '00';
+      if (isHour) {
+        hours = Math.floor(absValue / (60 * 60));
+        hh =  String(hours < 10 ? '0' + hours : hours);
+      }
+      let Mins = 0;
+      let MM = '00';
+      if (isMin) {
+        Mins = Math.ceil((absValue - hours * 60 * 60) / 60);
+        MM =  String(Mins < 10 ? '0' + Mins : Mins);
+      }
+      let sec = 0;
+      let ss = '00';
+      if (isSec) {
+        sec = absValue - hours * 60 * 60 - Mins * 60;
+        ss = String(sec < 10 ? '0' + sec : sec);
+      }
+      if (isHour && isMin && isSec) {
+        return hh + ':' + MM + ':' + ss;
+      } else if (isHour && isMin) {
+        return hh + ':' + MM;
+      } else if (isMin && isSec) {
+        return MM + ':' + ss;
+      } else if (isHour) {
+        return hh;
+      } else if (isMin) {
+        return MM;
+      } else if (isSec) {
+        return ss;
+      }
+    }
+    return formatNumberToTime(value);
+  }
+}
+
+@Pipe({
+  standalone: false,
+  name: 'inDate'
+})
+export class InDate implements PipeTransform {
+  constructor(private translate: TranslateService) {
+  }
+
+  transform(value: any, args?: string): any {
+    const isSec =  args ? args.indexOf('ss') !== -1 : false;
+    const isHour = args ? args.indexOf('hh') !== -1 : true;
+    const isMin =  args ? args.indexOf('MM') !== -1 : true;
+    const date = new Date(value);
+    const now = new Date();
+    const time = (isHour ? `${('0' + date.getHours()).slice(-2)}` : ``)
+                  + (isMin ? `:${('0' + date.getMinutes()).slice(-2)}` : ``)
+                  + (isSec ? `:${('0' + date.getSeconds()).slice(-2)} ` : ``);
+    if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
+      return this.translate.instant('today at') + ' ' + time;
+    } else {
+      return ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + ('0' + date.getFullYear()).slice(-2) + ' ' + time;
+    }
+  }
+}

package/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of inspark-components
+ */
+
+export * from './interface';

package/src/scss/main.scss

@@ -0,0 +1,6 @@
+@use "@inspark/components-web/src/variables" as *;
+@use "@inspark/components-web/src/mixins" as *;
+@import "./settings/loader.settings";
+@import "../components/inspark";
+@import "./patchPrimeng/loader.components.primeng";
+//@import "~primeicons/primeicons.css";

package/src/scss/patchPrimeng/_loader.components.primeng.scss

@@ -0,0 +1,35 @@
+@import "common/primeng.components.common";
+@import "grid/primeng.components.grid";
+@import "icons/primeng.components.icons";
+@import "button/primeng.components.button";
+@import "selectbutton/primeng.components.selectbutton";
+@import "inputtext/primeng.components.inputtext";
+@import "fieldset/primeng.components.fieldset";
+@import "autocomplete/primeng.components.autocomplete";
+@import "checkbox/primeng.components.checkbox";
+@import "scroller/primeng.components.scroller";
+@import "dropdown/primeng.components.dropdown";
+@import "multiselect/primeng.components.multiselect";
+@import "card/primeng.components.card";
+@import "dialog/primeng.components.dialog";
+@import "overlay/primeng.components.overlay";
+@import "overlaypanel/primeng.components.overlaypanel";
+@import "table/primeng.components.table";
+@import "steps/primeng.components.steps";
+@import "toast/primeng.components.toast";
+@import "fileupload/primeng.components.fileupload";
+@import "tree/primeng.components.tree";
+@import "treetable/primeng.components.treetable";
+@import "menu/primeng.components.menu";
+@import "contextmenu/primeng.components.contextmenu";
+@import "lightbox/primeng.components.lightbox";
+@import "listbox/primeng.components.listbox";
+@import "radiobutton/primeng.components.radiobutton";
+@import "slider/primeng.components.slider";
+@import "sidebar/primeng.components.sidebar";
+@import "drawer/primeng.components.drawer";
+@import "tabview/primeng.components.tabview";
+@import "calendar/primeng.components.calendar";
+@import "breadcrumb/primeng.components.breadcrumb";
+@import "picklist/primeng.components.picklist";
+@import "modal/primeng.modal";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-blue.scss

@@ -0,0 +1,27 @@
+@import "common/primeng.components.common.theme-dark";
+@import "icons/primeng.components.icons.theme-contrast";
+@import "button/primeng.components.button.theme-blue";
+@import "selectbutton/primeng.components.selectbutton.theme-contrast";
+@import "inputtext/primeng.components.inputtext.theme-contrast";
+@import "fieldset/primeng.components.fieldset.theme-dark";
+@import "autocomplete/primeng.components.autocomplete.theme-blue";
+@import "checkbox/primeng.components.checkbox.theme-contrast";
+@import "dropdown/primeng.components.dropdown.theme-contrast";
+@import "multiselect/primeng.components.multiselect.theme-contrast";
+@import "card/primeng.components.card.theme-contrast";
+@import "dialog/primeng.components.dialog.theme-contrast";
+@import "table/primeng.components.table.theme-contrast";
+@import "steps/primeng.components.steps.theme-contrast";
+@import "toast/primeng.components.toast.theme-contrast";
+@import "radiobutton/primeng.components.radiobutton.themes";
+@import "fileupload/primeng.components.fileupload.theme-contrast";
+@import "tree/primeng.components.tree.theme-contrast";
+@import "treetable/primeng.components.treetable.theme-blue";
+@import "menu/primeng.components.menu.theme-contrast";
+@import "contextmenu/primeng.components.contextmenu.theme-contrast";
+@import "lightbox/primeng.components.lightbox.theme-contrast";
+@import "slider/primeng.components.slider.themes";
+@import "listbox/primeng.components.listbox.theme-contrast";
+@import "sidebar/primeng.components.sidebar.theme-contrast";
+@import "drawer/primeng.components.drawer.theme-contrast";
+@import "tabview/primeng.components.tabview.theme-contrast";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-bms-dark.scss

@@ -0,0 +1,25 @@
+@import "common/primeng.components.common.theme-dark";
+@import "icons/primeng.components.icons.theme-dark";
+@import "button/primeng.components.button.theme-bms-dark";
+@import "selectbutton/primeng.components.selectbutton.theme-dark";
+@import "inputtext/primeng.components.inputtext.theme-dark";
+@import "fieldset/primeng.components.fieldset.theme-dark";
+@import "autocomplete/primeng.components.autocomplete.theme-dark";
+@import "checkbox/primeng.components.checkbox.theme-dark";
+@import "dropdown/primeng.components.dropdown.theme-dark";
+@import "multiselect/primeng.components.multiselect.theme-dark";
+@import "card/primeng.components.card.theme-dark";
+@import "dialog/primeng.components.dialog.theme-dark";
+@import "table/primeng.components.table.theme-dark";
+@import "steps/primeng.components.steps.theme-dark";
+@import "toast/primeng.components.toast.theme-dark";
+@import "fileupload/primeng.components.fileupload.theme-dark";
+@import "tree/primeng.components.tree.theme-dark";
+@import "treetable/primeng.components.treetable.theme-dark";
+@import "menu/primeng.components.menu.theme-dark";
+@import "contextmenu/primeng.components.contextmenu.theme-dark";
+@import "lightbox/primeng.components.lightbox.theme-dark";
+@import "listbox/primeng.components.listbox.theme-dark";
+@import "sidebar/primeng.components.sidebar.theme-dark";
+@import "drawer/primeng.components.drawer.theme-dark";
+@import "tabview/primeng.components.tabview.theme-dark";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-bms-light.scss

@@ -0,0 +1,27 @@
+@import "common/primeng.components.common.theme-light";
+@import "icons/primeng.components.icons.theme-light";
+@import "button/primeng.components.button.theme-bms-light";
+@import "selectbutton/primeng.components.selectbutton.theme-light";
+@import "inputtext/primeng.components.inputtext.theme-light";
+@import "fieldset/primeng.components.fieldset.theme-light";
+@import "autocomplete/primeng.components.autocomplete.theme-light";
+@import "checkbox/primeng.components.checkbox.theme-light";
+@import "dropdown/primeng.components.dropdown.theme-light";
+@import "multiselect/primeng.components.multiselect.theme-light";
+@import "card/primeng.components.card.theme-light";
+@import "dialog/primeng.components.dialog.theme-light";
+@import "table/primeng.components.table.theme-light";
+@import "steps/primeng.components.steps.theme-light";
+@import "radiobutton/primeng.components.radiobutton.themes";
+@import "toast/primeng.components.toast.theme-light";
+@import "fileupload/primeng.components.fileupload.theme-light";
+@import "tree/primeng.components.tree.theme-light";
+@import "treetable/primeng.components.treetable.theme-light";
+@import "menu/primeng.components.menu.theme-light";
+@import "slider/primeng.components.slider.themes";
+@import "contextmenu/primeng.components.contextmenu.theme-light";
+@import "lightbox/primeng.components.lightbox.theme-light";
+@import "listbox/primeng.components.listbox.theme-light";
+@import "sidebar/primeng.components.sidebar.theme-light";
+@import "drawer/primeng.components.drawer.theme-light";
+@import "tabview/primeng.components.tabview.theme-light";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-contrast.scss

@@ -0,0 +1,27 @@
+@import "common/primeng.components.common.theme-contrast";
+@import "icons/primeng.components.icons.theme-contrast";
+@import "button/primeng.components.button.theme-contrast";
+@import "selectbutton/primeng.components.selectbutton.theme-contrast";
+@import "inputtext/primeng.components.inputtext.theme-contrast";
+@import "fieldset/primeng.components.fieldset.theme-light";
+@import "autocomplete/primeng.components.autocomplete.theme-contrast";
+@import "checkbox/primeng.components.checkbox.theme-contrast";
+@import "dropdown/primeng.components.dropdown.theme-contrast";
+@import "multiselect/primeng.components.multiselect.theme-contrast";
+@import "card/primeng.components.card.theme-contrast";
+@import "dialog/primeng.components.dialog.theme-contrast";
+@import "table/primeng.components.table.theme-contrast";
+@import "steps/primeng.components.steps.theme-contrast";
+@import "toast/primeng.components.toast.theme-contrast";
+@import "radiobutton/primeng.components.radiobutton.themes";
+@import "fileupload/primeng.components.fileupload.theme-contrast";
+@import "tree/primeng.components.tree.theme-contrast";
+@import "treetable/primeng.components.treetable.theme-contrast";
+@import "menu/primeng.components.menu.theme-contrast";
+@import "contextmenu/primeng.components.contextmenu.theme-contrast";
+@import "lightbox/primeng.components.lightbox.theme-contrast";
+@import "slider/primeng.components.slider.themes";
+@import "listbox/primeng.components.listbox.theme-contrast";
+@import "sidebar/primeng.components.sidebar.theme-contrast";
+@import "drawer/primeng.components.drawer.theme-contrast";
+@import "tabview/primeng.components.tabview.theme-contrast";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-dark.scss

@@ -0,0 +1,26 @@
+@import "common/primeng.components.common.theme-dark";
+@import "icons/primeng.components.icons.theme-dark";
+@import "button/primeng.components.button.theme-dark";
+@import "selectbutton/primeng.components.selectbutton.theme-dark";
+@import "inputtext/primeng.components.inputtext.theme-dark";
+@import "fieldset/primeng.components.fieldset.theme-dark";
+@import "autocomplete/primeng.components.autocomplete.theme-dark";
+@import "checkbox/primeng.components.checkbox.theme-dark";
+@import "dropdown/primeng.components.dropdown.theme-dark";
+@import "multiselect/primeng.components.multiselect.theme-dark";
+@import "card/primeng.components.card.theme-dark";
+@import "dialog/primeng.components.dialog.theme-dark";
+@import "table/primeng.components.table.theme-dark";
+@import "steps/primeng.components.steps.theme-dark";
+@import "toast/primeng.components.toast.theme-dark";
+@import "fileupload/primeng.components.fileupload.theme-dark";
+@import "tree/primeng.components.tree.theme-dark";
+@import "treetable/primeng.components.treetable.theme-dark";
+@import "menu/primeng.components.menu.theme-dark";
+@import "contextmenu/primeng.components.contextmenu.theme-dark";
+@import "lightbox/primeng.components.lightbox.theme-dark";
+@import "listbox/primeng.components.listbox.theme-dark";
+@import "picklist/primeng.components.picklist.theme-dark";
+@import "sidebar/primeng.components.sidebar.theme-dark";
+@import "drawer/primeng.components.drawer.theme-dark";
+@import "tabview/primeng.components.tabview.theme-dark";

package/src/scss/patchPrimeng/_loader.components.primeng.theme-light.scss

@@ -0,0 +1,29 @@
+@import "common/primeng.components.common.theme-light";
+@import "icons/primeng.components.icons.theme-light";
+@import "button/primeng.components.button.theme-light";
+@import "selectbutton/primeng.components.selectbutton.theme-light";
+@import "inputtext/primeng.components.inputtext.theme-light";
+@import "fieldset/primeng.components.fieldset.theme-light";
+@import "autocomplete/primeng.components.autocomplete.theme-light";
+@import "calendar/primeng.components.calendar.theme-light";
+@import "checkbox/primeng.components.checkbox.theme-light";
+@import "dropdown/primeng.components.dropdown.theme-light";
+@import "multiselect/primeng.components.multiselect.theme-light";
+@import "card/primeng.components.card.theme-light";
+@import "dialog/primeng.components.dialog.theme-light";
+@import "table/primeng.components.table.theme-light";
+@import "steps/primeng.components.steps.theme-light";
+@import "radiobutton/primeng.components.radiobutton.themes";
+@import "toast/primeng.components.toast.theme-light";
+@import "fileupload/primeng.components.fileupload.theme-light";
+@import "tree/primeng.components.tree.theme-light";
+@import "treetable/primeng.components.treetable.theme-light";
+@import "menu/primeng.components.menu.theme-light";
+@import "slider/primeng.components.slider.themes";
+@import "contextmenu/primeng.components.contextmenu.theme-light";
+@import "lightbox/primeng.components.lightbox.theme-light";
+@import "listbox/primeng.components.listbox.theme-light";
+@import "picklist/primeng.components.picklist.theme-light";
+@import "sidebar/primeng.components.sidebar.theme-light";
+@import "drawer/primeng.components.drawer.theme-light";
+@import "tabview/primeng.components.tabview.theme-light";

package/src/scss/patchPrimeng/autocomplete/_primeng.components.autocomplete.scss

@@ -0,0 +1,193 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+// PrimeNG 19: .p-autocomplete-overlay (was .p-autocomplete-panel)
+.p-autocomplete-overlay,
+.p-autocomplete-panel {
+  z-index: 1;
+}
+
+// PrimeNG 19 does not inject layout CSS when theme:'none' — replicate it manually
+.p-autocomplete {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  border-color: transparent;
+  background-color: var(--ids-theme-inuit-forms-background, rgba(255, 255, 255, .05));
+  border: var(--ids-theme-inuit-forms-border_outer, 1px solid transparent);
+  color: var(--ids-theme-inuit-forms-color, #FFFFFF);
+  font-size: 14px;
+
+  .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+
+  &.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.107rem;
+  }
+
+  // PrimeNG 19: .p-autocomplete-input-multiple (was .p-autocomplete-multiple-container)
+  .p-autocomplete-input-multiple,
+  .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+
+    &:not(.p-disabled):hover {
+      border-color: #3f4b5b;
+    }
+
+    &:not(.p-disabled).p-focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #e3f3fe;
+      border-color: #8dd0ff;
+    }
+
+    // PrimeNG 19: .p-autocomplete-input-chip (was .p-autocomplete-input-token)
+    .p-autocomplete-input-chip,
+    .p-autocomplete-input-token {
+      padding: 0.25rem 0;
+    }
+
+    .p-autocomplete-input-chip input,
+    .p-autocomplete-input-token input {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      font-size: 1rem;
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0;
+      margin: 0;
+    }
+
+    // PrimeNG 19: .p-autocomplete-chip-item (was .p-autocomplete-token)
+    .p-autocomplete-chip-item,
+    .p-autocomplete-token {
+      padding: 0.25rem 0.75rem;
+      background: #8dd0ff;
+      color: #151515;
+      border-radius: 4px;
+    }
+
+    // PrimeNG 19: .p-autocomplete-chip-icon (was .p-autocomplete-token-icon inside token)
+    .p-autocomplete-chip-icon,
+    .p-autocomplete-token .p-autocomplete-token-icon {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+// PrimeNG 19: input field inside autocomplete with dropdown button — flex: 1 fills available width
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+}
+
+// PrimeNG 19: .p-autocomplete-input (was .p-inputtext inside .p-autocomplete)
+.p-autocomplete-input {
+  height: 100%;
+  background-color: var(--ids-theme-inuit-forms-background, rgba(255, 255, 255, .05));
+  border: none;
+  color: var(--ids-theme-inuit-forms-color, #FFFFFF);
+  font-size: 14px;
+  padding: 0 $unit-small;
+  border-radius: 3px 0 0 3px;
+  outline: none;
+}
+
+// PrimeNG 19: .p-autocomplete-dropdown button — fixed width/height matching in-dropdown trigger
+.p-autocomplete-dropdown {
+  width: 32px;
+  height: 100%;
+  flex: 0 0 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: var(--ids-theme-inuit-forms-background, rgba(255, 255, 255, .05));
+  border: none;
+  border-radius: 0 3px 3px 0;
+  color: var(--ids-theme-inuit-forms-color, inherit);
+  font-size: 14px;
+  pointer-events: all;
+  --p-button-color: var(--ids-theme-label-color);
+}
+
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+  border-color: #f19ea6;
+}
+
+// PrimeNG 19: .p-autocomplete-overlay (was .p-autocomplete-panel)
+.p-autocomplete-overlay,
+.p-autocomplete-panel {
+  max-width: 100%;
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+
+  // PrimeNG 19: .p-autocomplete-list (was .p-autocomplete-items)
+  .p-autocomplete-list,
+  .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+
+  // PrimeNG 19: .p-autocomplete-option (was .p-autocomplete-item)
+  .p-autocomplete-list .p-autocomplete-option,
+  .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+    text-overflow: ellipsis;
+  }
+
+  .p-autocomplete-list .p-autocomplete-option:hover,
+  .p-autocomplete-items .p-autocomplete-item:hover {
+    color: var(--colorTextInverse);
+    background: var(--colorBgPrimary);
+  }
+
+  // PrimeNG 19: .p-autocomplete-option-selected / .p-focus (was .p-highlight)
+  .p-autocomplete-list .p-autocomplete-option.p-autocomplete-option-selected,
+  .p-autocomplete-list .p-autocomplete-option.p-focus,
+  .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: var(--colorTextInverse);
+    background: var(--colorBgPrimary);
+  }
+
+  .p-autocomplete-empty-message {
+    padding: 0.5rem 1.5rem;
+    background: transparent;
+  }
+
+  // PrimeNG 19: .p-autocomplete-option-group (was .p-autocomplete-item-group)
+  .p-autocomplete-option-group,
+  .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    background: var(--colorBgLevel3);
+    font-weight: 600;
+  }
+}
+
+p-autocomplete.p-autocomplete-clearable {
+  .p-inputtext {
+    padding-right: 2.5rem;
+  }
+
+  .p-autocomplete-clear-icon {
+    color: var(--colorIcon);
+    right: 0.75rem;
+    opacity: 0.8;
+  }
+
+  .p-autocomplete-dd .p-autocomplete-clear-icon {
+    color: var(--colorIcon);
+    right: 3.107rem;
+    opacity: 0.8;
+  }
+}

package/src/scss/patchPrimeng/autocomplete/_primeng.components.autocomplete.theme-blue.scss

@@ -0,0 +1,58 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.p-autocomplete {
+
+  &.p-autocomplete-multiple {
+    .p-autocomplete-multiple-container {
+
+      &:not(.p-state-disabled) {
+        &:hover {
+          border-color: $btn-secondary-border-color;
+        }
+
+        &.p-state-focus {
+          border-color: $btn-secondary-border-color;
+          outline: 0 none;
+          -webkit-box-shadow: none;
+          -moz-box-shadow: none;
+          box-shadow: none;
+        }
+      }
+
+      .p-autocomplete-input-token {
+        color: var(--text-color);
+      }
+
+      .p-autocomplete-token {
+        background: var(--colorBgPrimary);
+        color: var(--colorTextOnStatus);
+      }
+    }
+  }
+}
+
+.p-autocomplete-panel {
+  border: 1px solid $btn-secondary-border-color;
+  background-color: var(--colorBgLevel3);
+  -webkit-box-shadow: $box-shadow-default;
+  -moz-box-shadow: $box-shadow-default;
+  box-shadow: $box-shadow-default;
+
+  .p-autocomplete-items {
+
+    .p-autocomplete-list-item {
+      border: 0 none;
+      color: var(--text-color);
+
+      &.p-state-highlight {
+        background-color: rgba($ids-theme-status-highlight, 0.5);
+        color: var(--ids-theme-text-color, $text-color);
+      }
+    }
+
+    .p-autocomplete-group {
+      background-color: var(--colorBgLevel3);
+      color: var(--text-color);
+    }
+  }
+}