@enigmatry/entry-components 1.15.1-preview.3 → 1.15.1-preview.30

package/header/public-api.d.ts

@@ -1,2 +0,0 @@
-export { EntryHeaderComponent } from './entry-header.component';
-export { EntryHeaderModule } from './entry-header.module';

package/header/styles/modules/_generator.scss

@@ -1,13 +0,0 @@
-@use 'sass:map';
-
-@use 'theming/default-theming' as default;
-@use 'components/headers/general' as headers;
-@use 'components/buttons/general' as buttons;
-
-$default-theme: default.$theme;
-
-@mixin generate($custom-theme: ()) {
-    $merged-theme: map.deep-merge($default-theme, $custom-theme);
-    @include headers.generate-headers-from($merged-theme);
-    @include buttons.generate-buttons-from($merged-theme);
-}

package/header/styles/modules/components/buttons/_general.scss

@@ -1,26 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../styles/modules/states/hover';
-
-@mixin generate-buttons-from($theme) {
-	.entry-button-primary {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-primary.default-background'),
-			map.value-from($theme, 'button-primary.hover-background'));
-		color: map.value-from($theme, 'button-primary.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-
-	.entry-button-accent {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-accent.default-background'),
-			map.value-from($theme, 'button-accent.hover-background'));
-            color: map.value-from($theme, 'button-accent.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-}

package/header/styles/modules/components/headers/_general.scss

@@ -1,13 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-
-@mixin generate-headers-from($theme) {
-
-    .entry-header {
-        background-color: map.value-from($theme, 'header.background');
-
-        .title {
-            font-size: map.value-from($theme, 'header.title.size');
-            color: map.value-from($theme, 'header.title.color');
-        }
-    }
-}

package/header/styles/modules/theming/_default-theming.scss

@@ -1,21 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    header: (
-        background: vars.$primary-lightest,
-        title-size: 32px,
-        title-color: vars.$primary,
-    ),
-    button-primary: (
-        default-background: vars.$primary,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$accent,
-        hover-font-color: vars.$font-color-light,
-    ),
-    button-accent: (
-        default-background: vars.$accent,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$primary,
-        hover-font-color: vars.$font-color-light,
-    )
-);

package/header/styles/partials/core/_index.scss

@@ -1,3 +0,0 @@
-@use 'components';
-@use 'layouts';
-@use 'elements';

package/header/styles/partials/core/components/_index.scss

@@ -1,2 +0,0 @@
-@use 'buttons';
-@use 'headers';

package/header/styles/partials/core/components/buttons/_general.scss

@@ -1,42 +0,0 @@
-@use '../../../../../../styles/modules/variables' as vars;
-@use '../../../../../../styles/modules/typography/fonts' as fonts;
-
-.button, %button {
-	// @include fonts.main-bolded-font(14px);
-	display: inline-block;
-	position: relative;
-	padding: 10px 20px;
-	transition: vars.$default-transition;
-	border: 1px solid transparent;
-	background-color: transparent;
-	color: vars.$font-color-light;
-	line-height: 1.25;
-	text: {
-		align: center;
-		decoration: none;
-	}
-
-	&:disabled {
-		background-color: vars.$disabled;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line selector-max-pseudo-class */
-		&:hover {
-			background-color: vars.$disabled;
-		}
-	}
-}
-
-.entry-button-primary, .entry-button-accent {
-	@extend %button;
-}
-
-.action-buttons {
-	.button {
-		margin-left: 12px;
-
-        .first-button {
-            margin-left: 0;
-        }
-	}
-}

package/header/styles/partials/core/components/buttons/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/header/styles/partials/core/components/headers/_general.scss

@@ -1,9 +0,0 @@
-@use '../../../../../../styles/modules/variables' as vars;
-
-.entry-header {
-	padding: 24px vars.$default-gap;
-
-	.content {
-		padding-top: 20px;
-	}
-}

package/header/styles/partials/core/components/headers/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/header/styles/partials/core/elements/_index.scss

@@ -1 +0,0 @@
-@use 'headings';

package/header/styles/partials/core/elements/headings.scss

@@ -1,3 +0,0 @@
-h1, h2, h3, h4, h5, h6 {
-	margin: 0;
-}

package/header/styles/partials/core/layouts/_alignment.scss

@@ -1,6 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-// TODO: remove this once https://jira.enigmatry.com/browse/ETL-480 is done 
-.space-between {
-	@include items.fully-align(center, space-between);
-}

package/header/styles/partials/core/layouts/_index.scss

@@ -1 +0,0 @@
-@use 'alignment';

package/header/styles/partials/main.scss

@@ -1 +0,0 @@
-@use 'core';

package/styles/_generate.scss

@@ -1,15 +0,0 @@
-@use '../dialog/styles/modules/generator' as dialog;
-@use '../dialog/styles/partials/main.scss' as dialogPartials;
-@use '../header/styles/modules/generator' as header;
-@use '../header/styles/partials/main.scss' as headerPartials;
-@use '../toolbar/styles/modules/generate' as toolbar;
-@use '../toolbar/styles/partials/main.scss' as toolbarPartials;
-@use './modules/generate' as modules;
-@use 'sass:map';
-
-@mixin generate($theme, $font-config: null) {
-    @include modules.generate($font-config);
-    @include dialog.generate(map.get($theme, dialog));
-    @include header.generate(map.get($theme, header));
-    @include toolbar.generate(map.get($theme, toolbar));
-}

package/styles/modules/_breakpoints.scss

@@ -1,37 +0,0 @@
-@use 'sass:list';
-@use 'sass:string';
-@use 'sass:map';
-@use './variables' as vars;
-
-@forward '@enigmatry/scss-foundation/src/modules/layout/grid' with (
-	$breakpoints: vars.$breakpoints
-);
-@use '@enigmatry/scss-foundation/src/modules/layout/grid' as breakpoints;
-
-@mixin apply-on-mobile() {
-	@include breakpoints.apply-on(mobile) {
-		@content;
-	}
-}
-
-@mixin apply-on-tablet() {
-	@include breakpoints.apply-on(tablet) {
-		@content;
-	}
-}
-
-@mixin apply-on-desktop() {
-	@include breakpoints.apply-on(desktop) {
-		@content;
-	}
-}
-
-@mixin apply-on-large-desktop() {
-	@include breakpoints.apply-on(largeDesktop) {
-		@content;
-	}
-}
-
-@mixin set-up() {
-	@include breakpoints.set-up();
-}

package/styles/modules/_generate.scss

@@ -1,5 +0,0 @@
-@use './typography/generate' as typography;
-
-@mixin generate($font-config: null) {
-    @include typography.generate($font-config);
-}

package/styles/modules/_variables.scss

@@ -1,22 +0,0 @@
-$breakpoints: ( 
-	mobile: (description: 'sm', size: 480px ), 
-	tablet: (description: 'md', size: 768px ), 
-	desktop: (description: 'lg', size: 992px), 
-	largeDesktop: (description: 'xl', size: 1200px));
-
-$primary: #2581C4;
-$primary-lightest: #DFF1FD;
-
-$accent: #EA518D;
-
-$font-color-default: #323232;
-$font-color-light: #FFF;
-
-$disabled: #D9D9D9;
-
-$font-size-default: 14px;
-
-$default-gap: 16px;
-$large-gap: calc(#{$default-gap} * 2);
-
-$default-transition: .4s;

package/styles/modules/states/_hover.scss

@@ -1,27 +0,0 @@
-@use '../variables' as vars;
-
-// TODO: remove this once implemented https://jira.enigmatry.com/browse/ETL-484
-@mixin default($default: vars.$accent, $hover: vars.$body-font-color) {
-	transition: vars.$default-transition;
-	color: $default;
-
-	&:active {
-		color: $hover;
-	}
-
-	// Had to be done this way since at least Chrome isn't triggering on-touch-end on mobile so hover state remains. 
-	/* stylelint-disable-next-line at-rule-allowed-list, media-feature-name-allowed-list */
-	@media (hover: hover) {
-		&:hover {
-			color: $hover;
-		}
-	}
-}
-
-@mixin background-hover($regular-background, $hover-background) {
-	background-color: $regular-background;
-
-	&:hover {
-		background-color: $hover-background;
-	}
-}

package/styles/modules/theming/_default-theming.scss

@@ -1,9 +0,0 @@
-@use '../../../dialog/styles/modules/theming/default-theming' as dialogTheme;
-@use '../../../header/styles/modules/theming/default-theming' as headerTheme;
-@use '../../../toolbar/styles/modules/theming/default-theming' as toolbarTheme;
-
-$theme: (
-	header: headerTheme.$theme,
-	dialog: dialogTheme.$theme,
-	toolbar: toolbarTheme.$theme
-);

package/styles/modules/typography/_generate.scss

@@ -1,7 +0,0 @@
-@use './fonts' as font;
-
-@mixin generate($config: null) {
-    @if $config != null {
-        @include font.generate-font-face($config);
-    }
-}

package/toolbar/README.md

@@ -1,39 +0,0 @@
-# Entry Toolbar
-
-Toolbar component (`<entry-toolbar>`) is used as a header section in the applications. It offers built-in support for title or logo on the left side, while other elements, like menu items, must be provided via content projection. The component is responsive in a way that on smaller screens (mobile/tablet) switches to _the compact view_ containing menu icon button used to toggle content visibility.
-
-## Integration
-
-```npm
-npm i @enigmatry/entry-components
-```
-
-Import component package:
-
-```ts
-import { EntryDialogModule } from '@enigmatry/entry-components/toolbar';
-```
-
-Styles import:
-
-```scss
-@use 'entry-components/styles/generate' as entry;
-
-@include entry.generate(APP_THEME, APP_TYPOGRAPHY);
-```
-
-Where `APP_THEME` represents application theming configuration, while `APP_TYPOGRAPHY` represents application fonts configuration.
-
-## Basic usage
-
-```html
-<entry-toolbar
-    title="Food & Drinks"
-    titleUri="http://food-n-drinks.com">
-    <ul>
-        <li>Meals</li>
-        <li>Order</li>
-        <li>About</li>
-    </ul>
-</entry-toolbar>
-```

package/toolbar/entry-toolbar.component.d.ts

@@ -1,28 +0,0 @@
-import * as i0 from "@angular/core";
-/**
- * Toolbar component (`<entry-toolbar>`) is used to render header section in the applications containing menu items as a content.
- * It offers build in support for toolbar title or logo, while other elements need to be provided via content projection.
- * On smaller screens (mobile/tablet) it switches to compact view containing menu icon button used to toggle content visibility.
- *
- * @example
- * ```html
- * <entry-toolbar
- *    titleUri="http://www.enigmatry.com"
- *    titleLogoSrc="assets/enigmatry-logo.png">
- *    <!-- SOME CUSTOM HTML CODE THAT RENDERS MENU ITEMS -->
- * </entry-toolbar>
- * ```
- */
-export declare class EntryToolbarComponent {
-    /** Toolbar title positioned in the left side */
-    title: string;
-    /** Url to be redirected to if user click on the title (default value '/') */
-    titleUri: string;
-    /** If provided, it replaces string title and renders logo image instead */
-    titleLogoSrc: string | undefined;
-    /** Used to hide the title section if not required (default value false) */
-    hideTitle: boolean;
-    menuOpened: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<EntryToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EntryToolbarComponent, "entry-toolbar", never, { "title": "title"; "titleUri": "titleUri"; "titleLogoSrc": "titleLogoSrc"; "hideTitle": "hideTitle"; }, {}, never, ["*"], false, never>;
-}

package/toolbar/entry-toolbar.module.d.ts

@@ -1,8 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./entry-toolbar.component";
-import * as i2 from "@angular/common";
-export declare class EntryToolbarModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<EntryToolbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EntryToolbarModule, [typeof i1.EntryToolbarComponent], [typeof i2.CommonModule], [typeof i1.EntryToolbarComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<EntryToolbarModule>;
-}

package/toolbar/public-api.d.ts

@@ -1,2 +0,0 @@
-export { EntryToolbarComponent } from './entry-toolbar.component';
-export { EntryToolbarModule } from './entry-toolbar.module';

package/toolbar/styles/modules/_generate.scss

@@ -1,10 +0,0 @@
-@use 'sass:map';
-@use 'theming/default-theming' as default;
-@use 'components/toolbar/general' as toolbar;
-
-$default-theme: default.$theme;
-
-@mixin generate($custom-theme: ()) {
-    $merged-theme: map.deep-merge($default-theme, $custom-theme);
-    @include toolbar.generate($merged-theme);
-}

package/toolbar/styles/modules/components/toolbar/_general.scss

@@ -1,34 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../styles/modules/variables' as vars;
-@use '../../../../../styles/modules/states/hover' as hover;
-
-@mixin generate($theme) {
-    .entry-toolbar {
-        background-color: map.value-from($theme, 'background');
-
-        .entry-toolbar-nav {
-            height: map.value-from($theme, 'height');
-
-            .entry-toolbar-logo {
-                a {
-                    color: map.value-from($theme, 'title-color');
-                    @include hover.default(
-                        map.value-from($theme, 'title-color'), 
-                        map.value-from($theme, 'title-hover-color'));
-    
-                    img {
-                        height: map.value-from($theme, 'height');
-                    }
-                }
-            }
-
-            .entry-toolbar-nav-toggle {
-                .nav-toggle-menu, .nav-toggle-close {
-                    @include hover.default(
-                        map.value-from($theme, 'title-color'), 
-                        map.value-from($theme, 'title-hover-color'));
-                }
-            }
-        }
-    }
-}

package/toolbar/styles/modules/theming/_default-theming.scss

@@ -1,8 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    background: vars.$primary-lightest,
-    height: 56px,
-    title-color: vars.$primary,
-    title-hover-color: vars.$accent
-);

package/toolbar/styles/partials/core/_index.scss

@@ -1 +0,0 @@
-@use 'components';

package/toolbar/styles/partials/core/components/_index.scss

@@ -1 +0,0 @@
-@use 'toolbar';

package/toolbar/styles/partials/core/components/toolbar/_general.scss

@@ -1,100 +0,0 @@
-.entry-toolbar {
-  top: 0;
-  left: 0;
-  width: 100%;
-  box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
-
-  .entry-toolbar-nav {
-    margin: 10px;
-
-    .entry-toolbar-data {
-      height: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .entry-toolbar-logo {
-        display: inline-flex;
-        align-items: center;
-        column-gap: 0.25rem;
-
-        a {
-          text-decoration: none;
-          font-weight: 600;
-          transition: color 0.3s;
-
-          img {
-            display: block;
-          }
-        }
-      }
-
-      .entry-toolbar-nav-toggle {
-        position: relative;
-        width: 32px;
-        height: 32px;
-
-        .nav-toggle-menu,
-        .nav-toggle-close {
-          font-size: 1.25rem;
-          position: absolute;
-          display: grid;
-          place-items: center;
-          inset: 0;
-          cursor: pointer;
-          transition: opacity 0.1s, transform 0.4s;
-        }
-
-        .nav-toggle-close {
-          opacity: 0;
-        }
-      }
-
-      .show-toolbar-icon .nav-toggle-menu {
-        opacity: 0;
-        transform: rotate(90deg);
-      }
-
-      .show-toolbar-icon .nav-toggle-close {
-        opacity: 1;
-        transform: rotate(90deg);
-      }
-    }
-  }
-}
-
-.entry-toolbar-content {
-  &.show-toolbar-content {
-    opacity: 1;
-    top: 3.5rem;
-    pointer-events: initial;
-  }
-}
-
-// TODO: do this properly with connection to _breakpoints.scss. Move it to modules/ maybe?
-// Big screen
-@media screen and (min-width: 1118px) {
-  .entry-toolbar-nav {
-    height: calc(var(--header-height) + 2rem);
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .entry-toolbar-nav-toggle {
-    display: none;
-  }
-
-  .entry-toolbar-nav li {
-    display: flex;
-  }
-
-  .entry-toolbar-content {
-    opacity: 1;
-  }
-}
-// Small screen
-@media screen and (max-width: 1118px) {
-  .entry-toolbar-content {
-    opacity: 0;
-  }
-}

package/toolbar/styles/partials/core/components/toolbar/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/toolbar/styles/partials/main.scss

@@ -1 +0,0 @@
-@use 'core';