ngx-edu-sharing-ui 0.7.0

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/edu-sharing-ui/tsconfig.lib.json",
+          "projects/edu-sharing-ui/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,40 @@
+# EduSharingUi
+
+This library bundles base ui components from edu-sharing.
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.
+
+## Required Init tasks
+
+Your project must provide a Toast service (for message viewing). You may use a mat-snackbar for displaying.
+
+in your app.module.ts:
+
+```ts
+import { Toast as ToastAbstract } from 'ngx-edu-sharing-ui';
+providers: [
+    { provide: ToastAbstract, useClass: Toast },
+    // ...
+];
+```
+
+Make sure that your `Toast`-Service extends the abstract Toast service.
+
+You might also provide other services for extended functionality, including
+`Toast`, `OptionsHelperService`, `KeyboardShortcutsService`, `AppService`.
+
+Check out our sample angular application for a full example
+Check the `app.module.ts` for registration.
+
+In one of your primary components (i.e. router) you need to initalize the material theme and translations:
+
+```ts
+async ngOnInit() {
+  this.materialCssVarsService.setPrimaryColor('#2e9e9b');
+  this.materialCssVarsService.setAccentColor('#2e9e9b');
+  await this.translationsService.initialize().toPromise()
+}
+```
+
+In your scss, make sure to include the global variables via
+`@import "node-modules/ngx-edu-sharing-ui/assets/scss/variables";`

package/assets/scss/mixins.scss

@@ -0,0 +1,95 @@
+@mixin clickable() {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+@mixin limitLineCount($count, $lineHeight: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-height: $lineHeight + em;
+    max-height: $count * $lineHeight + em;
+    -webkit-line-clamp: $count; /* number of lines to show */
+    -webkit-box-orient: vertical;
+    /* autoprefixer: off */
+}
+@mixin materialShadow($important: false) {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) if($important, !important, null);
+}
+@mixin materialShadowBottom($opacity: 0.1) {
+    box-shadow: 0 3px 3px rgba(0, 0, 0, $opacity);
+}
+@mixin materialShadowSmall($important: false) {
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) if($important, !important, null);
+}
+@mixin materialShadowMediumLarge($important: false, $opacity: 0.6) {
+    box-shadow: 0 0 25px rgba(0, 0, 0, $opacity) if($important, !important, null);
+}
+@mixin materialScrollbar() {
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar {
+        height: 10px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        max-width: 20px;
+        border-radius: 10px;
+        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+        background-color: var(--primary);
+    }
+}
+@mixin removeDefaultFocus() {
+    outline: none;
+}
+@mixin setGlobalKeyboardFocus($mode: 'outline') {
+    //respect element border radius
+    @include removeDefaultFocus();
+    @if $mode== 'outline' {
+        outline: var(--focusWidth) solid var(--palette-primary-300);
+        outline-offset: 2px;
+    } @else if $mode== 'border' {
+        border: var(--focusWidth) solid var(--palette-primary-300);
+    }
+}
+// Apply the content styles in contrast mode. This is just enough contrast to be WCAG complient ---
+// not a high-contrast mode.
+//
+// Call without arguments for use in encapsulated component styles, e.g.,
+//     @include contrastMode {
+//         // Styles to apply in contrast mode
+//     }
+// To us in global context, pass 'global' as first argument, e.g.,
+//     @include contrastMode(global) { /* ... */ }
+@mixin contrastMode($scope: encapsulated) {
+    $contrastModeSelector: 'body.es-contrast-mode';
+    @if $scope == encapsulated {
+        :host-context(#{$contrastModeSelector}) & {
+            @content;
+        }
+    } @else if $scope == global {
+        #{if(&, '#{$contrastModeSelector} &', $contrastModeSelector)} {
+            @content;
+        }
+    } @else {
+        @error "Invalid scope #{$scope}.";
+    }
+}
+@mixin blurImage($blurStrength: 25px) {
+    position: absolute;
+    left: -$blurStrength * 2;
+    top: -$blurStrength * 2;
+    width: calc(100% + #{$blurStrength * 4});
+    height: calc(100% + #{$blurStrength * 4});
+    z-index: 0;
+    overflow: hidden;
+    filter: blur($blurStrength);
+    object-fit: cover;
+    opacity: 0.7;
+}

package/assets/scss/variables.scss

@@ -0,0 +1,33 @@
+/**
+    declarations of dynamic css variabled
+    will only be included once via angular to prevent duplicate :root entries
+ */
+:root {
+    --primary: var(--palette-primary-500);
+    --warning: #cd2457;
+    --tableIconSize: 38px;
+    --textLight: #585858;
+    --textMediumLight: #888;
+    --textMain: #383838;
+    --cardWidth: 240px;
+    --colorStatusPositive: #40bf8e;
+    --colorStatusNegative: var(--warning);
+    --colorStarActive: #ba7c00;
+    --nodeVirtualColor: #42ca8d;
+    --nodeVirtualColorLight: #b8fcdd;
+    --transitionNormal: 0.2s;
+    --focusWidth: 2px;
+    --fontSizeXSmall: 85%;
+    --mobileWidth: 700px;
+    --mobileStage: 100px;
+    --itemSelectedTextColor: var(--palette-primary-700);
+    --listItemSelectedBackground: var(--palette-primary-50);
+    --listItemSelectedBackgroundEffect: linear-gradient(
+            to right,
+            var(--primary) 0,
+            var(--primary) 5px,
+            var(--palette-primary-50) 5px,
+            var(--palette-primary-50) 5px
+        )
+        no-repeat;
+}

package/karma.conf.js

@@ -0,0 +1,42 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma'),
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false, // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true, // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, '../../coverage/edu-sharing-ui'),
+            subdir: '.',
+            reporters: [{ type: 'html' }, { type: 'text-summary' }],
+        },
+        reporters: ['progress', 'kjhtml'],
+        browsers: ['Chrome'],
+        customLaunchers: {
+            ChromeHeadlessCI: {
+                base: 'ChromeHeadless',
+                flags: ['--no-sandbox'],
+            },
+        },
+        restartOnFileChange: true,
+    });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/edu-sharing-ui",
+  "assets": [
+    "assets/**"
+  ],
+  "lib": {
+    "entryFile": "src/module.ts"
+  }
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ngx-edu-sharing-ui",
+  "version": "0.7.0",
+  "license": "GNU GPL v2",
+  "description": "Angular components for Edu-Sharing UX parts",
+  "peerDependencies": {
+    "@angular/cdk": "~13.3.9",
+    "@angular/common": "^13.3.0",
+    "@angular/core": "^13.3.0",
+    "@angular/material": "13.3.9",
+    "material-design-icons": "^3.0.1",
+    "@ngx-translate/core": "^14.0.0",
+    "angular-material-css-vars": "^3.0.0",
+    "rxjs": "^6.6.7"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/src/lib/actionbar/actionbar.component.html

@@ -0,0 +1,59 @@
+<es-dropdown
+  #dropdownRef
+  [options]="optionsMenu"
+  [showDisabled]="showDisabled"
+  [position]="dropdownPosition"
+></es-dropdown>
+<div
+  class="actionbar"
+  [class.actionbar-all-flat]="style === 'flat'"
+  [class.actionbar-background-dark]="backgroundType === 'dark'"
+  [class.actionbar-background-primary]="backgroundType === 'primary'"
+  [class.actionbar-round]="appearance === 'round'"
+  [class.actionbar-icon-button]="appearance === 'icon-button'"
+>
+  <button
+    *ngFor="let option of optionsAlways; let i = index"
+    mat-button
+    color="primary"
+    [disabled]="!option.isEnabled"
+    [class.display-none]="!option.isEnabled && !showDisabled"
+    [class.mat-flat-button]="shouldHighlight(i, option)"
+    matTooltip="{{ option | optionTooltip }}"
+    [attr.aria-label]="option.name | translate"
+    (click)="click(option)"
+  >
+    <i [esIcon]="option.icon"></i>
+    <span class="action-always-caption" *ngIf="option.showName && appearance === 'button'">
+      {{ option.name | translate }}</span
+    >
+  </button>
+  <button
+    mat-button
+    color="primary"
+    class="more"
+    [attr.aria-label]="'OPTIONS.SHOW_ALL_OPTIONS' | translate"
+    [matMenuTriggerFor]="dropdownRef.menu"
+    *ngIf="canShowDropdown()"
+    data-test="more-actions-button"
+  >
+    <i esIcon="more_vert" [aria]="false"></i>
+  </button>
+  <div
+    *ngIf="optionsToggle.length"
+    class="actionToggle"
+    [class.actionToggleDivider]="optionsAlways.length"
+  >
+    <button
+      *ngFor="let option of optionsToggle"
+      mat-icon-button
+      matTooltip="{{ option.name | translate }}"
+      [attr.aria-label]="option.name | translate"
+      (click)="click(option)"
+      [class.disabled]="!option.isEnabled"
+      attr.data-test="toggle-{{ option.name }}"
+    >
+      <i [esIcon]="option.icon" [aria]="false"></i>
+    </button>
+  </div>
+</div>

package/src/lib/actionbar/actionbar.component.scss

@@ -0,0 +1,123 @@
+@import '../../../assets/scss/mixins';
+
+.actionbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.actionToggle > button {
+    color: var(--textLight);
+}
+button {
+    min-width: unset;
+}
+
+.light {
+    color: #fff;
+    background: transparent;
+}
+.disabled {
+    pointer-events: all;
+}
+.light a {
+    color: #fff;
+}
+
+.actionToggleDivider {
+    padding-left: 10px;
+    border-left: 1px solid #ddd;
+}
+.more {
+    color: var(--primary);
+    background-color: transparent;
+}
+.actionbar-background-dark {
+    .mat-button {
+        color: rgb(var(--palette-foreground-text-dark));
+        &:disabled {
+            color: rgba(var(--palette-foreground-text-dark), 0.75);
+        }
+    }
+}
+.actionbar-background-primary {
+    .mat-button {
+        color: rgb(var(--palette-foreground-text-dark));
+    }
+    .mat-flat-button {
+        background-color: #fff;
+        color: var(--primary);
+        &:disabled {
+            color: var(--textLight);
+        }
+    }
+}
+.actionbar-round {
+    .mat-button,
+    .mat-flat-button {
+        width: 45px;
+        height: 45px;
+        justify-content: center;
+    }
+    button {
+        border-radius: 50%;
+        @include materialShadow();
+    }
+    &.actionbar-background-primary {
+        .mat-button {
+            background-color: #fff;
+            color: var(--primary);
+        }
+    }
+    &.actionbar-all-flat button {
+        background: white;
+        color: var(--primary);
+        &:disabled {
+            color: var(--textLight);
+        }
+    }
+    .more,
+    .actionAlways {
+        background: white;
+        color: var(--primary);
+        display: flex;
+        width: 45px;
+        height: 45px;
+        line-height: 45px;
+        text-align: center;
+        align-items: center;
+        .edu-icons,
+        .material-icons {
+            position: relative;
+            font-size: 24px;
+        }
+        span {
+            display: none;
+        }
+    }
+    .action-always {
+        .edu-icons,
+        .material-icons {
+            right: 4px !important;
+        }
+    }
+}
+
+@mixin icon-button() {
+    .action-always {
+        padding: 0 1rem;
+    }
+    .action-always-caption {
+        display: none;
+    }
+    .mat-flat-button {
+        padding: 5px;
+    }
+}
+
+@media screen and (max-width: (calc(var(--mobileWidth) + var(--mobileStage) * 4))) {
+    @include icon-button();
+}
+
+.actionbar-icon-button {
+    @include icon-button();
+}

package/src/lib/actionbar/actionbar.component.ts

@@ -0,0 +1,174 @@
+import { trigger } from '@angular/animations';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { UIAnimation } from '../util/ui-animation';
+import { UIConstants } from '../util/ui-constants';
+import { OptionItem } from '../types/option-item';
+import { UIService } from '../services/ui.service';
+import { Helper } from '../util/helper';
+
+@Component({
+    selector: 'es-actionbar',
+    templateUrl: 'actionbar.component.html',
+    styleUrls: ['actionbar.component.scss'],
+    animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))],
+})
+/**
+ * The action bar provides several icons, usually at the top right, with actions for a current context
+ */
+export class ActionbarComponent implements OnChanges {
+    /**
+     * The amount of options which are not hidden inside an overflow menu
+     * (default: depending on mobile (1) or not (2))
+     * Also use numberOfAlwaysVisibleOptionsMobile to control the amount of mobile options visible
+     */
+    @Input() numberOfAlwaysVisibleOptions = 2;
+    @Input() numberOfAlwaysVisibleOptionsMobile = 1;
+    /**
+     * Visual style of the actionbar
+     *
+     * Values:
+     *  - 'button': material buttons with icons and text on medium to large screens
+     *  - 'icon-button': material buttons without text
+     *  - 'round': circular buttons without text
+     * @default 'button'
+     */
+    @Input() appearance: 'round' | 'button' | 'icon-button' = 'button';
+    /**
+     * dropdownPosition is for position of dropdown (default = left)
+     * Values 'left' or 'right'
+     */
+    @Input() dropdownPosition: 'left' | 'right' = 'left';
+
+    /**
+     * backgroundType for color matching, either bright, dark or primary
+     */
+    @Input() backgroundType: 'bright' | 'dark' | 'primary' = 'bright';
+    /**
+     * Style, currently default or 'flat' if all always visible icons should get a flat look
+     */
+    @Input() style: 'default' | 'flat' = 'default';
+    /**
+     * Highlight one or more of the always-visible buttons as primary action.
+     *
+     * - `first`, `last`: The first / last of `optionsAlways` by order.
+     * - `manual`: Highlight all options that set `isPrimary = true`.
+     */
+    @Input() highlight: 'first' | 'last' | 'manual' = 'first';
+    /**
+     * Should disabled ("greyed out") options be shown or hidden?
+     */
+    @Input() showDisabled = true;
+    /**
+     * Set the options, see @OptionItem
+     */
+    @Input() set options(options: OptionItem[]) {
+        this.optionsIn = options;
+        this.prepareOptions(options);
+    }
+
+    optionsIn: OptionItem[] = [];
+    optionsAlways: OptionItem[] = [];
+    optionsMenu: OptionItem[] = [];
+    optionsToggle: OptionItem[] = [];
+
+    constructor(private uiService: UIService, private translate: TranslateService) {}
+
+    private prepareOptions(options: OptionItem[]) {
+        options = this.uiService.filterValidOptions(Helper.deepCopyArray(options));
+        if (options == null) {
+            this.optionsAlways = [];
+            this.optionsMenu = [];
+            return;
+        }
+        this.optionsToggle = this.uiService.filterToggleOptions(options, true);
+        this.optionsAlways = this.getActionOptions(
+            this.uiService.filterToggleOptions(options, false),
+        ).slice(0, this.getNumberOptions());
+        if (!this.optionsAlways.length) {
+            this.optionsAlways = this.uiService
+                .filterToggleOptions(options, false)
+                .slice(0, this.getNumberOptions());
+        }
+        this.optionsMenu = this.hideActionOptions(
+            this.uiService.filterToggleOptions(options, false),
+            this.optionsAlways,
+        );
+        // may causes weird looking
+        /*if(this.optionsMenu.length<2) {
+      this.optionsAlways = this.optionsAlways.concat(this.optionsMenu);
+      this.optionsMenu = [];
+    }*/
+    }
+
+    public getNumberOptions() {
+        if (window.innerWidth < UIConstants.MOBILE_WIDTH) {
+            return this.numberOfAlwaysVisibleOptionsMobile;
+        }
+        return this.numberOfAlwaysVisibleOptions;
+    }
+
+    click(option: OptionItem) {
+        if (!option.isEnabled) {
+            if (option.disabledCallback) {
+                option.disabledCallback();
+            }
+            return;
+        }
+        option.callback();
+    }
+
+    private getActionOptions(options: OptionItem[]) {
+        const result: OptionItem[] = [];
+        for (const option of options) {
+            if (option.showAsAction) result.push(option);
+        }
+        return result;
+    }
+
+    private hideActionOptions(options: OptionItem[], optionsAlways: OptionItem[]) {
+        const result: OptionItem[] = [];
+        for (const option of options) {
+            if (optionsAlways.indexOf(option) === -1) result.push(option);
+        }
+        return result;
+    }
+
+    /**
+     * Invalidate / refreshes all options based on their current callbacks
+     */
+    public invalidate() {
+        this.prepareOptions(this.optionsIn);
+    }
+
+    private filterDisabled(options: OptionItem[]) {
+        if (options == null) return null;
+        const filtered = [];
+        for (const option of options) {
+            if (option.isEnabled || this.showDisabled) filtered.push(option);
+        }
+        return filtered;
+    }
+
+    canShowDropdown() {
+        if (!this.optionsMenu.length) {
+            return false;
+        }
+        return this.optionsMenu.filter((o) => o.isEnabled).length > 0;
+    }
+
+    shouldHighlight(optionIndex: number, option: OptionItem): boolean {
+        switch (this.highlight) {
+            case 'first':
+                return optionIndex === 0;
+            case 'last':
+                return optionIndex === this.optionsAlways.length - 1;
+            case 'manual':
+                return option.isPrimary;
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.invalidate();
+    }
+}