@hug/hospitality 0.0.4-alpha.16 → 0.0.4-alpha.17

package/dist/README.md

@@ -0,0 +1,85 @@
+<h1 align="center">
+    @hug/hospitality
+</h1>
+
+<p align="center">
+    <br/>
+    <a href="https://www.hug.ch">
+        <img src="https://cdn.hug.ch/svgs/hug/hug-logo-horizontal.svg" alt="hug-logo" height="54px" />
+    </a>
+    <br/><br/>
+    <i>TODO: title</i>
+    <br/><br/>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/@hug/hospitality">
+        <img src="https://img.shields.io/npm/v/@hug/hospitality.svg?color=blue&logo=npm" alt="npm version" /></a>
+    <a href="https://npmcharts.com/compare/@hug/hospitality?minimal=true">
+        <img src="https://img.shields.io/npm/dw/@hug/hospitality.svg?color=blue&logo=npm" alt="npm donwloads" /></a>
+    <a href="https://github.com/dsi-hug/hospitality/blob/main/LICENSE">
+        <img src="https://img.shields.io/badge/license-GPLv3-ff69b4.svg" alt="license GPLv3" /></a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/dsi-hug/hospitality/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr">
+        <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" /></a>
+</p>
+
+<hr/>
+
+## Getting started
+
+TODO:
+
+#### Installation
+
+```sh
+npm install @hug/hospitality --save-dev
+```
+
+```sh
+yarn add @hug/hospitality --dev
+```
+
+
+## Usage
+
+TODO:
+
+#### Examples
+
+TODO:
+
+
+## Development
+
+See the [developer docs][developer].
+
+
+## Contributing
+
+#### > Want to Help?
+
+Want to file a bug, contribute some code or improve documentation? Excellent!
+
+But please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.
+
+#### > Code of Conduct
+
+Please read and follow the [Code of Conduct][codeofconduct], and help us keep this project open and inclusive.
+
+
+## Credits
+
+Copyright (C) 2025 [HUG - Hôpitaux Universitaires Genève][dsi-hug]
+
+[![love@hug](https://img.shields.io/badge/@hug-%E2%9D%A4%EF%B8%8Flove-magenta)][dsi-hug]
+
+
+
+
+[developer]: https://github.com/dsi-hug/hospitality/blob/main/DEVELOPER.md
+[contributing]: https://github.com/dsi-hug/hospitality/blob/main/CONTRIBUTING.md
+[codeofconduct]: https://github.com/dsi-hug/hospitality/blob/main/CODE_OF_CONDUCT.md
+[dsi-hug]: https://github.com/dsi-hug

package/dist/material/button/button.scss

@@ -0,0 +1,237 @@
+@use "@angular/material" as mat;
+
+button {
+    gap: 0.5rem;
+
+    @include mat.button-overrides(
+        (
+            filled-horizontal-padding: 1rem,
+            outlined-horizontal-padding: 1rem,
+            protected-horizontal-padding: 1rem,
+            text-horizontal-padding: 1rem,
+            text-with-icon-horizontal-padding: 1rem,
+            outlined-label-text-color: var(--mat-sys-on-surface-variant),
+            outlined-outline-color: var(--mat-sys-outline-variant),
+            outlined-disabled-outline-color: var(--mat-sys-outline-variant),
+            outlined-state-layer-color:
+                color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent),
+            outlined-ripple-color:
+                color-mix(in srgb, var(--mat-sys-on-surface) 10%, transparent),
+        )
+    );
+
+    &[mat-button],
+    &[mat-stroked-button],
+    &[mat-flat-button] {
+        > mat-icon.mat-icon {
+            margin: 0;
+            font-size: 1.25rem;
+            height: 1.25rem;
+            width: 1.25rem;
+        }
+
+        &:disabled {
+            background-color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface) 12%,
+                transparent
+            );
+        }
+    }
+
+    &[hy-size="small"] {
+        gap: 0.5rem;
+
+        @include mat.button-density(-1);
+        @include mat.button-overrides(
+            (
+                filled-horizontal-padding: 0.75rem,
+                outlined-horizontal-padding: 0.75rem,
+                protected-horizontal-padding: 0.75rem,
+                text-horizontal-padding: 0.75rem,
+                text-with-icon-horizontal-padding: 0.75rem,
+            )
+        );
+        @include mat.icon-button-overrides(
+            (
+                state-layer-size: 2rem,
+            )
+        );
+
+        &[mat-icon-button] {
+            > mat-icon.mat-icon {
+                margin: 0;
+                font-size: 1.25rem;
+                height: 1.25rem;
+                width: 1.25rem;
+            }
+        }
+    }
+
+    &[hy-size="x-large"] {
+        @include mat.button-overrides(
+            (
+                filled-container-height: 3.5rem,
+                outlined-container-height: 3.5rem,
+                protected-container-height: 3.5rem,
+                text-container-height: 3.5rem,
+
+                filled-horizontal-padding: 1.5rem,
+                outlined-horizontal-padding: 1.5rem,
+                protected-horizontal-padding: 1.5rem,
+                text-horizontal-padding: 1.5rem,
+                text-with-icon-horizontal-padding: 1.5rem,
+
+                filled-label-text-font: var(--mat-sys-title-medium-font),
+                outlined-label-text-font: var(--mat-sys-title-medium-font),
+                protected-label-text-font: var(--mat-sys-title-medium-font),
+                text-label-text-font: var(--mat-sys-title-medium-font),
+                filled-label-text-size: var(--mat-sys-title-medium-size),
+                outlined-label-text-size: var(--mat-sys-title-medium-size),
+                protected-label-text-size: var(--mat-sys-title-medium-size),
+                text-label-text-size: var(--mat-sys-title-medium-size),
+                filled-label-text-tracking: var(--mat-sys-title-medium-tracking),
+                outlined-label-text-tracking:
+                    var(--mat-sys-title-medium-tracking),
+                protected-label-text-tracking:
+                    var(--mat-sys-title-medium-tracking),
+                text-label-text-tracking: var(--mat-sys-title-medium-tracking),
+                filled-label-text-weight: var(--mat-sys-title-medium-weight),
+                outlined-label-text-weight: var(--mat-sys-title-medium-weight),
+                protected-label-text-weight: var(--mat-sys-title-medium-weight),
+                text-label-text-weight: var(--mat-sys-title-medium-weight),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                state-layer-size: 3.5rem,
+            )
+        );
+
+        &[mat-button],
+        &[mat-stroked-button],
+        &[mat-flat-button] {
+            > mat-icon.mat-icon {
+                font-size: 1.5rem;
+                height: 1.5rem;
+                width: 1.5rem;
+            }
+        }
+    }
+
+    &[hy-appearance="tonal"],
+    &[hy-appearance="filled"],
+    &[hy-appearance="warning-filled"] {
+        &:disabled {
+            background-color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface) 10%,
+                transparent
+            );
+        }
+    }
+
+    &[hy-appearance="tonal"] {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-secondary-container),
+                filled-label-text-color: var(--mat-sys-on-secondary-container),
+                filled-state-layer-color: var(--mat-sys-on-secondary-container),
+                filled-ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-secondary-container) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-secondary-container),
+                state-layer-color: var(--mat-sys-on-secondary-container),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-secondary-container) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        &[mat-icon-button]:enabled {
+            background-color: var(--mat-sys-secondary-container);
+        }
+    }
+
+    &[hy-appearance="filled"] {
+        background-color: var(--mat-sys-primary);
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-primary),
+                state-layer-color: var(--mat-sys-on-primary),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-primary) 10%,
+                        transparent
+                    ),
+            )
+        );
+    }
+
+    &[hy-appearance="warning-filled"] {
+        @include mat.button-overrides(
+            (
+                filled-container-color: var(--mat-sys-warning),
+                filled-label-text-color: var(--mat-sys-on-warning),
+                filled-state-layer-color: var(--mat-sys-on-warning),
+                filled-ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-warning) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-on-warning),
+                state-layer-color: var(--mat-sys-on-warning),
+                ripple-color:
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-warning) 10%,
+                        transparent
+                    ),
+            )
+        );
+
+        &[mat-icon-button]:enabled {
+            background-color: var(--mat-sys-warning);
+        }
+    }
+
+    &[hy-appearance="warning-text"] {
+        @include mat.button-overrides(
+            (
+                text-label-text-color: var(--mat-sys-warning),
+                text-state-layer-color: var(--mat-sys-warning),
+                text-ripple-color:
+                    color-mix(in srgb, var(--mat-sys-warning) 10%, transparent),
+            )
+        );
+
+        @include mat.icon-button-overrides(
+            (
+                icon-color: var(--mat-sys-warning),
+                state-layer-color: var(--mat-sys-warning),
+                ripple-color:
+                    color-mix(in srgb, var(--mat-sys-warning) 10%, transparent),
+            )
+        );
+    }
+}

package/dist/material/dialog/dialog.scss

@@ -0,0 +1,29 @@
+@use "@angular/material" as mat;
+
+mat-dialog-container {
+    @include mat.dialog-overrides(
+        (
+            actions-padding: 1.5rem,
+            headline-padding: 0.25rem 1.5rem 1rem,
+        )
+    );
+}
+
+.warning-dialog {
+    mat-dialog-container {
+        @include mat.dialog-overrides(
+            (
+                subhead-color: var(--mat-sys-warning),
+                headline-padding: 1.5rem 1.5rem 1rem,
+            )
+        );
+    }
+
+    [mat-dialog-title]:before {
+        content: "warning";
+        font-family: "Material Symbols Outlined Variable";
+        display: inline;
+        padding-right: 10px;
+        vertical-align: bottom;
+    }
+}

package/dist/material/form-field/form-field.scss

@@ -0,0 +1,97 @@
+@use "@angular/material" as mat;
+
+mat-form-field {
+    @include mat.form-field-density(-2);
+    @include mat.form-field-overrides(
+        (
+            outlined-focus-label-text-color: var(--mat-sys-primary),
+            outlined-focus-outline-color: var(--mat-sys-primary),
+            outlined-focus-outline-width: 3px,
+            outlined-error-label-text-color: var(--mat-sys-error),
+            outlined-error-focus-label-text-color: var(--mat-sys-error),
+            outlined-error-outline-color: var(--mat-sys-error),
+            outlined-error-caret-color: var(--mat-sys-error),
+            outlined-input-text-placeholder-color:
+                var(--mat-sys-on-surface-variant),
+        )
+    );
+
+    .mat-mdc-floating-label {
+        top: 50%;
+    }
+
+    &:has(textarea) {
+        &[hy-size="small"] {
+            .mat-mdc-form-field-icon-suffix {
+                padding: 0.5rem 0;
+
+                mat-icon {
+                    padding-top: 0.125rem;
+                }
+            }
+        }
+
+        &[hy-size="large"] {
+            .mat-mdc-form-field-icon-suffix {
+                padding: 1rem 0;
+            }
+        }
+
+        .mat-mdc-form-field-icon-suffix {
+            height: -webkit-fill-available;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            padding-bottom: 0.75rem;
+            padding-top: 0.75rem;
+            margin-left: 0.25rem;
+        }
+    }
+
+    &[hy-size="small"] {
+        @include mat.form-field-density(-4);
+
+        .mat-mdc-form-field-icon-suffix,
+        .mat-mdc-form-field-icon-prefix {
+            button {
+                margin: 0 0.5rem;
+            }
+
+            mat-icon {
+                font-size: 1.25rem;
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+    }
+
+    &[hy-size="large"] {
+        @include mat.form-field-density(0);
+    }
+
+    &.mat-form-field-disabled {
+        mat-hint {
+            color: color-mix(
+                in srgb,
+                var(--mat-sys-on-surface-variant) 38%,
+                transparent
+            );
+        }
+    }
+
+    > .mat-mdc-text-field-wrapper {
+        background-color: var(--mat-sys-surface-container-lowest);
+    }
+
+    .mat-mdc-form-field-icon-suffix,
+    .mat-mdc-form-field-icon-prefix {
+        width: 3rem;
+        button {
+            margin: 0 0.25rem;
+        }
+    }
+
+    mat-hint {
+        color: var(--mat-sys-on-surface-variant);
+    }
+}

package/dist/material/theme/theme.scss

@@ -0,0 +1,69 @@
+@use "@angular/material" as mat;
+@use "./utils" as map;
+
+$override-colors: (
+    primary: var(--hy-color-primary),
+    on-primary: var(--hy-color-on-primary),
+    primary-container: var(--hy-color-primary-container),
+    on-primary-container: var(--hy-color-on-primary-container),
+    primary-fixed: var(--hy-color-primary-fixed),
+    primary-fixed-dim: var(--hy-color-primary-fixed-dim),
+    on-primary-fixed: var(--hy-color-primary-fixed),
+    on-primary-fixed-variant: var(--hy-color-primary-fixed-variant),
+    secondary: var(--hy-color-secondary),
+    on-secondary: var(--hy-color-on-secondary),
+    secondary-container: var(--hy-color-secondary-container),
+    on-secondary-conmtainer: var(--hy-color-on-secondary-container),
+    secondary-fixed: var(--hy-color-secondary-fixed),
+    secondary-fixed-dim: var(--hy-color-secondary-fixed-dim),
+    on-secondary-fixed: var(--hy-color-secondary-fixed),
+    on-secondary-fixed-variant: var(--hy-color-secondary-fixed-variant),
+    tertiary: var(--hy-color-tertiary),
+    on-tertiary: var(--hy-color-on-tertiary),
+    tertiary-container: var(--hy-color-tertiary-container),
+    on-tertiary-conmtainer: var(--hy-color-on-tertiary-container),
+    tertiary-fixed: var(--hy-color-tertiary-fixed),
+    tertiary-fixed-dim: var(--hy-color-tertiary-fixed-dim),
+    on-tertiary-fixed: var(--hy-color-tertiary-fixed),
+    on-tertiary-fixed-variant: var(--hy-color-tertiary-fixed-variant),
+    error: var(--hy-color-error),
+    on-error: var(--hy-color-on-error),
+    error-container: var(--hy-color-error-container),
+    on-error-conmtainer: var(--hy-color-on-error-container),
+    surface: var(--hy-color-surface),
+    surface-dim: var(--hy-color-surface-dim),
+    surface-bright: var(--hy-color-surface-bright),
+    surface-container-lowest: var(--hy-color-surface-container-lowest),
+    surface-container-low: var(--hy-color-surface-container-low),
+    surface-container: var(--hy-color-surface-container),
+    surface-container-high: var(--hy-color-surface-container-high),
+    surface-container-highest: var(--hy-color-surface-container-highest),
+    on-surface: var(--hy-color-on-surface),
+    on-surface-variant: var(--hy-color-on-surface-variant),
+    ouline: var(--hy-color-outline),
+    ouline-variant: var(--hy-color-outline-variant),
+    inverse-surface: var(--hy-color-inverse-surface),
+    inverse-on-surface: var(--hy-color-inverse-on-surface),
+    inverse-primary: var(--hy-color-inverse-primary),
+    background: var(--hy-color-background),
+    on-background: var(--hy-color-on-background),
+    scrim: var(--hy-color-scrim),
+    shadow: var(--hy-color-shadow),
+);
+
+$override-typography: ();
+
+$override-density: ();
+
+$overrides: map.merge-all($override-colors, $override-typography);
+
+@mixin theme {
+    @include mat.theme(
+        (
+            color: (),
+            typography: Roboto,
+            density: 0,
+        ),
+        $overrides
+    );
+}

package/dist/material/theme/utils.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+@function merge-all($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map-merge($collection, $map);
+  }
+  @return $collection;
+}