@muziehdesign/components 19.2.8-next.2413 → 19.2.8-next.2456

package/lib/svg-icon/svg-icon.component.d.ts

@@ -3,6 +3,9 @@ import * as i0 from "@angular/core";
 export declare class SvgIconComponent {
     config: SvgIconOptions;
     key: string;
+    /**
+     * @deprecated Pass in whole key instead.
+     */
     type: 'outline' | 'solid' | string;
     size: string;
     fileUrl: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muziehdesign/components",
-  "version": "19.2.8-next.2413",
+  "version": "19.2.8-next.2456",
   "peerDependencies": {
     "@angular/common": "^19.2.8",
     "@angular/core": "^19.2.8",

package/public-api.d.ts

@@ -36,9 +36,6 @@ export { MzDialogConfig } from './lib/dialog/dialog-config';
 export { MzDialogRef } from './lib/dialog/dialog-ref';
 export { DrawerContainerComponent } from './lib/dialog/container/drawer-container.component';
 export { MzDialogModule } from './lib/dialog/dialog.module';
-export { MzDropdownComponent } from './lib/dropdown/dropdown.component';
-export { MzDropdownItemDirective } from './lib/dropdown/dropdown-item.directive';
-export { MzDropdownModule } from './lib/dropdown/dropdown.module';
 export { FilterComponent } from './lib/filter/filter.component';
 export { FilterOptionModel } from './lib/filter/filter-option.model';
 export { OptionsFilterComponent } from './lib/options-filter/options-filter.component';

package/styles/design/_button.scss

@@ -1,17 +1,21 @@
 .button {
     --tw-ring-color: var(--color-primary);
-    @apply inline-flex px-4 py-2.5 font-medium items-center text-sm gap-1 focus:outline-none focus:ring-2 focus:ring-offset-2 text-secondary relative;
+    @apply inline-flex px-4 py-2.5 font-medium items-center text-sm gap-2 focus:outline-none focus:ring-2 focus:ring-offset-2 text-secondary relative;
 }
 
 .button-primary {
     @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800/95;
+
+    .button-loading-overlay {
+        @apply text-white;
+    }
 }
 
 .button-secondary {
     @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 active:bg-gray-400/65;
 }
 
-.button-secondary.active {
+.button-secondary.active, .button-secondary[aria-expanded=true] {
     @apply bg-gray-400/65;
 }
 
@@ -28,7 +32,7 @@
 }
 
 .button.loading {
-    @apply cursor-wait;
+    @apply cursor-wait text-transparent;
 }
 
 .button-loading-spinner {
@@ -36,7 +40,7 @@
 }
 
 .button-loading-overlay {
-    @apply absolute inset-0 flex items-center justify-center z-10;
+    @apply absolute inset-0 flex items-center justify-center z-10 text-secondary;
     background-color: inherit;
 }
 

package/styles/design/_dl.scss

@@ -20,11 +20,15 @@
         @apply bg-gray-100;
     }
 
+    .dl-stacked .dl-item{
+        @apply flex-col;
+    }
+
     .dl-stacked dt {
         @apply text-gray-600 mt-2 tracking-wide text-sm;
     }
 
     .dl-stacked dd {
-        @apply mb-2;
+        @apply mb-2 block;
     }
 }

package/styles/design/_dropdown-menu.scss

@@ -1,21 +1,24 @@
-.dropdown-menu {
-    display: none;
-}
+@use 'mixins/dropdown' as dropdown;
 
-.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;
+.menu {
+    @include dropdown.overlay();
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .cdk-menu-item {
+        border-radius: var(--border-radius);
+        padding: 0.625rem 0.75rem;
+        text-align: left;
+
+        &:hover {
+            background-color: var(--color-neutral-100);
+        }
 
-    &:hover {
-        @apply bg-neutral-200;
+        &:active {
+            background-color: var(--color-neutral-200);
+        }
     }
 }

package/styles/design/_table.scss

@@ -72,7 +72,7 @@
     margin-bottom: -7px;
     margin-left: 10px;
     height: 23px;
-    mask-image: url('/assets/arrow-up.svg');
+    mask-image: url('/assets/icons/arrow-long-up-mini.svg'); // TODO
     mask-repeat: no-repeat;
     mask-size: 1.2rem;
     mask-position: center;
@@ -85,7 +85,7 @@
     margin-bottom: -7px;
     margin-left: 10px;
     height: 23px;
-    mask-image: url('/assets/arrow-down.svg');
+    mask-image: url('/assets/icons/arrow-long-down-mini.svg');
     mask-repeat: no-repeat;
     mask-size: 1.2rem;
     mask-position: center;

package/styles/mixins/_dropdown.scss

@@ -7,4 +7,5 @@
     --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+    font-size: 0.875rem;
 }

package/styles/theme.scss

@@ -41,6 +41,8 @@
     --color-green-900: #14532d;
     --color-green-950: #052e16;
 
+    --border-radius: 0px;
+    
     --surface-bg: #fff;
     --surface-border-radius: 0rem;
 

package/lib/dropdown/dropdown-item.directive.d.ts

@@ -1,9 +0,0 @@
-import { MzDropdownComponent } from './dropdown.component';
-import * as i0 from "@angular/core";
-export declare class MzDropdownItemDirective {
-    private dropdown;
-    constructor(dropdown: MzDropdownComponent);
-    close(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MzDropdownItemDirective, [{ host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MzDropdownItemDirective, "[mzDropdownItem]", never, {}, {}, never, never, true, never>;
-}

package/lib/dropdown/dropdown.component.d.ts

@@ -1,9 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class MzDropdownComponent {
-    label: string;
-    open: boolean;
-    toggle(): void;
-    collapse(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MzDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MzDropdownComponent, "mz-dropdown", never, { "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, {}, never, ["*"], true, never>;
-}

package/lib/dropdown/dropdown.module.d.ts

@@ -1,8 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./dropdown.component";
-import * as i2 from "./dropdown-item.directive";
-export declare class MzDropdownModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MzDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MzDropdownModule, never, [typeof i1.MzDropdownComponent, typeof i2.MzDropdownItemDirective], [typeof i1.MzDropdownComponent, typeof i2.MzDropdownItemDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<MzDropdownModule>;
-}

package/styles/design/_muzieh.scss

@@ -1,19 +0,0 @@
-@use 'design/base';
-@use 'design/material';
-@use 'design/button';
-@use 'design/breadcrumb';
-@use 'design/dl';
-@use 'design/dropdown-menu';
-@use 'design/form';
-@use 'design/icon';
-@use 'design/modal';
-@use 'design/pagination';
-@use 'design/table';
-@use 'design/tabs';
-@use 'design/progress-bar';
-@use 'design/alert';
-@use 'design/date-picker';
-@use 'design/infinite_scroll';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;