@koobiq/components 17.0.2 → 17.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-toggle.mjs","sources":["../../../packages/components/toggle/toggle.component.ts","../../../packages/components/toggle/toggle.component.html","../../../packages/components/toggle/toggle.module.ts","../../../packages/components/toggle/koobiq-components-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n    forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    CanColor,\n    CanColorCtor,\n    CanDisable,\n    CanDisableCtor,\n    HasTabIndex,\n    HasTabIndexCtor,\n    KbqComponentColors,\n    mixinColor,\n    mixinDisabled,\n    mixinTabIndex\n} from '@koobiq/components/core';\n\nlet nextUniqueId = 0;\n\ntype ToggleLabelPositionType = 'left' | 'right';\n\n/** @docs-private */\nexport class KbqToggleBase {\n    constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqToggleMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof KbqToggleBase = mixinTabIndex(\n    mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme)\n);\n\nexport class KbqToggleChange {\n    source: KbqToggleComponent;\n    checked: boolean;\n}\n\n@Component({\n    selector: 'kbq-toggle',\n    exportAs: 'kbqToggle',\n    templateUrl: './toggle.component.html',\n    styleUrls: ['./toggle.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['color', 'tabIndex'],\n    host: {\n        class: 'kbq-toggle',\n        '[class.kbq-toggle_big]': 'big',\n        '[id]': 'id',\n        '[attr.id]': 'id',\n        '[class.kbq-disabled]': 'disabled',\n        '[class.kbq-active]': 'checked'\n    },\n    animations: [\n        trigger('switch', [\n            state('true', style({ left: 'calc(100% - 11px)' })),\n            state('false', style({ left: '3px' })),\n            transition('true <=> false', animate('150ms'))])\n\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => KbqToggleComponent),\n            multi: true\n        }\n    ]\n})\nexport class KbqToggleComponent\n    extends KbqToggleMixinBase\n    implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy\n{\n    @Input() big: boolean = false;\n\n    @ViewChild('input', { static: false }) inputElement: ElementRef;\n\n    @Input() labelPosition: ToggleLabelPositionType = 'right';\n\n    @Input('aria-label') ariaLabel: string = '';\n    @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n    @Input() id: string;\n\n    get inputId(): string {\n        return `${this.id || this.uniqueId}-input`;\n    }\n\n    @Input() name: string | null = null;\n\n    @Input() value: string;\n\n    @Input()\n    get disabled() {\n        return this._disabled;\n    }\n\n    set disabled(value: any) {\n        if (value !== this._disabled) {\n            this._disabled = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _disabled: boolean = false;\n\n    get checked() {\n        return this._checked;\n    }\n\n    @Input()\n    set checked(value: boolean) {\n        if (value !== this._checked) {\n            this._checked = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _checked: boolean = false;\n\n    @Output() readonly change: EventEmitter<KbqToggleChange> = new EventEmitter<KbqToggleChange>();\n\n    private uniqueId: string = `kbq-toggle-${++nextUniqueId}`;\n\n    constructor(\n        public elementRef: ElementRef,\n        private _focusMonitor: FocusMonitor,\n        private _changeDetectorRef: ChangeDetectorRef\n    ) {\n        super(elementRef);\n\n        this.id = this.uniqueId;\n\n        this._focusMonitor.monitor(this.elementRef.nativeElement, true);\n    }\n\n    ngOnDestroy() {\n        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n    }\n\n    focus(): void {\n        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');\n    }\n\n    getAriaChecked(): boolean {\n        return this.checked;\n    }\n\n    onChangeEvent(event: Event) {\n        event.stopPropagation();\n\n        this.updateModelValue();\n        this.emitChangeEvent();\n    }\n\n    onLabelTextChange() {\n        this._changeDetectorRef.markForCheck();\n    }\n\n    onInputClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    writeValue(value: any) {\n        this.checked = !!value;\n    }\n\n    registerOnChange(fn: any) {\n        this.onChangeCallback = fn;\n    }\n\n    registerOnTouched(fn: any) {\n        this.onTouchedCallback = fn;\n    }\n\n    setDisabledState(isDisabled: boolean) {\n        this.disabled = isDisabled;\n    }\n\n    private onTouchedCallback = () => {};\n\n    private onChangeCallback = (_: any) => {};\n\n    private updateModelValue() {\n        this._checked = !this.checked;\n        this.onTouchedCallback();\n    }\n\n    private emitChangeEvent() {\n        const event = new KbqToggleChange();\n        event.source = this;\n        event.checked = this.checked;\n\n        this.onChangeCallback(this.checked);\n        this.change.emit(event);\n    }\n}\n","<label\n    class=\"kbq-toggle-layout\"\n    [attr.for]=\"inputId\"\n    [class.left]=\"labelPosition === 'left'\"\n>\n    <input\n        #input\n        role=\"switch\"\n        type=\"checkbox\"\n        class=\"kbq-toggle-input cdk-visually-hidden\"\n        [attr.aria-checked]=\"getAriaChecked()\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onChangeEvent($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n    <div class=\"kbq-toggle-bar-container\">\n        <div class=\"kbq-toggle-bar\">\n            <div\n                class=\"kbq-toggle__circle\"\n                [@switch]=\"checked\"\n            ></div>\n        </div>\n    </div>\n\n    <div\n        class=\"kbq-toggle__content\"\n        [class.left]=\"labelPosition === 'left'\"\n        [class.right]=\"labelPosition === 'right'\"\n    >\n        <span\n            class=\"kbq-toggle-label\"\n            (cdkObserveContent)=\"onLabelTextChange()\"\n        >\n            <ng-content />\n        </span>\n\n        <ng-content select=\"kbq-hint\" />\n    </div>\n</label>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqToggleComponent } from './toggle.component';\n\n@NgModule({\n    imports: [CommonModule, A11yModule, KbqCommonModule],\n    exports: [KbqToggleComponent],\n    declarations: [KbqToggleComponent]\n})\nexport class KbqToggleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AA6BA,IAAI,YAAY,GAAG,CAAC,CAAC;AAIrB;MACa,aAAa,CAAA;AACtB,IAAA,WAAA,CAAmB,UAAsB,EAAA;QAAtB,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;KAAI;AAChD,CAAA;AAED;AACa,MAAA,kBAAkB,GAA2E,aAAa,CACnH,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,EACpE;MAEW,eAAe,CAAA;AAG3B,CAAA;AAiCK,MAAO,kBACT,SAAQ,kBAAkB,CAAA;AAc1B,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,CAAA,EAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAA,MAAA,CAAQ,CAAC;KAC9C;AAMD,IAAA,IACI,QAAQ,GAAA;QACR,OAAO,IAAI,CAAC,SAAS,CAAC;KACzB;IAED,IAAI,QAAQ,CAAC,KAAU,EAAA;AACnB,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;AACvB,YAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;SAC1C;KACJ;AAID,IAAA,IAAI,OAAO,GAAA;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IAED,IACI,OAAO,CAAC,KAAc,EAAA;AACtB,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;SAC1C;KACJ;AAQD,IAAA,WAAA,CACW,UAAsB,EACrB,aAA2B,EAC3B,kBAAqC,EAAA;QAE7C,KAAK,CAAC,UAAU,CAAC,CAAC;QAJX,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QACrB,IAAa,CAAA,aAAA,GAAb,aAAa,CAAc;QAC3B,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAmB;QAtDxC,IAAG,CAAA,GAAA,GAAY,KAAK,CAAC;QAIrB,IAAa,CAAA,aAAA,GAA4B,OAAO,CAAC;QAErC,IAAS,CAAA,SAAA,GAAW,EAAE,CAAC;QAClB,IAAc,CAAA,cAAA,GAAkB,IAAI,CAAC;QAQtD,IAAI,CAAA,IAAA,GAAkB,IAAI,CAAC;QAgB5B,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;QAc3B,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAEf,QAAA,IAAA,CAAA,MAAM,GAAkC,IAAI,YAAY,EAAmB,CAAC;AAEvF,QAAA,IAAA,CAAA,QAAQ,GAAW,CAAA,WAAA,EAAc,EAAE,YAAY,EAAE,CAAC;AAyDlD,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAK,GAAG,CAAC;AAE7B,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,CAAM,KAAI,GAAG,CAAC;AAlDtC,QAAA,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC;AAExB,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;KACnE;IAED,WAAW,GAAA;QACP,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KACpE;IAED,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;KAC5E;IAED,cAAc,GAAA;QACV,OAAO,IAAI,CAAC,OAAO,CAAC;KACvB;AAED,IAAA,aAAa,CAAC,KAAY,EAAA;QACtB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAED,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;KAC1C;AAED,IAAA,YAAY,CAAC,KAAiB,EAAA;QAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;AAED,IAAA,UAAU,CAAC,KAAU,EAAA;AACjB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC;KAC1B;AAED,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACpB,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;KAC9B;AAED,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACrB,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;KAC/B;AAED,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;KAC9B;IAMO,gBAAgB,GAAA;AACpB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAEO,eAAe,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,IAAI,eAAe,EAAE,CAAC;AACpC,QAAA,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AACpB,QAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AAE7B,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;iIA9HQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EARhB,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,GAAA,EAAA,KAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,EAAC,MAAM,kBAAkB,EAAC;AACjD,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACJ,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7EL,0yCA8CA,EDkBgB,MAAA,EAAA,CAAA,2pDAAA,CAAA,EAAA,UAAA,EAAA;YACR,OAAO,CAAC,QAAQ,EAAE;gBACd,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACnD,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AACtC,gBAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;aAAC,CAAC;AAEvD,SAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FASQ,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA/B9B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,YACZ,WAAW,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,UAC7B,CAAC,OAAO,EAAE,UAAU,CAAC,EACvB,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,YAAY;AACnB,wBAAA,wBAAwB,EAAE,KAAK;AAC/B,wBAAA,MAAM,EAAE,IAAI;AACZ,wBAAA,WAAW,EAAE,IAAI;AACjB,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,oBAAoB,EAAE,SAAS;qBAClC,EACW,UAAA,EAAA;wBACR,OAAO,CAAC,QAAQ,EAAE;4BACd,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;4BACnD,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AACtC,4BAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;yBAAC,CAAC;qBAEvD,EACU,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,EAAC,wBAAwB,EAAC;AACjD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,0yCAAA,EAAA,MAAA,EAAA,CAAA,2pDAAA,CAAA,EAAA,CAAA;0IAMQ,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAEiC,YAAY,EAAA,CAAA;sBAAlD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBAE5B,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEe,SAAS,EAAA,CAAA;sBAA7B,KAAK;uBAAC,YAAY,CAAA;gBACO,cAAc,EAAA,CAAA;sBAAvC,KAAK;uBAAC,iBAAiB,CAAA;gBAEf,EAAE,EAAA,CAAA;sBAAV,KAAK;gBAMG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAGF,QAAQ,EAAA,CAAA;sBADX,KAAK;gBAmBF,OAAO,EAAA,CAAA;sBADV,KAAK;gBAUa,MAAM,EAAA,CAAA;sBAAxB,MAAM;;;MEvHE,eAAe,CAAA;iIAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;kIAAf,eAAe,EAAA,YAAA,EAAA,CAFT,kBAAkB,CAFvB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,UAAU,EAAE,eAAe,CAAA,EAAA,OAAA,EAAA,CACzC,kBAAkB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGnB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EAJd,OAAA,EAAA,CAAA,YAAY,EAAE,UAAU,EAAE,eAAe,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAI1C,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,eAAe,CAAC;oBACpD,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;AACrC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"koobiq-components-toggle.mjs","sources":["../../../packages/components/toggle/toggle.component.ts","../../../packages/components/toggle/toggle.component.html","../../../packages/components/toggle/toggle.module.ts","../../../packages/components/toggle/koobiq-components-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n    forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    CanColor,\n    CanColorCtor,\n    CanDisable,\n    CanDisableCtor,\n    HasTabIndex,\n    HasTabIndexCtor,\n    KbqComponentColors,\n    mixinColor,\n    mixinDisabled,\n    mixinTabIndex\n} from '@koobiq/components/core';\n\nlet nextUniqueId = 0;\n\ntype ToggleLabelPositionType = 'left' | 'right';\n\n/** @docs-private */\nexport class KbqToggleBase {\n    constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqToggleMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof KbqToggleBase = mixinTabIndex(\n    mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme)\n);\n\nexport class KbqToggleChange {\n    source: KbqToggleComponent;\n    checked: boolean;\n}\n\n@Component({\n    selector: 'kbq-toggle',\n    exportAs: 'kbqToggle',\n    templateUrl: './toggle.component.html',\n    styleUrls: ['./toggle.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    inputs: ['color', 'tabIndex'],\n    host: {\n        class: 'kbq-toggle',\n        '[class.kbq-toggle_big]': 'big',\n        '[id]': 'id',\n        '[attr.id]': 'id',\n        '[class.kbq-disabled]': 'disabled',\n        '[class.kbq-active]': 'checked'\n    },\n    animations: [\n        trigger('switch', [\n            state('true', style({ left: 'calc(100% - 11px)' })),\n            state('false', style({ left: '3px' })),\n            transition('true <=> false', animate('150ms'))])\n\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => KbqToggleComponent),\n            multi: true\n        }\n    ]\n})\nexport class KbqToggleComponent\n    extends KbqToggleMixinBase\n    implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy\n{\n    @Input() big: boolean = false;\n\n    @ViewChild('input', { static: false }) inputElement: ElementRef;\n\n    @Input() labelPosition: ToggleLabelPositionType = 'right';\n\n    @Input('aria-label') ariaLabel: string = '';\n    @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n    @Input() id: string;\n\n    get inputId(): string {\n        return `${this.id || this.uniqueId}-input`;\n    }\n\n    @Input() name: string | null = null;\n\n    @Input() value: string;\n\n    @Input()\n    get disabled() {\n        return this._disabled;\n    }\n\n    set disabled(value: any) {\n        if (value !== this._disabled) {\n            this._disabled = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _disabled: boolean = false;\n\n    get checked() {\n        return this._checked;\n    }\n\n    @Input()\n    set checked(value: boolean) {\n        if (value !== this._checked) {\n            this._checked = value;\n            this._changeDetectorRef.markForCheck();\n        }\n    }\n\n    private _checked: boolean = false;\n\n    @Output() readonly change: EventEmitter<KbqToggleChange> = new EventEmitter<KbqToggleChange>();\n\n    private uniqueId: string = `kbq-toggle-${++nextUniqueId}`;\n\n    constructor(\n        public elementRef: ElementRef,\n        private _focusMonitor: FocusMonitor,\n        private _changeDetectorRef: ChangeDetectorRef\n    ) {\n        super(elementRef);\n\n        this.id = this.uniqueId;\n\n        this._focusMonitor.monitor(this.elementRef.nativeElement, true);\n    }\n\n    ngOnDestroy() {\n        this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n    }\n\n    focus(): void {\n        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');\n    }\n\n    getAriaChecked(): boolean {\n        return this.checked;\n    }\n\n    onChangeEvent(event: Event) {\n        event.stopPropagation();\n\n        this.updateModelValue();\n        this.emitChangeEvent();\n    }\n\n    onLabelTextChange() {\n        this._changeDetectorRef.markForCheck();\n    }\n\n    onInputClick(event: MouseEvent) {\n        event.stopPropagation();\n    }\n\n    writeValue(value: any) {\n        this.checked = !!value;\n    }\n\n    registerOnChange(fn: any) {\n        this.onChangeCallback = fn;\n    }\n\n    registerOnTouched(fn: any) {\n        this.onTouchedCallback = fn;\n    }\n\n    setDisabledState(isDisabled: boolean) {\n        this.disabled = isDisabled;\n    }\n\n    private onTouchedCallback = () => {};\n\n    private onChangeCallback = (_: any) => {};\n\n    private updateModelValue() {\n        this._checked = !this.checked;\n        this.onTouchedCallback();\n    }\n\n    private emitChangeEvent() {\n        const event = new KbqToggleChange();\n        event.source = this;\n        event.checked = this.checked;\n\n        this.onChangeCallback(this.checked);\n        this.change.emit(event);\n    }\n}\n","<label\n    class=\"kbq-toggle-layout\"\n    [attr.for]=\"inputId\"\n    [class.left]=\"labelPosition === 'left'\"\n>\n    <input\n        #input\n        role=\"switch\"\n        type=\"checkbox\"\n        class=\"kbq-toggle-input cdk-visually-hidden\"\n        [attr.aria-checked]=\"getAriaChecked()\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [checked]=\"checked\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        [tabIndex]=\"tabIndex\"\n        (change)=\"onChangeEvent($event)\"\n        (click)=\"onInputClick($event)\"\n    />\n    <div class=\"kbq-toggle-bar-container\">\n        <div class=\"kbq-toggle-bar\">\n            <div\n                class=\"kbq-toggle__circle\"\n                [@switch]=\"checked\"\n            ></div>\n        </div>\n    </div>\n\n    <div\n        class=\"kbq-toggle__content\"\n        [class.left]=\"labelPosition === 'left'\"\n        [class.right]=\"labelPosition === 'right'\"\n    >\n        <span\n            class=\"kbq-toggle-label\"\n            (cdkObserveContent)=\"onLabelTextChange()\"\n        >\n            <ng-content />\n        </span>\n\n        <ng-content select=\"kbq-hint\" />\n    </div>\n</label>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqToggleComponent } from './toggle.component';\n\n@NgModule({\n    imports: [CommonModule, A11yModule, KbqCommonModule],\n    exports: [KbqToggleComponent],\n    declarations: [KbqToggleComponent]\n})\nexport class KbqToggleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -61,21 +61,13 @@ $tokens: meta.module-variables(tokens) !default;
         padding: 0;
 
         & .kbq-list-text {
-            $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
-            $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
-            $outline-width: map.get($tokens, list-size-container-focus-outline-width);
-
-            padding: calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            $outline-width
-                        )
+            padding: kbq-difference-series-css-variables(
+                    [ file-upload-size-multiple-big-grid-cell-padding-vertical,
+                    list-size-container-focus-outline-width]
                 )
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            $outline-width
-                        )
+                kbq-difference-series-css-variables(
+                    [ file-upload-size-multiple-big-grid-cell-padding-horizontal,
+                    list-size-container-focus-outline-width]
                 );
         }
 
@@ -132,29 +124,20 @@ $tokens: meta.module-variables(tokens) !default;
         border-bottom-style: solid;
 
         .kbq-file-multiple-uploaded__header-inner {
-            $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
-            $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
-            $compensation: 2px;
-
-            padding: calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) +
-                        $compensation
-                )
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) +
-                        $compensation
-                );
+            padding: kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-vertical, 2px])
+                kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-horizontal 2px]);
         }
     }
 
     .btn-upload {
-        $padding-vertical: map.get($tokens, file-upload-size-single-container-padding-vertical);
-        $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
-        $border-width: map.get($tokens, file-upload-size-single-container-border-width);
-
-        padding: calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
-            calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
-
+        padding: kbq-difference-series-css-variables(
+                [ file-upload-size-single-container-padding-vertical,
+                file-upload-size-single-container-border-width]
+            )
+            kbq-difference-series-css-variables(
+                [ file-upload-size-single-container-padding-horizontal,
+                file-upload-size-single-container-border-width]
+            );
         border-top-left-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
 
         border-top-right-radius: kbq-css-variable(file-upload-size-single-container-border-radius);

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

@@ -9,12 +9,14 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-single-file-upload .kbq-file-upload {
-    $padding-vertical: map.get($tokens, file-upload-size-single-container-padding-vertical);
-    $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
-    $border-width: map.get($tokens, file-upload-size-single-container-border-width);
-
-    padding: calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
-        calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
+    padding: kbq-difference-series-css-variables(
+            [ file-upload-size-single-container-padding-vertical,
+            file-upload-size-single-container-border-width]
+        )
+        kbq-difference-series-css-variables(
+            [ file-upload-size-single-container-padding-horizontal,
+            file-upload-size-single-container-border-width]
+        );
 
     border-radius: kbq-css-variable(file-upload-size-single-container-border-radius);
     border-width: kbq-css-variable(file-upload-size-single-container-border-width);

package/form-field/form-field.scss

@@ -44,10 +44,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-form-field_has-prefix {
         .kbq-input {
-            padding-left: calc(
-                var(--kbq-form-field-size-icon-size, map.get($tokens, form-field-size-icon-size)) +
-                    var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
-                    var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
+            padding-left: kbq-sum-series-css-variables(
+                [form-field-size-icon-size,
+                form-field-size-icon-margin-left,
+                form-field-size-icon-margin-right]
             );
         }
     }
@@ -57,16 +57,10 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-form-field_has-stepper,
     &.kbq-form-field_has-suffix {
         .kbq-input {
-            padding-right: calc(
-                var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size)) +
-                    var(
-                        --kbq-form-field-size-icon-button-margin-left,
-                        map.get($tokens, form-field-size-icon-button-margin-left)
-                    ) +
-                    var(
-                        --kbq-form-field-size-icon-button-margin-right,
-                        map.get($tokens, form-field-size-icon-button-margin-right)
-                    )
+            padding-right: kbq-sum-series-css-variables(
+                [form-field-size-icon-button-size,
+                form-field-size-icon-button-margin-left,
+                form-field-size-icon-button-margin-right]
             );
         }
     }

package/input/input.scss

@@ -6,8 +6,6 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-input {
     @include input.kbq-reset-input();
 
@@ -17,17 +15,12 @@ $tokens: meta.module-variables(tokens) !default;
     text-overflow: ellipsis;
 
     width: 100%;
-    min-height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+    min-height: kbq-difference-series-css-variables(
+        [form-field-size-height,
+        calc(kbq-css-variable(form-field-size-border-width) * 2)]
     );
 
-    padding: calc(
-            var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) - var(
-                    --kbq-form-field-size-border-width,
-                    map.get($tokens, form-field-size-border-width)
-                )
-        )
+    padding: kbq-difference-series-css-variables([input-size-padding-vertical, form-field-size-border-width])
         kbq-css-variable(input-size-padding-horizontal);
 }
 

package/navbar/vertical-navbar.component.d.ts

@@ -10,6 +10,7 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     items: QueryList<KbqNavbarItem>;
     bento: KbqNavbarBento;
     readonly animationDone: Subject<void>;
+    openOver: boolean;
     get expanded(): boolean;
     set expanded(value: boolean);
     private _expanded;
@@ -21,5 +22,5 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     private updateTooltipForItems;
     private setItemsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalNavbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["bento", "rectangleElements", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "openOver": { "alias": "openOver"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["bento", "rectangleElements", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
 }

package/navbar/vertical-navbar.scss

@@ -4,8 +4,6 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-vertical-navbar {
-    position: relative;
-
     min-width: 48px;
     height: 100%;
 
@@ -22,8 +20,6 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        position: absolute;
-        z-index: 998;
         height: 100%;
 
         &.kbq-collapsed {
@@ -34,4 +30,13 @@
             width: 240px;
         }
     }
+
+    &.kbq-vertical-navbar_open-over {
+        position: relative;
+
+        & .kbq-vertical-navbar__container {
+            position: absolute;
+            z-index: 998;
+        }
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.2",
+    "version": "17.1.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,9 +19,9 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.0.2",
-        "@koobiq/angular-moment-adapter": "17.0.2",
-        "@koobiq/angular-luxon-adapter": "17.0.2",
+        "@koobiq/cdk": "17.1.0",
+        "@koobiq/angular-moment-adapter": "17.1.0",
+        "@koobiq/angular-luxon-adapter": "17.1.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
         "@koobiq/tokens-builder": "3.0.0",