@koobiq/components 19.2.0 → 19.3.0

package/fesm2022/koobiq-components-username.mjs

@@ -85,11 +85,11 @@ class KbqUsernamePipe {
         });
         return result.trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, isStandalone: true, name: "kbqUsername" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -129,11 +129,11 @@ class KbqUsernameCustomPipe {
         });
         return result.trim();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, isStandalone: true, name: "kbqUsernameCustom" }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -147,10 +147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 const baseClass = 'kbq-username';
 /** Styles the primary part of the username (e.g. full name). */
 class KbqUsernamePrimary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernamePrimary, isStandalone: true, selector: "[kbqUsernamePrimary]", host: { classAttribute: "kbq-username__primary" }, exportAs: ["kbqUsernamePrimary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernamePrimary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernamePrimary]',
@@ -162,10 +162,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 /** Styles the secondary part. */
 class KbqUsernameSecondary {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondary, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameSecondary, isStandalone: true, selector: "[kbqUsernameSecondary]", host: { classAttribute: "kbq-username__secondary" }, exportAs: ["kbqUsernameSecondary"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondary, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondary]',
@@ -177,10 +177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 /** Styles a secondary hint. */
 class KbqUsernameSecondaryHint {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondaryHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameSecondaryHint, isStandalone: true, selector: "[kbqUsernameSecondaryHint]", host: { classAttribute: "kbq-username__secondary-hint" }, exportAs: ["kbqUsernameSecondaryHint"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameSecondaryHint, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqUsernameSecondaryHint]',
@@ -192,10 +192,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 /** Custom content for `KbqUsername`, overrides default view. */
 class KbqUsernameCustomView {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqUsernameCustomView, isStandalone: true, selector: "kbq-username-custom-view, [kbq-username-custom-view]", host: { classAttribute: "kbq-username__custom-view" }, exportAs: ["kbqUsernameCustomView"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqUsernameCustomView, isStandalone: true, selector: "kbq-username-custom-view, [kbq-username-custom-view]", host: { classAttribute: "kbq-username__custom-view" }, exportAs: ["kbqUsernameCustomView"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameCustomView, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-username-custom-view, [kbq-username-custom-view]',
@@ -246,10 +246,10 @@ class KbqUsername {
             return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KbqUsername, isStandalone: true, selector: "kbq-username", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, fullNameFormat: { classPropertyName: "fullNameFormat", publicName: "fullNameFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" }, classAttribute: "kbq-username" }, queries: [{ propertyName: "customView", first: true, predicate: KbqUsernameCustomView, descendants: true, isSignal: true }], exportAs: ["kbqUsername"], ngImport: i0, template: "@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @let fullName = profile | kbqUsername: fullNameFormat();\n\n    @if (!isCompact()) {\n        @if (hasFullName()) {\n            <span kbq-title kbqUsernamePrimary>{{ fullName }}</span>\n        }\n\n        @if (profile.login) {\n            <span kbq-title kbqUsernameSecondary>\n                {{ profile.login }}\n\n                @if (profile.site) {\n                    <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                }\n            </span>\n        }\n    } @else {\n        <span kbq-title kbqUsernamePrimary>\n            @if (hasFullName()) {\n                <span>{{ fullName }}</span>\n            }\n            @if (!hasFullName() && profile.login) {\n                {{ profile.login }}\n            }\n\n            @if (profile.site) {\n                <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n            }\n        </span>\n    }\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-username{color:var(--kbq-username-primary-color)}.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{color:var(--kbq-username-secondary-color)}.kbq-username.kbq-username_default .kbq-username__secondary-hint,.kbq-username.kbq-username_default .kbq-username__primary+.kbq-username__secondary{--kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary)}.kbq-username.kbq-username_error{--kbq-username-primary-color: var(--kbq-foreground-error);--kbq-username-secondary-color: var(--kbq-foreground-error)}.kbq-username.kbq-username_accented{--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: var(--kbq-foreground-contrast)}.kbq-username.kbq-username_inherit{--kbq-username-primary-color: inherit;--kbq-username-secondary-color: inherit}.kbq-username{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-username.kbq-username_accented .kbq-username__primary{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_stacked>.kbq-username__custom-view{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:normal;gap:var(--kbq-username-vertical-gap)}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:baseline}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:var(--kbq-username-horizontal-gap)}[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:0;margin-right:var(--kbq-username-horizontal-gap)}.kbq-username.kbq-username_text:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_text>.kbq-username__custom-view{display:inline}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__secondary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-username.kbq-username_inherit:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inherit>.kbq-username__custom-view{font:inherit;display:inherit}\n", ":where(.kbq-username){--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: inherit;--kbq-username-vertical-gap: var(--kbq-size-xxs);--kbq-username-horizontal-gap: var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i1.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }, { kind: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsername, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KbqUsername, isStandalone: true, selector: "kbq-username", inputs: { userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, fullNameFormat: { classPropertyName: "fullNameFormat", publicName: "fullNameFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()" }, classAttribute: "kbq-username" }, queries: [{ propertyName: "customView", first: true, predicate: KbqUsernameCustomView, descendants: true, isSignal: true }], exportAs: ["kbqUsername"], ngImport: i0, template: "@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @let fullName = profile | kbqUsername: fullNameFormat();\n\n    @if (!isCompact()) {\n        @if (hasFullName()) {\n            <span kbq-title kbqUsernamePrimary>{{ fullName }}</span>\n        }\n\n        @if (profile.login) {\n            <span kbq-title kbqUsernameSecondary>\n                {{ profile.login }}\n\n                @if (profile.site) {\n                    <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                }\n            </span>\n        }\n    } @else {\n        <span kbq-title kbqUsernamePrimary>\n            @if (hasFullName()) {\n                <span>{{ fullName }}</span>\n            }\n            @if (!hasFullName() && profile.login) {\n                {{ profile.login }}\n            }\n\n            @if (profile.site) {\n                <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n            }\n        </span>\n    }\n}\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress.kbq-button,.kbq-progress.kbq-button-icon{position:relative}.kbq-progress.kbq-button:after,.kbq-progress.kbq-button-icon:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-size-border-width))}.kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-username{color:var(--kbq-username-primary-color)}.kbq-username .kbq-username__secondary,.kbq-username .kbq-username__secondary-hint{color:var(--kbq-username-secondary-color)}.kbq-username.kbq-username_default .kbq-username__secondary-hint,.kbq-username.kbq-username_default .kbq-username__primary+.kbq-username__secondary{--kbq-username-secondary-color: var(--kbq-foreground-contrast-secondary)}.kbq-username.kbq-username_error{--kbq-username-primary-color: var(--kbq-foreground-error);--kbq-username-secondary-color: var(--kbq-foreground-error)}.kbq-username.kbq-username_accented{--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: var(--kbq-foreground-contrast)}.kbq-username.kbq-username_inherit{--kbq-username-primary-color: inherit;--kbq-username-secondary-color: inherit}.kbq-username{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-username.kbq-username_accented .kbq-username__primary{font-size:var(--kbq-typography-text-normal-strong-font-size);font-style:var(--kbq-typography-text-normal-strong-font-style);font-weight:var(--kbq-typography-text-normal-strong-font-weight);line-height:var(--kbq-typography-text-normal-strong-line-height);font-family:var(--kbq-typography-text-normal-strong-font-family);text-transform:var(--kbq-typography-text-normal-strong-text-transform);font-feature-settings:var(--kbq-typography-text-normal-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-strong-letter-spacing)}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_stacked>.kbq-username__custom-view{display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:normal;gap:var(--kbq-username-vertical-gap)}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:baseline}.kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,.kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:var(--kbq-username-horizontal-gap)}[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit):not(:has(>.kbq-username__custom-view)) .kbq-username__primary+.kbq-username__secondary,[dir=rtl] .kbq-username.kbq-username_inline:not(.kbq-username_inherit)>.kbq-username__custom-view .kbq-username__primary+.kbq-username__secondary{margin-left:0;margin-right:var(--kbq-username-horizontal-gap)}.kbq-username.kbq-username_text:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_text>.kbq-username__custom-view{display:inline}.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_stacked:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_stacked>.kbq-username__custom-view .kbq-username__secondary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__primary,.kbq-username.kbq-username_inline:not(:has(>.kbq-username__custom-view)) .kbq-username__secondary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__primary,.kbq-username.kbq-username_inline>.kbq-username__custom-view .kbq-username__secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-username.kbq-username_inherit:not(:has(>.kbq-username__custom-view)),.kbq-username.kbq-username_inherit>.kbq-username__custom-view{font:inherit;display:inherit}\n", ":where(.kbq-username){--kbq-username-primary-color: var(--kbq-foreground-contrast);--kbq-username-secondary-color: inherit;--kbq-username-vertical-gap: var(--kbq-size-xxs);--kbq-username-horizontal-gap: var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i1.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "pipe", type: KbqUsernamePipe, name: "kbqUsername" }, { kind: "directive", type: KbqUsernamePrimary, selector: "[kbqUsernamePrimary]", exportAs: ["kbqUsernamePrimary"] }, { kind: "directive", type: KbqUsernameSecondary, selector: "[kbqUsernameSecondary]", exportAs: ["kbqUsernameSecondary"] }, { kind: "directive", type: KbqUsernameSecondaryHint, selector: "[kbqUsernameSecondaryHint]", exportAs: ["kbqUsernameSecondaryHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsername, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsername, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-username', exportAs: 'kbqUsername', imports: [
                         KbqTitleModule,
@@ -272,8 +272,8 @@ const COMPONENTS = [
     KbqUsernamePipe
 ];
 class KbqUsernameModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername,
             KbqUsernameCustomView,
             KbqUsernamePrimary,
             KbqUsernameSecondary,
@@ -284,9 +284,9 @@ class KbqUsernameModule {
             KbqUsernameSecondary,
             KbqUsernameCustomPipe,
             KbqUsernamePipe] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, imports: [KbqUsername] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqUsernameModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqUsernameModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,

package/file-upload/dropzone.d.ts

@@ -0,0 +1,147 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { InjectionToken, OnDestroy, TemplateRef } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
+import { KbqEmptyState } from '@koobiq/components/empty-state';
+import { KbqMultipleFileUploadComponent } from './multiple-file-upload.component';
+import { KbqDrop } from './primitives';
+import { KbqSingleFileUploadComponent } from './single-file-upload.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+/** Dropzone overlay content configuration. */
+export type KbqDropzoneData = Partial<{
+    /** Optional caption text displayed below the title. */
+    caption: string;
+    /** Visual size of the dropzone empty state content. */
+    size: KbqDefaultSizes;
+    /** Title text displayed in the dropzone; falls back to localized default. */
+    title: string;
+    /** Whether focus should be automatically captured when the overlay opens. */
+    autoCapture: boolean;
+}>;
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const KBQ_DROPZONE_DATA: InjectionToken<Partial<{
+    /** Optional caption text displayed below the title. */
+    caption: string;
+    /** Visual size of the dropzone empty state content. */
+    size: KbqDefaultSizes;
+    /** Title text displayed in the dropzone; falls back to localized default. */
+    title: string;
+    /** Whether focus should be automatically captured when the overlay opens. */
+    autoCapture: boolean;
+}>>;
+/**
+ * Determines if a mouse event occurred outside the viewport boundaries.
+ * @docs-private
+ */
+export declare const isOutsideViewport: ({ event, innerWidth, innerHeight, xAxisMinThreshold, yAxisMinThreshold }: {
+    event: MouseEvent;
+    innerWidth: number;
+    innerHeight: number;
+    xAxisMinThreshold: number;
+    yAxisMinThreshold: number;
+}) => boolean;
+/**
+ * Service that provides full-screen drag-and-drop overlay functionality.
+ */
+export declare class KbqFullScreenDropzoneService extends KbqDrop implements OnDestroy {
+    /** Completely terminates all subscriptions when emitted */
+    private readonly dropAbort;
+    private readonly overlay;
+    private readonly window;
+    private readonly injector;
+    private readonly ngZone;
+    private overlayRef?;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Initializes drag-and-drop event listeners on the document body.
+     * @param config - Dropzone configuration
+     */
+    init(config?: KbqDropzoneData): void;
+    /** Stops all drag-and-drop event listeners and cleans up subscriptions. */
+    stop(): void;
+    /**
+     * Opens the dropzone overlay.
+     * @param config - Dropzone configuration
+     */
+    open(config?: KbqDropzoneData): void;
+    /** Closes and disposes the overlay. */
+    close(): void;
+    /** @docs-private */
+    onDrop(event: DragEvent): void;
+    /** @docs-private */
+    protected createOverlay(): OverlayRef;
+    /** @see https://bugs.webkit.org/show_bug.cgi?id=66547 */
+    private onDragLeave;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFullScreenDropzoneService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqFullScreenDropzoneService>;
+}
+/**
+ * Directive that turns an element into a local drag-and-drop zone.
+ *
+ * Displays an overlay over the host element on drag enter, handles drag events,
+ * and emits dropped files to a connected file upload component.
+ */
+export declare class KbqLocalDropzone extends KbqDrop {
+    /** File upload component to connect dropped files to */
+    readonly connectedTo: import("@angular/core").InputSignal<KbqMultipleFileUploadComponent | KbqSingleFileUploadComponent | undefined>;
+    private readonly elementRef;
+    private readonly rects;
+    private readonly overlay;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly ngZone;
+    private readonly destroyRef;
+    private overlayRef?;
+    constructor();
+    /** Opens the dropzone overlay positioned over the host element. */
+    open(config?: KbqDropzoneData): void;
+    /** Closes and disposes the overlay. */
+    close(): void;
+    /** @docs-private */
+    onDrop(event: DragEvent): void;
+    /**
+     * Initializes drag-and-drop event listeners on the overlay element.
+     * Handles dragover, dragleave, and drop events to manage overlay state and file drops.
+     */
+    protected init(): void;
+    /** Creates an overlay positioned and sized to match the host element. */
+    protected createOverlay(): OverlayRef;
+    private onDragLeave;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLocalDropzone, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLocalDropzone, "[kbqLocalDropzone]", ["kbqLocalDropzone"], { "connectedTo": { "alias": "kbqConnectedTo"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Component that displays an empty state for file upload areas. */
+export declare class KbqFileUploadEmptyState extends KbqEmptyState {
+    /** Title text to display below the upload icon */
+    title: import("@angular/core").InputSignal<string | undefined>;
+    /** Caption text or template to display below the title */
+    caption: import("@angular/core").InputSignal<string | TemplateRef<any> | undefined>;
+    constructor();
+    /** @docs-private */
+    protected isTemplateRef(value: string | TemplateRef<any>): value is TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFileUploadEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFileUploadEmptyState, "kbq-file-upload-empty-state", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class KbqDropzoneContent {
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    /** @docs-private */
+    protected readonly config: Partial<{
+        /** Optional caption text displayed below the title. */
+        caption: string;
+        /** Visual size of the dropzone empty state content. */
+        size: KbqDefaultSizes;
+        /** Title text displayed in the dropzone; falls back to localized default. */
+        title: string;
+        /** Whether focus should be automatically captured when the overlay opens. */
+        autoCapture: boolean;
+    }> | null;
+    private readonly trapFocus;
+    private readonly localeId;
+    constructor();
+    /** @docs-private */
+    protected readonly title: import("@angular/core").Signal<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropzoneContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropzoneContent, "kbq-dropzone-content", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }]>;
+}

package/file-upload/dropzone.scss

@@ -0,0 +1,57 @@
+.kbq-dropzone-overlay {
+    --kbq-dropzone-padding: var(--kbq-size-s);
+    --kbq-dropzone-overlay-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-component-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-border-color: var(--kbq-line-theme-fade);
+
+    padding: var(--kbq-dropzone-padding);
+    background-color: var(--kbq-dropzone-overlay-background);
+
+    opacity: 0;
+    transition: opacity 100ms ease-in-out;
+
+    &.kbq-dropzone-overlay__attached {
+        opacity: 1;
+    }
+
+    .kbq-dropzone-content {
+        display: flex;
+        width: 100%;
+
+        align-items: center;
+        justify-content: center;
+
+        border-radius: var(--kbq-size-border-radius);
+        border: var(--kbq-size-border-width) dashed var(--kbq-dropzone-border-color);
+        background-color: var(--kbq-dropzone-component-background);
+
+        outline: none;
+    }
+}
+
+.kbq-fullscreen-dropzone {
+    --kbq-dropzone-component-background: transparent;
+}
+
+.kbq-local-dropzone {
+    --kbq-dropzone-overlay-background: transparent;
+
+    .kbq-empty-state.kbq-multiple-file-upload__empty-state {
+        --kbq-empty-state-size-compact-padding-top: 0;
+        --kbq-empty-state-size-compact-padding-horizontal: 0;
+        --kbq-empty-state-size-compact-padding-bottom: 0;
+
+        --kbq-empty-state-size-normal-padding-top: 0;
+        --kbq-empty-state-size-normal-padding-horizontal: 0;
+        --kbq-empty-state-size-normal-padding-bottom: 0;
+
+        --kbq-empty-state-size-big-padding-top: 0;
+        --kbq-empty-state-size-big-padding-horizontal: 0;
+        --kbq-empty-state-size-big-padding-bottom: 0;
+    }
+}
+
+.kbq-empty-state.kbq-multiple-file-upload__empty-state {
+    --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-m);
+    --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
+}

package/file-upload/file-upload.d.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, InputSignal,
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqEnumValues, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { BehaviorSubject, Subject } from 'rxjs';
+import { KbqFullScreenDropzoneService } from './dropzone';
 import { KbqFileList, KbqFileUploadContext } from './primitives';
 export interface KbqFile extends File {
     fullPath: string;
@@ -91,6 +92,8 @@ export declare abstract class KbqFileUploadBase<T = KbqBaseFileUploadLocaleConfi
     protected readonly defaultErrorStateMatcher: ErrorStateMatcher;
     /** @docs-private */
     protected readonly elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected readonly dropzoneService: KbqFullScreenDropzoneService;
     /** implemented as part of base class. Decided not use mixinErrorState, not to overcomplicate
      * @docs-private */
     updateErrorState(): void;

package/file-upload/multiple-file-upload.component.d.ts

@@ -40,6 +40,16 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      * @default mixed
      */
     allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
+    /**
+     * Controls whether to display fullscreen dropzone.
+     * Provide configuration object to enable, or undefined to disable.
+     */
+    fullScreenDropZone: import("@angular/core").InputSignal<boolean | Partial<{
+        caption: string;
+        size: import("@koobiq/components/core").KbqDefaultSizes;
+        title: string;
+        autoCapture: boolean;
+    }> | undefined>;
     /** Optional configuration to override default labels with localized text.*/
     readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file list.
@@ -124,5 +134,5 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     private validateFile;
     private onFileAdded;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
 }

package/file-upload/multiple-file-upload.component.scss

@@ -179,7 +179,7 @@
             min-height: var(--kbq-file-upload-size-multiple-big-container-min-height);
             min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
 
-            .kbq-empty-state {
+            .kbq-multiple-file-upload__empty-state {
                 --kbq-empty-state-size-normal-padding-top: 0;
                 --kbq-empty-state-size-normal-padding-bottom: 0;
                 --kbq-empty-state-size-normal-image-addon-height: 4px;

package/file-upload/primitives/file-drop.d.ts

@@ -1,16 +1,35 @@
 import { KbqFile } from '../file-upload';
 import * as i0 from "@angular/core";
-export declare class KbqFileDropDirective {
-    /** Flag that controls css-class modifications on drag events. */
-    dragover: boolean;
+export declare class KbqDrop {
+    /** @docs-private */
+    isSafari: boolean;
+    /**
+     * Controls whether drag-and-drop functionality is enabled.
+     * When true, all drag events are filtered out and ignored.
+     */
+    readonly disabled: import("@angular/core").ModelSignal<boolean>;
     /** Emits an event when file items were dropped. */
     readonly filesDropped: import("@angular/core").OutputEmitterRef<KbqFile[]>;
     /** @docs-private */
+    protected onDrop(event: DragEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDrop, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDrop, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "filesDropped": "filesDropped"; }, never, never, true, never>;
+}
+export declare class KbqFileDropDirective extends KbqDrop {
+    /** Flag that controls css-class modifications on drag events. */
+    protected readonly dragover: import("@angular/core").WritableSignal<boolean>;
+    private readonly ngZone;
+    private readonly nativeElement;
+    private readonly destroyRef;
+    constructor();
+    onDragEnter(event: DragEvent): void;
+    /** @docs-private */
     onDragOver(event: DragEvent): void;
     /** @docs-private */
     onDragLeave(event: DragEvent): void;
     /** @docs-private */
     onDrop(event: DragEvent): void;
+    private init;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFileDropDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFileDropDirective, "[kbqFileDrop]", ["kbqFileDrop"], {}, { "filesDropped": "filesDropped"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFileDropDirective, "[kbqFileDrop]", ["kbqFileDrop"], {}, {}, never, never, true, never>;
 }

package/file-upload/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './dropzone';
 export * from './file-upload';
 export * from './file-upload.module';
 export * from './multiple-file-upload.component';

package/file-upload/single-file-upload.component.d.ts

@@ -38,6 +38,16 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @default mixed
      */
     allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
+    /**
+     * Controls whether to display fullscreen dropzone.
+     * Provide configuration object to enable, or undefined to disable.
+     */
+    fullScreenDropZone: import("@angular/core").InputSignal<boolean | Partial<{
+        caption: string;
+        size: import("@koobiq/components/core").KbqDefaultSizes;
+        title: string;
+        autoCapture: boolean;
+    }> | undefined>;
     /** Optional configuration to override default labels with localized text.*/
     readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqBaseFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file.
@@ -103,6 +113,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private mapToFileItem;
     private validateFile;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "fullScreenDropZone": { "alias": "fullScreenDropZone"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
     static ngAcceptInputType_showFileSize: unknown;
 }

package/inline-edit/inline-edit.d.ts

@@ -108,8 +108,8 @@ export declare class KbqInlineEdit {
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
     constructor();
-    /** @docs-private */
-    protected toggleMode(): void;
+    /** Manually switch mode */
+    toggleMode(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */

package/inline-edit/inline-edit.scss

@@ -100,7 +100,7 @@
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {
-        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
+        --kbq-inline-edit-padding-horizontal: var(--kbq-size-m);
     }
 
     &.kbq-inline-edit_with-label {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.2.0",
+    "version": "19.3.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -21,12 +21,13 @@
     },
     "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
+        "@angular/animations": "^19.0.0",
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.2.0",
-        "@koobiq/angular-moment-adapter": "19.2.0",
-        "@koobiq/angular-luxon-adapter": "19.2.0",
+        "@koobiq/cdk": "19.3.0",
+        "@koobiq/angular-moment-adapter": "19.3.0",
+        "@koobiq/angular-luxon-adapter": "19.3.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",
@@ -249,6 +250,10 @@
             "types": "./sidepanel/index.d.ts",
             "default": "./fesm2022/koobiq-components-sidepanel.mjs"
         },
+        "./skeleton": {
+            "types": "./skeleton/index.d.ts",
+            "default": "./fesm2022/koobiq-components-skeleton.mjs"
+        },
         "./split-button": {
             "types": "./split-button/index.d.ts",
             "default": "./fesm2022/koobiq-components-split-button.mjs"

package/popover/_popover-theme.scss

@@ -18,7 +18,7 @@
         background: var(--kbq-popover-container-background);
     }
 
-    .kbq-popover__close {
+    .kbq-popover__close.kbq-popover__close_background-overlay-inverse {
         background-color: var(--kbq-background-overlay-inverse);
     }
 

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^19.2.19");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.2.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.3.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.3.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^11.2.0");

package/select/select.component.d.ts

@@ -249,8 +249,9 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get focused(): boolean;
     set focused(value: boolean);
     panelOpen: boolean;
+    /** true if virtual scrolling is used. */
+    withVirtualScroll: boolean;
     private _focused;
-    private withVirtualScroll;
     get isEmptySearchResult(): boolean;
     get canShowCleaner(): boolean;
     get selected(): KbqOptionBase | KbqOptionBase[];

package/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './skeleton';

package/skeleton/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./skeleton";
+export declare class KbqSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSkeletonModule, never, [typeof i1.KbqSkeleton], [typeof i1.KbqSkeleton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSkeletonModule>;
+}