@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-button.mjs

@@ -0,0 +1,207 @@
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/observers';
+import { ObserversModule } from '@angular/cdk/observers';
+import { PlatformModule } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, SkipSelf, ContentChildren, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { mixinTabIndex, mixinColor, KbqComponentColors } from '@koobiq/components/core';
+import { KbqIcon } from '@koobiq/components/icon';
+
+var KbqButtonStyles;
+(function (KbqButtonStyles) {
+    KbqButtonStyles["Filled"] = "filled";
+    KbqButtonStyles["Outline"] = "outline";
+    KbqButtonStyles["Transparent"] = "transparent";
+})(KbqButtonStyles || (KbqButtonStyles = {}));
+const leftIconClassName = 'kbq-icon_left';
+const rightIconClassName = 'kbq-icon_right';
+const buttonLeftIconClassName = 'kbq-button-icon_left';
+const buttonRightIconClassName = 'kbq-button-icon_right';
+const getNodesWithoutComments = (nodes) => {
+    const COMMENT_NODE = 8;
+    return Array.from(nodes).filter((node) => node.nodeType !== COMMENT_NODE);
+};
+class KbqButtonCssStyler {
+    constructor(elementRef, renderer, cdr) {
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.isIconButton = false;
+        this.nativeElement = elementRef.nativeElement;
+    }
+    ngAfterContentInit() {
+        this.updateClassModifierForIcons();
+    }
+    updateClassModifierForIcons() {
+        this.renderer.removeClass(this.nativeElement, buttonLeftIconClassName);
+        this.renderer.removeClass(this.nativeElement, buttonRightIconClassName);
+        const twoIcons = 2;
+        const filteredNodesWithoutComments = getNodesWithoutComments(this.nativeElement.querySelector('.kbq-button-wrapper').childNodes);
+        const currentIsIconButtonValue = !!this.icons.length &&
+            this.icons.length === filteredNodesWithoutComments.length && this.icons.length <= twoIcons;
+        if (currentIsIconButtonValue !== this.isIconButton) {
+            this.isIconButton = currentIsIconButtonValue;
+            this.cdr.detectChanges();
+        }
+        if (this.icons.length && filteredNodesWithoutComments.length > 1) {
+            this.icons.map((item) => item.getHostElement())
+                .forEach((iconHostElement) => {
+                this.renderer.removeClass(iconHostElement, leftIconClassName);
+                this.renderer.removeClass(iconHostElement, rightIconClassName);
+                const iconIndex = filteredNodesWithoutComments.findIndex((node) => node === iconHostElement);
+                if (iconIndex === 0) {
+                    this.renderer.addClass(iconHostElement, leftIconClassName);
+                    this.renderer.addClass(this.nativeElement, buttonLeftIconClassName);
+                }
+                if (iconIndex === filteredNodesWithoutComments.length - 1) {
+                    this.renderer.addClass(iconHostElement, rightIconClassName);
+                    this.renderer.addClass(this.nativeElement, buttonRightIconClassName);
+                }
+            });
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonCssStyler, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqButtonCssStyler, selector: "[kbq-button]", host: { properties: { "class.kbq-button": "!isIconButton", "class.kbq-button-icon": "isIconButton" } }, queries: [{ propertyName: "icons", predicate: i0.forwardRef(function () { return KbqIcon; }) }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonCssStyler, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbq-button]',
+                    host: {
+                        '[class.kbq-button]': '!isIconButton',
+                        '[class.kbq-button-icon]': 'isIconButton'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: SkipSelf
+                }] }]; }, propDecorators: { icons: [{
+                type: ContentChildren,
+                args: [(forwardRef(() => KbqIcon))]
+            }] } });
+/** @docs-private */
+class KbqButtonBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqButtonMixinBase = mixinTabIndex(mixinColor(KbqButtonBase, KbqComponentColors.ContrastFade));
+class KbqButton extends KbqButtonMixinBase {
+    get kbqStyle() {
+        return `kbq-button_${this._kbqStyle}`;
+    }
+    set kbqStyle(value) {
+        this._kbqStyle = value || KbqButtonStyles.Filled;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.stopFocusMonitor() : this.runFocusMonitor();
+    }
+    constructor(elementRef, focusMonitor, styler) {
+        super(elementRef);
+        this.focusMonitor = focusMonitor;
+        this.styler = styler;
+        this.hasFocus = false;
+        this._kbqStyle = KbqButtonStyles.Filled;
+        this._disabled = false;
+        this.runFocusMonitor();
+    }
+    ngOnDestroy() {
+        this.stopFocusMonitor();
+    }
+    onFocus($event) {
+        $event.stopPropagation();
+        this.hasFocus = true;
+    }
+    onBlur() {
+        this.hasFocus = false;
+    }
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+    focus() {
+        this.hasFocus = true;
+        this.getHostElement().focus();
+    }
+    focusViaKeyboard() {
+        this.hasFocus = true;
+        this.focusMonitor.focusVia(this.getHostElement(), 'keyboard');
+    }
+    haltDisabledEvents(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+        }
+    }
+    projectContentChanged() {
+        this.styler.updateClassModifierForIcons();
+    }
+    runFocusMonitor() {
+        this.focusMonitor.monitor(this.elementRef.nativeElement, true);
+    }
+    stopFocusMonitor() {
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButton, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: KbqButtonCssStyler }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqButton, selector: "[kbq-button]", inputs: { color: "color", tabIndex: "tabIndex", kbqStyle: "kbqStyle", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "attr.tabIndex": "tabIndex", "class": "kbqStyle" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-button-wrapper\" (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}[disabled].kbq-button,[disabled].kbq-light-button,[disabled].kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 8px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 8px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding, 8px) - var(--kbq-button-size-border-width, 2px));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding, 8px) - var(--kbq-button-size-border-width, 2px))}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"], dependencies: [{ kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButton, decorators: [{
+            type: Component,
+            args: [{ selector: '[kbq-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'tabIndex'], host: {
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.tabIndex]': 'tabIndex',
+                        '[class]': 'kbqStyle',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur()'
+                    }, template: "<div class=\"kbq-button-wrapper\" (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".kbq-button,.kbq-light-button,.kbq-button-icon{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;height:var(--kbq-button-size-height, 32px);min-height:var(--kbq-button-size-height, 32px);white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;border:var(--kbq-button-size-border-width, 2px) solid transparent;border-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-button::-moz-focus-inner,.kbq-light-button::-moz-focus-inner,.kbq-button-icon::-moz-focus-inner{border:0}.kbq-button:focus,.kbq-light-button:focus,.kbq-button-icon:focus{outline:none}[disabled].kbq-button,[disabled].kbq-light-button,[disabled].kbq-button-icon{cursor:default}.cdk-focused.kbq-button,.cdk-focused.kbq-light-button,.cdk-focused.kbq-button-icon{z-index:1}.kbq-button .kbq-button-wrapper,.kbq-light-button .kbq-button-wrapper,.kbq-button-icon .kbq-button-wrapper{display:flex;align-items:center}.kbq-button .kbq-icon_left,.kbq-light-button .kbq-icon_left,.kbq-button-icon .kbq-icon_left{margin-right:var(--kbq-button-size-content-padding, 8px)}.kbq-button .kbq-icon_right,.kbq-light-button .kbq-icon_right,.kbq-button-icon .kbq-icon_right{margin-left:var(--kbq-button-size-content-padding, 8px)}.kbq-button{padding-left:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px);padding-right:calc(var(--kbq-button-size-horizontal-padding, 12px) + 4px)}.kbq-button.kbq-button-icon_left{padding-left:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button.kbq-button-icon_right{padding-right:var(--kbq-button-size-horizontal-padding, 12px)}.kbq-button-icon{padding-left:calc(var(--kbq-button-icon-size-horizontal-padding, 8px) - var(--kbq-button-size-border-width, 2px));padding-right:calc(var(--kbq-button-icon-size-horizontal-padding, 8px) - var(--kbq-button-size-border-width, 2px))}.kbq-button-overlay{position:absolute;inset:-2px;border-radius:inherit}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: KbqButtonCssStyler }]; }, propDecorators: { kbqStyle: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class KbqButtonModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonModule, declarations: [KbqButton,
+            KbqButtonCssStyler], imports: [CommonModule,
+            A11yModule,
+            PlatformModule,
+            ObserversModule], exports: [KbqButton,
+            KbqButtonCssStyler] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonModule, imports: [CommonModule,
+            A11yModule,
+            PlatformModule,
+            ObserversModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        PlatformModule,
+                        ObserversModule
+                    ],
+                    exports: [
+                        KbqButton,
+                        KbqButtonCssStyler
+                    ],
+                    declarations: [
+                        KbqButton,
+                        KbqButtonCssStyler
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqButton, KbqButtonBase, KbqButtonCssStyler, KbqButtonMixinBase, KbqButtonModule, KbqButtonStyles, buttonLeftIconClassName, buttonRightIconClassName, getNodesWithoutComments, leftIconClassName, rightIconClassName };
+//# sourceMappingURL=koobiq-components-button.mjs.map

package/fesm2022/koobiq-components-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koobiq-components-button.mjs","sources":["../../../packages/components/button/button.component.ts","../../../packages/components/button/button.component.html","../../../packages/components/button/button.module.ts","../../../packages/components/button/koobiq-components-button.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    Directive,\n    ElementRef,\n    OnDestroy,\n    ViewEncapsulation,\n    Renderer2,\n    QueryList,\n    ContentChildren,\n    AfterContentInit,\n    SkipSelf,\n    Input, forwardRef\n} from '@angular/core';\nimport {\n    mixinColor,\n    mixinTabIndex,\n    CanColor,\n    CanDisable,\n    CanColorCtor,\n    HasTabIndexCtor,\n    KbqComponentColors\n} from '@koobiq/components/core';\nimport { KbqIcon } from '@koobiq/components/icon';\n\n\nexport enum KbqButtonStyles {\n    Filled = 'filled',\n    Outline = 'outline',\n    Transparent = 'transparent'\n}\n\n\nexport const leftIconClassName = 'kbq-icon_left';\nexport const rightIconClassName = 'kbq-icon_right';\n\nexport const buttonLeftIconClassName = 'kbq-button-icon_left';\nexport const buttonRightIconClassName = 'kbq-button-icon_right';\n\nexport const getNodesWithoutComments = (nodes: NodeList): Node[] => {\n    const COMMENT_NODE = 8;\n\n    return Array.from(nodes).filter((node) => node.nodeType !== COMMENT_NODE);\n};\n\n@Directive({\n    selector: '[kbq-button]',\n    host: {\n        '[class.kbq-button]': '!isIconButton',\n        '[class.kbq-button-icon]': 'isIconButton'\n    }\n})\nexport class KbqButtonCssStyler implements AfterContentInit {\n    @ContentChildren((forwardRef(() => KbqIcon))) icons: QueryList<KbqIcon>;\n\n    nativeElement: HTMLElement;\n\n    isIconButton: boolean = false;\n\n    constructor(elementRef: ElementRef, private renderer: Renderer2, @SkipSelf() private cdr: ChangeDetectorRef) {\n        this.nativeElement = elementRef.nativeElement;\n    }\n\n    ngAfterContentInit() {\n        this.updateClassModifierForIcons();\n    }\n\n    updateClassModifierForIcons() {\n        this.renderer.removeClass(this.nativeElement, buttonLeftIconClassName);\n        this.renderer.removeClass(this.nativeElement, buttonRightIconClassName);\n\n        const twoIcons = 2;\n        const filteredNodesWithoutComments = getNodesWithoutComments(\n            this.nativeElement.querySelector('.kbq-button-wrapper')!.childNodes as NodeList\n        );\n\n        const currentIsIconButtonValue = !!this.icons.length &&\n            this.icons.length === filteredNodesWithoutComments.length && this.icons.length <= twoIcons;\n\n        if (currentIsIconButtonValue !== this.isIconButton) {\n            this.isIconButton = currentIsIconButtonValue;\n            this.cdr.detectChanges();\n        }\n\n        if (this.icons.length && filteredNodesWithoutComments.length > 1) {\n            this.icons.map((item) => item.getHostElement())\n                .forEach((iconHostElement) => {\n                    this.renderer.removeClass(iconHostElement, leftIconClassName);\n                    this.renderer.removeClass(iconHostElement, rightIconClassName);\n\n                    const iconIndex = filteredNodesWithoutComments.findIndex(\n                        (node) => node === iconHostElement\n                    );\n\n                    if (iconIndex === 0) {\n                        this.renderer.addClass(iconHostElement, leftIconClassName);\n                        this.renderer.addClass(this.nativeElement, buttonLeftIconClassName);\n                    }\n\n                    if (iconIndex === filteredNodesWithoutComments.length - 1) {\n                        this.renderer.addClass(iconHostElement, rightIconClassName);\n                        this.renderer.addClass(this.nativeElement, buttonRightIconClassName);\n                    }\n                });\n        }\n\n    }\n}\n\n/** @docs-private */\nexport class KbqButtonBase {\n    constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor &\n    typeof KbqButtonBase = mixinTabIndex(mixinColor(KbqButtonBase, KbqComponentColors.ContrastFade));\n\n\n@Component({\n    selector: '[kbq-button]',\n    templateUrl: './button.component.html',\n    styleUrls: ['./button.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['color', 'tabIndex'],\n    host: {\n        '[attr.disabled]': 'disabled || null',\n        '[attr.tabIndex]': 'tabIndex',\n        '[class]': 'kbqStyle',\n\n        '(focus)': 'onFocus($event)',\n        '(blur)': 'onBlur()'\n    }\n})\nexport class KbqButton extends KbqButtonMixinBase implements OnDestroy, CanDisable, CanColor {\n    hasFocus: boolean = false;\n\n    @Input()\n    get kbqStyle(): string {\n        return `kbq-button_${this._kbqStyle}`;\n    }\n\n    set kbqStyle(value: string | KbqButtonStyles) {\n        this._kbqStyle = value || KbqButtonStyles.Filled;\n    }\n\n    private _kbqStyle: string | KbqButtonStyles = KbqButtonStyles.Filled;\n\n    @Input()\n    get disabled() {\n        return this._disabled;\n    }\n\n    set disabled(value: any) {\n        this._disabled = coerceBooleanProperty(value);\n\n        this._disabled ? this.stopFocusMonitor() : this.runFocusMonitor();\n    }\n\n    private _disabled: boolean = false;\n\n    constructor(elementRef: ElementRef, private focusMonitor: FocusMonitor, private styler: KbqButtonCssStyler) {\n        super(elementRef);\n\n        this.runFocusMonitor();\n    }\n\n    ngOnDestroy() {\n        this.stopFocusMonitor();\n    }\n\n    onFocus($event) {\n        $event.stopPropagation();\n\n        this.hasFocus = true;\n    }\n\n    onBlur() {\n        this.hasFocus = false;\n    }\n\n    getHostElement() {\n        return this.elementRef.nativeElement;\n    }\n\n    focus(): void {\n        this.hasFocus = true;\n\n        this.getHostElement().focus();\n    }\n\n    focusViaKeyboard(): void {\n        this.hasFocus = true;\n\n        this.focusMonitor.focusVia(this.getHostElement(), 'keyboard');\n    }\n\n    haltDisabledEvents(event: Event) {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            event.stopPropagation();\n        }\n    }\n\n    projectContentChanged() {\n        this.styler.updateClassModifierForIcons();\n    }\n\n    private runFocusMonitor() {\n        this.focusMonitor.monitor(this.elementRef.nativeElement, true);\n    }\n\n    private stopFocusMonitor() {\n        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n    }\n}\n\n","<div class=\"kbq-button-wrapper\" (cdkObserveContent)=\"projectContentChanged()\">\n    <ng-content></ng-content>\n</div>\n<div class=\"kbq-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { ObserversModule } from '@angular/cdk/observers';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n    KbqButton,\n    KbqButtonCssStyler\n} from './button.component';\n\n\n@NgModule({\n    imports: [\n        CommonModule,\n        A11yModule,\n        PlatformModule,\n        ObserversModule\n    ],\n    exports: [\n        KbqButton,\n        KbqButtonCssStyler\n    ],\n    declarations: [\n        KbqButton,\n        KbqButtonCssStyler\n    ]\n})\nexport class KbqButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-card.mjs

@@ -0,0 +1,111 @@
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { PlatformModule } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
+import { SPACE } from '@koobiq/cdk/keycodes';
+import { mixinColor } from '@koobiq/components/core';
+
+/** @docs-private */
+class KbqCardBase {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+}
+/** @docs-private */
+const KbqCardBaseMixin = mixinColor(KbqCardBase);
+class KbqCard extends KbqCardBaseMixin {
+    get tabIndex() {
+        return this.readonly ? null : this._tabIndex;
+    }
+    set tabIndex(value) {
+        this._tabIndex = value;
+    }
+    constructor(elementRef, _focusMonitor) {
+        super(elementRef);
+        this._focusMonitor = _focusMonitor;
+        this.readonly = false;
+        this.selected = false;
+        this.selectedChange = new EventEmitter();
+        this._tabIndex = 0;
+        this._focusMonitor.monitor(this.elementRef.nativeElement, false);
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    focus() {
+        this.hostElement.focus();
+    }
+    onClick($event) {
+        if (!this.readonly) {
+            $event.stopPropagation();
+            this.selectedChange.emit(!this.selected);
+        }
+    }
+    onKeyDown($event) {
+        // tslint:disable-next-line:deprecation
+        switch ($event.keyCode) {
+            case SPACE:
+                if (!this.readonly) {
+                    $event.preventDefault();
+                    this.selectedChange.emit(!this.selected);
+                }
+                break;
+            default:
+        }
+    }
+    get hostElement() {
+        return this.elementRef.nativeElement;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCard, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqCard, selector: "kbq-card", inputs: { color: "color", readonly: "readonly", selected: "selected", tabIndex: "tabIndex" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class.kbq-card_readonly": "readonly", "class.kbq-selected": "selected", "attr.tabindex": "tabIndex" }, classAttribute: "kbq-card" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"kbq-card__overlay\"></div>\n", styles: [".kbq-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:var(--kbq-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.kbq-card:focus{outline:none}.kbq-card .kbq-card__overlay{inset:0;position:absolute;pointer-events:none;background:transparent}.kbq-card.kbq-card_readonly{cursor:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color'], host: {
+                        class: 'kbq-card',
+                        '[class.kbq-card_readonly]': 'readonly',
+                        '[class.kbq-selected]': 'selected',
+                        '[attr.tabindex]': 'tabIndex',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(click)': 'onClick($event)'
+                    }, template: "<ng-content></ng-content>\n<div class=\"kbq-card__overlay\"></div>\n", styles: [".kbq-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-left-width:var(--kbq-card-size-vertical-line, 4px);border-left-style:solid;border-left-color:transparent}.kbq-card:focus{outline:none}.kbq-card .kbq-card__overlay{inset:0;position:absolute;pointer-events:none;background:transparent}.kbq-card.kbq-card_readonly{cursor:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { readonly: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], tabIndex: [{
+                type: Input
+            }] } });
+
+class KbqCardModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqCardModule, declarations: [KbqCard], imports: [CommonModule,
+            A11yModule,
+            PlatformModule], exports: [KbqCard] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCardModule, imports: [CommonModule,
+            A11yModule,
+            PlatformModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        PlatformModule
+                    ],
+                    exports: [KbqCard],
+                    declarations: [KbqCard]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqCard, KbqCardBase, KbqCardBaseMixin, KbqCardModule };
+//# sourceMappingURL=koobiq-components-card.mjs.map

package/fesm2022/koobiq-components-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"koobiq-components-card.mjs","sources":["../../../packages/components/card/card.component.ts","../../../packages/components/card/card.component.html","../../../packages/components/card/card.module.ts","../../../packages/components/card/koobiq-components-card.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    Output,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Input,\n    OnDestroy,\n    EventEmitter,\n    ViewEncapsulation\n} from '@angular/core';\nimport { SPACE } from '@koobiq/cdk/keycodes';\nimport { CanColorCtor, mixinColor } from '@koobiq/components/core';\n\n\n/** @docs-private */\nexport class KbqCardBase {\n    constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqCardBaseMixin: CanColorCtor & typeof KbqCardBase = mixinColor(KbqCardBase);\n\n\n@Component({\n    selector: 'kbq-card',\n    templateUrl: './card.component.html',\n    styleUrls: ['./card.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['color'],\n    host: {\n        class: 'kbq-card',\n        '[class.kbq-card_readonly]': 'readonly',\n        '[class.kbq-selected]': 'selected',\n        '[attr.tabindex]': 'tabIndex',\n        '(keydown)': 'onKeyDown($event)',\n        '(click)': 'onClick($event)'\n    }\n})\nexport class KbqCard extends KbqCardBaseMixin implements OnDestroy {\n    @Input()\n    readonly = false;\n\n    @Input()\n    selected = false;\n\n    @Output()\n    selectedChange = new EventEmitter<boolean>();\n\n    @Input()\n    get tabIndex(): number | null {\n        return this.readonly ? null : this._tabIndex;\n    }\n\n    set tabIndex(value: number | null) {\n        this._tabIndex = value;\n    }\n\n    private _tabIndex: number | null = 0;\n\n    constructor(elementRef: ElementRef, private _focusMonitor: FocusMonitor) {\n        super(elementRef);\n\n        this._focusMonitor.monitor(this.elementRef.nativeElement, false);\n    }\n\n    ngOnDestroy() {\n        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n    }\n\n    focus(): void {\n        this.hostElement.focus();\n    }\n\n    onClick($event: MouseEvent) {\n        if (!this.readonly) {\n            $event.stopPropagation();\n\n            this.selectedChange.emit(!this.selected);\n        }\n    }\n\n    onKeyDown($event: KeyboardEvent) {\n        // tslint:disable-next-line:deprecation\n        switch ($event.keyCode) {\n            case SPACE:\n                if (!this.readonly) {\n                    $event.preventDefault();\n                    this.selectedChange.emit(!this.selected);\n                }\n                break;\n            default:\n        }\n    }\n\n    private get hostElement() {\n        return this.elementRef.nativeElement;\n    }\n}\n","<ng-content></ng-content>\n<div class=\"kbq-card__overlay\"></div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport {\n    KbqCard\n} from './card.component';\n\n\n@NgModule({\n    imports: [\n        CommonModule,\n        A11yModule,\n        PlatformModule\n    ],\n    exports: [KbqCard],\n    declarations: [KbqCard]\n})\nexport class KbqCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}