@flywheel-io/vision 1.3.2 → 1.4.0

package/global.scss

@@ -5,6 +5,5 @@
 
 @include vision.global-typography;
 @include vision.icons;
+@include vision.overlay;
 @include vision.mat-theme;
-
-@import '@angular/cdk/overlay-prebuilt.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
   "author": "Flywheel",
   "license": "MIT",

package/public-api.d.ts

@@ -26,7 +26,10 @@ export * from './components/chip/chip.component';
 export * from './components/chip/chip.module';
 export * from './components/dialog/dialog.component';
 export * from './components/dialog/dialog.service';
+export * from './components/dialog/dialog-actions.component';
 export * from './components/dialog/dialog-confirm.component';
+export * from './components/dialog/dialog-content.component';
+export * from './components/dialog/dialog-header.component';
 export * from './components/dialog/dialog-simple.component';
 export * from './components/dialog/dialogs.module';
 export * from './components/forms/validators';
@@ -38,6 +41,8 @@ export * from './components/layouts/context/context.component';
 export * from './components/layouts/grid/grid.component';
 export * from './components/layouts/layout-group.component';
 export * from './components/layouts/layouts.module';
+export * from './components/layouts/panel/panel.component';
+export * from './components/layouts/sidebar/sidebar.component';
 export * from './components/layouts/toolbar/toolbar.component';
 export * from './components/legacy/dialog/choice-dialog.component';
 export * from './components/legacy/dialog/confirm-dialog.component';
@@ -91,6 +96,8 @@ export * from './components/tabs/tabs.component';
 export * from './components/tabs/tabs.module';
 export * from './components/text-input/text-input.component';
 export * from './components/text-input/text-input.module';
+export * from './components/textarea-input/textarea-input.component';
+export * from './components/textarea-input/textarea-input.module';
 export * from './components/tooltip/tooltip.component';
 export * from './components/tooltip/tooltip.module';
 export * from './components/tooltip/tooltip-panel/tooltip-panel.component';

package/public-api.scss

@@ -1,4 +1,5 @@
 @forward './scss/config/colors';
+@forward './scss/config/overlay.scss';
 @forward './scss/config/typography';
 @forward './scss/config/shadows';
 @forward './scss/material/theme.scss';

package/scss/config/overlay.scss

@@ -0,0 +1,93 @@
+@mixin overlay {
+  .vision-overlay {
+    background-color: var(--separations-overlay);
+  }
+
+  .cdk-overlay-container, .cdk-global-overlay-wrapper {
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%
+  }
+
+  .cdk-overlay-container {
+    position: fixed;
+    z-index: 1000
+  }
+
+  .cdk-overlay-container:empty {
+    display: none
+  }
+
+  .cdk-global-overlay-wrapper {
+    display: flex;
+    position: absolute;
+    z-index: 1000
+  }
+
+  .cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: 1000;
+    display: flex;
+    max-width: 100%;
+    max-height: 100%
+  }
+
+  .cdk-overlay-backdrop {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    opacity: 0
+  }
+
+  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 1
+  }
+
+  .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: .6
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background: rgba(0, 0, 0, .32)
+  }
+
+  .cdk-overlay-transparent-backdrop {
+    transition: visibility 1ms linear, opacity 1ms linear;
+    visibility: hidden;
+    opacity: 1
+  }
+
+  .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 0;
+    visibility: visible
+  }
+
+  .cdk-overlay-backdrop-noop-animation {
+    transition: none
+  }
+
+  .cdk-overlay-connected-position-bounding-box {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    min-width: 1px;
+    min-height: 1px
+  }
+
+  .cdk-global-scrollblock {
+    position: fixed;
+    width: 100%;
+    overflow-y: scroll
+  }
+}

package/scss/config/shadows.scss

@@ -17,7 +17,3 @@
 .vision-shadow-inner {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) inset;
 }
-
-.vision-overlay {
-  background-color: var(--separations-overlay);
-}

package/scss/config/typography.scss

@@ -63,6 +63,43 @@
   @include shared-paragraph-style;
 }
 
+@mixin link {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:active {
+    text-decoration: none;
+    outline: 2px solid var(--primary-dark);
+    border-radius: 4px;
+  }
+
+  &:visited {
+    color: var(--secondary-base);
+  }
+}
+
+@mixin link-inherited {
+  @include link;
+  color: inherit;
+
+  &:visited {
+    color: inherit;
+  }
+}
+
+@mixin link-no-visited {
+  @include link;
+
+  &:visited {
+    color: var(--primary-base);
+  }
+}
+
 .vision-h1 {
   @include h1;
 }
@@ -99,6 +136,18 @@
   @include p4;
 }
 
+.vision-link {
+  @include link;
+}
+
+.vision-link-inherited {
+  @include link-inherited;
+}
+
+.vision-link-no-visited {
+  @include link-no-visited;
+}
+
 @mixin global-typography {
   h1 {
     @include h1;
@@ -123,4 +172,8 @@
   p {
     @include p2;
   }
+
+  a {
+    @include link;
+  }
 }

package/scss/icons/_icon-glyphs.scss

@@ -20,6 +20,12 @@
   }
 
 
+  .icon-hammer-legal-square:before {
+    content: "\ea18";
+  }
+  .icon-browser-internet-web-windows:before {
+    content: "\ea26";
+  }
   .icon-settings-adjust:before {
     content: "\e912";
   }

package/styles.css

@@ -1,5 +1,4 @@
 @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700';
-@import '@angular/cdk/overlay-prebuilt.css';
 /******************************************************
 Color Palettes for use with vision's theming system
 *******************************************************/
@@ -3873,6 +3872,64 @@ Color Palettes for use with vision's theming system
   font-weight: 400;
 }
 
+.vision-link {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+.vision-link:hover {
+  text-decoration: none;
+}
+.vision-link:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link:visited {
+  color: var(--secondary-base);
+}
+
+.vision-link-inherited {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+  color: inherit;
+}
+.vision-link-inherited:hover {
+  text-decoration: none;
+}
+.vision-link-inherited:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link-inherited:visited {
+  color: var(--secondary-base);
+}
+.vision-link-inherited:visited {
+  color: inherit;
+}
+
+.vision-link-no-visited {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+.vision-link-no-visited:hover {
+  text-decoration: none;
+}
+.vision-link-no-visited:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link-no-visited:visited {
+  color: var(--secondary-base);
+}
+.vision-link-no-visited:visited {
+  color: var(--primary-base);
+}
+
 .vision-shadow-extra-large {
   box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
 }
@@ -3893,10 +3950,6 @@ Color Palettes for use with vision's theming system
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) inset;
 }
 
-.vision-overlay {
-  background-color: var(--separations-overlay);
-}
-
 .mat-badge-content {
   font-weight: 600;
   font-size: 12px;
@@ -4721,6 +4774,23 @@ p {
   font-weight: 400;
 }
 
+a {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none;
+}
+a:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+a:visited {
+  color: var(--secondary-base);
+}
+
 .vision-icon, [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */
   font-family: Flywheel-Vision-Icons, emoji !important;
   speak: never;
@@ -4739,6 +4809,14 @@ p {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-hammer-legal-square:before {
+  content: "\ea18";
+}
+
+.icon-browser-internet-web-windows:before {
+  content: "\ea26";
+}
+
 .icon-settings-adjust:before {
   content: "\e912";
 }
@@ -5918,6 +5996,98 @@ p {
   font-style: normal;
   font-display: block;
 }
+.vision-overlay {
+  background-color: var(--separations-overlay);
+}
+
+.cdk-overlay-container, .cdk-global-overlay-wrapper {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1000;
+}
+
+.cdk-overlay-container:empty {
+  display: none;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1000;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0.6;
+}
+
+.cdk-overlay-dark-backdrop {
+  background: rgba(0, 0, 0, 0.32);
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.cdk-overlay-backdrop-noop-animation {
+  transition: none;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.cdk-global-scrollblock {
+  position: fixed;
+  width: 100%;
+  overflow-y: scroll;
+}
+
 .mat-ripple-element {
   background-color: rgba(0, 0, 0, 0.1);
 }