@tilde-nlp/ngx-common 0.0.0

package/public-api.d.ts

@@ -0,0 +1,11 @@
+export * from './lib/services';
+export * from './lib/plausible';
+export * from './lib/inline-message';
+export * from './lib/pipes';
+export * from './lib/directives';
+export * from './lib/close-button';
+export * from './lib/notification-message';
+export * from './lib/tld-loader';
+export * from './lib/helpers';
+export * from './lib/company-product';
+export * from './lib/footer';

package/styles/components/borders.scss

@@ -0,0 +1,28 @@
+/*
+$border-string: var(--default-border-width) solid var(--base-70);
+
+.tld-default-border {
+    border: $border-string;
+    border-radius: var(--default-border-radius);
+}
+
+.tld-default-top {
+    border-top: $border-string;
+    border-radius: var(--default-border-radius);
+}
+
+.tld-default-left {
+    border-left: $border-string;
+    border-radius: var(--default-border-radius);
+}
+
+.tld-default-border-bottom {
+    border-bottom: $border-string;
+    border-radius: var(--default-border-radius);
+}
+
+.tld-default-border-right {
+    border-right: $border-string;
+    border-radius: var(--default-border-radius);
+}
+*/

package/styles/components/icons.scss

@@ -0,0 +1,6 @@
+/*Makes icon be aligned with text.*/
+mat-icon {
+    svg {
+        vertical-align: initial;
+    }
+}

package/styles/components/links.scss

@@ -0,0 +1,5 @@
+.link-button{
+    &:visited, &:hover, &:active, &:link{
+        text-decoration: none;
+    }
+}

package/styles/components/strapi-html.scss

@@ -0,0 +1,20 @@
+strapi-html {
+  /*---------------------------------------------------------*/
+  /* In strapi rich text editor, you can set text sizes. Here are classes that are added if sizes are set*/
+  .text-tiny {
+    font-size: 0.7rem;
+  }
+
+  .text-small {
+    font-size: 0.85rem;
+  }
+
+  .text-big {
+    font-size: 1.4rem;
+  }
+
+  .text-huge {
+    font-size: 1.8rem;
+  }
+}
+/*--------------------------*/

package/styles/custom/containers.scss

@@ -0,0 +1,15 @@
+@use '@angular/flex-layout/core/sass/layout-bp' as bp;
+
+.tld-container {
+    max-width: 87rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 2rem;
+    width:100%;
+}
+
+@include bp.layout-bp(xs) {
+    .tld-container {
+        padding: 0 1rem;
+    }
+}

package/styles/mixins/icon-fill.mixin.scss

@@ -0,0 +1,11 @@
+@mixin icon-fill($pallete) {
+    mat-icon {
+
+        @each $key,
+        $value in $pallete {
+            &[color=#{$key}] svg {
+                fill:var(--#{$key});
+            }
+        }
+    }
+}

package/styles/mixins/material-overrides/mat-button-overrides.mixin.scss

@@ -0,0 +1,31 @@
+@mixin mat-button-overrides($color-map) {
+
+  // goes through all color map and adds option to add every color from map in html. You can use <button mat-button color="my-color"> as long as my-color is in color map.
+  @each $key,
+  $value in $color-map {
+
+    .mat-button.mat-#{$key},
+    .mat-stroked-button.mat-#{$key} {
+      color: var(--#{$key}) !important;
+
+      &:hover {
+        color: var(--#{$key}) !important;
+      }
+    }
+
+    .mat-raised-button.mat-#{$key},
+    .mat-flat-button.mat-#{$key},
+    a.mat-raised-button[color=#{$key}],
+    .mat-fab.mat-#{$key},
+    .mat-mini-fab.mat-#{$key} {
+      $white: #f0fff3;
+      color: $white !important;
+      background-color: var(--#{$key}) !important;
+
+      &:hover {
+        color: $white !important;
+      }
+    }
+
+  }
+}

package/styles/mixins/material-overrides/mat-form-field-overrides.mixin.scss

@@ -0,0 +1,24 @@
+@mixin mat-form-field-overrides($color-map) {
+
+  // goes through all color map and adds option to add every color from map in html. You can use <button mat-button color="my-color"> as long as my-color is in color map.
+  @each $key,
+  $value in $color-map {
+
+    $color: var(--#{$key});
+
+    //mat-input focused color
+    .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
+      color: $color !important;
+    }
+
+    // mat-input carent color
+    .mat-input-element {
+      caret-color: $color !important;
+    }
+
+    // mat-label focused style
+    .mat-form-field.mat-focused .mat-form-field-label {
+      color: $color !important;
+    }
+  }
+}

package/styles/mixins/material-overrides/material-overrides.mixin.scss

@@ -0,0 +1,7 @@
+@use "./mat-button-overrides.mixin.scss" as mat-buttons;
+@use "./mat-form-field-overrides.mixin.scss" as mat-form-field;
+
+@mixin material-overrides($color-map: ()) {
+  @include mat-buttons.mat-button-overrides($color-map);
+  @include mat-form-field.mat-form-field-overrides($color-map);
+}

package/styles/mixins/sass-variables-to-css.mixin.scss

@@ -0,0 +1,9 @@
+@mixin sass-variables-to-css($color-map) {
+    :root {
+        @each $key,
+        $value in $color-map {
+            $color-value: map-get($map: $color-map, $key: #{$key});
+            --#{$key}: #{$color-value};
+        }
+    }
+}

package/styles/mixins/tld-all-mixins.mixin.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@import "../variables/colors.variables.scss";
+@import "./sass-variables-to-css.mixin.scss";
+@import "./icon-fill.mixin.scss";
+@import "./tld-font.mixin.scss";
+@import "../variables/fonts.variables.scss";
+@import "./material-overrides/material-overrides.mixin.scss";
+
+@mixin tld-all-mixins($color-map: (), $font: $tld-font) {
+  $merged: map.merge($default-colors, $color-map);
+
+  @include tld-font($font);
+  @include sass-variables-to-css($merged);
+  @include icon-fill($merged);
+  @include material-overrides($merged);
+}

package/styles/mixins/tld-font.mixin.scss

@@ -0,0 +1,5 @@
+@mixin tld-font($font) {
+  :root {
+    --tld-font: #{$font};
+  }
+}

package/styles/strapi/strapi-base.scss

@@ -0,0 +1,75 @@
+@use "../typography.scss";
+
+strapi-feature-list,
+strapi-html,
+dynamic-zone,
+.universal-page,
+.universal-page-block {
+  @extend .text-xl;
+  color: var(--base-30);
+
+  a {
+    @extend .semi-bold;
+    text-decoration: none;
+
+    &:not(.base-color-link) {
+      $color: var(--primary-accent) !important;
+      color: $color;
+
+      &:hover {
+        color: $color;
+      }
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--base-10);
+  }
+
+  h1 {
+    @extend .text-4-xl;
+  }
+
+
+  h2 {
+    @extend .text-3-xl;
+  }
+
+
+  h3 {
+    @extend .text-2-xl;
+  }
+
+
+  h4 {
+    @extend .text-xl-semi-bold;
+  }
+
+
+  h5,
+  h6 {
+    @extend .text-l-semi-bold;
+  }
+
+}
+
+strapi-html {
+  margin-top: 4rem;
+}
+
+.strapi-feature-list .strapi-feature-list-title {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-bottom: 4rem;
+  }
+}

package/styles/tilde-fonts.scss

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+// Roboto font necessary for tilde company and product titles in headers
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');

package/styles/tilde-style.scss

@@ -0,0 +1,11 @@
+@use "./variables/borders.variables.scss";
+
+@use "./components/buttons.scss";
+@use "./components/links.scss";
+@use "./components/icons.scss";
+// @use "./components/borders.scss";
+@use "./components/strapi-html.scss";
+@use "./tilde-fonts.scss";
+@use "./typography.scss";
+@use "./custom/containers.scss";
+@use "./strapi/strapi-base.scss";

package/styles/tilde-theme.scss

@@ -0,0 +1,65 @@
+/* This file contains tilde theme color palletes for angular material theming. */
+
+$tld-accent-map: (
+  50 : #f6e4e9,
+  100 : #e9bdc9,
+  200 : #db91a5,
+  300 : #cc6481,
+  400 : #c14366,
+  500 : #b6224b,
+  600 : #af1e44,
+  700 : #a6193b,
+  800 : #9e1433,
+  900 : #8e0c23,
+  A100 : #ffbec7,
+  A200 : #ff8b9b,
+  A400 : #ff5870,
+  A700 : #ff3e5a,
+  contrast: (50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #ffffff,
+  )
+);
+
+$tld-primary-map: (
+  50 : #eaebed,
+  100 : #cacdd1,
+  200 : #a6acb3,
+  300 : #828a94,
+  400 : #68717d,
+  500 : #4d5866,
+  600 : #46505e,
+  700 : #3d4753,
+  800 : #343d49,
+  900 : #252d38,
+  A100 : #82b5ff,
+  A200 : #4f97ff,
+  A400 : #1c7aff,
+  A700 : #036aff,
+  contrast: (50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #ffffff,
+    A700 : #ffffff,
+  )
+);

package/styles/typography.scss

@@ -0,0 +1,75 @@
+@use './variables/font-size.variables.scss' as fs;
+@import '@angular/flex-layout/core/sass/layout-bp';
+
+.semi-bold {
+  font-weight: 600;
+}
+
+.text-4-xl {
+  @extend .semi-bold;
+
+  @include layout-bp(gt-xs) {
+    font-size: fs.$font-size-4-xl;
+    line-height: 3.375rem;
+  }
+
+  @include layout-bp(xs) {
+    font-size: 2rem;
+    line-height: 2.625rem;
+  }
+}
+
+
+.text-3-xl {
+  @extend .semi-bold;
+  font-size: fs.$font-size-3-xl;
+  line-height: 2.625rem;
+}
+
+.text-2-xl {
+  @extend .semi-bold;
+
+  font-size: fs.$font-size-2-xl;
+  line-height: 2.125rem;
+}
+
+.text-xl {
+  font-size: fs.$font-size-xl;
+  line-height: 2rem;
+
+  &-semi-bold {
+    @extend .text-xl;
+    @extend .semi-bold;
+  }
+}
+
+.text-l {
+  font-size: fs.$font-size-l;
+  line-height: 1.625rem;
+
+
+  &-semi-bold {
+    @extend .text-l;
+    @extend .semi-bold;
+  }
+}
+
+.text-m {
+  font-size: fs.$font-size-m;
+  line-height: 1.4375rem;
+
+  &-semi-bold {
+    @extend .text-m;
+    @extend .semi-bold;
+  }
+}
+
+.text-s {
+  font-size: fs.$font-size-s;
+  line-height: 1.25rem;
+
+  &-semi-bold {
+    @extend .text-s;
+    @extend .semi-bold;
+  }
+}

package/styles/variables/borders.variables.scss

@@ -0,0 +1,4 @@
+:root{
+  --default-border-radius: 4px;
+  --default-border-width: 2px;
+}

package/styles/variables/colors.variables.scss

@@ -0,0 +1,21 @@
+$default-colors: (
+    base-100: #FFFFFF,
+    base-95: #F1F2F3,
+    base-70: #DEE0E3,
+    base-40: #656E76,
+    base-30: #474D53,
+    base-10: #181A1B,
+    overlay: #181A1B 70%,
+    primary-accent: #B6224B,
+    primary-accent-darker: #811835,
+    secondary-accent: #0A70C2,
+    success-dark: #177D61,
+    success-light: #E1F9F3,
+    warning-dark: #B25300,
+    warning-light: #FFF1E5,
+    error-dark: #C42121,
+    error-light: #FDF2F2,
+    gradient: #667680,
+    /* Same as primary accent. But necessary for styling some links from angular material. */
+    accent: #B6224B
+);

package/styles/variables/font-size.variables.scss

@@ -0,0 +1,7 @@
+$font-size-4-xl: 2.75rem;
+$font-size-3-xl: 2rem;
+$font-size-2-xl: 1.5rem;
+$font-size-xl: 1.25rem;
+$font-size-l: 1rem;
+$font-size-m: 0.875rem;
+$font-size-s: 0.75rem;

package/styles/variables/fonts.variables.scss

@@ -0,0 +1 @@
+$tld-font: 'Inter', sans-serif;

package/tilde-nlp-ngx-common.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tilde-nlp/ngx-common" />
+export * from './public-api';