@filip.mazev/blocks 1.2.34 → 1.2.36

package/blocks/schematics/ng-add/schema.json

@@ -11,7 +11,8 @@
                 "purple",
                 "orange",
                 "red",
-                "green"
+                "green",
+                "cyberpunk"
             ],
             "x-prompt": {
                 "message": "Which theme would you like to use?",
@@ -32,6 +33,10 @@
                     {
                         "value": "green",
                         "label": "Green Theme"
+                    },
+                    {
+                        "value": "cyberpunk",
+                        "label": "Cyberpunk"
                     }
                 ]
             },

package/core/styles/_index.scss

@@ -9,4 +9,5 @@
 @forward 'themes/orange-theme';
 @forward 'themes/red-theme';
 @forward 'themes/green-theme';
+@forward 'themes/cyberpunk-theme';
 @forward 'themes/high-contrast-theme';

package/core/styles/_palettes.scss

@@ -115,7 +115,33 @@ $neutral-palette: (
     700: #404040,
     800: #262626,
     900: #171717,
-    1000: #0A0A0A) !default;
+    1000: #0b0b0b) !default;
+
+$cyber-yellow-palette: (
+    50: #FFFEF2,
+    100: #FFFDD1,
+    200: #FFF9A3,
+    300: #FFF370,
+    400: #FFEB33,
+    500: #e6da00,
+    600: #CCBD00,
+    700: #998E00,
+    800: #665E00,
+    900: #332F00,
+    1000: #141300) !default;
+
+$cyber-slate-palette: (
+    50: #EBEFF2,
+    100: #CDD6DF,
+    200: #A8B8C6,
+    300: #7E96A9,
+    400: #5D788C,
+    500: #3E5669,
+    600: #283C4C,
+    700: #1B2936,
+    800: #121A21,
+    900: #0B1015,
+    1000: #05080A) !default;
 
 $hc-black: #000000;
 $hc-white: #ffffff;
@@ -133,7 +159,10 @@ $all-palettes: (
     'warn': $warn-palette,
     'success': $success-palette,
     'information': $information-palette,
-    'neutral': $neutral-palette) !default;
+    'neutral': $neutral-palette,
+
+    'cyber-yellow': $cyber-yellow-palette,
+    'cyber-slate': $cyber-slate-palette) !default;
 
 @function get-palette($name) {
     @if map.has-key($all-palettes, $name) {

package/core/styles/_theme-engine.scss

@@ -62,7 +62,9 @@ $required-theme-keys: (
 
     'scroll-bg',
     'scroll-thumb',
-    'scroll-thumb-hover'
+    'scroll-thumb-hover',
+
+    'meta-brand-palette'
 );
 
 @function validate-theme($theme, $theme-name) {
@@ -73,33 +75,35 @@ $required-theme-keys: (
     }
 
     @each $key, $value in $theme {
-        @if not list.index($required-theme-keys, $key) {
-            @error "Strict Theme Error: '#{$theme-name}' contains an invalid key '#{$key}'. Remove or rename it.";
+        @if string.index($key, 'meta-') !=1 {
+            @if not list.index($required-theme-keys, $key) {
+                @error "Strict Theme Error: '#{$theme-name}' contains an invalid key '#{$key}'. Remove or rename it.";
+            }
         }
     }
 
     @return $theme;
 }
 
-@function make-light-theme($brand, $overrides: ()) {
+@function make-light-theme($surface-brand, $accent: $surface-brand, $overrides: ()) {
     $base: (
         'bg-canvas': #ffffff,
         'bg-surface': #ffffff,
-        'bg-surface-alt': get-color-from-palette($brand, 50),
+        'bg-surface-alt': get-color-from-palette($surface-brand, 50),
         'bg-element': get-color-from-palette('neutral', 100),
-        'bg-element-hover': get-color-from-palette($brand, 200),
-        'bg-element-active': get-color-from-palette($brand, 300),
+        'bg-element-hover': get-color-from-palette($surface-brand, 200),
+        'bg-element-active': get-color-from-palette($surface-brand, 300),
 
-        'primary': get-color-from-palette($brand, 500),
-        'primary-hover': get-color-from-palette($brand, 600),
-        'primary-active': get-color-from-palette($brand, 700),
-        'primary-subtle': rgba(get-color-from-palette($brand, 300), 0.6),
+        'primary': get-color-from-palette($accent, 500),
+        'primary-hover': get-color-from-palette($accent, 600),
+        'primary-active': get-color-from-palette($accent, 700),
+        'primary-subtle': rgba(get-color-from-palette($accent, 300), 0.6),
         'on-primary': get-color-from-palette('neutral', 100),
 
         'text-heading': get-color-from-palette('neutral', 900),
         'text-primary': get-color-from-palette('neutral', 700),
         'text-secondary': get-color-from-palette('neutral', 500),
-        'text-brand': get-color-from-palette($brand, 700),
+        'text-brand': get-color-from-palette($accent, 700),
         'text-inverse': get-color-from-palette('neutral', 100),
         'text-info': get-color-from-palette('information', 700),
         'text-warn': get-color-from-palette('warn', 700),
@@ -109,7 +113,7 @@ $required-theme-keys: (
         'border-subtle': get-color-from-palette('neutral', 200),
         'border-default': get-color-from-palette('neutral', 300),
         'border-strong': get-color-from-palette('neutral', 400),
-        'border-brand': get-color-from-palette($brand, 400),
+        'border-brand': get-color-from-palette($accent, 400),
         'border-info': get-color-from-palette('information', 400),
         'border-success': get-color-from-palette('success', 400),
         'border-warn': get-color-from-palette('warn', 400),
@@ -139,35 +143,37 @@ $required-theme-keys: (
         'bg-danger-disabled': get-color-from-palette('danger', 50),
         'bg-danger-subtle': rgba(get-color-from-palette('danger', 50), 0.95),
 
-        'scroll-bg': get-color-from-palette($brand, 100),
-        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($brand, 300) -10.44%, get-color-from-palette($brand, 400) 100%),
-        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($brand, 400) -10.44%, get-color-from-palette($brand, 700) 100%),
+        'scroll-bg': get-color-from-palette($surface-brand, 100),
+        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($accent, 300) -10.44%, get-color-from-palette($accent, 400) 100%),
+        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($accent, 400) -10.44%, get-color-from-palette($accent, 700) 100%),
+
+        'meta-brand-palette': $accent
     );
 
 $merged-theme: map.merge($base, $overrides);
 
-@return validate-theme($merged-theme, '#{$brand}-light');
+@return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-light');
 }
 
-@function make-dark-theme($brand, $overrides: ()) {
+@function make-dark-theme($surface-brand, $accent: $surface-brand, $overrides: ()) {
     $base: (
         'bg-canvas': #000000,
         'bg-surface': get-color-from-palette('neutral', 1000),
         'bg-surface-alt': get-color-from-palette('neutral', 900),
         'bg-element': get-color-from-palette('neutral', 800),
-        'bg-element-hover': get-color-from-palette($brand, 700),
-        'bg-element-active': get-color-from-palette($brand, 800),
+        'bg-element-hover': get-color-from-palette($surface-brand, 700),
+        'bg-element-active': get-color-from-palette($surface-brand, 800),
 
-        'primary': get-color-from-palette($brand, 500),
-        'primary-hover': get-color-from-palette($brand, 400),
-        'primary-active': get-color-from-palette($brand, 300),
-        'primary-subtle': rgba(get-color-from-palette($brand, 700), 0.6),
+        'primary': get-color-from-palette($accent, 500),
+        'primary-hover': get-color-from-palette($accent, 400),
+        'primary-active': get-color-from-palette($accent, 300),
+        'primary-subtle': rgba(get-color-from-palette($accent, 700), 0.6),
         'on-primary': #ffffff,
 
         'text-heading': #ffffff,
         'text-primary': get-color-from-palette('neutral', 200),
         'text-secondary': get-color-from-palette('neutral', 400),
-        'text-brand': get-color-from-palette($brand, 300),
+        'text-brand': get-color-from-palette($accent, 300),
         'text-inverse': get-color-from-palette('neutral', 900),
         'text-info': get-color-from-palette('information', 400),
         'text-success': get-color-from-palette('success', 400),
@@ -177,7 +183,7 @@ $merged-theme: map.merge($base, $overrides);
         'border-subtle': get-color-from-palette('neutral', 900),
         'border-default': get-color-from-palette('neutral', 800),
         'border-strong': get-color-from-palette('neutral', 700),
-        'border-brand': get-color-from-palette($brand, 600),
+        'border-brand': get-color-from-palette($accent, 600),
         'border-info': get-color-from-palette('information', 400),
         'border-success': get-color-from-palette('success', 400),
         'border-warn': get-color-from-palette('warn', 400),
@@ -207,14 +213,16 @@ $merged-theme: map.merge($base, $overrides);
         'bg-danger-disabled': get-color-from-palette('danger', 1000),
         'bg-danger-subtle': rgba(get-color-from-palette('danger', 1000), 0.95),
 
-        'scroll-bg': get-color-from-palette($brand, 900),
-        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($brand, 700) -10.44%, get-color-from-palette($brand, 500) 100%),
-        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($brand, 500) -10.44%, get-color-from-palette($brand, 400) 100%),
+        'scroll-bg': get-color-from-palette($surface-brand, 900),
+        'scroll-thumb': linear-gradient(278deg, get-color-from-palette($accent, 700) -10.44%, get-color-from-palette($accent, 500) 100%),
+        'scroll-thumb-hover': linear-gradient(278deg, get-color-from-palette($accent, 500) -10.44%, get-color-from-palette($accent, 400) 100%),
+
+        'meta-brand-palette': $accent
     );
 
 $merged-theme: map.merge($base, $overrides);
 
-@return validate-theme($merged-theme, '#{$brand}-dark');
+@return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-dark');
 }
 
 @mixin bx-theme($config) {

package/core/styles/themes/_cyberpunk-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$cyberpunk-light-theme: make-light-theme('cyber-slate', 'cyber-yellow');
+$cyberpunk-dark-theme: make-dark-theme('cyber-slate', 'cyber-yellow');

package/core/styles/themes/_high-contrast-theme.scss

@@ -59,7 +59,9 @@ $high-contrast-light-theme: validate-theme(('bg-canvas': $hc-white,
 
             'scroll-bg': $hc-white,
             'scroll-thumb': $hc-black,
-            'scroll-thumb-hover': $hc-yellow), 'high-contrast-light') !default;
+            'scroll-thumb-hover': $hc-yellow,
+
+            'meta-brand-palette': 'neutral'), 'high-contrast-light') !default;
 
 $high-contrast-dark-theme: validate-theme(('bg-canvas': $hc-black,
             'bg-surface': $hc-black,
@@ -119,4 +121,6 @@ $high-contrast-dark-theme: validate-theme(('bg-canvas': $hc-black,
 
             'scroll-bg': $hc-black,
             'scroll-thumb': $hc-white,
-            'scroll-thumb-hover': $hc-yellow), 'high-contrast-dark') !default;
+            'scroll-thumb-hover': $hc-yellow,
+
+            'meta-brand-palette': 'neutral'), 'high-contrast-dark') !default;

package/fesm2022/filip.mazev-blocks-core.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, NgZone, PLATFORM_ID, signal, computed, effect, InjectionToken } from '@angular/core';
-import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { inject, PLATFORM_ID, Injectable, NgZone, signal, computed, effect, input, isDevMode, Directive, InjectionToken } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { fromEvent } from 'rxjs';
 import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';
 import { toObservable } from '@angular/core/rxjs-interop';
+import { Overlay, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { NgControl } from '@angular/forms';
 
 var DesktopOS;
 (function (DesktopOS) {
@@ -23,22 +25,38 @@ var MobileOS;
 })(MobileOS || (MobileOS = {}));
 
 class DeviceTypeService {
-    isDesktopDevice = !this.isMobileDevice() && !this.isTabletDevice();
-    userAgent = navigator.userAgent || navigator.vendor || window?.opera || undefined;
-    supportedScreenOrientation = (screen?.orientation || {}).type ?? screen.mozOrientation ?? screen.msOrientation;
-    safariScreenOrientation = !screen?.orientation && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary';
-    initialScreenOrientation = this.supportedScreenOrientation ?? this.safariScreenOrientation ?? 'portrait-primary';
-    screenOrientation = this.initialScreenOrientation;
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    screenOrientation = 'portrait-primary';
     constructor() {
-        if (screen.orientation) {
-            screen.orientation.addEventListener('change', (ev) => {
-                const orientation = ev.target;
-                if (orientation?.type) {
-                    this.screenOrientation = orientation.type;
-                }
-            });
+        if (this.isBrowser) {
+            const win = this.document.defaultView;
+            const screenObj = win?.screen;
+            this.screenOrientation =
+                (screenObj?.orientation || {}).type ??
+                    screenObj?.mozOrientation ??
+                    screenObj?.msOrientation ??
+                    (!screenObj?.orientation && win?.matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary');
+            if (screenObj?.orientation) {
+                screenObj.orientation.addEventListener('change', (ev) => {
+                    const orientation = ev.target;
+                    if (orientation?.type) {
+                        this.screenOrientation = orientation.type;
+                    }
+                });
+            }
         }
     }
+    get userAgent() {
+        if (!this.isBrowser)
+            return '';
+        const win = this.document.defaultView;
+        return win?.navigator?.userAgent || win?.navigator?.vendor || win?.opera || '';
+    }
+    get isDesktopDevice() {
+        return !this.isMobileDevice() && !this.isTabletDevice();
+    }
     isLandscapeOrientation() {
         return ['landscape-primary', 'landscape-secondary'].includes(this.screenOrientation);
     }
@@ -46,26 +64,22 @@ class DeviceTypeService {
         return ['portrait-primary', 'portrait-secondary'].includes(this.screenOrientation);
     }
     getDeviceState() {
-        const isDesktop = this.isDesktopDevice;
         const isMobile = this.isMobileDevice();
         const isTablet = this.isTabletDevice();
+        const isDesktop = this.isDesktopDevice;
         const mobileOS = this.getMobileOS();
-        const isAndroidDevice = this.getDeviceOS() === MobileOS.Android;
-        const isAppleDevice = this.getDeviceOS() === MobileOS.iOS || this.getDeviceOS() === DesktopOS.MacOS;
-        const isUnknownMobileDevice = this.getDeviceOS() === MobileOS.Unknown;
         const desktopOS = this.getDesktopOS();
-        const isWindowsDesktop = this.getDeviceOS() === DesktopOS.Windows;
-        const isLinuxOrUnixDesktop = this.getDeviceOS() === DesktopOS.Linux || this.getDeviceOS() === DesktopOS.Unix;
+        const deviceOS = mobileOS ?? desktopOS;
         return {
             isDesktop,
             desktopOS,
-            isWindowsDesktop,
-            isLinuxOrUnixDesktop,
+            isWindowsDesktop: deviceOS === DesktopOS.Windows,
+            isLinuxOrUnixDesktop: deviceOS === DesktopOS.Linux || deviceOS === DesktopOS.Unix,
             isMobile,
             mobileOS,
-            isAndroidDevice,
-            isAppleDevice,
-            isUnknownMobileDevice,
+            isAndroidDevice: deviceOS === MobileOS.Android,
+            isAppleDevice: deviceOS === MobileOS.iOS || deviceOS === DesktopOS.MacOS,
+            isUnknownMobileDevice: deviceOS === MobileOS.Unknown,
             isTablet,
             isLandscapeOrientation: () => this.isLandscapeOrientation(),
             isPortraitOrientation: () => this.isPortraitOrientation()
@@ -73,41 +87,39 @@ class DeviceTypeService {
     }
     isMobileDevice() {
         const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i];
-        return regexs.some((b) => this.userAgent?.match(b) !== null);
+        return regexs.some((regex) => regex.test(this.userAgent));
     }
     isTabletDevice() {
-        const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
-        return regex.test(this.userAgent?.toLowerCase() ?? '');
+        const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/i;
+        return regex.test(this.userAgent);
     }
     getMobileOS() {
-        if (this.isMobileDevice() && this.userAgent) {
-            if (/windows phone/i.test(this.userAgent))
+        if (this.isMobileDevice()) {
+            const ua = this.userAgent;
+            if (/windows phone/i.test(ua))
                 return MobileOS.WindowsPhone;
-            else if (/android/i.test(this.userAgent))
+            if (/android/i.test(ua))
                 return MobileOS.Android;
-            else if (/iPad|iPhone|iPod/.test(this.userAgent) && !window.MSStream)
+            if (/iPad|iPhone|iPod/.test(ua) && !this.document.defaultView?.MSStream)
                 return MobileOS.iOS;
             return MobileOS.Unknown;
         }
         return undefined;
     }
     getDesktopOS() {
-        if (this.isDesktopDevice && this.userAgent) {
-            if (this.userAgent.indexOf('Win') !== -1)
+        if (this.isDesktopDevice) {
+            const ua = this.userAgent;
+            if (ua.includes('Win'))
                 return DesktopOS.Windows;
-            else if (this.userAgent.indexOf('Mac') !== -1)
+            if (ua.includes('Mac'))
                 return DesktopOS.MacOS;
-            else if (this.userAgent.indexOf('X11') !== -1)
+            if (ua.includes('X11'))
                 return DesktopOS.Unix;
-            else if (this.userAgent.indexOf('Linux') !== -1)
+            if (ua.includes('Linux'))
                 return DesktopOS.Linux;
             return DesktopOS.Unknown;
         }
-        else
-            return undefined;
-    }
-    getDeviceOS() {
-        return this.getMobileOS() ?? this.getDesktopOS();
+        return undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeviceTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeviceTypeService, providedIn: 'root' });
@@ -432,6 +444,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class BxOverlayPositionService {
+    overlay = inject(Overlay);
+    getElementStrategy(element, placement, offset = 8) {
+        return this.overlay.position()
+            .flexibleConnectedTo(element)
+            .withPositions(this.getPositions(placement, offset))
+            .withPush(true)
+            .withViewportMargin(8);
+    }
+    getCoordinateStrategy(x, y) {
+        return this.overlay.position()
+            .flexibleConnectedTo({ x, y })
+            .withPositions(this.getPositions('bottom', 2))
+            .withPush(true)
+            .withViewportMargin(8);
+    }
+    getPositions(placement, offset) {
+        const top = new ConnectionPositionPair({ originX: 'center', originY: 'top' }, { overlayX: 'center', overlayY: 'bottom' }, 0, -offset, ['bx-overlay-pos-top']);
+        const bottom = new ConnectionPositionPair({ originX: 'center', originY: 'bottom' }, { overlayX: 'center', overlayY: 'top' }, 0, offset, ['bx-overlay-pos-bottom']);
+        const left = new ConnectionPositionPair({ originX: 'start', originY: 'center' }, { overlayX: 'end', overlayY: 'center' }, -offset, 0, ['bx-overlay-pos-left']);
+        const right = new ConnectionPositionPair({ originX: 'end', originY: 'center' }, { overlayX: 'start', overlayY: 'center' }, offset, 0, ['bx-overlay-pos-right']);
+        switch (placement) {
+            case 'top': return [top, bottom, right, left];
+            case 'bottom': return [bottom, top, right, left];
+            case 'left': return [left, right, top, bottom];
+            case 'right': return [right, left, top, bottom];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxOverlayPositionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxOverlayPositionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxOverlayPositionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function isOSShortcut(val) {
+    return (typeof val === 'object' &&
+        val !== null &&
+        !Array.isArray(val) &&
+        'default' in val);
+}
+
+class BxShortcutService {
+    deviceTypeService = inject(DeviceTypeService);
+    resolve(shortcut) {
+        if (!shortcut)
+            return undefined;
+        let resolvedKey;
+        if (isOSShortcut(shortcut)) {
+            const state = this.deviceTypeService.getDeviceState();
+            if (state.isAppleDevice && shortcut.mac) {
+                resolvedKey = shortcut.mac;
+            }
+            else if (state.isWindowsDesktop && shortcut.windows) {
+                resolvedKey = shortcut.windows;
+            }
+            else if (state.isLinuxOrUnixDesktop && shortcut.linux) {
+                resolvedKey = shortcut.linux;
+            }
+            else {
+                resolvedKey = shortcut.default;
+            }
+        }
+        else {
+            resolvedKey = shortcut;
+        }
+        return Array.isArray(resolvedKey) ? resolvedKey : [resolvedKey];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxShortcutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxShortcutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxShortcutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BxBaseControl {
+    ngControl = inject(NgControl, { optional: true, self: true });
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    dataTestId = input(undefined, ...(ngDevMode ? [{ debugName: "dataTestId" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    errorMessages = input({}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.isDisabled.set(this.disabled());
+        if (isDevMode() && this.ngControl?.control?.validator) {
+            const hasMessages = Object.keys(this.errorMessages()).length > 0;
+            if (!hasMessages) {
+                console.error(`[Blocks UI Strict Mode] The form control for this field has validators, but the [errorMessages] input is empty. You must provide error messages for all applied validators.`);
+            }
+        }
+    }
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    updateValue(value) {
+        if (this.isDisabled())
+            return;
+        this.internalValue.set(value);
+        this.onChange(value);
+    }
+    markAsTouched() {
+        if (!this.isTouched()) {
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    get errorMessage() {
+        if (this.ngControl?.invalid && (this.ngControl.touched || this.ngControl.dirty)) {
+            const errors = this.ngControl.errors;
+            if (!errors)
+                return undefined;
+            const firstKey = Object.keys(errors)[0];
+            const customErrorMap = this.errorMessages();
+            if (customErrorMap && customErrorMap[firstKey]) {
+                return customErrorMap[firstKey];
+            }
+            if (typeof errors[firstKey] === 'string') {
+                return errors[firstKey];
+            }
+            if (isDevMode()) {
+                console.error(`[Blocks UI Strict Mode] Validation failed for key '${firstKey}', but no message was provided in [errorMessages].`);
+            }
+            return `[Missing error message: ${firstKey}]`;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxBaseControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: BxBaseControl, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, dataTestId: { classPropertyName: "dataTestId", publicName: "dataTestId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BxBaseControl, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], dataTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTestId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+const DEFAULT_DEBOUNCE_TIME = 300;
+
 const SCROLL_LOCK_INSTANCE_IDENTIFIER = 'scroll_lock_instance_';
 
 const PALETTE_NAMES = ['orange', 'purple', 'red', 'green', 'danger', 'success', 'information', 'neutral'];
@@ -577,5 +751,5 @@ function uuidv4() {
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS, BX_I18N, BxA11yService, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, invertPaletteToken, isPaletteToken, isTextWithKey, isThemedColor, resolveTokenToCssVar, uuidv4 };
+export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveTokenToCssVar, uuidv4 };
 //# sourceMappingURL=filip.mazev-blocks-core.mjs.map