feat: m-overflow added

Author: kai-melchior

projects/mantic-ui/src/lib/components/overflow/overflow.directive.ts

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { OverflowValue } from './overflow.types';
+
+@Directive({
+    selector: '[m-overflow]',
+    host: {
+        '[style.overflow]': 'overflow()',
+        '[style.overflow-x]': 'overflowX()',
+        '[style.overflow-y]': 'overflowY()',
+    }
+})
+export class OverflowDirective {
+    public static readonly default = {
+        directive: OverflowDirective,
+        inputs: ['m-overflow', 'm-overflow-x', 'm-overflow-y']
+    };
+
+    public readonly mOverflow = input<OverflowValue | '' | undefined>(undefined, { alias: 'm-overflow' });
+    public readonly overflowX = input<OverflowValue | undefined>(undefined, { alias: 'm-overflow-x' });
+    public readonly overflowY = input<OverflowValue | undefined>(undefined, { alias: 'm-overflow-y' });
+    public readonly overflow = computed(() => this.mOverflow() || undefined);
+}

projects/mantic-ui/src/lib/components/overflow/overflow.types.ts

@@ -0,0 +1 @@
+export type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';

projects/mantic-ui/src/public-api.ts

@@ -57,6 +57,8 @@ export * from './lib/components/flex/shrink/shrink.directive';
 export * from './lib/components/flex/grow/grow.component';
 export * from './lib/components/flex/grow/grow.directive';
 export * from './lib/components/flex/flex.types';
+export * from './lib/components/overflow/overflow.directive';
+export * from './lib/components/overflow/overflow.types';
 export * from './lib/components/footer/footer.component';
 export * from './lib/components/footer-link/footer-link.component';
 export * from './lib/components/form/form.component';