@zambon-dev/ui 0.0.0-stage → 1.0.0

package/i18n/shared/external-content/en.json

@@ -0,0 +1,12 @@
+{
+  "ExternalContent-Blocked-Title": "Cannot be displayed",
+  "ExternalContent-Blocked-Message": "This menu item points to an address that is not allowed. Ask an administrator to review it.",
+  "ExternalContent-Insecure-Title": "Cannot be embedded",
+  "ExternalContent-Insecure-Message": "This address is http, and the browser will not display insecure content inside a secure page. Open it in a new browser tab, or ask an administrator for an https address.",
+  "ExternalContent-OpenInNewTab": "Open in a new browser tab",
+  "ExternalContent-SlowHint": "Still loading. Some sites do not allow being displayed inside another application — try opening it in a new browser tab.",
+  "ExternalContent-Unavailable-Title": "Content unavailable",
+  "ExternalContent-Unavailable-Message": "Reopen this item from the menu to load it.",
+
+  "": ""
+}

package/i18n/shared/external-content/pt.json

@@ -0,0 +1,12 @@
+{
+  "ExternalContent-Blocked-Title": "Não é possível exibir",
+  "ExternalContent-Blocked-Message": "Este item de menu aponta para um endereço não permitido. Peça a um administrador para revisá-lo.",
+  "ExternalContent-Insecure-Title": "Não pode ser incorporado",
+  "ExternalContent-Insecure-Message": "Este endereço é http, e o navegador não exibe conteúdo não seguro dentro de uma página segura. Abra em uma nova aba do navegador ou peça a um administrador um endereço https.",
+  "ExternalContent-OpenInNewTab": "Abrir em nova aba do navegador",
+  "ExternalContent-SlowHint": "Ainda carregando. Alguns sites não permitem ser exibidos dentro de outra aplicação — tente abrir em uma nova aba do navegador.",
+  "ExternalContent-Unavailable-Title": "Conteúdo indisponível",
+  "ExternalContent-Unavailable-Message": "Reabra este item pelo menu para carregá-lo.",
+
+  "": ""
+}

package/i18n/shared/language-selector/en.json

@@ -0,0 +1,5 @@
+{
+  "LanguageSelector-Title": "Select language",
+
+  "": ""
+}

package/i18n/shared/language-selector/pt.json

@@ -0,0 +1,5 @@
+{
+  "LanguageSelector-Title": "Selecionar idioma",
+
+  "": ""
+}

package/i18n/shared/login/en.json

@@ -0,0 +1,14 @@
+{
+  "Login-DesignBy": "Design by Ricardo Zambon",
+  "Login-Errors-InternalServerError": "Occurred some error with the server, please try again.",
+  "Login-Errors-Invalid": "The username or password you entered is incorrect.",
+  "Login-Password-Required": "Please enter the password",
+  "Login-Password": "Type your password",
+  "Login-RememberMe": "Remember me",
+  "Login-SelectLanguage": "Select language",
+  "Login-SignIn": "Sign In",
+  "Login-Username-Required": "Please enter the username",
+  "Login-Username": "Type your username",
+
+  "": ""
+}

package/i18n/shared/login/pt.json

@@ -0,0 +1,14 @@
+{
+  "Login-DesignBy": "Design por Ricardo Zambon",
+  "Login-Errors-InternalServerError": "Ocorreu algum erro no servidor, por favor tente novamente.",
+  "Login-Errors-Invalid": "O usuário ou senha informados são inválidos",
+  "Login-Password-Required": "Por favor informe a senha",
+  "Login-Password": "Digite a sua senha",
+  "Login-RememberMe": "Lembrar de mim",
+  "Login-SelectLanguage": "Selecionar idioma",
+  "Login-SignIn": "Entrar",
+  "Login-Username-Required": "Por favor informe o usuário",
+  "Login-Username": "Digite o seu usuário",
+
+  "": ""
+}

package/i18n/shared/operations-history/en.json

@@ -0,0 +1,5 @@
+{
+  "OperationsHistory-Modal-Title": "Object changes details",
+
+  "": ""
+}

package/i18n/shared/operations-history/pt.json

@@ -0,0 +1,5 @@
+{
+  "OperationsHistory-Modal-Title": "Detalhes de alteração do objeto",
+
+  "": ""
+}

package/i18n/shared/services-history/en.json

@@ -0,0 +1,14 @@
+{
+  "ServicesHistory-Field-ChangedBy": "Employee",
+  "ServicesHistory-Field-ChangedOnFrom": "From",
+  "ServicesHistory-Field-ChangedOnTo": "To",
+  "ServicesHistory-Field-Name": "Action",
+  "ServicesHistory-Field-OnlyCurrentEntity": "This record only?",
+  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "An action usually writes to more than one table, and every operation it performed is listed by default — that is what shows the related records a change also touched. Tick this to see only the operations on this record.",
+  "ServicesHistory-Filters-Title": "History filters",
+  "ServicesHistory-FormGroup-Operations": "Operations",
+  "ServicesHistory-FormGroup-Period": "Period",
+  "ServicesHistory-FormGroup-Service": "Action",
+
+  "": ""
+}

package/i18n/shared/services-history/pt.json

@@ -0,0 +1,14 @@
+{
+  "ServicesHistory-Field-ChangedBy": "Funcionário",
+  "ServicesHistory-Field-ChangedOnFrom": "De",
+  "ServicesHistory-Field-ChangedOnTo": "Até",
+  "ServicesHistory-Field-Name": "Ação",
+  "ServicesHistory-Field-OnlyCurrentEntity": "Apenas este registro?",
+  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "Uma ação costuma alterar mais de uma tabela, e por padrão são listadas todas as operações que ela realizou — é isso que mostra os registros relacionados que a alteração também tocou. Marque para ver somente as operações sobre este registro.",
+  "ServicesHistory-Filters-Title": "Filtros do histórico",
+  "ServicesHistory-FormGroup-Operations": "Operações",
+  "ServicesHistory-FormGroup-Period": "Período",
+  "ServicesHistory-FormGroup-Service": "Ação",
+
+  "": ""
+}

package/i18n/shared/top-bar/en.json

@@ -0,0 +1,7 @@
+{
+  "TopBar-Notifications-Title": "Notifications",
+  "TopBar-Notifications-Empty": "No notifications",
+  "TopBar-Notifications-MarkAllRead": "Mark all as read",
+
+  "": ""
+}

package/i18n/shared/top-bar/pt.json

@@ -0,0 +1,7 @@
+{
+  "TopBar-Notifications-Title": "Notificações",
+  "TopBar-Notifications-Empty": "Nenhuma notificação",
+  "TopBar-Notifications-MarkAllRead": "Marcar todas como lidas",
+
+  "": ""
+}

package/package.json

@@ -1,6 +1,108 @@
 {
   "name": "@zambon-dev/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Angular UI components, application framework and shared application layer for Zambon applications.",
+  "keywords": [
+    "angular",
+    "components",
+    "framework",
+    "shared",
+    "ui",
+    "zambon",
+    "zlibraries"
+  ],
+  "author": "Ricardo Zambon",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RicardoZambon/ZLibraries.git",
+    "directory": "libs/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/RicardoZambon/ZLibraries/issues"
+  },
+  "homepage": "https://github.com/RicardoZambon/ZLibraries/tree/main/libs/ui#readme",
+  "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@angular/router": "^22.0.0",
+    "@auth0/angular-jwt": "^5.2.0",
+    "@microsoft/signalr": "^10.0.0",
+    "@ngx-translate/core": "^16.0.4",
+    "ngx-resize-observer": "^4.0.0",
+    "ngx-translate-multi-http-loader": "^19.0.2",
+    "rxjs": "^7.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "exports": {
+    "./styles/common": {
+      "sass": "./styles/common.scss",
+      "style": "./styles/common.scss",
+      "default": "./styles/common.scss"
+    },
+    "./styles/common.scss": {
+      "sass": "./styles/common.scss",
+      "style": "./styles/common.scss",
+      "default": "./styles/common.scss"
+    },
+    "./styles/variables": {
+      "sass": "./styles/variables.scss",
+      "style": "./styles/variables.scss",
+      "default": "./styles/variables.scss"
+    },
+    "./styles/variables.scss": {
+      "sass": "./styles/variables.scss",
+      "style": "./styles/variables.scss",
+      "default": "./styles/variables.scss"
+    },
+    "./styles/theme": {
+      "style": "./styles/theme.css",
+      "default": "./styles/theme.css"
+    },
+    "./styles/theme.css": {
+      "style": "./styles/theme.css",
+      "default": "./styles/theme.css"
+    },
+    "./i18n/*": {
+      "default": "./i18n/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/zambon-dev-ui.d.ts",
+      "default": "./fesm2022/zambon-dev-ui.mjs"
+    },
+    "./framework": {
+      "types": "./types/zambon-dev-ui-framework.d.ts",
+      "default": "./fesm2022/zambon-dev-ui-framework.mjs"
+    },
+    "./library": {
+      "types": "./types/zambon-dev-ui-library.d.ts",
+      "default": "./fesm2022/zambon-dev-ui-library.mjs"
+    },
+    "./shared": {
+      "types": "./types/zambon-dev-ui-shared.d.ts",
+      "default": "./fesm2022/zambon-dev-ui-shared.mjs"
+    },
+    "./testing": {
+      "types": "./types/zambon-dev-ui-testing.d.ts",
+      "default": "./fesm2022/zambon-dev-ui-testing.mjs"
+    }
+  },
+  "style": "styles/common.scss",
+  "module": "fesm2022/zambon-dev-ui.mjs",
+  "typings": "types/zambon-dev-ui.d.ts",
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/styles/common.scss

@@ -0,0 +1,10 @@
+@reference './theme.css';
+
+@import 'variables';
+@import 'components/button';
+@import 'components/card';
+@import 'components/dropdown-static';
+@import 'components/input';
+@import 'components/input-group';
+@import 'components/label';
+@import 'components/row';

package/styles/components/button.scss

@@ -0,0 +1,101 @@
+input[type='button'],
+input[type='reset'],
+input[type='submit'],
+button,
+a {
+  &.btn {
+    @apply relative px-3 py-1.5 inline-block text-center rounded-sm select-none;
+    @apply bg-slate-700 text-white;
+    @apply transition-all;
+
+    @apply focus:ring-4 focus:ring-slate-600/30;
+    @apply focus:bg-slate-800 hover:bg-slate-800;
+    @apply active:bg-slate-900;
+
+    i:not(:last-child) {
+      @apply mr-2;
+    }
+
+    &.disabled,
+    &:disabled {
+      @apply pointer-events-none opacity-[.60] ring-0;
+    }
+
+    &.error {
+      @apply bg-red-700 focus:ring-red-600/30;
+      @apply focus:bg-red-800 hover:bg-red-800;
+      @apply active:bg-red-900;
+
+      i:before {
+        @apply content-['\f00d'];
+      }
+    }
+
+    &.success {
+      @apply bg-green-700 ring-4 ring-green-600/30;
+      @apply pointer-events-none opacity-[.60];
+
+      i:before {
+        @apply content-['\f00c'];
+      }
+    }
+
+    &.loading {
+      @apply pointer-events-none opacity-[.60] ring-0 pl-8;
+      @apply transition-[margin-left] duration-200 ease-in-out;
+
+      &:before {
+        @apply content-[''] absolute left-2 top-0 bg-center bg-contain bg-no-repeat w-5 h-full animate-spin text-white;
+        @apply transition-opacity duration-200 ease-in-out;
+        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="white" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
+      }
+
+      i {
+        @apply invisible;
+      }
+    }
+  }
+}
+
+@mixin button($color) {
+  input[type='button'],
+  input[type='reset'],
+  input[type='submit'],
+  button,
+  a {
+    &.btn {
+      @for $i from 1 through 7 {
+        &.#{$color + '-' + $i + '00'} {
+          @if $i > 4 {
+            @apply text-white;
+          } @else {
+            @apply text-black;
+
+            &.loading:before {
+              background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="black" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="black" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
+            }
+          }
+
+          @apply #{'bg-' + $color + '-' + $i + '00'};
+
+          $ring: $i + '00/30';
+          @if $i < 5 {
+            $ring: '400/20';
+          }
+
+          @apply #{'focus:ring-' + $color + '-' + $ring};
+          @apply #{'focus:bg-' + $color + '-' + ($i+1) + '00'};
+          @apply #{'hover:bg-' + $color + '-' + ($i+1) + '00'};
+          @apply #{'active:bg-' + $color + '-' + ($i+2) + '00'};
+        }
+      }
+    }
+  }
+}
+
+$colors:
+  'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
+  'cyan', 'sky', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'primary';
+@each $color in $colors {
+  @include button($color);
+}

package/styles/components/card.scss

@@ -0,0 +1,13 @@
+.card {
+  @apply border rounded-lg relative mt-4 pt-3 px-2 pb-2;
+  @apply bg-white/80 border-gray-300/90;
+  @apply grid gap-3;
+
+  .title {
+    @apply text-lg font-semibold absolute -top-4 left-2 px-2 bg-white;
+  }
+
+  .input-group:not(:first-child) {
+    @apply mt-0;
+  }
+}

package/styles/components/dropdown-static.scss

@@ -0,0 +1,35 @@
+.dropdown {
+  @apply relative;
+
+  .btn {
+    @apply bg-neutral-600/60 text-white border border-neutral-900/40 backdrop-blur-md;
+
+    @apply focus:ring-neutral-600/30;
+    @apply focus:bg-neutral-600/70 hover:bg-neutral-600/70;
+    @apply active:bg-neutral-600/80;
+
+    &:after {
+      @apply content-[''] inline-block ml-1 align-middle;
+      @apply border-x-[.3em] border-t-[.3em] border-solid border-x-white/0;
+    }
+  }
+
+  &.show ul {
+    @apply block;
+  }
+
+  &.right ul {
+    @apply right-0;
+  }
+
+  ul {
+    @apply absolute hidden py-1 rounded-sm shadow-sm;
+    @apply bg-white/95 border border-neutral-400 backdrop-blur-md shadow-md;
+
+    .dropdown-item {
+      @apply block p-2 cursor-pointer whitespace-nowrap select-none;
+      @apply focus:bg-neutral-200/80 hover:bg-neutral-200/80;
+      @apply active:bg-slate-400 active:text-white;
+    }
+  }
+}

package/styles/components/input-group.scss

@@ -0,0 +1,44 @@
+.input-group {
+  &.inline {
+    @apply flex flex-row-reverse flex-wrap items-stretch mb-3;
+
+    .input-group-text {
+      @apply py-1.5 px-3 rounded-l flex flex-row items-center whitespace-nowrap select-none;
+      @apply bg-slate-500 text-gray-50 border-blue-400;
+    }
+
+    input[type='text'].form-input,
+    input[type='password'].form-input {
+      @apply mt-0 rounded-l-none -ml-1;
+      @apply w-1 grow;
+
+      &.ng-touched.ng-invalid {
+        ~ .input-group-text {
+          @apply bg-red-600;
+        }
+      }
+    }
+  }
+
+  &.checkbox {
+    @apply pt-[1.85rem] text-center;
+  }
+
+  &:not(:first-child) {
+    @apply mt-3;
+  }
+
+  input[type='text'].form-input,
+  input[type='password'].form-input {
+    &.ng-touched.ng-invalid {
+      ~ .validations {
+        @apply block;
+      }
+    }
+  }
+
+  .validations {
+    @apply hidden basis-full mt-1;
+    @apply text-red-600 text-sm;
+  }
+}

package/styles/components/input.scss

@@ -0,0 +1,99 @@
+.form-input {
+  @apply border-gray-400;
+  @apply focus:border-gray-400 focus:ring-4 focus:ring-primary-400/30;
+  @apply transition-colors transition-shadow;
+
+  @apply invalid:border-red-400;
+
+  @apply disabled:bg-slate-100;
+
+  &.ng-invalid.ng-touched {
+    @apply border-red-600;
+  }
+}
+
+input[type='text'],
+input[type='number'],
+input[type='password'],
+textarea {
+  &.form-input {
+    @apply mt-1 block w-full rounded-md shadow-xs;
+
+    &.ng-invalid.ng-touched {
+      @apply pr-9;
+      @apply focus:ring-red-400/30;
+      @apply bg-no-repeat bg-[right_0.5625rem_center] bg-[length:1.125rem_1.125rem];
+      background-image: url("data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    }
+  }
+}
+
+input[type='checkbox'].form-input {
+  @apply p-0.5 h-5 w-5 rounded-sm relative;
+  @apply inline-flex flex-row justify-end;
+  @apply appearance-none bg-white;
+
+  @apply disabled:pointer-events-none disabled:opacity-50;
+
+  &:not(.switch) {
+    @apply border-2 shadow-md focus:ring-3 focus:shadow-none;
+
+    &:before {
+      @apply content-[''] rounded-sm;
+      @apply flex items-center justify-center absolute inset-0 p-1;
+      font-family: var(--fa-family-classic, 'Font Awesome 6 Free');
+      font-weight: 900;
+    }
+  }
+
+  &:checked {
+    @apply bg-none bg-primary-400 border-primary-400/80;
+
+    &:before {
+      @apply content-['\f00c'];
+      @apply text-white;
+    }
+  }
+
+  &:disabled {
+    ~ label {
+      @apply opacity-50;
+    }
+  }
+
+  ~ label {
+    @apply ml-2 select-none;
+  }
+}
+
+input[type='checkbox'].form-input.switch {
+  @apply w-10 rounded-[2rem];
+  @apply appearance-none bg-white;
+
+  &:before {
+    @apply content-[''] h-full aspect-square rounded-full;
+    @apply bg-slate-500/60;
+  }
+
+  &:after {
+    @apply content-[''] grow;
+    transition: flex-grow 0.15s ease-in-out;
+  }
+
+  &:focus:before {
+    @apply bg-slate-500/60;
+  }
+
+  &:checked {
+    @apply bg-none bg-primary-400 border-primary-400/80;
+
+    &:before {
+      @apply content-[''];
+      @apply bg-white;
+    }
+
+    &:after {
+      @apply grow-0;
+    }
+  }
+}

package/styles/components/label.scss

@@ -0,0 +1,3 @@
+.form-label {
+  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
+}

package/styles/components/row.scss

@@ -0,0 +1,48 @@
+.row {
+  @apply grid gap-3;
+
+  &.cols-1 {
+    @apply grid-cols-1;
+  }
+  &.cols-2 {
+    @apply grid-cols-2;
+  }
+  &.cols-3 {
+    @apply grid-cols-3;
+  }
+  &.cols-4 {
+    @apply grid-cols-4;
+  }
+  &.cols-5 {
+    @apply grid-cols-5;
+  }
+  &.cols-6 {
+    @apply grid-cols-6;
+  }
+  &.cols-7 {
+    @apply grid-cols-7;
+  }
+  &.cols-8 {
+    @apply grid-cols-8;
+  }
+  &.cols-9 {
+    @apply grid-cols-9;
+  }
+  &.cols-10 {
+    @apply grid-cols-10;
+  }
+  &.cols-11 {
+    @apply grid-cols-11;
+  }
+  &.cols-12 {
+    @apply grid-cols-12;
+  }
+
+  .input-group ~ .input-group {
+    @apply mt-0;
+  }
+
+  ~ .row {
+    @apply mt-3;
+  }
+}

package/styles/mixins/background.scss

@@ -0,0 +1,31 @@
+@mixin fixed-background($image, $color) {
+  @apply fixed -z-50 w-full h-screen;
+
+  @include background($image, $color);
+}
+
+@mixin background($image, $color) {
+  @apply overflow-hidden;
+
+  &,
+  &:before {
+    @apply bg-[url(#{$image})] bg-fixed bg-cover;
+  }
+
+  &:before,
+  &:after {
+    @apply content-[''] absolute inset-0;
+  }
+
+  &:before {
+    @apply blur-sm;
+  }
+
+  &:after {
+    @apply #{$color};
+  }
+
+  * {
+    @apply z-10;
+  }
+}