@inspark/inspark-components 19.0.49 → 19.0.51

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

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

@@ -0,0 +1,39 @@
+/*.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

@@ -0,0 +1,10 @@
+& {
+  --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

@@ -0,0 +1,38 @@
+/*.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

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

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

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

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

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

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

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