@inspark/inspark-components 19.0.49 → 19.0.51

package/src/scss/patchPrimeng/autocomplete/_primeng.components.autocomplete.theme-contrast.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(--ids-theme-text-muted);
+
+      &.p-state-highlight {
+        background-color: rgba($ids-theme-status-highlight, 0.5);
+        color: $color-base-black;
+      }
+    }
+
+    .p-autocomplete-group {
+      background-color: var(--colorBgLevel3);
+      color: var(--text-color);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.p-autocomplete {
+  &.p-autocomplete-multiple {
+    // PrimeNG 19: .p-autocomplete-input-multiple (was .p-autocomplete-multiple-container)
+    .p-autocomplete-input-multiple,
+    .p-autocomplete-multiple-container {
+      &:not(.p-state-disabled):hover,
+      &:not(.p-disabled):hover {
+        border-color: $btn-secondary-border-color;
+      }
+
+      &.p-state-focus,
+      &:not(.p-disabled).p-focus {
+        border-color: $btn-secondary-border-color;
+        outline: 0 none;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+      }
+
+      // PrimeNG 19: .p-autocomplete-input-chip (was .p-autocomplete-input-token)
+      .p-autocomplete-input-chip,
+      .p-autocomplete-input-token {
+        color: var(--text-color);
+      }
+
+      // PrimeNG 19: .p-autocomplete-chip-item (was .p-autocomplete-token)
+      .p-autocomplete-chip-item,
+      .p-autocomplete-token {
+        background: var(--colorBgPrimary);
+        color: var(--colorTextOnStatus);
+      }
+    }
+  }
+}
+
+// PrimeNG 19: .p-autocomplete-overlay (was .p-autocomplete-panel)
+.p-autocomplete-overlay,
+.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;
+
+  // PrimeNG 19: .p-autocomplete-list (was .p-autocomplete-items)
+  .p-autocomplete-list,
+  .p-autocomplete-items {
+    // PrimeNG 19: .p-autocomplete-option (was .p-autocomplete-list-item)
+    .p-autocomplete-option,
+    .p-autocomplete-list-item {
+      border: 0 none;
+      color: var(--ids-theme-text-muted);
+
+      // PrimeNG 19: .p-autocomplete-option-selected / .p-focus (was .p-state-highlight)
+      &.p-autocomplete-option-selected,
+      &.p-focus,
+      &.p-state-highlight {
+        background-color: rgba($ids-theme-status-highlight, 0.5);
+        color: $color-base-black;
+      }
+    }
+
+    // PrimeNG 19: .p-autocomplete-option-group (was .p-autocomplete-group)
+    .p-autocomplete-option-group,
+    .p-autocomplete-group {
+      background-color: var(--colorBgLevel3);
+      color: var(--text-color);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.p-autocomplete {
+  &.p-autocomplete-multiple {
+    // PrimeNG 19: .p-autocomplete-input-multiple (was .p-autocomplete-multiple-container)
+    .p-autocomplete-input-multiple,
+    .p-autocomplete-multiple-container {
+      &:not(.p-state-disabled):hover,
+      &:not(.p-disabled):hover {
+        border-color: $btn-secondary-border-color;
+      }
+
+      &.p-state-focus,
+      &:not(.p-disabled).p-focus {
+        border-color: $btn-secondary-border-color;
+        outline: 0 none;
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+      }
+
+      // PrimeNG 19: .p-autocomplete-input-chip (was .p-autocomplete-input-token)
+      .p-autocomplete-input-chip,
+      .p-autocomplete-input-token {
+        color: var(--text-color);
+      }
+
+      // PrimeNG 19: .p-autocomplete-chip-item (was .p-autocomplete-token)
+      .p-autocomplete-chip-item,
+      .p-autocomplete-token {
+        background: var(--colorBgPrimary);
+        color: var(--colorTextOnStatus);
+      }
+    }
+  }
+}
+
+// PrimeNG 19: .p-autocomplete-overlay (was .p-autocomplete-panel)
+.p-autocomplete-overlay,
+.p-autocomplete-panel {
+  border: 1px solid $btn-secondary-border-color;
+  background-color: #{$pm-multiselect-panel-background};
+  -webkit-box-shadow: $box-shadow-default;
+  -moz-box-shadow: $box-shadow-default;
+  box-shadow: $box-shadow-default;
+
+  // PrimeNG 19: .p-autocomplete-list (was .p-autocomplete-items)
+  .p-autocomplete-list,
+  .p-autocomplete-items {
+    // PrimeNG 19: .p-autocomplete-option (was .p-autocomplete-list-item)
+    .p-autocomplete-option,
+    .p-autocomplete-list-item {
+      border: 0 none;
+      color: var(--ids-theme-text-muted);
+
+      // PrimeNG 19: .p-autocomplete-option-selected / .p-focus (was .p-state-highlight)
+      &.p-autocomplete-option-selected,
+      &.p-focus,
+      &.p-state-highlight {
+        background-color: #38738280;
+        color: #fff;
+      }
+    }
+
+    // PrimeNG 19: .p-autocomplete-option-group (was .p-autocomplete-group)
+    .p-autocomplete-option-group,
+    .p-autocomplete-group {
+      background-color: #{$pm-multiselect-panel-background};
+      color: var(--ids-theme-forms-color, #333);
+    }
+  }
+}

package/src/scss/patchPrimeng/button/_primeng.components.button.compat.scss

@@ -0,0 +1,114 @@
+/* Button */
+.p-button {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    text-decoration: none !important;
+    cursor: pointer;
+    text-align: center;
+    zoom: 1;
+    overflow: visible; /* the overflow property removes extra width in IE */
+}
+
+p-button {
+    display: inline-block;
+}
+
+/*button text element */
+.p-button .p-button-text {
+    display: block;
+    line-height: normal;
+}
+
+.p-button-text-only .p-button-text {
+    padding: .25em 1em;
+}
+
+.p-button-icon-only .p-button-text,
+.p-button-text-empty .p-button-text {
+    padding: .25em;
+    text-indent: -9999999px;
+}
+
+.p-button-text-icon-left .p-button-text {
+    padding: .25em 1em .25em 2.1em;
+}
+
+.p-button-text-icon-right .p-button-text {
+    padding: .25em 2.1em .25em 1em;
+}
+
+/*button icon element(s) */
+.p-button-icon-only .p-button-icon-left,
+.p-button-text-icon-left .p-button-icon-left,
+.p-button-text-icon-right .p-button-icon-right,
+.p-button-icon-only .p-button-icon-left,
+.p-button-text-icon-left .p-button-icon-left,
+.p-button-text-icon-right .p-button-icon-right {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
+    height: 1em;
+}
+
+.p-button-icon-only .p-button-icon-left {
+    top: 50%;
+    left: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+    width: 1em;
+    height: 1em;
+}
+
+.p-button-icon-left {
+    left: .5em;
+}
+
+.p-button-icon-right {
+    right: .5em;
+}
+
+/*button sets*/
+.p-buttonset .p-button {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* workarounds */
+button.p-button::-moz-focus-inner {
+    border: 0; padding: 0; /* reset extra padding in Firefox */
+}
+
+/** Fluid **/
+.p-fluid .p-button {
+    width: 100%;
+}
+
+.p-fluid .p-button-text-icon-left .p-button-text,
+.p-fluid .p-button-text-icon-right .p-button-text {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+/** ButtonSet **/
+.p-fluid .p-buttonset {
+    width: 100%;
+}
+
+.p-fluid .p-buttonset.p-buttonset-1 .p-button {width: 100%;}
+.p-fluid .p-buttonset.p-buttonset-2 .p-button {width: 50%;}
+.p-fluid .p-buttonset.p-buttonset-3 .p-button {width: 33.3%;}
+.p-fluid .p-buttonset.p-buttonset-4 .p-button {width: 25%;}
+.p-fluid .p-buttonset.p-buttonset-5 .p-button {width: 20%;}
+.p-fluid .p-buttonset.p-buttonset-6 .p-button {width: 16.6%;}
+
+@media (max-width: 640px) {
+    .p-fluid .p-buttonset.p-buttonset-1 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-2 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-3 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-4 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-5 .p-button,
+    .p-fluid .p-buttonset.p-buttonset-6 .p-button {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,213 @@
+
+
+.p-button  {
+  display: inline-block;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+  border: none !important;
+  border-radius: $btn-border-radius;
+  transition: $global-transition;
+  box-shadow: none;
+  line-height: inherit;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  cursor: pointer;
+  text-align: center;
+  zoom: 1;
+  overflow: visible; /* the overflow property removes extra width in IE */
+  height: 37px;
+
+}
+.p-link {
+    color: inherit;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+}
+/*button text element */
+.p-button .p-button-text {
+  line-height: inherit;
+}
+
+.p-button-text-only .b-button-text {
+  padding: 7px 18px;
+}
+
+.p-button-icon-only .p-button-text,
+.p-button-icon-only .p-button-label,
+.p-button-text-empty .p-button-text {
+  padding: 8px 18px;
+}
+
+.p-button-text-icon-left .p-button-text {
+  //padding: 7px 11px 8px 33px;
+}
+
+.p-button-text-icon-right .p-button-text {
+  padding: $unit-tiny $unit-large $unit-tiny $unit;
+}
+
+.p-button-small {
+  height: 31px;
+  font-size: $font-size-sm;
+
+  &.p-button-text-icon-left .p-button-text {
+    //padding: $unit-tiny $unit-small $unit-tiny ($unit + $unit-tiny);
+    //font-size: $font-size-sm;
+    padding-left: 28px;
+  }
+
+  .p-button-icon-left {
+    left: 10px;
+    padding-right: 4px;
+  }
+
+  &.p-button-icon-only {
+    width: 2.357em;
+
+    .p-button-icon-left {
+      top: 50%;
+      left: 50%;
+      margin-top: -.5em;
+      margin-left: -.5em;
+      width: 1em;
+      height: 1em;
+      padding-right: 0;
+    }
+
+    .p-button-text{
+      padding: 0.429em;
+    }
+  }
+
+  .p-button-icon-only .p-button-icon-left {
+    top: 50%;
+    left: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+    width: 1em;
+    height: 1em;
+  }
+}
+
+/*button icon element(s) */
+.p-button-icon-only .p-button-icon-left,
+.p-button-text-icon-left .p-button-icon-left,
+.p-button-text-icon-right .p-button-icon-right {
+  margin-top: -6px;
+  //height: $unit;
+}
+
+.p-button-icon-only .p-button-text {
+   text-indent: -9999999px;
+}
+
+.p-button-icon-only .p-button-icon-left {
+     top: 50%;
+     left: 50%;
+     margin-top: -.5em;
+     margin-left: -.5em;
+     width: 1em;
+     height: 1em;
+}
+
+.p-button-icon-only .p-button-icon-left, .p-button-text-icon-left .p-button-icon-left, .p-button-text-icon-right .p-button-icon-right, .p-button-icon-only .p-button-icon-left, .p-button-text-icon-left .p-button-icon-left, .p-button-text-icon-right .p-button-icon-right {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
+    height: 1em;
+}
+
+.p-button-icon-only .p-button-icon-left {
+  margin-top: -6px;
+  //margin-left: -$unit-small;
+  width: $unit;
+  height: $unit;
+}
+
+.p-button-icon-left {
+  left: 11px;
+}
+
+.p-button-icon-right {
+  right: $unit-small;
+}
+
+/*button sets*/
+.p-buttonset .p-button {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* workarounds */
+button.p-button::-moz-focus-inner {
+  border: 0;
+  padding: 0; /* reset extra padding in Firefox */
+}
+
+/** Fluid **/
+.ui-fluid .p-button {
+  width: 100%;
+}
+
+.ui-fluid .p-button-text-icon-left .p-button-text,
+.ui-fluid .p-button-text-icon-right .p-button-text {
+  padding-left: $unit;
+  padding-right: $unit;
+}
+
+/** ButtonSet **/
+.ui-fluid .p-buttonset {
+  width: 100%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-1 .p-button {
+  width: 100%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-2 .p-button {
+  width: 50%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-3 .p-button {
+  width: 33.3%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-4 .p-button {
+  width: 25%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-5 .p-button {
+  width: 20%;
+}
+
+.ui-fluid .p-buttonset.p-buttonset-6 .p-button {
+  width: 16.6%;
+}
+
+@media (max-width: 640px) {
+  .ui-fluid .p-buttonset.p-buttonset-1 .p-button,
+  .ui-fluid .p-buttonset.p-buttonset-2 .p-button,
+  .ui-fluid .p-buttonset.p-buttonset-3 .p-button,
+  .ui-fluid .p-buttonset.p-buttonset-4 .p-button,
+  .ui-fluid .p-buttonset.p-buttonset-5 .p-button,
+  .ui-fluid .p-buttonset.p-buttonset-6 .p-button {
+    width: 100%;
+  }
+}
+
+.p-button-tab {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.p-button.p-button-transparency.p-button-icon-only {
+  border-color: transparent;
+}

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

@@ -0,0 +1,109 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+.p-button {
+  border: $btn-default-border;
+  color: $btn-default-color;
+  background-color: $btn-default-background;
+
+  &:hover {
+    background-color: $btn-default-background--hover;
+  }
+
+  &:active {
+    background-color: $btn-default-background--pressed;
+  }
+
+  &:disabled {
+    cursor: default;
+    color: $btn-disabled-color;
+    background-color: $btn-default-background;
+  }
+}
+
+.p-button.p-state-active {
+  border-color: $ids-theme-status-active;
+  background-color: $ids-theme-status-active;
+  color: $color-base-white;
+}
+
+.p-button-primary {
+  border-color: $btn-primary-border-color;
+  box-shadow: $btn-shadow;
+  background-color: $btn-primary-background;
+
+  &,
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $btn-primary-color;
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: $btn-primary-background--hover;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $btn-primary-background--pressed;
+  }
+
+  &:disabled {
+    background-color: $btn-primary-background--disabled;
+    color: $btn-primary-color--disabled;
+  }
+}
+
+.p-button-secondary {
+  border-color: $btn-secondary-border-color;
+  box-shadow: $btn-shadow;
+  background-color: $btn-secondary-background;
+
+  &,
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $btn-secondary-color;
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: $btn-secondary-background--hover;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $btn-secondary-background--pressed;
+  }
+}
+
+.p-button-tertiary {
+  border-color: $btn-tertiary-border-color;
+  box-shadow: $btn-shadow;
+  background-color: $btn-tertiary-background;
+
+  &,
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $btn-tertiary-color;
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: $btn-tertiary-background--hover;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $btn-tertiary-background--pressed;
+  }
+}
+
+.p-button-dashed {
+  border: 4px dashed $text-color;
+  border: 4px dashed var(--ids-theme-text-color, $text-color);
+}