@inspark/inspark-components 19.0.51 → 19.0.53

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

@@ -1,290 +0,0 @@
-//@import "~primeng/resources/components/multiselect/multiselect.css";
-
-.p-multiselect {
-  display: inline-block;
-  position: relative;
-  width: auto;
-  cursor: pointer;
-  @include c-input;
-
-  .p-multiselect-trigger {
-    border-right: none;
-    border-top: none;
-    border-bottom: none;
-    cursor: pointer;
-    width: 1.5em;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 0 16px;
-    .fa {
-      margin-top: $unit-small;
-      margin-left: -.125em;
-    }
-  }
-  .p-multiselect-label-container {
-    overflow: hidden;
-  }
-  .p-multiselect-label {
-    display: block;
-    padding: 0;
-    padding-right: 12px;
-    width: auto;
-    border: none;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    line-height: $line-height-computed;
-    font-size: 13px;
-    overflow: hidden;
-    word-break: break-all;
-    margin-bottom: 0;
-    border: 1px solid transparent;
-  }
-  &.p-state-disabled {
-    .p-multiselect-trigger {
-      cursor: auto;
-    }
-    .p-multiselect-label {
-      cursor: auto;
-    }
-  }
-  .p-multiselect-panel {
-    min-width: 200px;
-    max-width: 100%;
-    display: none;
-    background: $pm-multiselect-panel-background;
-
-    @media screen and (min-width: 800px) {
-      max-width: 480px;
-    }
-  }
-}
-
-.p-multiselect-panel {
-  padding: $unit-tiny;
-  position: absolute;
-  min-width: 12em;
-  max-width: 100%;
-  background: $pm-multiselect-panel-background;
-
-  @media screen and (min-width: 800px) {
-    max-width: 480px;
-  }
-
-  .p-multiselect-items-wrapper {
-    overflow: auto;
-    position: relative;
-    padding: $unit-tiny 0;
-  }
-  .p-multiselect-list {
-    border: 0 none;
-  }
-  .p-multiselect-item {
-    border: 0 none;
-    cursor: pointer;
-    font-weight: normal;
-    margin: 5px 0;
-    padding: .125em $unit-tiny;
-    text-align: left;
-    white-space: nowrap;
-    display: block;
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-    //margin-bottom: $unit-tiny;
-  .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  label {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 0;
-  }
-
-  &.p-highlight {
-    background: rgba(var(--ids-theme-primary-rgb, #{$ids-theme-primary-rgb}), 0.5);
-    color: #fff;
-  }
-}
-
-.p-multiselect-header {
-  margin-bottom: $unit-tiny;
-  padding: $unit-tiny;
-  position: relative;
-  text-align: left;
-  min-height: 2em;
-  .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-  .p-multiselect-filter-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    width: 65%;
-
-    .p-multiselect-filter {
-      padding-left: 24px;
-      padding-right: 30px;
-    }
-
-    .fa {
-      position: absolute;
-      top: $unit-small;
-      left: $unit-tiny;
-    }
-  }
-  .p-inputtext, .p-inputtext {
-    // padding: .125em .125em .125em 1.25em;
-    width: 100%;
-
-    @include c-input;
-    @include c-input_block;
-
-    padding-left: $unit;
-  }
-
-  .p-multiselect-filter-container .p-multiselect-filter-icon {
-    top: 50%;
-    left: 0.5em;
-  }
-
-  .p-multiselect-close {
-    position: absolute;
-    right: 16px;
-    //top: 17px;
-    display: block;
-    font-size: 1em;
-    border: 0 none;
-    &.p-state-hover {
-      padding: 0;
-    }
-  }
-  a {
-    &.p-multiselect-all {
-      float: left;
-      margin-right: 10px;
-      display: block;
-    }
-    &.p-multiselect-none {
-      float: left;
-      margin-right: 10px;
-      display: block;
-    }
-  }
-  &.p-multiselect-header-no-toggleall .p-multiselect-filter-container {
-    width: 85%;
-  }
-}
-
-.p-fluid .p-multiselect {
-  width: 100%;
-  //Instead of the line below you could use @include box-sizing($bs)
-  box-sizing: border-box;
-}
-
-.p-checkbox .p-checkbox-box.p-highlight {
-  background: none;
-}
-
-.p-checkbox .p-checkbox-box .p-checkbox-icon {
-  display: flex;
-  top: 1px;
-}
-
-.p-checkbox {
-  display: flex;
-  justify-content: center;
-}
-
-.p-multiselect {
-  .p-multiselect-label.p-placeholder {
-    color: var(--colorTextMuted);
-  }
-}
-
-p-multiselect.p-multiselect {
-  background-color: var(--ids-theme-inuit-forms-background, rgba(255, 255, 255, 0.05));
-}
-
-.p-multiselect-overlay {
-  --p-multiselect-option-gap: 10px;
-  --p-multiselect-option-padding: 2px 10px;
-}
-
-.p-multiselect-overlay .p-multiselect-option {
-  margin: 2px 0;
-}
-
-.p-multiselect-header {
-  --p-multiselect-list-header-padding: 12px 10px;
-}
-
-.p-multiselect-overlay,
-.p-multiselect-panel {
-  max-width: 480px;
-}
-
-.p-multiselect-option {
-  width: 100%;
-  min-width: 0;
-
-  > p-checkbox,
-  > .p-checkbox {
-    flex: 0 0 auto;
-  }
-
-  > span {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-
-/*.p-multiselect-header {
-  .p-multiselect-filter-container {
-    .p-iconfield {
-      width: 100%;
-      display: block;
-    }
-
-    .p-inputicon,
-    p-inputicon,
-    .p-multiselect-filter-icon {
-      pointer-events: none;
-    }
-
-    .p-multiselect-filter {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-}*/
-
-.p-inputicon {
-  left: .5em;
-  width: 16px;
-}
-
-/*.p-multiselect-option {
-  padding-left: 6px;
-  margin: 2px 0;
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-
-  > p-checkbox,
-  > .p-checkbox {
-    margin-right: 6px;
-    flex: 0 0 auto;
-  }
-}*/
-
-

package/src/scss/patchPrimeng/multiselect/_primeng.components.multiselect.theme-contrast.scss

@@ -1,39 +0,0 @@
-/*.p-multiselect {
-  display: inline-block;
-  position: relative;
-  width: auto;
-  cursor: pointer;
-
-  .p-multiselect-panel {
-    background: $pm-multiselect-panel-background;
-  }
-}
-
-.p-multiselect-panel {
-  background: $pm-multiselect-panel-background;
-}
-
-.p-multiselect-header,
-.p-multiselect-header {
-
-  .p-inputtext, .p-inputtext {
-    // padding: .125em .125em .125em 1.25em;
-    width: 100%;
-
-    @include c-input;
-    @include c-input_block;
-
-    padding-left: $unit;
-  }
-}*/
-
-& {
-  --p-multiselect-overlay-background: #{$pm-multiselect-panel-background};
-}
-
-.p-multiselect-option.p-multiselect-option-selected {
-  --p-multiselect-option-selected-background: #38738280;
-  --p-multiselect-option-selected-color: #fff;
-  --p-multiselect-option-selected-focus-background: #38738280;
-  --p-multiselect-option-selected-focus-color: #fff;
-}

package/src/scss/patchPrimeng/multiselect/_primeng.components.multiselect.theme-dark.scss

@@ -1,10 +0,0 @@
-& {
-  --p-multiselect-overlay-background: #30333c;
-}
-
-.p-multiselect-option.p-multiselect-option-selected {
-  --p-multiselect-option-selected-background: #78f4ff80;
-  --p-multiselect-option-selected-color: #202127;
-  --p-multiselect-option-selected-focus-background: #78f4ff80;
-  --p-multiselect-option-selected-focus-color: #202127;
-}

package/src/scss/patchPrimeng/multiselect/_primeng.components.multiselect.theme-light.scss

@@ -1,38 +0,0 @@
-/*.p-multiselect {
-  display: inline-block;
-  position: relative;
-  width: auto;
-  cursor: pointer;
-
-  .p-multiselect-panel {
-    background: $pm-multiselect-panel-background;
-  }
-}
-
-.p-multiselect-panel {
-  background: $pm-multiselect-panel-background;
-}
-.p-multiselect-header,
-.p-multiselect-header {
-
-  .p-inputtext, .p-inputtext {
-    // padding: .125em .125em .125em 1.25em;
-    width: 100%;
-
-    @include c-input;
-    @include c-input_block;
-
-    padding-left: $unit;
-  }
-}*/
-
-& {
-  --p-multiselect-overlay-background: #{$pm-multiselect-panel-background};
-}
-
-.p-multiselect-option.p-multiselect-option-selected {
-  --p-multiselect-option-selected-background: #38738280;
-  --p-multiselect-option-selected-color: #fff;
-  --p-multiselect-option-selected-focus-background: #38738280;
-  --p-multiselect-option-selected-focus-color: #fff;
-}

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

@@ -1 +0,0 @@
-//@import "primeng/resources/components/overlay/overlay.css";

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

@@ -1 +0,0 @@
-//@import "~primeng/resources/components/overlaypanel/overlaypanel.css";

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

@@ -1,220 +0,0 @@
-//@import "~primeng/resources/components/picklist/picklist.css";
-
-// ── Host element ──────────────────────────────────────────────────────────────
-p-pickList {
-  display: flex;
-  height: 100%;
-}
-
-.p-picklist {
-  width: 100%;
-}
-
-// ── Transfer-controls column (PrimeNG 19: .p-picklist-transfer-controls) ──────
-// Old: .p-picklist-buttons
-.p-picklist-buttons,
-.p-picklist-transfer-controls {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  gap: 4px;
-  padding: 0 $unit-small;
-
-  // Old PrimeNG
-  .p-button:not(:last-child) {
-    margin-bottom: .25em;
-  }
-
-  // PrimeNG 19: icon-only transfer buttons get a fixed square size
-  .p-button {
-    width: 36px !important;
-    height: 36px !important;
-    min-width: 36px;
-    padding: 0 !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    flex-shrink: 0;
-
-    .p-button-text {
-      padding: 0;
-    }
-  }
-}
-
-// ── List wrapper ──────────────────────────────────────────────────────────────
-// Old: .p-picklist-listwrapper
-.p-picklist-listwrapper,
-.p-picklist-list-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-// ── Responsive layout ─────────────────────────────────────────────────────────
-.p-picklist.p-picklist-responsive {
-  height: 100%;
-  display: inline-flex;
-  flex-wrap: nowrap;
-}
-
-// ── Listbox root inside picklist ──────────────────────────────────────────────
-// PrimeNG 19: the listbox is a separate p-listbox component
-.p-picklist .p-listbox {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--ids-theme-webkit-scrollbar-track-bg, #202127);
-}
-
-.p-picklist .p-listbox .p-listbox-list-container {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-// ── Old PrimeNG list style (kept for compat) ──────────────────────────────────
-.p-picklist .p-picklist-list {
-  background: var(--ids-theme-webkit-scrollbar-track-bg, #202127);
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-list {
-  height: 600px;
-}
-
-// ── Filter / Search field ─────────────────────────────────────────────────────
-// Old PrimeNG filter container
-.p-picklist .p-picklist-filter-container {
-  position: relative;
-  width: 100%;
-  padding: .5em 0;
-  border-bottom: 0 none;
-}
-
-.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  left: 0.5em;
-}
-
-.p-picklist .p-picklist-filter-container .p-picklist-filter-input {
-  text-indent: 1.1em;
-  width: 100%;
-}
-
-// PrimeNG 19: filter container is .p-listbox-header (OLD: .p-listbox-filter-container)
-// p-iconfield has position:relative; p-inputicon has position:absolute top:50%
-// With theme:'none' design tokens resolve to empty → inset-inline-start is unset → icon at x=0
-// Fix: anchor the icon to the left and pad the input.
-.p-picklist .p-listbox-filter-container,
-.p-picklist .p-listbox-header {
-  position: relative;
-  width: 100%;
-  padding: .5em 0;
-  border-bottom: 0 none;
-
-  p-iconfield,
-  .p-iconfield {
-    position: relative;
-    display: block;
-    width: 100%;
-  }
-
-  // Icon: top:50% + translateY(-50%) centers the icon regardless of its height.
-  // PrimeNG injects top:50% + margin-top:calc(-icon.size/2); with theme:'none'
-  // the margin-top token is empty/invalid, so we override with transform instead.
-  p-inputicon,
-  .p-inputicon {
-    position: absolute !important;
-    left: 0.5em !important;
-    top: 50% !important;
-    transform: translateY(-50%) !important;
-    display: flex !important;
-    align-items: center !important;
-    pointer-events: none;
-    line-height: 1;
-  }
-
-  // Input: indent text so it doesn't sit under the icon
-  .p-listbox-filter {
-    padding-left: 2em !important;
-    width: 100%;
-  }
-}
-
-// ── List items ────────────────────────────────────────────────────────────────
-// Old PrimeNG item class
-.p-picklist .p-picklist-list .p-picklist-item {
-  padding: 6px 12px;
-  margin: 0;
-  border: 0 none;
-  background: transparent;
-  transition: box-shadow 0.15s;
-}
-
-.p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--text-color);
-}
-
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: var(--colorTextOnStatus);
-  background: var(--colorBgPrimary);
-}
-
-// PrimeNG 19 item class (.p-listbox-option)
-.p-picklist .p-listbox .p-listbox-option {
-  padding: 6px 12px;
-  margin: 0;
-  border: 0 none;
-  background: transparent;
-  cursor: pointer;
-  transition: box-shadow 0.15s;
-}
-
-.p-picklist .p-listbox .p-listbox-option:focus {
-  outline: 0 none;
-}
-
-.p-picklist .p-listbox .p-listbox-option.p-listbox-option-selected,
-.p-picklist .p-listbox .p-listbox-option.p-selected {
-  color: var(--colorTextOnStatus);
-  background: var(--colorBgPrimary) !important;
-}
-
-.p-picklist .p-picklist-list .p-picklist-empty-message,
-.p-picklist .p-listbox .p-listbox-empty-message {
-  padding: 6px 12px;
-}
-
-// ── Hover states ──────────────────────────────────────────────────────────────
-.p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover,
-.p-picklist .p-listbox .p-listbox-option:not(.p-listbox-option-selected):not(.p-selected):hover {
-  background: rgba(var(--colorBgInverse_rgb), 0.04);
-  color: rgba(var(--colorBgInverse_rgb), 0.87);
-}
-
-// ── Striped rows ──────────────────────────────────────────────────────────────
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even),
-.p-picklist.p-picklist-striped .p-listbox .p-listbox-option:nth-child(even) {
-  background: rgba(var(--colorBgInverse_rgb), 0.02);
-}
-
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover,
-.p-picklist.p-picklist-striped .p-listbox .p-listbox-option:nth-child(even):hover {
-  background: rgba(var(--colorBgInverse_rgb), 0.04);
-}
-
-// ── Drag preview ──────────────────────────────────────────────────────────────
-.p-picklist-item.cdk-drag-preview,
-.p-listbox-option.cdk-drag-preview {
-  padding: 0.5rem 1.5rem;
-  box-shadow: none;
-  border: 0 none;
-  color: rgba(var(--colorBgInverse_rgb), 0.87);
-  background: var(--colorBg);
-  margin: 0;
-}

package/src/scss/patchPrimeng/picklist/_primeng.components.picklist.theme-dark.scss

@@ -1,41 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-// List header title
-.p-picklist .p-picklist-title,
-.p-picklist .p-picklist-caption {
-  color: var(--colorText, #fff);
-}
-
-// List panel background: dark theme page bg is #202127, list needs contrast
-// Use colorBgLevel2 (#30333B) so the list is distinguishable from the page
-.p-picklist .p-listbox {
-  background: var(--colorBgLevel2, #30333B);
-}
-
-.p-picklist .p-picklist-list {
-  background: var(--colorBgLevel2, #30333B);
-}
-
-// Item text color
-.p-picklist .p-listbox .p-listbox-option,
-.p-picklist .p-picklist-list .p-picklist-item {
-  color: var(--colorText, #fff);
-}
-
-// Selected items: --colorBgPrimary is #78F4FF (bright cyan) in dark theme.
-// Global dark theme text color is white → white on cyan = very low contrast.
-// Force dark text (#202127) on bright cyan via --colorTextOnStatus.
-.p-picklist .p-listbox .p-listbox-option.p-listbox-option-selected,
-.p-picklist .p-listbox .p-listbox-option.p-selected,
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: var(--colorTextOnStatus, #202127) !important;
-}
-
-// Search icon color
-.p-picklist .p-listbox-filter-container,
-.p-picklist .p-listbox-header {
-  p-inputicon,
-  .p-inputicon {
-    color: var(--colorText, #fff);
-  }
-}

package/src/scss/patchPrimeng/picklist/_primeng.components.picklist.theme-light.scss

@@ -1,42 +0,0 @@
-@use "@inspark/components-web/src/inspark" as *;
-
-// List header title (PrimeNG 19: .p-picklist-title; old: .p-picklist-caption)
-.p-picklist .p-picklist-title,
-.p-picklist .p-picklist-caption {
-  color: $text-color;
-  color: var(--colorText, #{$text-color});
-}
-
-// List panel background: light gray to distinguish from page background
-.p-picklist .p-listbox {
-  background: $pm-multiselect-panel-background;
-}
-
-.p-picklist .p-picklist-list {
-  background: $pm-multiselect-panel-background;
-}
-
-// Item text color
-.p-picklist .p-listbox .p-listbox-option,
-.p-picklist .p-picklist-list .p-picklist-item {
-  color: $text-color;
-  color: var(--colorText, #{$text-color});
-}
-
-// Selected items: white text on dark teal (#387382)
-// --colorTextOnStatus is #202127 (dark) → unreadable on dark teal → use white instead
-.p-picklist .p-listbox .p-listbox-option.p-listbox-option-selected,
-.p-picklist .p-listbox .p-listbox-option.p-selected,
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: #fff !important;
-}
-
-// Search icon color
-.p-picklist .p-listbox-filter-container,
-.p-picklist .p-listbox-header {
-  p-inputicon,
-  .p-inputicon {
-    color: $text-color;
-    color: var(--colorText, #{$text-color});
-  }
-}