ngx-edu-sharing-ui 10.0.6 → 10.0.8

package/README.md

@@ -38,3 +38,6 @@ async ngOnInit() {
 
 In your scss, make sure to include the global variables via
 `@import "node-modules/ngx-edu-sharing-ui/assets/scss/variables";`
+
+and in your `angular.json`, add it to the `"styles"`
+`"node_modules/ngx-edu-sharing-ui/assets/scss/material_theme.scss",`

package/assets/scss/branding.scss

@@ -0,0 +1,10 @@
+$primary: var(--primary);
+$primaryMediumLight: var(--palette-primary-200);
+$primaryLight: var(--palette-primary-100);
+$primaryComplementary: var(--accent);
+$primaryDark: var(--palette-primary-900);
+$textOnPrimary: var(--light-primary-text);
+$textOnPrimaryLight: rgba(var(--light-primary-text), 0.75);
+$textPrimary: var(--palette-foreground-text);
+$workspaceTopBarBackground: #383838;
+$workspaceTopBarFontColor: #fff;

package/assets/scss/material-theme.scss

@@ -0,0 +1,619 @@
+@use '@angular/material' as mat;
+@use 'angular-material-css-vars' as mat-css-vars;
+
+@import 'variables';
+@import 'variables-scss';
+@import 'branding';
+
+// optional
+$mat-css-dark-theme-selector: '.isDarkTheme';
+$mat-css-light-theme-selector: '.isLightTheme';
+
+// init theme
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (impomatrted above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+
+$custom-typography: mat.m2-define-typography-config(
+    $font-family: $primaryFontFamily,
+    $body-1: mat.m2-define-typography-level(100%, normal, 400),
+    $body-2: mat.m2-define-typography-level(100%, normal, 400),
+    // mat-optgroups labels, input placeholder
+    $subtitle-1: mat.m2-define-typography-level(90%, normal, 400),
+    // mat-table cells
+    $subtitle-2: mat.m2-define-typography-level(90%, normal, 600),
+    // mat-table header
+    $button: mat.m2-define-typography-level(100%, normal, 400),
+    $headline-1: mat.m2-define-typography-level(150%, normal, 400),
+    $headline-2: mat.m2-define-typography-level(140%, normal, 400),
+) !default;
+// Override typography for all Angular Material, including mat-base-typography and all components.
+
+@mixin app-theme($theme) {
+    // Your app theme
+}
+
+@include mat-css-vars.init-material-css-vars($typography-config: $custom-typography)
+    using($mat-css-theme) {
+    @include app-theme($mat-css-theme);
+}
+
+$dark-dividers: rgba(black, 0.12);
+$dark-disabled-text: rgba(black, 0.54); // increased contrast
+$dark-secondary-text: rgba(black, 0.54);
+
+:root {
+    --mdc-fab-container-color: #{$backgroundColor};
+}
+
+.mdc-button {
+    span {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+}
+
+/** custom project specifics */
+[matripplecolor='primary'] {
+    > .mat-ripple-element {
+        background-color: $primary;
+        opacity: 0.1;
+    }
+}
+/*
+  material toggle buttons
+ */
+mat-button-toggle-group {
+    .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
+        color: $textOnPrimary;
+        background-color: $primary;
+    }
+    .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
+        background-color: $primary;
+    }
+    /*
+      bugfix: overlay is not big enough
+     */
+    .mat-button-toggle-checked .mat-button-toggle-focus-overlay {
+        border-bottom-width: 100px;
+    }
+    &.toggle-full-size {
+        width: 100%;
+        mat-button-toggle {
+            flex-grow: 1;
+        }
+    }
+}
+.mat-tooltip {
+    background-color: $primaryVeryLight !important;
+    color: $textMain !important;
+    font-weight: bold;
+}
+.mdc-tab__content {
+    .mdc-tab__text-label {
+        display: flex;
+        gap: 10px; // padding for icons
+    }
+}
+mat-tab-group {
+    mat-tab-header {
+        background-color: $backgroundColor;
+    }
+}
+.mat-tab-group.mat-dark {
+    .mat-tab-header {
+        background-color: $workspaceTopBarBackground;
+    }
+    .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
+        border-color: $workspaceTopBarFontColor;
+    }
+    .mat-tab-labels {
+        background-color: $workspaceTopBarBackground;
+        .mat-tab-label {
+            color: $workspaceTopBarFontColor;
+            &.cdk-keyboard-focused:not(.mat-tab-disabled) {
+                background-color: rgba(255, 255, 255, 0.2);
+            }
+            .mat-ripple-element {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+        }
+    }
+    .mat-ink-bar {
+        background-color: $primaryLight;
+    }
+}
+// a mat table with clickable columns
+.mat-table-clickable {
+    .mat-row {
+        @include clickable();
+        transition: all $transitionNormal;
+        &:hover {
+            background-color: $itemSelectedBackground;
+        }
+    }
+}
+.mat-mdc-fab.mat-white,
+.mat-mini-fab.mat-white {
+    // white background, primary as content color
+    color: $primary;
+}
+.mat-mdc-unelevated-button:not(:disabled),
+.mat-mdc-raised-button:not(:disabled),
+.mat-mdc-fab:not(:disabled),
+.mat-mdc-mini-fab:not(:disabled) {
+    // `color="warn"`
+    &.mat-warn {
+        // Red background, same as negative
+        background-color: $warning;
+        color: white;
+    }
+    &.status-negative {
+        background-color: $colorStatusNegative;
+        color: white;
+    }
+    &.status-warning {
+        background-color: $colorStatusWarning;
+        color: white;
+    }
+    &.status-positive {
+        background-color: $colorStatusPositive;
+        color: white;
+    }
+}
+.mat-form-field .mat-button-select-arrow {
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    background-color: #fff;
+}
+// align prefix in input fields
+.mat-form-field-appearance-outline .mat-form-field-prefix {
+    top: 0.4em !important;
+    left: -0.1em;
+}
+// align subscript/bottom hint to complete left/right
+.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
+    padding: 0 !important;
+}
+.mat-form-field.mat-form-field-no-padding {
+    .mat-form-field-wrapper {
+        padding-bottom: 0;
+    }
+}
+.mat-form-field.mat-form-field-max-width {
+    .mat-form-field-wrapper {
+        width: 100%;
+    }
+}
+// form border on hover
+.mat-form-field-appearance-outline {
+    --mdc-outlined-text-field-hover-outline-color: #{mat-css-vars.mat-css-color-primary(300)};
+}
+.mat-form-field-dark {
+    input,
+    textarea {
+        caret-color: $primaryDark;
+    }
+    .mat-form-field-outline,
+    .mat-form-field-label {
+        color: rgba(0, 0, 0, 0.6);
+    }
+    &.mat-focused {
+        .mat-form-field-outline,
+        .mat-form-field-label {
+            color: rgba(0, 0, 0, 0.7);
+        }
+    }
+}
+.mat-mdc-form-field.mat-form-field-bright {
+    input,
+    textarea {
+        --mdc-outlined-text-field-caret-color: #{$primaryLight};
+    }
+    --mdc-outlined-text-field-label-text-color: rgba(255, 255, 255, 0.87);
+    --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, 0.6);
+    --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, 0.87);
+    --mdc-outlined-text-field-focus-outline-color: #{mat-css-vars.mat-css-color-primary(100)};
+    .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
+        color: mat-css-vars.mat-css-color-primary(50);
+    }
+    --mdc-outlined-text-field-input-text-color: rgba(255, 255, 255);
+}
+mat-slide-toggle.mat-mdc-slide-toggle.mat-primary-bright {
+    --mdc-switch-unselected-handle-color: #fff;
+    --mdc-switch-unselected-hover-handle-color: #{$primaryVeryLight};
+    --mdc-switch-unselected-focus-handle-color: #{$primaryVeryLight};
+    --mdc-switch-unselected-pressed-handle-color: #{$primaryVeryLight};
+    --mdc-switch-unselected-icon-color: #{$textLight};
+    --mdc-switch-selected-handle-color: #fff;
+    --mdc-switch-selected-hover-handle-color: #{$primaryVeryLight};
+    --mdc-switch-selected-focus-handle-color: #{$primaryVeryLight};
+    --mdc-switch-selected-pressed-handle-color: #{$primaryVeryLight};
+    --mdc-switch-selected-icon-color: #{$primary};
+    .mdc-form-field label {
+        color: #fff;
+    }
+}
+.mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-thumb-container .mat-focus-indicator {
+    @include setGlobalKeyboardFocus();
+}
+
+// will fix g and y to cut off with custom font
+input.mat-input-element,
+mat-label,
+.mat-select-value {
+    line-height: normal;
+}
+.mat-input-element::placeholder {
+    color: $placeholderColor;
+}
+// will better align the border label for the outlined input
+.mat-form-field-appearance-outline {
+    $mat-form-field-floating-label-offset: 0.3em;
+    // Add the offset value defined above to all relevant default values
+    .mat-form-field-label-wrapper {
+        top: calc(-0.9375em - #{$mat-form-field-floating-label-offset});
+        padding-top: calc(0.9375em + #{$mat-form-field-floating-label-offset});
+    }
+    .mat-form-field-label {
+        top: calc(1.9375em + #{$mat-form-field-floating-label-offset});
+    }
+    &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
+    &.mat-form-field-can-float
+        .mat-input-server:focus
+        + .mat-form-field-label-wrapper
+        .mat-form-field-label {
+        transform: translateY(calc(-1.68748em - #{$mat-form-field-floating-label-offset}))
+            scale(0.75);
+    }
+}
+.mat-autocomplete-high {
+    max-height: 350px;
+}
+.mdc-button__label {
+    display: inline-flex;
+}
+.mat-flat-button {
+    padding: 0 15px !important;
+    .mdc-button__label {
+        color: $textOnPrimary !important;
+    }
+    background-color: $primary !important;
+}
+body {
+    // Background for raised button
+    --mdc-protected-button-container-color: white;
+}
+// improve default positioning of outlined fields with label
+.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+    .mat-mdc-form-field-infix {
+        padding-top: 20px;
+        min-height: unset;
+    }
+}
+.mat-mdc-checkbox {
+    .mdc-checkbox__background {
+        border-color: $primary !important;
+
+        background-color: #fff !important;
+
+        .mdc-checkbox__checkmark {
+            color: #fff !important;
+        }
+    }
+    &.mdc-checkbox--disabled {
+        .mdc-checkbox__background {
+            border-color: $primaryLight !important;
+        }
+        &.mat-mdc-checkbox-checked,
+        &.mat-mdc-checkbox-indeterminate {
+            .mdc-checkbox__background {
+                background-color: $primaryLight !important;
+            }
+        }
+    }
+    &.mat-mdc-checkbox-checked,
+    &.mat-mdc-checkbox-indeterminate {
+        .mdc-checkbox__background {
+            background-color: $primary !important;
+            .mdc-checkbox__checkmark,
+            .mdc-checkbox__mixedmark {
+                color: #fff !important;
+                border-color: #fff !important;
+            }
+        }
+    }
+}
+.mat-radio-container {
+    .mat-radio-outer-circle {
+        border-color: $primary;
+    }
+}
+.mat-mdc-checkbox-label {
+    line-height: 17pt !important;
+    font-size: 1rem;
+    color: $textMain;
+    > .label-secondary {
+        line-height: normal !important;
+    }
+}
+.mat-mdc-checkbox-disabled {
+    $disabled-color: #919191; // 3:1 on #fafafa (fill-color of checkmark)
+    &.mat-checkbox-checked,
+    &.mat-checkbox-indeterminate {
+        .mat-checkbox-background {
+            background-color: $disabled-color;
+        }
+    }
+    &:not(.mat-checkbox-checked) {
+        .mat-checkbox-frame {
+            border-color: $disabled-color;
+        }
+    }
+}
+.mat-mdc-checkbox.cdk-keyboard-focused .mat-focus-indicator {
+    @include setGlobalKeyboardFocus();
+}
+.mat-mdc-raised-button {
+    &:not(.mat-primary) {
+        color: $primary !important;
+    }
+    &.mat-primary {
+        color: $textOnPrimary !important;
+    }
+    &.mat-warn {
+        color: $textOnPrimary !important;
+    }
+}
+.mat-mdc-button.mat-cancel {
+    color: $textMediumLight;
+    &:hover {
+        color: $primary;
+    }
+}
+// Undo default style of mat-icon.
+//
+// We assign icons the class .mat-icon so other Material components will treat them as icons, but we
+// don't use the actual mat-icon component. Some styles rely on setting the elements width and
+// height by changing its font-size.
+//
+// Note that the default style of mat-icon is only loaded when the mat-icon component is used, which
+// is rare but does happen.
+i.mat-icon {
+    height: 1em;
+    width: 1em;
+    > .svg-icons {
+        width: 20px;
+        height: 20px;
+    }
+}
+button {
+    &.mat-mdc-button,
+    &.mat-mdc-unelevated-button,
+    &.mat-mdc-raised-button,
+    &.mat-mdc-icon-button,
+    &.mat-mdc-fab {
+        &.cdk-keyboard-focused {
+            @include setGlobalKeyboardFocus();
+        }
+    }
+}
+.mat-button-no-uppercase .mat-button-wrapper {
+    text-transform: none;
+}
+.mat-calendar-table-header-divider {
+    display: none;
+}
+.mat-option {
+    font-size: 100%;
+    .mat-option-primary {
+        line-height: initial;
+        font-size: 90%;
+    }
+
+    .mat-option-secondary {
+        font-size: 75%;
+        line-height: initial;
+        color: $textLight;
+    }
+    &:hover:not(.mat-option-disabled),
+    .mat-option:focus:not(.mat-option-disabled) {
+        background-color: $buttonHoverBackground;
+    }
+    &.mat-focus-indicator.mat-active::before {
+        content: '';
+    }
+    &.mat-focus-indicator::before {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        pointer-events: none;
+        @include setGlobalKeyboardFocus($mode: 'border');
+    }
+}
+
+label .label-secondary {
+    font-size: 90%;
+    color: $textLight;
+}
+/* a badge (usually counter) inside an (icon) button
+ */
+.mat-button-badge {
+    position: absolute;
+    right: -3px;
+    top: -3px;
+    color: $textOnPrimary;
+    background-color: $colorStatusNegative;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    font-weight: bold;
+    font-size: 0.8em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.monaco-editor {
+    outline: none !important;
+    background-color: transparent !important;
+    mat-label,
+    mat-hint {
+        padding: 2px 0;
+        font-size: 75%;
+        color: $textLight;
+    }
+}
+.mat-card-subtitle,
+mat-hint,
+mat-slide-toggle .mdc-form-field label {
+    color: $textLight;
+}
+// prevent umlauts from cutting off
+mat-hint,
+mat-error {
+    font-size: $fontSizeSmall;
+    line-height: 1.5;
+}
+
+// Show toggle on the right place
+.toggle-reverse {
+    .mdc-form-field {
+        flex-direction: row-reverse;
+        gap: 10px;
+    }
+}
+.mat-slide-toggle-twoside {
+    display: flex;
+    align-items: center;
+    > mat-label {
+        color: $textLight;
+        padding: 0 8px;
+    }
+}
+mat-label.mat-label-standalone {
+    font-size: $fontSizeSmall;
+    color: $textLight;
+}
+/* fix for mat select icons */
+.mat-select-icon {
+    .mat-option-text {
+        display: flex;
+        align-items: center;
+        > i {
+            margin-right: 5px;
+        }
+    }
+}
+mat-select.mat-select-icon {
+    mat-select-trigger {
+        max-height: 22px;
+        display: flex;
+        align-items: center;
+        > i {
+            color: $textLight;
+            margin-right: 5px;
+        }
+    }
+    .mat-select-arrow-wrapper {
+        transform: none;
+    }
+}
+
+.mat-select-panel,
+.mat-autocomplete-panel {
+    .mat-option:not(.mat-option-disabled) {
+        color: $primary;
+    }
+    .mat-option.mat-selected:not(.mat-option-multiple) {
+        background-color: $cardLightBackground;
+        font-weight: bold;
+    }
+}
+.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+    background-color: var(--palette-primary-100) !important;
+    .mat-mdc-chip-remove {
+        color: $primary !important;
+        opacity: 1 !important;
+    }
+}
+.mat-chip-list {
+    .mat-chip.mat-standard-chip {
+        height: unset; // Override height: 1px
+        background-color: $primaryLight;
+        overflow: hidden;
+        &.indeterminate {
+            background: repeating-linear-gradient(
+                -45deg,
+                $primaryLight,
+                $primaryLight 5px,
+                rgba(0, 0, 0, 0.04) 5px,
+                rgba(0, 0, 0, 0.04) 10px
+            );
+            color: $textLight;
+        }
+        &.cdk-keyboard-focused {
+            @include setGlobalKeyboardFocus();
+        }
+        .mat-chip-remove {
+            // align somewhat townwards for better centering
+            line-height: 1.05;
+            color: $primary;
+            opacity: 1;
+        }
+    }
+}
+.mat-mdc-menu-panel {
+    min-height: initial !important;
+    overflow-x: hidden !important; // prevent scrollbars on FF
+}
+
+.cdk-drag-preview {
+    border-radius: 4px;
+    @include materialShadowBottom();
+}
+
+.cdk-drag-placeholder {
+    opacity: 0.5;
+}
+
+.cdk-drag-animating {
+    transition: transform $transitionNormal cubic-bezier(0, 0, 0.2, 1);
+}
+mat-form-field {
+    .mat-form-field-suffix {
+        > span {
+            position: relative;
+            top: -0.25em;
+            color: $textLight;
+            padding-left: 5px;
+        }
+    }
+    &.mat-form-field-disabled {
+        .mat-form-field-suffix {
+            > span {
+                color: $textLight;
+                opacity: 0.5;
+            }
+        }
+    }
+}
+
+@include contrastMode(global) {
+    // We cannot archive sufficient contrast through a Material theme since opacities for color
+    // values are hardcoded in the Material component's theme files --- independently of opacities
+    // given by the theme.
+    .mat-form-field-appearance-outline .mat-form-field-outline:not(.mat-form-field-outline-thick) {
+        color: rgba(black, 0.42);
+    }
+    .cdk-overlay-pane .suggestion-card,
+    .cdk-overlay-pane .mat-autocomplete-panel,
+    .cdk-overlay-pane .mat-mdc-menu-panel,
+    .cdk-overlay-pane .mat-tooltip {
+        outline: 1px solid rgba(black, 0.42);
+    }
+}