@zambon-dev/ui 0.0.1-bootstrap.0 → 1.0.0

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

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

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

@@ -1,14 +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",
-
-  "": ""
-}
+{
+  "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

@@ -1,14 +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",
-
-  "": ""
-}
+{
+  "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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zambon-dev/ui",
-  "version": "0.0.1-bootstrap.0",
+  "version": "1.0.0",
   "description": "Angular UI components, application framework and shared application layer for Zambon applications.",
   "keywords": [
     "angular",

package/styles/common.scss

@@ -1,10 +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';
+@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

@@ -1,101 +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);
-}
+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

@@ -1,13 +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;
-  }
-}
+.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

@@ -1,35 +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;
-    }
-  }
-}
+.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

@@ -1,44 +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;
-  }
-}
+.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;
+  }
+}