@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/README.md

@@ -1,24 +1 @@
-# Components
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project components`.
-> Note: Don't forget to add `--project components` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build components` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build components`, go to the dist folder `cd dist/components` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test components` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# UpDevs Components Library for Angular v18

package/assets/styles/_bootstrap-components.scss

@@ -0,0 +1,55 @@
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities";
+
+// extend `text-align` utility
+$utilities: map-merge(
+        $utilities,
+        (
+            "text-align": map-merge(
+                    map-get($utilities, "text-align"),
+                    (
+                        values: map-merge(
+                                map-get(map-get($utilities, "text-align"), "values"),
+                                (justify: justify),
+                        ),
+                    ),
+            ),
+        )
+);
+
+// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";

package/assets/styles/_bootstrap-config.scss

@@ -0,0 +1,7 @@
+// Config
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";

package/assets/styles/_bootstrap-override.scss

@@ -0,0 +1,78 @@
+@mixin caret($direction: down) {
+    $selector: "after";
+
+    @if $direction == "left" {
+        $selector: "before";
+    }
+
+    &:#{$selector} {
+        content: "";
+        display: inline-block;
+        vertical-align: $caret-vertical-align;
+        width: $caret-width;
+        height: $caret-width;
+        border-bottom: 1px var(--#{$prefix}border-style);
+        border-left: 1px var(--#{$prefix}border-style);
+        margin-right: 0.1em;
+
+        @if $direction != "left" {
+            margin-left: $caret-spacing;
+        } @else {
+            margin-right: $caret-spacing;
+        }
+
+        @if $direction == down {
+            transform: rotate(-45deg);
+        } @else if $direction == up {
+            transform: rotate(135deg);
+        } @else if $direction == end {
+            transform: rotate(-135deg);
+        } @else {
+            transform: rotate(45deg);
+        }
+    }
+
+    @if $direction == "left" {
+        &:after {
+            content: none;
+        }
+    }
+}
+
+@mixin alert-variant($background: null, $border: null, $color: null) {
+    // Override bootstrap core
+}
+
+@mixin button-variant(
+    $background: null,
+    $border: null,
+    $color: null,
+    $hover-background: null,
+    $hover-border: null,
+    $hover-color: null,
+    $active-background: null,
+    $active-border: null,
+    $active-color: null,
+    $disabled-background: null,
+    $disabled-border: null,
+    $disabled-color: null
+) {
+    // Override bootstrap core
+}
+
+@mixin button-outline-variant(
+    $color: null,
+    $color-hover: null,
+    $active-background: null,
+    $active-border: null,
+    $active-color: null
+) {
+    // Override bootstrap core
+}
+
+//
+// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
+//
+@function opaque($background, $foreground) {
+    @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}

package/assets/styles/_config.scss

@@ -0,0 +1,9 @@
+@import "bootstrap/scss/functions";
+
+@import "variables";
+@import "variables-dark";
+@import "utilities";
+@import "mixins";
+
+@import "bootstrap-config";
+@import "bootstrap-override";

package/assets/styles/_core.scss

@@ -0,0 +1,80 @@
+@import "config";
+@import "bootstrap-components";
+
+@import "props";
+
+@import "fonts/webfonts";
+
+@import "layout/root";
+@import "layout/animations";
+@import "layout/core";
+@import "layout/navbar";
+@import "layout/page";
+@import "layout/footer";
+@import "layout/dark";
+
+@import "ui/accordion";
+@import "ui/alerts";
+@import "ui/avatars";
+@import "ui/badges";
+@import "ui/breadcrumbs";
+@import "ui/buttons";
+@import "ui/button-group";
+@import "ui/calendars";
+@import "ui/carousel";
+@import "ui/cards";
+@import "ui/close";
+@import "ui/dropdowns";
+@import "ui/datagrid";
+@import "ui/empty";
+@import "ui/grid";
+@import "ui/icons";
+@import "ui/images";
+@import "ui/forms";
+@import "ui/forms/form-icon";
+@import "ui/forms/form-colorinput";
+@import "ui/forms/form-imagecheck";
+@import "ui/forms/form-selectgroup";
+@import "ui/forms/form-custom";
+@import "ui/forms/form-check";
+@import "ui/forms/validation";
+@import "ui/legend";
+@import "ui/lists";
+@import "ui/loaders";
+@import "ui/login";
+@import "ui/modals";
+@import "ui/nav";
+@import "ui/stars";
+@import "ui/pagination";
+@import "ui/popovers";
+@import "ui/progress";
+@import "ui/ribbons";
+@import "ui/markdown";
+@import "ui/placeholder";
+@import "ui/segmented";
+@import "ui/steps";
+@import "ui/status";
+@import "ui/switch-icon";
+@import "ui/tables";
+@import "ui/tags";
+@import "ui/toasts";
+@import "ui/toolbar";
+@import "ui/tracking";
+@import "ui/timeline";
+@import "ui/type";
+@import "ui/charts";
+@import "ui/offcanvas";
+@import "ui/chat";
+@import "ui/signature";
+
+@import "helpers/index";
+
+@import "utils/background";
+@import "utils/colors";
+@import "utils/scroll";
+@import "utils/sizing";
+@import "utils/opacity";
+@import "utils/shadow";
+@import "utils/text";
+
+@import "debug";

package/assets/styles/_debug.scss

@@ -0,0 +1,49 @@
+$debug: false;
+
+@if $debug {
+    $colors: (
+            "blue": $blue,
+            "azure": $azure,
+            "indigo": $indigo,
+            "purple": $purple,
+            "pink": $pink,
+            "red": $red,
+            "orange": $orange,
+            "yellow": $yellow,
+            "lime": $lime,
+            "green": $green,
+            "teal": $teal,
+            "cyan": $cyan,
+    );
+
+    @each $name, $color in $colors {
+        @debug ("#{$name}: '#{$color}'");
+        @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+        @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+        @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+        @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+        @debug ("#{$name}-500: '#{$color}'");
+        @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+        @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+        @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+        @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+    }
+
+    @debug ("gray: '#{$gray-500}'");
+    @debug ("gray-100: '#{$gray-100}'");
+    @debug ("gray-200: '#{$gray-200}'");
+    @debug ("gray-300: '#{$gray-300}'");
+    @debug ("gray-400: '#{$gray-400}'");
+    @debug ("gray-500: '#{$gray-500}'");
+    @debug ("gray-600: '#{$gray-600}'");
+    @debug ("gray-700: '#{$gray-700}'");
+    @debug ("gray-800: '#{$gray-800}'");
+    @debug ("gray-900: '#{$gray-900}'");
+
+    @debug ("border-color: '#{$border-color}'");
+    @debug ("text-secondary: '#{$text-secondary}'");
+
+    @each $name, $color in $social-colors {
+        @debug ("#{$name}: '#{$color}'");
+    }
+}

package/assets/styles/_mixins.scss

@@ -0,0 +1,2 @@
+@import "mixins/mixins";
+@import "mixins/functions";

package/assets/styles/_props.scss

@@ -0,0 +1,91 @@
+@import "config";
+
+:root,
+:host {
+    /** Fonts */
+    --#{$prefix}font-monospace: #{$font-family-monospace};
+    --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
+    --#{$prefix}font-serif: #{$font-family-serif};
+    --#{$prefix}font-comic: #{$font-family-comic};
+
+    /** Gray colors */
+    --#{$prefix}gray-50: #{$gray-50};
+    --#{$prefix}gray-100: #{$gray-100};
+    --#{$prefix}gray-200: #{$gray-200};
+    --#{$prefix}gray-300: #{$gray-300};
+    --#{$prefix}gray-400: #{$gray-400};
+    --#{$prefix}gray-500: #{$gray-500};
+    --#{$prefix}gray-600: #{$gray-600};
+    --#{$prefix}gray-700: #{$gray-700};
+    --#{$prefix}gray-800: #{$gray-800};
+    --#{$prefix}gray-900: #{$gray-900};
+    --#{$prefix}gray-950: #{$gray-950};
+
+    --#{$prefix}white: #{$white};
+    --#{$prefix}black: #{$black};
+    --#{$prefix}dark: #{$dark};
+    --#{$prefix}light: #{$light};
+
+    /** Brand colors */
+    --#{$prefix}brand: #{$primary};
+
+    /** Theme colors */
+    @each $name, $color in map-merge($theme-colors, $social-colors) {
+        --#{$prefix}#{$name}: #{$color};
+        --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+        --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+        --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+        --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
+        --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+        --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
+        --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
+        --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+    }
+
+    /** Gray colors */
+    @each $name, $color in $gray-colors {
+        --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
+    }
+
+    /** Spacers */
+    @each $name, $value in $spacers {
+        --#{$prefix}spacer-#{$name}: #{$value};
+    }
+
+    /** Font sizes */
+    @each $name, $value in $font-weights {
+        --#{$prefix}font-weight-#{$name}: #{$value};
+    }
+
+    @each $name, $value in $font-sizes {
+        --#{$prefix}font-size-h#{$name}: #{$value};
+    }
+
+    @each $name, $value in $line-heights {
+        --#{$prefix}line-height-#{$name}: #{$value};
+    }
+
+    /** Shadows */
+    @each $name, $value in $box-shadows {
+        --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
+    }
+
+    /** Border radiuses */
+    --#{$prefix}border-radius-scale: 1;
+    @each $name, $value in $border-radiuses {
+        @if $name {
+            --#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
+        } @else {
+            --#{$prefix}border-radius: #{$value};
+        }
+    }
+
+    /** Backdrops */
+    --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
+    --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
+    @each $name, $value in $backdrops {
+        --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
+    }
+    --#{$prefix}backdrop-blur: #{$backdrop-blur};
+    --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
+}

package/assets/styles/_seven-columns.scss

@@ -0,0 +1,73 @@
+@media (min-width: 768px) {
+    .seven-cols .col-1 {
+        width: 100%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+}
+
+@media (min-width: 992px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}
+
+/**
+ *  The following is not really needed in this case
+ *  Only to demonstrate the usage of @media for large screens
+ */
+@media (min-width: 1200px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}

package/assets/styles/_updevs.scss

@@ -0,0 +1,25 @@
+@import "core";
+
+.upd-brand-logo {
+    content: var(--upd-brand-logo-src);
+}
+
+.upd-right-login-image {
+    content: var(--upd-right-login-image-src);
+}
+
+.upd-right-login-cover-image {
+    background-image: var(--upd-right-login-cover-image-bg);
+}
+
+// TODO: Workaround. Wait for resolution of bug: https://github.com/tabler/tabler/issues/2271
+@media (min-width: 992px) {
+    :host,
+    :root {
+        margin-left: 0;
+    }
+}
+
+body {
+    overflow-y: scroll;
+}