@muziehdesign/components 18.2.0-next.2192 → 18.2.0-next.2293

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,8 @@
+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/lib/filter/filter-option.model.d.ts

@@ -0,0 +1,5 @@
+export interface FilterOptionModel<T> {
+    label: string;
+    selected: boolean;
+    value: T;
+}

package/lib/filter/filter.component.d.ts

@@ -0,0 +1,16 @@
+import { AfterContentInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class FilterComponent implements AfterContentInit {
+    label: string;
+    menuForm: NgForm;
+    protected open: boolean;
+    private initialValues;
+    ngAfterContentInit(): void;
+    toggleOverlay(): void;
+    dismiss(): void;
+    clear(): void;
+    apply(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "mz-filter", never, { "label": { "alias": "label"; "required": false; }; }, {}, ["menuForm"], ["*"], true, never>;
+}

package/lib/options-filter/options-filter.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '@angular/core';
+import { FilterOptionModel } from '../filter/filter-option.model';
+import { NgForm } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class OptionsFilterComponent {
+    options?: FilterOptionModel<string>[];
+    values: string[];
+    label: string;
+    change: EventEmitter<string | undefined>;
+    selected?: string;
+    form: NgForm;
+    protected open: boolean;
+    protected search: string;
+    get filterLabel(): string;
+    get filteredOptions(): FilterOptionModel<string>[];
+    apply(): void;
+    clear(): void;
+    toggleOverlay(): void;
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OptionsFilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OptionsFilterComponent, "mz-options-filter", never, { "options": { "alias": "options"; "required": false; }; "values": { "alias": "values"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+export type OptionValueType = string | number | string[] | number[];
+export type SelectOption = {
+    label: string;
+    value: OptionValueType;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muziehdesign/components",
-  "version": "18.2.0-next.2192",
+  "version": "18.2.0-next.2293",
   "peerDependencies": {
     "@angular/common": "^18.1.1",
     "@angular/core": "^18.1.1",
@@ -10,9 +10,10 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2022/muziehdesign-components.mjs",
-  "typings": "index.d.ts",
   "exports": {
+    "./mixins": {
+      "sass": "./design/mixins/_index.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -23,5 +24,7 @@
       "default": "./fesm2022/muziehdesign-components.mjs"
     }
   },
+  "module": "fesm2022/muziehdesign-components.mjs",
+  "typings": "index.d.ts",
   "sideEffects": false
 }

package/public-api.d.ts

@@ -32,3 +32,9 @@ export { SortEvent } from './lib/models/sort-event';
 export { WizardStepLink } from './lib/models/wizard-step-link';
 export { WizardProgressTrackerComponent } from './lib/wizard-progress-tracker/wizard-progress-tracker.component';
 export { DrawerContainerComponent } from './lib/drawer/drawer-container.component';
+export { MzDropdownComponent } from './lib/dropdown/dropdown.component';
+export { MzDropdownItemDirective } from './lib/dropdown/dropdown-item.directive';
+export { MzDropdownModule } from './lib/dropdown/dropdown.module';
+export { FilterOptionModel } from './lib/filter/filter-option.model';
+export { OptionsFilterComponent } from './lib/options-filter/options-filter.component';
+export { FilterComponent } from './lib/filter/filter.component';

package/{design → styles/design}/_button.scss

@@ -4,11 +4,15 @@
 }
 
 .button-primary {
-    @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-700;
+    @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800/95;
 }
 
 .button-secondary {
-    @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 active:bg-gray-300;
+    @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 active:bg-gray-400/65;
+}
+
+.button-secondary.active {
+    @apply bg-gray-400/65;
 }
 
 .button-danger {
@@ -32,7 +36,8 @@
 }
 
 .button-loading-overlay {
-    @apply absolute inset-0 flex items-center justify-center bg-inherit z-10;
+    @apply absolute inset-0 flex items-center justify-center z-10;
+    background-color: inherit;
 }
 
 .link-action {

package/styles/design/_dialog.scss

@@ -0,0 +1,7 @@
+@use './mixins/dialog' as dialog;
+
+@layer utilities {
+    .dialog-content:not(:has( > .dialog-content)) {
+        @include dialog.dialog-content();
+    }
+}

package/{design → styles/design}/_dropdown-menu.scss

@@ -14,4 +14,8 @@
 .dropdown-item {
     display: block;
     padding: 0.5rem;
+
+    &:hover {
+        @apply bg-neutral-200;
+    }
 }

package/{design → styles/design}/_form.scss

@@ -1,20 +1,19 @@
-@use "mixins" as *;
-
+@use "./mixins/form" as form;
 
 .form-input, .form-textarea, .form-select {
-    @include field-control();
+    @include form.field-control();
 
     &:focus {
-        @include field-control-focused();
+        @include form.field-control-focused();
     }
 }
 
 .input-group {
     @apply flex gap-2 items-center;
-    @include field-control();
+    @include form.field-control();
 
     &:focus-within {
-        @include field-control-focused();
+        @include form.field-control-focused();
     }
 
     .form-input {
@@ -36,7 +35,7 @@
     }
 }
 
-.checkbox-label {
+.checkbox-label, .radio-label {
     @apply ml-2;
 }
 

package/styles/mixins/_dialog.scss

@@ -0,0 +1,24 @@
+@mixin dialog-content() {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 1rem 0 1rem;
+    height:100vh;
+
+    & > *:not(header, footer) {
+        flex-grow: 1;
+    }
+
+    header, footer {
+        padding: 0.75rem 0;
+        position: sticky;
+        background-color: white;
+    }
+
+    header {
+        top: 0px;
+    }
+
+    footer {
+        bottom: 0px;
+    }
+}

package/{design/_mixins.scss → styles/mixins/_form.scss}

@@ -1,6 +1,6 @@
 @mixin field-control() {
     border-radius: var(--input-border-radius, 0px);
-    border: 1px solid var(--input-border-color, --color-neutral-500);
+    border: 1px solid var(--input-border-color, var(--color-neutral-500));
 }
 
 @mixin field-control-focused() {

package/styles/mixins/_icon.scss

@@ -0,0 +1,6 @@
+@mixin icon() {
+    height:1.5rem;
+    width:1.5rem;
+    display: inline-block;
+    padding-left: 0.5rem;
+}

package/styles/mixins/_index.scss

@@ -0,0 +1,2 @@
+@use './dialog';
+@use './form';

package/styles/theme.scss

@@ -0,0 +1,43 @@
+:root {
+    --color-primary: #1d4ed8;
+    --color-secondary: #374151; 
+    --color-success: #15803d;
+    --color-danger: #b91c1c;
+    --color-warning: #a16207;
+
+    --color-neutral-50: #f9fafb;
+    --color-neutral-100: #f3f4f6;
+    --color-neutral-200: #e5e7eb;
+    --color-neutral-300: #d1d5db;
+    --color-neutral-400: #9ca3af;
+    --color-neutral-500: #6b7280;
+    --color-neutral-600: #4b5563;
+    --color-neutral-700: #374151;
+    --color-neutral-800: #1f2937;
+    --color-neutral-900: #111827;
+    --color-neutral-950: #030712;
+
+    --color-brand-50: #eff6ff;
+    --color-brand-100: #dbeafe;
+    --color-brand-200: #bfdbfe;
+    --color-brand-300: #93c5fd;
+    --color-brand-400: #60a5fa;
+    --color-brand-500: #3b82f6;
+    --color-brand-600: #2563eb;
+    --color-brand-700: #1d4ed8;
+    --color-brand-800: #1e40af;
+    --color-brand-900: #1e3a8a;
+    --color-brand-950: #172554;
+
+    --color-green-50: #f0fdf4;
+    --color-green-100: #dcfce7;
+    --color-green-200: #bbf7d0;
+    --color-green-300: #86efac;
+    --color-green-400: #4ade80;
+    --color-green-500: #22c55e;
+    --color-green-600: #16a34a;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-green-900: #14532d;
+    --color-green-950: #052e16;
+}