ng-configcat-publicapi-ui 4.2.2 → 5.0.0

package/src/css/controls.scss

@@ -0,0 +1,390 @@
+@use "@angular/material" as mat;
+
+html > body {
+  .mdc-notched-outline__notch {
+    border-left: none !important;
+  }
+
+  .mdc-notched-outline > * {
+    border-color: var(--input-border-color) !important;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background-color: var(--input-background);
+  }
+
+  .small-density-form-field {
+    @include mat.form-field-density(-5);
+  }
+
+  @mixin input-suffix-button {
+    @include mat.icon-button-density(-5);
+
+    & {
+      color: var(--action-icon-button-color);
+      padding: 0 !important;
+      height: 24px !important;
+      width: 24px !important;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    mat-icon {
+      font-size: 20px;
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  .mat-mdc-form-field.small-form-field {
+    @extend .small-density-form-field;
+
+    mat-label,
+    .mat-mdc-select {
+      font-size: 12px;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      padding: 0 10px;
+    }
+
+    .mat-mdc-form-field-infix {
+      padding-top: 4px !important;
+      padding-bottom: 4px !important;
+      min-height: 32px !important;
+      font-size: 12px;
+    }
+
+    .input-suffix-button {
+      @include input-suffix-button();
+    }
+
+    .input-suffix-button:last-of-type {
+      @extend .input-suffix-button;
+      margin-right: 2px;
+    }
+  }
+
+  .mat-mdc-form-field.suffixed {
+    .mat-mdc-text-field-wrapper {
+      padding: 0 0 0 10px;
+    }
+  }
+
+  .mat-mdc-form-field.suffixed-prefixed {
+    .mat-mdc-text-field-wrapper {
+      padding: 0;
+    }
+  }
+
+  .mat-mdc-form-field.select {
+    .mat-mdc-text-field-wrapper {
+      padding: 0 10px 0 10px;
+    }
+
+    select {
+      padding: 0 15px 0 10px;
+    }
+  }
+
+  .mat-mdc-form-field.select-suffixed {
+    .mat-mdc-text-field-wrapper {
+      padding: 0 0 0 10px;
+    }
+
+    select {
+      padding: 0 15px 0 10px;
+    }
+  }
+
+  .mdc-text-field--focused .mdc-notched-outline > * {
+    border-color: var(--input-outline-focused-color) !important;
+  }
+
+  .mdc-text-field--invalid .mdc-notched-outline > * {
+    border-color: var(--input-outline-invalid-color) !important;
+  }
+
+  .mdc-text-field--invalid .mat-mdc-floating-label > * {
+    color: var(--error-text-color);
+  }
+
+  .mat-mdc-form-field-error {
+    color: var(--error-text-color);
+  }
+
+  .mat-mdc-checkbox {
+    --mat-checkbox-state-layer-size: 28px;
+    --mat-checkbox-label-text-color: var(--text-color);
+
+    .mat-mdc-checkbox-ripple,
+    .mdc-checkbox__ripple {
+      top: -10px;
+      left: -10px;
+      right: -10px;
+      bottom: -10px;
+    }
+
+    label {
+      padding-left: 6px !important;
+    }
+  }
+
+  .mat-mdc-form-field {
+    font-size: 13px;
+
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      padding: 0 8px;
+
+      .mat-mdc-form-field-hint,
+      .mat-mdc-form-field-error {
+        font-size: 10px;
+        letter-spacing: normal;
+        line-height: 10px;
+      }
+    }
+  }
+
+  .mat-mdc-paginator {
+    .mat-mdc-form-field {
+      .mat-mdc-text-field-wrapper {
+        padding: 0 10px;
+      }
+
+      .mat-mdc-form-field-infix {
+        padding-top: 4px !important;
+        padding-bottom: 4px !important;
+        min-height: 32px !important;
+      }
+    }
+  }
+
+  .mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch {
+    max-width: inherit;
+  }
+
+  .top-icon-suffix {
+    .mat-mdc-form-field-icon-suffix {
+      align-self: start;
+      padding-top: 4px;
+    }
+
+    .mat-mdc-form-field-icon-prefix {
+      align-self: start;
+      padding-top: 6px;
+    }
+  }
+
+  .search-bar,
+  .tag-filter {
+    .mat-mdc-form-field-icon-prefix,
+    .mat-mdc-form-field-icon-suffix {
+      color: var(--flag-search-bar-search-icon-color);
+
+      mat-icon {
+        font-size: 22px;
+        width: 22px;
+        height: 22px;
+      }
+    }
+
+    .mat-mdc-form-field-icon-suffix {
+      padding-right: 4px;
+    }
+
+    .mat-mdc-form-field-infix {
+      padding-top: 5px !important;
+      padding-bottom: 4px !important;
+      min-height: 34px !important;
+    }
+  }
+
+  .select-bar {
+    .mat-mdc-form-field {
+      .mat-mdc-form-field-infix {
+        padding-top: 5px !important;
+        padding-bottom: 4px !important;
+        min-height: 34px;
+      }
+    }
+
+    .mat-mdc-text-field-wrapper .mat-mdc-floating-label {
+      top: 50% !important;
+    }
+  }
+
+  .mat-mdc-form-field-icon-suffix {
+    mat-icon.info-mat-icon {
+      color: var(--info-icon-color);
+    }
+  }
+
+  .search-bar .mat-mdc-form-field-icon-suffix {
+    button {
+      width: 26px !important;
+      height: 26px !important;
+    }
+  }
+
+  .tag-filter {
+    .mat-mdc-form-field-icon-prefix,
+    .mat-mdc-form-field-icon-suffix {
+      opacity: 0.9;
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .mat-mdc-form-field-infix {
+      width: 100%;
+    }
+
+    .mat-mdc-standard-chip {
+      border-radius: unset;
+      height: unset;
+
+      .mdc-evolution-chip__action--trailing {
+        padding-right: unset;
+        padding-left: 3px;
+      }
+
+      .mat-mdc-chip-remove {
+        opacity: 1;
+        mat-icon {
+          opacity: var(--flag-tag-filter-chip-remove-opacity);
+          color: var(--flag-tag-filter-chip-remove-color);
+          padding: 0 0 0 2px !important;
+          font-size: 14px;
+          height: 14px;
+          width: 14px;
+        }
+
+        &:hover {
+          mat-icon {
+            opacity: 0.7;
+          }
+        }
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          border-radius: 50%;
+          top: 7px;
+          left: 11px;
+          height: 10px;
+          width: 10px;
+          background-color: var(--flag-delete-background);
+          opacity: 1;
+        }
+      }
+    }
+
+    .mdc-evolution-chip-set {
+      .mdc-evolution-chip {
+        margin-top: 1px;
+        margin-bottom: 1px;
+        height: 18px;
+
+        .mdc-evolution-chip__cell--primary,
+        .mat-mdc-chip-action-label {
+          overflow: hidden;
+          font-size: 11px;
+          padding-left: 0px;
+          padding-right: 0px;
+          color: unset;
+          min-width: 0;
+        }
+      }
+
+      .mdc-evolution-chip-set__chips {
+        align-items: center;
+        flex-flow: row;
+      }
+    }
+
+    .mdc-text-field--outlined {
+      padding-right: 4px;
+    }
+  }
+
+  .tag-option {
+    min-height: 36px;
+
+    .mdc-list-item__primary-text {
+      overflow: unset !important;
+    }
+  }
+
+  ::placeholder {
+    opacity: var(--input-placeholder-opacity) !important;
+  }
+
+  .mat-mdc-menu-panel.full-width-menu {
+    max-width: max-content;
+  }
+
+  .mat-mdc-menu-panel,
+  .mat-mdc-select-panel {
+    .mat-divider {
+      margin: 8px 0 !important;
+    }
+  }
+
+  .mat-mdc-select-panel,
+  .mat-mdc-autocomplete-panel {
+    max-height: 50vh;
+    max-width: 50vh;
+
+    .mdc-list-item__primary-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .mat-mdc-optgroup-label {
+      font-weight: 700;
+      min-height: 40px;
+    }
+
+    .mat-mdc-option {
+      --mat-option-selected-state-label-text-color: var(--theme-color);
+      min-height: 38px;
+    }
+
+    .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
+      padding-left: 24px;
+    }
+  }
+
+  .cdk-overlay-pane.select-overlay-panel {
+    min-width: fit-content;
+  }
+
+  &[data-theme="dark"] .mat-mdc-autocomplete-panel,
+  &[data-theme="dark"] .mat-mdc-dialog-surface,
+  &[data-theme="dark"] .mat-mdc-select-panel,
+  &[data-theme="dark"] .mat-mdc-menu-panel {
+    border: var(--popup-panel-border);
+  }
+
+  &[data-theme="dark"] .mat-mdc-autocomplete-panel,
+  &[data-theme="dark"] .mat-mdc-select-panel,
+  &[data-theme="dark"] .mat-mdc-menu-panel {
+    margin: 3px 0;
+  }
+
+  &[data-theme="dark"] .mat-mdc-autocomplete-panel,
+  &[data-theme="dark"] .mat-mdc-select-panel {
+    border-top-left-radius: 4px !important;
+    border-top-right-radius: 4px !important;
+  }
+}

package/src/css/dialog.scss

@@ -0,0 +1,63 @@
+html > body {
+  .mat-mdc-dialog-title.draggable {
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+  }
+
+  .mat-mdc-dialog-title.draggable:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+  }
+
+  // fix for malformed dialog titles
+  // see: https://github.com/angular/components/issues/26539
+  .mat-mdc-dialog-title {
+    padding-top: 18px;
+    &::before {
+      display: none;
+    }
+  }
+
+  .mat-mdc-dialog-container {
+    .mat-mdc-dialog-actions {
+      padding-left: 24px;
+      padding-bottom: 18px;
+      gap: 8px;
+
+      .mat-mdc-button-base + .mat-mdc-button-base {
+        margin-left: unset;
+      }
+    }
+
+    .mat-mdc-dialog-content {
+      color: var(--panel-description-color);
+      font-size: 13px;
+      line-height: var(--text-line-height);
+
+      ul {
+        padding-inline-start: 30px;
+        margin-block-start: 6px;
+        margin-block-end: 3px;
+      }
+    }
+  }
+
+  .saving-indicator-panel .mat-mdc-dialog-container {
+    --mat-dialog-container-shape: 16px;
+    --mat-dialog-content-padding: 14px 20px;
+
+    .mat-mdc-dialog-surface {
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .saving-indicator-backdrop {
+    background-color: var(--saving-indicator-backdrop-color);
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}

package/src/css/icon.scss

@@ -0,0 +1,7 @@
+html > body {
+  // there's a bug where circular icons with small font size are cropped at the top and bottom
+  // https://github.com/google/material-design-icons/issues/679
+  .mat-icon.icon-transform-rotate {
+    transform: rotate(0.03deg);
+  }
+}

package/src/css/slider.scss

@@ -0,0 +1,82 @@
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  width: 66px;
+  height: 30px;
+  margin-left: 4px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  display: none;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--flag-bool-slider-off);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  width: 66px;
+  height: 30px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 22px;
+  width: 22px;
+  left: 4px;
+  bottom: 4px;
+  background-color: var(--flag-bool-slider-remaining);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: var(--flag-bool-slider-on);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--flag-bool-slider-on);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(36px);
+  -ms-transform: translateX(36px);
+  transform: translateX(36px);
+}
+
+/* Rounded sliders */
+
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.slider:after {
+  content: "Off";
+  color: var(--flag-bool-slider-remaining);
+  display: block;
+  position: absolute;
+  transform: translate(-14%, -50%);
+  top: 50%;
+  left: 50%;
+  font-size: 10px;
+  font-family: Verdana, sans-serif;
+}
+
+input:checked + .slider:after {
+  content: "On";
+  transform: translate(-91%, -50%);
+}

package/src/css/snackbar.scss

@@ -0,0 +1,16 @@
+html > body {
+  .mat-mdc-snack-bar-container {
+    .mdc-snackbar__label {
+      a {
+        color: var(--notification-font-color);
+        text-decoration: underline;
+      }
+    }
+
+    .mdc-snackbar__surface {
+      background-color: transparent !important;
+      border: unset !important;
+      padding-right: unset !important;
+    }
+  }
+}

package/src/css/table.scss

@@ -0,0 +1,142 @@
+@use '@angular/material' as mat;
+
+html > body {
+  .data-table,
+  .mat-mdc-table {
+    border-spacing: 0;
+    background-color: unset;
+
+    thead tr {
+      background-color: var(--table-header-color) !important;
+      height: var(--table-row-height) !important;
+    }
+
+    tbody tr:not(.detail-row) {
+      height: var(--table-row-height) !important;
+    }
+
+    tbody tr:not(.detail-row):hover {
+      background-color: var(--table-row-hover-background) !important;
+    }
+
+    tbody tr td,
+    thead tr th {
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+      font-size: 12px !important;
+      line-height: normal !important;
+      text-align: left;
+    }
+
+    thead tr th {
+      color: var(--mat-table-header-headline-color) !important;
+      font-weight: var(--table-header-font-weight) !important;
+      border-top: var(--table-border) !important;
+      border-bottom: var(--table-border) !important;
+    }
+
+    thead tr th:last-of-type {
+      border-right: var(--table-border) !important;
+      border-top-right-radius: var(--table-border-radius);
+    }
+
+    thead tr th:first-of-type {
+      border-left: var(--table-border) !important;
+      border-top-left-radius: var(--table-border-radius);
+    }
+
+    tbody tr td:first-of-type {
+      border-left: var(--table-border) !important;
+    }
+
+    tbody tr td:last-of-type {
+      border-right: var(--table-border) !important;
+    }
+
+    tbody tr:not(:last-of-type) {
+      td {
+        border-bottom: 1px solid var(--table-cell-border-color);
+      }
+    }
+
+    tbody tr:last-of-type {
+      td {
+        border-bottom: var(--table-border) !important;
+      }
+
+      td:first-of-type {
+        border-bottom-left-radius: var(--table-border-radius);
+      }
+
+      td:last-of-type {
+        border-bottom-right-radius: var(--table-border-radius);
+      }
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: var(--table-even-row-color);
+    }
+
+    tbody tr:nth-child(odd) {
+      background-color: var(--table-odd-row-color);
+    }
+
+    .green {
+      color: var(--table-status-green);
+    }
+
+    .red {
+      color: var(--table-status-red);
+    }
+  }
+
+  .mat-mdc-paginator-container {
+    @include mat.form-field-density(-5);
+  }
+
+  .mat-mdc-paginator {
+    background-color: unset;
+  }
+
+  .mat-column-actions {
+    width: 100px;
+    max-width: 100px;
+    min-width: 100px;
+    text-align: right !important;
+  }
+
+  .icon-column {
+    mat-icon {
+      color: var(--action-icon-button-color) !important;
+    }
+  }
+
+  .center-column {
+    text-align: center !important;
+  }
+
+  .mat-mdc-table {
+    .center-column {
+      .mat-sort-header-container {
+        justify-content: center;
+        margin-left: 18px;
+      }
+    }
+  }
+
+  .icon-btn-column,
+  .mat-column-actions {
+    .mat-mdc-icon-button {
+      color: var(--action-icon-button-color) !important;
+    }
+
+    .mat-mdc-icon-button:disabled {
+      opacity: var(--action-icon-button-disabled-opacity) !important;
+    }
+  }
+
+  .scrollable {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+}