@muziehdesign/components 18.2.0-next.0 → 18.2.0-next.1998

package/README.md

@@ -1,3 +1,3 @@
-# Components
-
+# Components
+
 Components from Muzieh Design System.

package/assets/icons/chevron-down-solid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+  <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
+</svg>

package/assets/icons/chevron-up-solid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+  <path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" />
+</svg>

package/design/_accordion.scss

@@ -0,0 +1,15 @@
+.details {
+    @apply my-2.5;
+}
+.summary {
+    @apply relative list-none;
+} 
+
+.summary::after {
+    @apply w-4 h-4 inline-block absolute right-6 top-1/2 -translate-y-1/2;
+    content: url('/assets/icons/chevron-up-solid.svg');
+}
+
+.details[open] .summary::after {
+    content: url('/assets/icons/chevron-down-solid.svg');
+}

package/design/_alert.scss

@@ -0,0 +1,51 @@
+.alert {
+    @apply rounded-sm p-5;
+}
+
+.alert-title {
+    @apply inline-block align-middle;
+}
+
+.alert-body {
+    @apply pb-0.5 ml-7;
+}
+
+.alert-icon {
+    @apply inline-block align-middle w-7 -mt-0.5;
+}
+
+.alert-info {
+    @apply bg-blue-50 text-primary;
+
+    .alert-icon {
+        @apply text-blue-800;
+    }
+}
+
+.alert-success {
+    @apply bg-green-50 text-success;
+
+    .alert-icon {
+        @apply text-green-800;
+    }
+}
+
+.alert-error {
+    @apply bg-red-50 text-danger;
+
+    .alert-icon {
+        @apply text-red-800;
+    }
+}
+
+.alert-warning {
+    @apply bg-yellow-50 text-warning;
+
+    .alert-icon {
+        @apply text-yellow-800;
+    }
+}
+
+.alert-footer {
+    @apply mt-3 ml-3;
+}

package/design/_base.scss

@@ -0,0 +1,54 @@
+@layer base {
+    h1 {
+        @apply text-2xl font-medium mt-8;
+    }
+
+    h2 {
+        @apply text-xl font-medium mt-8;
+    }
+
+    h3 {
+        @apply text-lg font-medium mt-8;
+    }
+
+    h4 {
+        @apply text-base font-medium;
+    }
+
+    h5 {
+        @apply text-sm font-semibold mt-5;
+    }
+
+    h6 {
+        @apply text-sm font-semibold mt-5;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply mb-1;
+    }
+
+    a {
+        @apply text-blue-500 hover:text-blue-900 hover:underline;
+    }
+
+    p {
+        @apply my-2;
+    }
+
+    small {
+        @apply text-sm;
+    }
+
+    details summary {
+        cursor: pointer;
+    }
+
+    strong {
+        @apply font-medium;
+    }
+}

package/design/_breadcrumb.scss

@@ -0,0 +1,15 @@
+@layer components {
+    .breadcrumbs ol {
+        @apply flex space-x-4;
+    }
+
+    .breadcrumbs li:not(:last-child):after {
+        content: '/';
+        @apply text-gray-400 pl-4;
+    }
+
+    .breadcrumbs,
+    .breadcrumbs a {
+        @apply text-gray-600;
+    }
+}

package/design/_button.scss

@@ -0,0 +1,55 @@
+.button {
+    @apply inline-flex px-4 py-2.5 font-medium items-center text-sm space-x-3 focus:outline-none focus:ring-2 focus:ring-offset-2 text-secondary;
+}
+
+.button-primary {
+    @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 active:bg-blue-700;
+}
+
+.button-secondary {
+    @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 focus:ring-blue-500 active:bg-gray-300;
+}
+
+.button-danger {
+    @apply text-white shadow-sm bg-red-500 hover:bg-red-600 focus:ring-red-500 active:bg-red-600;
+}
+
+.button-warning {
+    @apply text-white shadow-sm bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500 active:bg-yellow-600;
+}
+
+.button-link {
+    @apply hover:underline text-primary;
+}
+
+.button-list button:not(last-child) {
+    @apply mr-4 mb-2;
+}
+
+.button.loading {
+    @apply cursor-wait relative;
+}
+
+.button-loading-spinner {
+    @apply h-5 w-5 animate-spin m-auto;
+}
+
+.button-loading-overlay {
+    @apply absolute inset-0 flex items-center justify-center;
+}
+
+.button-secondary .button-loading-overlay {
+    @apply bg-gray-200;
+}
+
+.button-primary .button-loading-overlay {
+    @apply bg-blue-700;
+}
+
+.button-icon .icon {
+    @apply m-0;
+}
+
+.link-action {
+    @apply cursor-pointer;
+}

package/design/_date-picker.scss

@@ -0,0 +1,23 @@
+.mat-calendar-body-cell-content {
+  border-radius: 0px!important;
+  border-width: 0px!important;
+  border: 1px solid #E5E7EB!important;
+  width: 95%!important;
+  height: 95%!important;
+}
+
+.mat-calendar-body-selected {
+  @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 active:bg-blue-700;
+}
+
+.mat-calendar-body-label {
+  opacity: 0;
+}
+
+.mat-calendar-body-label[colspan="7"] {
+  display: none;
+}
+
+.mat-calendar-body-disabled {
+  background-color: #F9FAFB!important;
+}

package/design/_dl.scss

@@ -0,0 +1,22 @@
+@layer components {
+    .dl-horizontal dt,
+    .dl-horizontal dd {
+        @apply inline-block p-3;
+    }
+
+    .dl-horizontal dt {
+        @apply w-48 align-top font-medium;
+    }
+
+    .dl-horizontal .dl-item:nth-child(odd) {
+        @apply bg-gray-100;
+    }
+
+    .dl-stacked dt {
+        @apply text-gray-600 mt-2 tracking-wide text-sm;
+    }
+
+    .dl-stacked dd {
+        @apply mb-2;
+    }
+}

package/design/_dropdown-menu.scss

@@ -0,0 +1,17 @@
+.dropdown-menu {
+    display: none;
+}
+
+.dropdown-menu.show {
+    z-index: 1000;
+    float: left;
+    min-width: 10rem;
+    padding: 0.5rem 0;
+    display: block;
+    background-color: white;
+}
+
+.dropdown-item {
+    display: block;
+    padding: 0.5rem;
+}

package/design/_form.scss

@@ -0,0 +1,179 @@
+.form {
+    @apply max-w-md;
+
+    // TODO
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply mt-3 mb-0;
+    }
+
+    header {
+        @apply mb-2;
+    }
+
+    .description {
+        @apply text-gray-600 text-sm;
+    }
+
+    .footer {
+        @apply mt-4 mb-3;
+    }
+}
+
+.field {
+    @apply block py-1 text-sm;
+
+    .help-text {
+        @apply text-gray-500 block mt-1;
+    }
+}
+
+.field-label {
+    @apply text-gray-600 font-medium;
+}
+
+.field-checkbox {
+    @apply flex items-center;
+
+    .field-label {
+        @apply text-current font-normal pl-2 text-base;
+    }
+}
+
+.field-control:not([type='checkbox']) {
+    @apply mt-1 block w-full;
+}
+
+.fieldset {
+    @apply mt-6;
+
+    legend {
+        @apply text-gray-700 tracking-wide uppercase font-medium text-sm;
+    }
+}
+
+.option-list {
+    @apply block py-1;
+
+    legend {
+        @apply text-gray-600 text-sm font-medium;
+    }
+}
+
+.form-message {
+    @apply p-1 block;
+
+    // this is temporary
+    &.success {
+        @apply text-success;
+    }
+    &.success svg {
+        @apply text-success inline-block;
+    }
+    &.failed svg {
+        @apply text-danger inline-block;
+    }
+}
+
+.field-error {
+    @apply mt-1 block text-danger;
+}
+
+.form {
+    .ng-submitted .ng-invalid:not(:focus),
+    .ng-touched.ng-invalid:not(:focus) {
+        @apply border-danger;
+    }
+}
+
+/*
+.field-control-addon {
+    @apply px-3 inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary;
+
+    &.field-control {
+        @apply w-full;
+    }
+
+    .button {
+        @apply py-1 h-full -ml-2.5 -mr-3;
+    }
+}
+
+.field-control-group {
+    @apply flex items-stretch h-full border border-gray-500 shadow;
+
+    .field-control {
+        @apply grow m-0 border-transparent outline-0;
+    }
+
+    /*
+    .field-control:focus {
+        @apply border border-primary;
+    }
+
+    &:focus-within {
+        @apply border-primary outline-2 outline outline-offset-2;
+    }
+
+    &.invalid {
+        @apply border-danger;
+    }
+
+    .ng-submitted .field-control.ng-invalid, .field-control.ng-touched.ng-invalid {
+        @apply border-0;
+    }
+}*/
+
+
+.field-control-addon {
+    @apply inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary px-3;
+
+    &.field-control {
+        @apply w-full;
+    }
+
+    .button {
+        @apply py-1 h-full -mr-3;
+    }
+}
+
+.field-control-group {
+    @apply flex items-stretch h-full border border-gray-500 shadow;
+
+    .field-control {
+        box-shadow: none;
+        @apply grow m-0 border-0 outline-0;
+    }
+
+    &:focus-within {
+        @apply outline outline-1 outline-primary;
+    }
+
+    &.invalid:not(:focus-within) {
+        @apply border-danger;
+    }
+
+    > *:not(:first-child).field-control-addon {
+        @apply pl-0;
+    }
+
+    > *:not(:last-child).field-control-addon {
+        @apply pr-0;
+    }
+}
+
+.field-control-combo {
+    @apply flex items-stretch;
+
+    .field-control {
+        @apply grow border;
+    }
+
+    .button {
+        @apply -mx-2 mt-1;
+    }
+}

package/design/_infinite-scroll.scss

@@ -0,0 +1,16 @@
+.infinite-scroll-container {
+    .scroll-item {
+        @apply cursor-pointer p-2 border-b border-gray-300;
+        &:hover {
+            @apply bg-blue-100;
+        }
+    }
+
+    .scroll-item-selected {
+        @apply bg-blue-100;
+    }
+
+    .scroll-spinner-container {
+        @apply mt-5;
+    }
+}

package/design/_material.scss

@@ -0,0 +1,57 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
+// @include mat.all-legacy-component-typographies();
+@include mat.all-component-typographies();
+/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
+// @include mat.legacy-core();
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$color-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$color-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$color-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$muzieh-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $color-primary,
+    accent: $color-accent,
+    warn: $color-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
+// @include mat.all-legacy-component-themes($muzieh-theme);
+@include mat.all-component-themes($muzieh-theme);
+
+.mat-mdc-menu-panel {
+    @apply min-h-0 #{!important};
+}
+
+.mat-mdc-menu-item {
+    @apply text-gray-700 block px-4 py-2 text-sm h-9 leading-3 #{!important};
+}