@ecodev/natural 65.0.1 → 66.0.0

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injector, InjectionToken, DestroyRef, OnInit, Type, OnChanges, SimpleChanges, AfterViewInit, PipeTransform, Provider, EnvironmentProviders, OnDestroy, EmbeddedViewRef, ComponentRef, StaticProvider, TemplateRef, DoCheck, ErrorHandler, ApplicationConfig } from '@angular/core';
+import { Injector, InjectionToken, DestroyRef, OnInit, Type, EnvironmentProviders, Provider, OnChanges, SimpleChanges, AfterViewInit, PipeTransform, OnDestroy, EmbeddedViewRef, ComponentRef, StaticProvider, TemplateRef, DoCheck, ErrorHandler, ApplicationConfig } from '@angular/core';
 import { ValidatorFn, AsyncValidatorFn, AbstractControl, UntypedFormGroup, UntypedFormArray, ValidationErrors, FormControl, FormGroup, FormGroupDirective, NgForm, ControlValueAccessor, NgControl } from '@angular/forms';
 import * as _angular_router from '@angular/router';
 import { ActivatedRoute, ResolveData, UrlSegment, Router, NavigationExtras, RouterLink, Data as Data$1, NavigationEnd, UrlMatcher, Params, QueryParamsHandling, UrlTree } from '@angular/router';
@@ -1820,6 +1820,33 @@ declare class NaturalEnumService {
     static ɵprov: i0.ɵɵInjectableDeclaration<NaturalEnumService>;
 }
 
+type AllThemes = [string, ...string[]];
+declare function provideThemes(config: AllThemes): (EnvironmentProviders | Provider)[];
+declare enum ColorScheme {
+    Light = "light",
+    Dark = "dark",
+    Auto = "auto"
+}
+declare class NaturalThemeService {
+    private readonly allThemes;
+    private readonly storage;
+    private readonly platformId;
+    protected readonly document: Document;
+    readonly isDark: i0.WritableSignal<boolean>;
+    readonly theme: i0.WritableSignal<string>;
+    readonly colorScheme: i0.WritableSignal<ColorScheme>;
+    /**
+     * Set theme in memory, local storage and dom
+     */
+    setTheme(name: string): void;
+    /**
+     * Set color scheme in memory, local storage and dom and keep in sync isDark property
+     */
+    setColorScheme(scheme: ColorScheme, persistInStorage?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NaturalThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NaturalThemeService>;
+}
+
 declare class NaturalSwissParsingDateAdapter extends NativeDateAdapter {
     /**
      * Parse commonly accepted swiss format, such as:
@@ -4242,6 +4269,20 @@ declare class NaturalErrorHandler extends ErrorHandler {
 
 declare function provideErrorHandler(url: string | null, extraService?: Type<NaturalLoggerExtra>): Provider[];
 
+declare class NaturalColorSchemerComponent {
+    readonly themeService: NaturalThemeService;
+    protected readonly ColorScheme: typeof ColorScheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NaturalColorSchemerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalColorSchemerComponent, "natural-color-schemer", never, {}, {}, never, never, true, never>;
+}
+
+declare class NaturalThemeChangerComponent {
+    protected readonly themeService: NaturalThemeService;
+    protected readonly allThemes: [string, ...string[]];
+    static ɵfac: i0.ɵɵFactoryDeclaration<NaturalThemeChangerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NaturalThemeChangerComponent, "natural-theme-changer", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Need to add http:// prefix if we don't have prefix already AND we don't have part of it
  */
@@ -4268,5 +4309,5 @@ declare const naturalProviders: ApplicationConfig['providers'];
  */
 declare function graphqlQuerySigner(key: string): HttpInterceptorFn;
 
-export { AvatarService, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorMessagePipe, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, greaterThan, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, nfcCardHex, onHistoryEvent, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
+export { AvatarService, ColorScheme, InvalidWithValueStateMatcher$1 as InvalidWithValueStateMatcher, LOCAL_STORAGE, NATURAL_DROPDOWN_DATA, NATURAL_ICONS_CONFIG, NATURAL_PERSISTENCE_VALIDATOR, NATURAL_SEO_CONFIG, NaturalAbstractDetail, NaturalAbstractEditableList, NaturalAbstractList, NaturalAbstractModelService, NaturalAbstractNavigableList, NaturalAbstractPanel, NaturalAlertService, NaturalAvatarComponent, NaturalBackgroundDensityDirective, NaturalCapitalizePipe, NaturalColorSchemerComponent, NaturalColumnsPickerComponent, NaturalConfirmComponent, NaturalDataSource, NaturalDebounceService, NaturalDetailHeaderComponent, NaturalDialogTriggerComponent, NaturalDropdownRef, NaturalEllipsisPipe, NaturalEnumPipe, NaturalEnumService, NaturalErrorHandler, NaturalErrorMessagePipe, NaturalFileComponent, NaturalFileDropDirective, NaturalFileSelectDirective, NaturalFileService, NaturalFixedButtonComponent, NaturalFixedButtonDetailComponent, NaturalHierarchicSelectorComponent, NaturalHierarchicSelectorDialogComponent, NaturalHierarchicSelectorDialogService, NaturalHierarchicSelectorService, NaturalHttpPrefixDirective, NaturalIconDirective, NaturalLinkMutationService, NaturalLinkableTabDirective, NaturalLoggerConfigExtra, NaturalLoggerConfigUrl, NaturalMatomoService, NaturalMemoryStorage, NaturalPanelsComponent, NaturalPanelsService, NaturalPersistenceService, NaturalQueryVariablesManager, NaturalRelationsComponent, NaturalSearchComponent, NaturalSelectComponent, NaturalSelectEnumComponent, NaturalSelectHierarchicComponent, NaturalSeoService, NaturalSidenavComponent, NaturalSidenavContainerComponent, NaturalSidenavContentComponent, NaturalSidenavService, NaturalSidenavStackService, NaturalSrcDensityDirective, NaturalStampComponent, NaturalSwissParsingDateAdapter, NaturalTableButtonComponent, NaturalThemeChangerComponent, NaturalThemeService, NaturalTimeAgoPipe, NetworkActivityService, PanelsHooksConfig, SESSION_STORAGE, SortingOrder, TypeBooleanComponent, TypeDateComponent, TypeDateRangeComponent, TypeHierarchicSelectorComponent, TypeNaturalSelectComponent, TypeNumberComponent, TypeOptionsComponent, TypeSelectComponent, TypeTextComponent, activityInterceptor, available, cancellableTimeout, cloneDeepButSkipFile, collectErrors, commonImageMimeTypes, copyToClipboard, createHttpLink, debug, decimal, deepFreeze, deliverableEmail, ensureHttpPrefix, fallbackIfNoOpenedPanels, formatIsoDate, formatIsoDateTime, fromUrl, getForegroundColor, graphqlQuerySigner, greaterThan, hasFilesAndProcessDate, ifValid, integer, isFile, localStorageFactory, localStorageProvider, makePlural, memoryLocalStorageProvider, memorySessionStorageProvider, mergeOverrideArray, money, naturalPanelsUrlMatcher, naturalProviders, nfcCardHex, onHistoryEvent, possibleComparableOperators, provideErrorHandler, provideIcons, providePanels, provideSeo, provideThemes, relationsToIds, replaceObjectKeepingReference, replaceOperatorByField, replaceOperatorByName, rgbToHex, sessionStorageFactory, sessionStorageProvider, time, toGraphQLDoctrineFilter, toNavigationParameters, toUrl, unique, upperCaseFirstLetter, url, urlPattern, validTlds, validateAllFormControls, validateColumns, validatePagination, validateSorting, wrapLike, wrapPrefix, wrapSuffix };
 export type { AvailableColumn, Button, DropdownComponent, DropdownFacet, ExtractResolve, ExtractTall, ExtractTallOne, ExtractTcreate, ExtractTdelete, ExtractTone, ExtractTupdate, ExtractVall, ExtractVcreate, ExtractVdelete, ExtractVone, ExtractVupdate, Facet, FileModel, FileSelection, Filter, FilterGroupConditionField, FlagFacet, FormAsyncValidators, FormControls, FormValidators, HierarchicDialogConfig, HierarchicDialogResult, HierarchicFilterConfiguration$1 as HierarchicFilterConfiguration, HierarchicFiltersConfiguration$1 as HierarchicFiltersConfiguration, IEnum, InvalidFile, LinkableObject, Literal, NameOrFullName, NaturalConfirmData, NaturalDialogTriggerProvidedData, NaturalDialogTriggerRedirectionValues, NaturalDialogTriggerRoutingData, NaturalDropdownData, NaturalHierarchicConfiguration, NaturalIconConfig, NaturalIconsConfig, NaturalLoggerExtra, NaturalLoggerType, NaturalPanelConfig, NaturalPanelData, NaturalPanelResolves, NaturalPanelsBeforeOpenPanel, NaturalPanelsHooksConfig, NaturalPanelsRouteConfig, NaturalPanelsRouterRule, NaturalPanelsRoutesConfig, NaturalSearchFacets, NaturalSearchSelection, NaturalSearchSelections, NaturalSeo, NaturalSeoBasic, NaturalSeoCallback, NaturalSeoConfig, NaturalSeoResolve, NaturalSeoResolveData, NaturalStorage, NavigableItem, OrganizedModelSelection, PaginatedData, PaginationInput, PersistenceValidator, PossibleComparableOpertorKeys, QueryVariables, ResolvedData, Sorting, SubButton, TypeBooleanConfiguration, TypeDateConfiguration, TypeDateRangeConfiguration, TypeHierarchicSelectorConfiguration, TypeNumberConfiguration, TypeOption, TypeOptionsConfiguration, TypeSelectConfiguration, TypeSelectItem, TypeSelectNaturalConfiguration, VariablesWithInput, WithId };

package/{theming/_natural.theme.scss → natural.scss}

@@ -7,4 +7,4 @@ So Natural styles can be imported into an application like so:
 ```
  */
 
-@forward '../src/lib/natural.theme' show natural, $typography;
+@forward './src/lib/natural' show natural, $typography;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ecodev/natural",
-  "version": "65.0.1",
+  "version": "66.0.0",
   "license": "MIT",
   "repository": "github:Ecodev/natural",
   "sideEffects": false,
   "exports": {
     ".": {
-      "sass": "./theming/_natural.theme.scss",
+      "sass": "./src/lib/_natural.scss",
       "types": "./index.d.ts",
       "default": "./fesm2022/ecodev-natural.mjs"
     },

package/src/lib/_natural.scss

@@ -0,0 +1,204 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use 'styles/table';
+@use 'modules/panels/panels.scss';
+@use 'modules/sidenav/sidenav.scss';
+@use 'modules/alert/alert.scss';
+
+[data-color-scheme='auto'] {
+    color-scheme: light dark;
+}
+
+[data-color-scheme='light'] {
+    color-scheme: light;
+}
+
+[data-color-scheme='dark'] {
+    color-scheme: dark;
+}
+
+[data-is-dark='false'] .nat-for-dark {
+    display: none;
+}
+
+[data-is-dark='true'] .nat-for-light {
+    display: none;
+}
+
+/**
+ * Global css
+ */
+.mat-mdc-table .mdc-button__label {
+    white-space: nowrap;
+}
+
+body {
+    --nat-elevation: inset 0 1px rgba(255, 255, 255, 0.3), var(--mat-sys-level1);
+    --nat-gradient-primary: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--mat-sys-primary-container) 95%, white),
+        color-mix(in srgb, var(--mat-sys-primary-container) 90%, black)
+    );
+
+    --nat-gradient-secondary: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--mat-sys-secondary-container) 95%, white),
+        color-mix(in srgb, var(--mat-sys-secondary-container) 90%, black)
+    );
+
+    --nat-gradient-tertiary: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--mat-sys-tertiary-container) 95%, white),
+        color-mix(in srgb, var(--mat-sys-tertiary-container) 90%, black)
+    );
+
+    --nat-gradient-error: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--mat-sys-error) 95%, white),
+        color-mix(in srgb, var(--mat-sys-error) 90%, black)
+    );
+
+    --nat-good: rgb(0, 175, 0, 1);
+    --nat-on-good: white;
+    --nat-gradient-good: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--nat-good) 95%, white),
+        color-mix(in srgb, var(--nat-good) 90%, black)
+    );
+
+    --nat-gradient-inverse-surface: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--mat-sys-inverse-surface) 95%, white),
+        color-mix(in srgb, var(--mat-sys-inverse-surface) 90%, black)
+    );
+
+    --nat-bad: rgb(200, 11, 11);
+    --nat-on-bad: white;
+    --nat-gradient-bad: linear-gradient(
+        175deg,
+        color-mix(in srgb, var(--nat-bad) 60%, white),
+        color-mix(in srgb, var(--nat-bad) 90%, black)
+    );
+}
+
+.nat-elevation {
+    box-shadow: var(--nat-elevation);
+}
+
+.nat-frame {
+    padding: 6px;
+
+    &-rounded {
+        border-radius: var(--mat-sys-corner-small);
+    }
+
+    &-neutral1 {
+        background-color: var(--mat-sys-neutral10);
+
+        color: var(--mat-sys-on-surface);
+    }
+
+    &-neutral2 {
+        background-color: var(--mat-sys-neutral-variant20);
+        color: var(--mat-sys-on-surface);
+    }
+
+    &-primary {
+        background-color: var(--mat-sys-primary-container);
+        color: var(--mat-sys-on-primary-container);
+    }
+
+    &-secondary {
+        background-color: var(--mat-sys-secondary-container);
+        color: var(--mat-sys-on-secondary-container);
+    }
+
+    &-tertiary {
+        background-color: var(--mat-sys-tertiary-container);
+        color: var(--mat-sys-on-tertiary-container);
+    }
+
+    &-error {
+        background-color: var(--mat-sys-error);
+        color: var(--mat-sys-on-error);
+    }
+}
+
+.nat-text {
+    &-primary {
+        color: var(--mat-sys-primary-container);
+    }
+
+    &-accent {
+        color: var(--mat-sys-tertiary-container);
+    }
+
+    &-error {
+        color: var(--mat-sys-error-container);
+    }
+}
+
+.mdc-fab {
+    &.nat-rounded {
+        @include mat.fab-overrides(
+            (
+                container-shape: var(--mat-sys-corner-full),
+                extended-container-shape: var(--mat-sys-corner-full),
+                small-container-shape: var(--mat-sys-corner-full),
+            )
+        );
+    }
+
+    &.nat-flat {
+        @include mat.fab-overrides(
+            (
+                container-elevation-shadow: 0,
+                focus-container-elevation-shadow: 0,
+                hover-container-elevation-shadow: 0,
+                extended-container-elevation-shadow: 0,
+                extended-focus-container-elevation-shadow: 0,
+                extended-hover-container-elevation-shadow: 0,
+                small-container-elevation-shadow: 0,
+                small-focus-container-elevation-shadow: 0,
+                small-hover-container-elevation-shadow: 0,
+            )
+        );
+    }
+}
+
+.nat-gradient {
+    &-primary {
+        background: var(--nat-gradient-primary) !important;
+        color: var(--mat-sys-on-primary-container) !important;
+    }
+
+    &-secondary {
+        background: var(--nat-gradient-secondary) !important;
+        color: var(--mat-sys-on-secondary-container) !important;
+    }
+
+    &-tertiary {
+        background: var(--nat-gradient-tertiary) !important;
+        color: var(--mat-sys-on-tertiary-container) !important;
+    }
+
+    &-error {
+        background: var(--nat-gradient-error) !important;
+        color: var(--mat-sys-on-error) !important;
+    }
+
+    &-good {
+        background: var(--nat-gradient-good) !important;
+        color: var(--nat-on-good) !important;
+    }
+
+    &-bad {
+        background: var(--nat-gradient-bad) !important;
+        color: var(--nat-on-bad) !important;
+    }
+
+    &-inverse-surface {
+        background: var(--nat-gradient-inverse-surface) !important;
+        color: var(--mat-sys-inverse-on-surface) !important;
+    }
+}

package/src/lib/modules/alert/_alert.scss

@@ -0,0 +1,10 @@
+@use '@angular/material' as mat;
+
+.snackbar-error {
+    @include mat.snack-bar-overrides(
+        (
+            container-color: var(--mat-sys-error),
+            supporting-text-color: var(--mat-sys-on-error),
+        )
+    );
+}

package/src/lib/modules/alert/confirm.component.scss

@@ -0,0 +1,3 @@
+mat-dialog-content {
+    max-width: 40em;
+}

package/src/lib/modules/columns-picker/columns-picker.component.scss

@@ -0,0 +1,3 @@
+.align-with-checkbox {
+    padding-left: 61px; // Magic number to align menu item without checkboxes with menu items with checkboxes
+}

package/src/lib/modules/detail-header/detail-header.component.scss

@@ -0,0 +1,43 @@
+:host {
+    display: flex;
+    flex-direction: column;
+
+    .breadcrumb,
+    .body {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .breadcrumb {
+        position: relative;
+        top: 5px;
+    }
+
+    .body {
+        min-height: 40px;
+
+        & > *:not(:last-child) {
+            margin-right: 5px;
+        }
+
+        .label,
+        .newLabel {
+            flex: 1;
+        }
+
+        @media screen and (max-width: 600px) {
+            flex-direction: column;
+            align-items: flex-start;
+
+            & > *:not(:last-child) {
+                margin-bottom: 10px !important;
+            }
+
+            // Hide icon on small screen to save precious space
+            mat-icon {
+                display: none;
+            }
+        }
+    }
+}

package/src/lib/modules/dropdown-components/type-date/type-date.component.scss

@@ -0,0 +1,13 @@
+form {
+    display: grid;
+    grid: auto auto / 4em auto;
+    grid-gap: 0 1em;
+}
+
+form > mat-checkbox {
+    grid-column-start: 2;
+
+    // Prevent scroll bar
+    // TODO idem
+    margin-bottom: 0.3em;
+}

package/src/lib/modules/dropdown-components/type-number/type-number.component.scss

@@ -0,0 +1,7 @@
+:host {
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}

package/src/lib/modules/dropdown-components/type-text/type-text.component.scss

@@ -0,0 +1,7 @@
+:host {
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}

package/src/lib/modules/file/component/file.component.scss

@@ -0,0 +1,73 @@
+:host {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    border-color: var(--mat-sys-secondary-container);
+    background-color: var(--mat-sys-secondary-container);
+    overflow: hidden;
+
+    & > a {
+        position: relative;
+        flex: 1;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-color: var(--mat-sys-surface-container-lowest);
+
+        &.has-action {
+            cursor: pointer;
+
+            &.suggest-upload .action-overlay {
+                opacity: 0.66;
+            }
+
+            &:hover,
+            &.natural-file-over {
+                .action-overlay {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .action-overlay,
+    .file-preview {
+        display: flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 36px;
+        line-height: 1.3em;
+        text-align: center;
+    }
+
+    a[naturalFileDrop] {
+        border: 1px dashed var(--mat-sys-secondary-container);
+    }
+
+    .action-overlay,
+    .file-preview {
+        background-color: var(--mat-sys-secondary-fixed);
+        color: var(--mat-sys-on-secondary-fixed);
+    }
+
+    .action-overlay {
+        opacity: 0;
+
+        & > div {
+            display: flex;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            justify-content: center;
+            align-items: center;
+            opacity: 0;
+        }
+    }
+}

package/src/lib/modules/fixed-button/fixed-button.component.scss

@@ -0,0 +1,8 @@
+:host {
+    position: fixed !important;
+    right: 32px;
+
+    // Default bottom right
+    bottom: 32px;
+    z-index: 999; // < than 1000 that is the z-index of overlay contents
+}

package/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.scss

@@ -0,0 +1,63 @@
+:host {
+    display: block;
+}
+
+mat-icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+}
+
+.select-all {
+    display: inline-block;
+    margin-top: -15px;
+    margin-bottom: 5px;
+}
+
+.mat-tree-node.leaf {
+    margin-left: 48px;
+}
+
+.body {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    mat-tree {
+        flex: 66;
+        flex-shrink: 0;
+    }
+    mat-chip-listbox {
+        flex: 33;
+        margin-left: 10px;
+    }
+}
+
+mat-nested-tree-node {
+    display: block;
+
+    &,
+    .wrapper {
+        min-height: 48px;
+    }
+
+    mat-nested-tree-node {
+        display: block;
+        padding-left: 40px !important;
+    }
+}
+
+.invisible {
+    display: none;
+}
+
+.unexpandable {
+    padding-left: 40px;
+}
+
+.selection {
+    &,
+    .mat-icon {
+        margin-right: 10px;
+    }
+}

package/src/lib/modules/panels/{_panels.external.scss → panels.scss}

@@ -1,6 +1,16 @@
+@use '@angular/material' as mat;
+
 .cdk-overlay-container {
+    @include mat.dialog-overrides(
+        (
+            container-shape: 0,
+            container-max-width: 100vw,
+        )
+    );
+
     .panel {
         margin: 10px;
+        box-shadow: var(--mat-sys-level2);
         max-width: calc(100vw - 84px);
 
         @media (max-width: 960px) {
@@ -45,6 +55,7 @@
                 position: relative;
 
                 cursor: pointer;
+
                 .panelBody {
                     display: none !important;
                 }

package/src/lib/modules/relations/relations.component.scss

@@ -0,0 +1,22 @@
+:host {
+    display: flex;
+    flex-direction: column;
+
+    // Gap between vertical elements
+    & > *:not(:last-child) {
+        margin-bottom: 20px;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .loading {
+        margin: 20px auto;
+    }
+
+    .mat-column-unlink {
+        width: 2.5em;
+    }
+}

package/src/lib/modules/search/dropdown-container/dropdown-container.component.scss

@@ -0,0 +1,55 @@
+@use '@angular/material' as mat;
+
+@keyframes _mat-menu-enter {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+
+    to {
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes _mat-menu-exit {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.natural-dropdown-container {
+    display: flex;
+    flex-direction: column;
+    animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1);
+    box-shadow: var(--mat-sys-level2);
+    border-radius: 2px;
+    background: var(--mat-sys-surface-container-high);
+    height: 100%;
+
+    & > * > * > * {
+        outline: none !important;
+    }
+
+    &-content {
+        flex: 1;
+        padding: 5px;
+        overflow: auto;
+    }
+
+    .natural-dropdown-validate-button {
+        display: flex;
+        flex: none;
+        flex-direction: row;
+        justify-content: flex-end;
+        margin: 5px;
+    }
+
+    &.mat-menu-panel-exit-animation {
+        animation: _mat-menu-exit 100ms 25ms linear forwards;
+    }
+}

package/src/lib/modules/search/facet-selector/facet-selector.component.scss

@@ -0,0 +1,10 @@
+.mat-nav-list {
+    padding: 0;
+}
+
+.dropdown-title {
+    opacity: 0.7;
+    padding: 5px;
+    font-variant: all-small-caps;
+    font-size: 18px;
+}

package/src/lib/modules/search/group/group.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    natural-input {
+        display: inline-flex;
+        flex: auto;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+
+    natural-input:last-of-type {
+        flex: 1;
+        min-width: 250px;
+    }
+}