@coolon/angular-ui-powerups 12.4.5 → 12.4.8

package/assets/activities/activities.scss

@@ -0,0 +1,80 @@
+@use "~@angular/material" as mat;
+@use "sass:map";
+@use "input-activities";
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  :root {
+    --aup-activity-padding: var(--default-padding);
+    --aup-activity-dialog-padding: 18px;
+  }
+
+  // Extract the palettes you need from the theme definition.
+  $primary-palette: map-get($color-config, primary);
+  $accent-palette: map-get($color-config, accent);
+  $warn-palette: map-get($color-config, warn);
+
+  .dialog-interaction-context {
+    --aup-activity-padding: var(--aup-activity-dialog-padding);
+  }
+
+  aup-activity-title {
+    display: block;
+    font-family: mat.font-family($typography-config);
+    font-size: mat.font-size($typography-config, title);
+    line-height: mat.line-height($typography-config, title);
+    letter-spacing: mat.letter-spacing($typography-config, title);
+    padding: var(--aup-activity-padding);
+
+    &:not(.transparent-background) {
+      padding: calc(var(--aup-activity-padding) / 2) var(--aup-activity-padding);
+    }
+
+    &[color=primary] {
+      $palette: $primary-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+
+    &[color=accent] {
+      $palette: $accent-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+
+    &[color=warn] {
+      $palette: $warn-palette;
+      color: mat.get-color-from-palette($palette, default-contrast);
+      background-color: mat.get-color-from-palette($palette, default);
+    }
+  }
+
+  aup-activity-body {
+    display: block;
+
+    padding-top: var(--aup-activity-padding-top, var(--aup-activity-padding));
+    padding-bottom: var(--aup-activity-padding-bottom, var(--aup-activity-padding));
+
+    &:not(.full-width) {
+      padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+      padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+    }
+  }
+
+  aup-activity-title.transparent-background + aup-activity-body {
+    padding-top: 0;//var(--aup-activity-padding-top, var(--aup-activity-padding));
+  }
+
+  aup-activity-actions {
+    display: block;
+    padding-top: var(--aup-activity-padding-top, var(--aup-activity-padding));
+    padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+    padding-bottom: var(--aup-activity-padding-bottom, var(--aup-activity-padding));
+    padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+  }
+
+  @include input-activities.apply-theme($color-config, $typography-config)
+
+}
+
+

package/assets/activities/input-activities.scss

@@ -0,0 +1,36 @@
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  .aup-input-activity {
+
+    padding-left: var(--aup-activity-padding-left, 0);
+    padding-right: var(--aup-activity-padding-right, 0);
+    padding-top: var(--aup-activity-padding-top, 0);
+    padding-bottom: var(--aup-activity-padding-bottom, 0);
+
+    //&[layout=block] {
+    //}
+
+    // used for inline editors
+    &[layout=inline] {
+      display: flex;
+      flex-direction: row;
+    }
+
+    aup-activity-actions {
+      padding: 0 0 0 0.5em;
+    }
+
+  }
+
+  .aup-popup-interaction-panel .aup-input-activity {
+    padding-left: var(--aup-activity-padding-left, var(--aup-activity-padding));
+    padding-right: var(--aup-activity-padding-right, var(--aup-activity-padding));
+
+    &[layout=block] {
+      padding-bottom: var(--aup-activity-padding-bottom, var(--aup-activity-padding));
+    }
+  }
+
+
+}

package/assets/cards.scss

@@ -0,0 +1,17 @@
+@use "~@angular/material" as mat;
+@use "sass:map";
+
+:root {
+  --aup-card-container-default-background-color: #fcfcfb;
+}
+
+@mixin apply-theme($color-config, $typography-config) {
+  aup-add-card-activity {
+    aup-command-face {
+      // this isn't working... need to dig deeper
+      //@include mat.button-typography($typography-config);
+      //@include mat.button-theme($color-config);
+      //color: black;
+    }
+  }
+}

package/assets/commands.scss

@@ -0,0 +1,3 @@
+:root {
+  --aup-command-face-icon-gap: 8px;
+}

package/assets/empty-state.scss

@@ -0,0 +1,11 @@
+aup-empty-state {
+  // Convenience to keep the padding nice when using p tags.
+  .container {
+    > p:first-child {
+      margin-top: 0;
+    }
+    > p:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/assets/form.scss

@@ -0,0 +1,100 @@
+@use "~@angular/material/theming";
+
+.aup-input-component {
+
+  display: block;
+
+  mat-form-field, input {
+    width: 100%;
+
+    mat-hint.faux-error {
+      // TODO: move this out into theming...
+      color: theming.mat-color(theming.mat-palette(theming.$mat-red));
+    }
+  }
+
+  mat-form-field {
+    // matPrefix/Suffix alignment is a bit shit..
+    // Icons float much higher than the text, button icons don't center.
+    .mat-form-field-prefix {
+      display: inline-flex;
+      flex-direction: row;
+      height: 35px; // same as the mat-button height which will center our icon with any clear button icon.
+      align-self: flex-end; // sit on the bottom of the line
+      align-items: center; // and center our internal content.
+    }
+
+    .mat-form-field-infix {
+      width: auto;
+    }
+
+
+    .mat-form-field-suffix {
+      .mat-icon-button {
+        line-height: 2.5em; // fix centering of aup-icons within the button.
+      }
+    }
+
+  }
+
+
+  &.dense {
+    mat-form-field {
+      .mat-form-field-infix {
+        border-top: none;
+      }
+
+      .mat-form-field-flex {
+        padding-top: 0;
+      }
+
+      .mat-form-field-wrapper {
+        padding-bottom: 0;
+        border-bottom: 0;
+      }
+
+      .mat-form-field-underline {
+        bottom: 0
+      }
+
+      &.mat-form-field-can-float.mat-form-field-should-float {
+        .mat-form-field-label-wrapper {
+          display: none;
+        }
+      }
+
+      &.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper {
+        transform: translateY(0); // stop the arrow moving up to center with the input and the now missing label.
+      }
+
+    }
+  }
+}
+
+
+aup-table-cell-renderer > .aup-input-component {
+
+  // TODO: enter/exit animations for the editor size.
+
+  .mat-form-field-flex {
+    padding-top: 0;
+  }
+
+  .mat-form-field-infix {
+    width: 0; // ensure it doesn't expand the cell.
+    //border-top: none; // remove label space
+  }
+
+  .mat-form-field-label-wrapper { // hide the label
+    display: none;
+  }
+
+  .mat-form-field-subscript-wrapper {
+
+  }
+}
+
+
+
+
+

package/assets/forms/mixins.scss

@@ -0,0 +1,6 @@
+@mixin floating-label-style() {
+  font-weight: 400;
+  font-size: calc(1em * .75);
+  color: rgba(0, 0, 0, 0.57);
+  white-space: nowrap;
+}

package/assets/icons.scss

@@ -0,0 +1,30 @@
+:root {
+  --aup-icon-width: 24px;
+  --aup-fa-icon-width: 18px;
+}
+
+
+aup-icon {
+  // egregious hackery to get the font awesome icons positioning correctly
+  --fa-icon-offset: calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);
+
+  position: relative;
+  fa-icon {
+    .svg-inline--fa {
+      position: absolute;
+      top: var(--fa-icon-offset);
+      left: var(--fa-icon-offset);
+      width: var(--aup-fa-icon-width) !important;
+      height: var(--aup-fa-icon-width) !important;
+    }
+  }
+}
+
+// egregious hackery to get the icon to display the same as a mat-icon inside a mat-menu
+.mat-menu-panel {
+  aup-icon {
+    .svg-inline--fa {
+      opacity: 0.54;
+    }
+  }
+}

package/assets/interaction/editor/inline-string-editor.scss

@@ -0,0 +1,54 @@
+@use "../../forms/mixins";
+@use "~@angular/material/theming";
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  aup-inline-string-editor {
+    display: block;
+
+    --aup-activity-padding-top: var(--aup-inline-editor-padding-top, 0);
+    --aup-activity-padding-left: var(--aup-inline-editor-padding-left, 0);
+    --aup-activity-padding-bottom: var(--aup-inline-editor-padding-bottom, 0);
+    --aup-activity-padding-right: var(--aup-inline-editor-padding-right, 0);
+
+    .container {
+      padding-top: var(--aup-activity-padding-top);
+      padding-left:  var(--aup-activity-padding-left);
+      padding-bottom:  var(--aup-activity-padding-bottom);
+      padding-right:  var(--aup-activity-padding-right);
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      mat-form-field {
+        flex:1;
+        &:not(.empty) {
+          input {
+            color: currentColor;
+            //color: theming.mat-color($color-config, text);
+          }
+        }
+        &.editable {
+          .mat-form-field-flex, input {
+            cursor: pointer;
+          }
+        }
+        .mat-form-field-infix {
+          width: auto;
+        }
+        .mat-form-field-underline {
+          //opacity: 0; // hide the underline...
+        }
+      }
+    }
+
+    aup-string-input {
+      flex: 1;
+    }
+
+  }
+}
+
+
+

package/assets/interaction.scss

@@ -0,0 +1,32 @@
+@use "~@angular/material" as mat;
+
+@use "./interaction/editor/inline-string-editor";
+
+@mixin apply-theme($color-config, $typography-config) {
+  @include inline-string-editor.apply-theme($color-config, $typography-config)
+}
+
+
+.dialog-interaction-context {
+  max-width: 95vw !important;
+  max-height: 95vh !important;
+
+  mat-dialog-container {
+    max-width: 95vw !important;
+    max-height: 95vh !important;
+    padding: 0;
+  }
+}
+
+.activity-outlet-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.aup-popup-interaction-panel {
+  background: var(--aup-default-background, white);
+  @include mat.elevation(1);
+  @include mat.elevation-transition;
+}
+

package/assets/markdown.scss

@@ -0,0 +1,10 @@
+aup-markdown {
+  p {
+    margin: 0;
+    line-height: 1.2em;
+  }
+
+  > *:not(:first-child) {
+    margin-top: 0.5em;
+  }
+}

package/assets/mixins.scss

@@ -0,0 +1,27 @@
+@use "~@angular/material" as mat;
+@use "~@angular/material/theming" as theme;
+
+@mixin elevate-on-hover($height:2) {
+  @include mat.elevation-transition();
+  &:hover {
+    @include mat.elevation($height);
+  }
+}
+
+@mixin aup-card-container-new-card-style($color: rgba(0,0,0,0.54), $background-color: rgba(255,255,255,0.8), $hover-color: $color, $background-hover-color: white) {
+  @include elevate-on-hover();
+  box-sizing: border-box;
+  border: 2px dashed rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  font-weight: 300;
+  cursor: pointer;
+  color: $color;
+  background-color: $background-color;
+
+  &:hover {
+    border-color: transparent;
+    background-color: $background-hover-color;
+    color: $hover-color;
+  }
+}
+

package/assets/pills.scss

@@ -0,0 +1,45 @@
+@use '~@angular/material/index' as mat;
+
+@mixin pill-defaults($padding: 0.1em 0.4em) {
+  display: inline-block;
+  border-radius: 4px;
+  padding: $padding;
+  margin: 1px 0;
+}
+
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  // Extract the palettes you need from the theme definition.
+  $primary-palette: map-get($color-config, primary);
+  $accent-palette: map-get($color-config, accent);
+  $warn-palette: map-get($color-config, warn);
+  $background: map-get($color-config, background);
+
+  .aup-pill {
+    @include pill-defaults();
+    color: currentColor;
+    background-color: mat.get-color-from-palette($background, app-bar) // hmmm, should probably defined my own..
+  }
+
+  .aup-pill-primary {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-color-from-palette($primary-palette);
+  }
+
+  .aup-pill-accent {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background); // stolen from mat checkbox checkmark color logic
+    background-color: mat.get-color-from-palette($accent-palette)
+  }
+
+  .aup-pill-warn {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-color-from-palette($warn-palette)
+  }
+
+}
+
+

package/assets/router.scss

@@ -0,0 +1,9 @@
+.router-outlet-container {
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}

package/assets/styles.scss

@@ -0,0 +1,30 @@
+@use "~@angular/material" as mat;
+
+@use "./mixins";
+@use "./activities/activities";
+@use "./cards";
+@use "./router";
+@use "./tabs";
+@use "./interaction";
+@use "./form";
+@use "./table";
+@use "./commands";
+@use "./icons";
+@use "./empty-state";
+@use "./pills";
+@use "./markdown";
+
+@mixin apply-light-theme($theme, $typography) {
+
+  $color-config: mat.get-color-config($theme);
+
+  @include interaction.apply-theme($color-config, $typography);
+  @include cards.apply-theme($color-config, $typography);
+  @include activities.apply-theme($color-config, $typography);
+  @include pills.apply-theme($color-config, $typography);
+
+  :root {
+    --aup-default-padding: var(--default-padding, 16px);
+    --aup-default-background: white;
+  }
+}

package/assets/table.scss

@@ -0,0 +1,93 @@
+.aup-table-component {
+  --resolved-column-gap: var(--column-gap, var(--aup-table-column-gap, 24px)); // material design table column padding
+  --resolved-row-selected-background-color: var(--row-selected-background-color, var(--aup-table-row-selected-background-color, rgba(0, 0, 255, 0.04)));
+  --resolved-row-hover-background-color: var(--row-hover-background-color, var(--aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)));
+  --resolved-first-column-padding-left: var(--first-column-padding-left, var(--aup-table-first-column-padding-left, var(--resolved-column-gap)));
+  --resolved-last-column-padding-right: var(--last-column-padding-right, var(--aup-table-last-column-padding-right, var(--resolved-column-gap)));
+
+  &.hide-header {
+    .mat-table thead {
+      display: none;
+    }
+  }
+
+  .mat-table {
+    td, th {
+      &.hide {
+        display: none;
+      }
+    }
+
+    th.mat-header-cell:first-of-type,
+    td.mat-cell:first-of-type,
+    td.mat-footer-cell:first-of-type {
+      padding-left: 0;
+    }
+
+    th.mat-header-cell:last-of-type,
+    td.mat-cell:last-of-type,
+    td.mat-footer-cell:last-of-type {
+      padding-right: 0;
+    }
+
+    tr {
+      &.enable-hover:hover {
+        background-color: var(--resolved-row-hover-background-color);
+      }
+
+      &.aup-row-selected, &.aup-row-selected.enable-hover:hover {
+        background-color: var(--resolved-row-selected-background-color);
+      }
+    }
+
+    td.enable-cursor {
+      cursor: pointer;
+    }
+
+    //TODO: think about this a bit more.  Table with acts a bit like flex:
+    // - columns for which the width is 0 (or not defined) will expand equally to fill the table.
+    // - columns with an explicit with will try to remain that width, but will expand to fit their content.
+    // - extra space will be allocated to columns that have the same width... e.g. setting all columns to 1px results
+    //   in the same scenario as not specifying the width.
+    .mat-cell, .mat-header-cell {
+      &:not(.flex) {
+        width: 1px;
+        white-space: nowrap;
+      }
+    }
+
+  }
+
+  aup-table-cell-renderer, aup-table-header-cell-renderer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    height: 100%;
+    min-height: 47px; // same as mat table row height - border bottom.
+
+    padding-left: var(--resolved-column-gap);
+
+    &.first-visible-column {
+      padding-left: var(--resolved-first-column-padding-left);
+    }
+
+    &.last-visible-column {
+      padding-right: var(--resolved-last-column-padding-right);
+    }
+  }
+
+  aup-table-cell-renderer {
+    &.fillCell {
+      justify-content: stretch;
+      padding-left: 0 !important;
+    }
+
+    &.padChild {
+      > *:first-child {
+        padding-left: var(--resolved-column-gap);
+        flex: 1;
+      }
+    }
+  }
+}

package/assets/tabs.scss

@@ -0,0 +1,17 @@
+[no-tab-header] {
+  > mat-tab-header {
+    display: none;
+  }
+}
+
+[full-height-tabs], mat-tab-group.full-height-tabs {
+  .mat-tab-body-wrapper {
+    flex: 1;
+    mat-tab-body, .mat-tab-body-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: stretch;
+    }
+  }
+}
+

package/assets/tree/control-collapsed.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="64" viewBox="0 0 24 64">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(2 22)">
+      <rect width="10" height="2" x="5" y="9" fill="currentColor" transform="rotate(90 10 10)"/>
+      <rect width="16" height="16" x="2" y="2" stroke="currentColor" rx="3"/>
+      <rect width="10" height="2" x="5" y="9" fill="currentColor"/>
+    </g>
+    <rect width="4" height="1" y="32" fill="currentColor"/>
+  </g>
+</svg>

package/assets/tree/control-expanded.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="64" viewBox="0 0 24 64">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="1" height="24" x="11" y="40" fill="currentColor"/>
+    <rect width="4" height="1" y="32" fill="currentColor"/>
+    <g transform="translate(2 22)">
+      <rect width="16" height="16" x="2" y="2" stroke="currentColor" rx="3"/>
+      <rect width="10" height="2" x="5" y="9" fill="currentColor"/>
+    </g>
+  </g>
+</svg>

package/assets/tree/control-leaf.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="64" viewBox="0 0 24 64">
+  <rect width="4" height="1" y="32" fill="currentColor" fill-rule="evenodd"/>
+</svg>

package/assets/tree/control.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="64" viewBox="0 0 18 64">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="1" height="24" x="8.5" y="40" fill="currentColor"/>
+    <g transform="translate(-1 22)">
+      <rect width="10" height="2" x="5" y="9" fill="currentColor" transform="rotate(90 10 10)"/>
+      <rect width="17" height="17" x="1.5" y="1.5" stroke="currentColor" rx="8"/>
+      <rect width="10" height="2" x="5" y="9" fill="currentColor"/>
+    </g>
+  </g>
+</svg>

package/assets/tree/inheritance.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="64" viewBox="0 0 24 64">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="1" height="32.5" x="11.5" fill="currentColor"/>
+    <rect width="1" height="32.5" x="11.5" y="31.5" fill="currentColor"/>
+    <rect width="12" height="1" x="12" y="31.5" fill="currentColor"/>
+    <rect width="12" height="1" y="31.5" fill="currentColor"/>
+  </g>
+</svg>

package/assets/tree/inheritance_parent.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="64" viewBox="0 0 24 64">
+  <rect width="1" height="32" x="11" y="32" fill="currentColor" fill-rule="evenodd"/>
+</svg>

package/assets/tree/inherited.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="64" viewBox="0 0 18 64">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="1" height="32.5" x="8.5" fill="currentColor"/>
+    <rect width="1" height="32" x="8.5" y="32" fill="currentColor"/>
+    <rect width="9" height="1" x="9" y="31.5" fill="currentColor"/>
+  </g>
+</svg>