@acorex/components 7.3.1 → 7.4.1

package/fesm2022/acorex-components-button-group.mjs

@@ -0,0 +1,122 @@
+import { AXButtonItemComponent } from '@acorex/components/button';
+import { MXInteractiveComponent, MXColorLookComponent } from '@acorex/components/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, Output, Input, HostBinding, NgModule } from '@angular/core';
+import { classes } from 'polytype';
+import { CommonModule } from '@angular/common';
+
+class AXButtonGroupComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
+    constructor() {
+        super(...arguments);
+        this.selectionChange = new EventEmitter();
+    }
+    get selection() {
+        return this._selection;
+    }
+    set selection(value) {
+        this.setOption({
+            name: 'selection',
+            value: value,
+            afterCallback: (o, n) => {
+                if (value == 'none') {
+                    this.clearSelection();
+                }
+            },
+        });
+    }
+    ngAfterContentInit() {
+        this._bindEvents();
+        this._bindProps();
+        this._contentButtons.changes.subscribe(() => {
+            this._bindEvents();
+            this._bindProps();
+        });
+    }
+    _bindEvents() {
+        this._contentButtons?.forEach((b) => {
+            if (!b.onClick.length)
+                b.onClick.subscribe((c) => {
+                    this._handleClickEvent(c, b);
+                });
+        });
+    }
+    _bindProps() {
+        this._contentButtons?.forEach((b) => {
+            if (b['originDisabled'] == null) {
+                b['originDisabled'] = b.disabled;
+            }
+            b.look = this.look ?? this.look;
+            b.color = this.color ?? this.color;
+            b.disabled = b['originDisabled'] || this.disabled;
+            b.toggleable = false;
+        });
+    }
+    internalOptionChanged() {
+        this._bindProps();
+    }
+    _handleClickEvent(e, button) {
+        if (this.selection == 'multiple') {
+            button.selected = !button.selected;
+        }
+        else if (this.selection == 'single') {
+            this.clearSelection();
+            button.selected = true;
+        }
+        else {
+            button.selected = false;
+        }
+    }
+    clearSelection() {
+        this._contentButtons?.forEach((c) => {
+            c.selected = false;
+        });
+    }
+    get __hostClass() {
+        const cssClasses = {
+            'ax-state-disabled': this.disabled,
+        };
+        cssClasses[`ax-color-${this.color || 'primary'}`] = true;
+        cssClasses[`ax-look-${this.look || 'default'}`] = true;
+        return cssClasses;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXButtonGroupComponent, selector: "ax-button-group-2", inputs: { disabled: "disabled", color: "color", look: "look", selection: "selection" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", selectionChange: "selectionChange" }, host: { properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "_contentButtons", predicate: AXButtonItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n  <ng-content select=\"ax-button-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group-2{display:flex}ax-button-group-2 ax-button-item{border:1px solid;border-color:rgba(var(--ax-color-border-default));display:inline-flex;align-items:center;justify-content:center;height:var(--ax-size-default);font-size:.875rem;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-surface-fore));padding:0 1rem}ax-button-group-2 ax-button-item:first-child{border-start-start-radius:var(--ax-rounded-border-default);border-end-start-radius:var(--ax-rounded-border-default)}ax-button-group-2 ax-button-item:last-child{border-start-end-radius:var(--ax-rounded-border-default);border-end-end-radius:var(--ax-rounded-border-default)}ax-button-group-2 ax-button-item:not(ax-button-group-2 ax-button-item:first-child){border-inline-start:0px}ax-button-group-2 ax-button-item:not(ax-button-group-2 ax-button-item:first-child):before{position:absolute;inset-block-start:-1px;inset-inline-start:-1px;display:block;box-sizing:content-box;width:1px;height:100%;padding-block:1px;padding-inline:0;transition:background-color .3s;content:\"\"}ax-button-group-2 ax-button-item:hover:not(.ax-state-disabled){opacity:.75}ax-button-group-2 ax-button-item:active{opacity:1}ax-button-group-2 ax-button-item .ax-button-item-text{padding:0 .5rem}ax-button-group-2.ax-buttons-fit{width:100%}ax-button-group-2.ax-buttons-fit>button{flex:1}ax-button-group-2.ax-state-disabled,ax-button-group-2.ax-state-loading{opacity:.5}ax-button-group-2.ax-state-disabled>ax-button-item,ax-button-group-2.ax-state-loading>ax-button-item{cursor:not-allowed}ax-button-group-2.ax-xs{font-size:.75rem}ax-button-group-2.ax-xs>button{padding-inline-start:.25rem;padding-inline-end:.25rem}ax-button-group-2.ax-sm>button{padding-inline-start:.5rem;padding-inline-end:.5rem}ax-button-group-2.ax-sm,ax-button-group-2.ax-md{font-size:.875rem}ax-button-group-2.ax-lg{font-size:1.25rem}ax-button-group-2.ax-lg>button{padding-inline-start:1.5rem;padding-inline-end:1.5rem}ax-button-group-2.ax-xl{font-size:1.5rem}ax-button-group-2.ax-xl>button{padding-inline-start:2rem;padding-inline-end:2rem}ax-button-group-2.ax-look-default.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-group-2.ax-look-default.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-color-primary ax-button-item:is(ax-button-group-2.ax-color-primary ax-button-item:focus-visible,ax-button-group-2.ax-color-primary ax-button-item:focus){outline-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-blank.ax-color-primary ax-button-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-default.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-group-2.ax-look-default.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-color-secondary ax-button-item:is(ax-button-group-2.ax-color-secondary ax-button-item:focus-visible,ax-button-group-2.ax-color-secondary ax-button-item:focus){outline-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-blank.ax-color-secondary ax-button-item.ax-state-selected{color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-default.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-group-2.ax-look-default.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-color-success ax-button-item:is(ax-button-group-2.ax-color-success ax-button-item:focus-visible,ax-button-group-2.ax-color-success ax-button-item:focus){outline-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-blank.ax-color-success ax-button-item.ax-state-selected{color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-default.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-group-2.ax-look-default.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-color-warning ax-button-item:is(ax-button-group-2.ax-color-warning ax-button-item:focus-visible,ax-button-group-2.ax-color-warning ax-button-item:focus){outline-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-blank.ax-color-warning ax-button-item.ax-state-selected{color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-default.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-group-2.ax-look-default.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-color-danger ax-button-item:is(ax-button-group-2.ax-color-danger ax-button-item:focus-visible,ax-button-group-2.ax-color-danger ax-button-item:focus){outline-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-blank.ax-color-danger ax-button-item.ax-state-selected{color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-default.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500));border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-button-group-2.ax-look-default.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-color-info ax-button-item:is(ax-button-group-2.ax-color-info ax-button-item:focus-visible,ax-button-group-2.ax-color-info ax-button-item:focus){outline-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-blank.ax-color-info ax-button-item.ax-state-selected{color:rgba(var(--ax-color-info-500))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500),.25);border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500),.25);border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500),.25);color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500),.25);border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500),.25);color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500),.25);border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500),.25);color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500),.25);border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500),.25);color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500),.25);border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500),.25);color:rgba(var(--ax-color-info-fore))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-button-group-2', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'color', 'look'], outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'], template: "<ng-container>\n  <ng-content select=\"ax-button-item\"></ng-content>\n</ng-container>\n", styles: ["ax-button-group-2{display:flex}ax-button-group-2 ax-button-item{border:1px solid;border-color:rgba(var(--ax-color-border-default));display:inline-flex;align-items:center;justify-content:center;height:var(--ax-size-default);font-size:.875rem;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-surface-fore));padding:0 1rem}ax-button-group-2 ax-button-item:first-child{border-start-start-radius:var(--ax-rounded-border-default);border-end-start-radius:var(--ax-rounded-border-default)}ax-button-group-2 ax-button-item:last-child{border-start-end-radius:var(--ax-rounded-border-default);border-end-end-radius:var(--ax-rounded-border-default)}ax-button-group-2 ax-button-item:not(ax-button-group-2 ax-button-item:first-child){border-inline-start:0px}ax-button-group-2 ax-button-item:not(ax-button-group-2 ax-button-item:first-child):before{position:absolute;inset-block-start:-1px;inset-inline-start:-1px;display:block;box-sizing:content-box;width:1px;height:100%;padding-block:1px;padding-inline:0;transition:background-color .3s;content:\"\"}ax-button-group-2 ax-button-item:hover:not(.ax-state-disabled){opacity:.75}ax-button-group-2 ax-button-item:active{opacity:1}ax-button-group-2 ax-button-item .ax-button-item-text{padding:0 .5rem}ax-button-group-2.ax-buttons-fit{width:100%}ax-button-group-2.ax-buttons-fit>button{flex:1}ax-button-group-2.ax-state-disabled,ax-button-group-2.ax-state-loading{opacity:.5}ax-button-group-2.ax-state-disabled>ax-button-item,ax-button-group-2.ax-state-loading>ax-button-item{cursor:not-allowed}ax-button-group-2.ax-xs{font-size:.75rem}ax-button-group-2.ax-xs>button{padding-inline-start:.25rem;padding-inline-end:.25rem}ax-button-group-2.ax-sm>button{padding-inline-start:.5rem;padding-inline-end:.5rem}ax-button-group-2.ax-sm,ax-button-group-2.ax-md{font-size:.875rem}ax-button-group-2.ax-lg{font-size:1.25rem}ax-button-group-2.ax-lg>button{padding-inline-start:1.5rem;padding-inline-end:1.5rem}ax-button-group-2.ax-xl{font-size:1.5rem}ax-button-group-2.ax-xl>button{padding-inline-start:2rem;padding-inline-end:2rem}ax-button-group-2.ax-look-default.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-button-group-2.ax-look-default.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-color-primary ax-button-item:is(ax-button-group-2.ax-color-primary ax-button-item:focus-visible,ax-button-group-2.ax-color-primary ax-button-item:focus){outline-color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-blank.ax-color-primary ax-button-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-button-group-2.ax-look-default.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500));border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}ax-button-group-2.ax-look-default.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-color-secondary ax-button-item:is(ax-button-group-2.ax-color-secondary ax-button-item:focus-visible,ax-button-group-2.ax-color-secondary ax-button-item:focus){outline-color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-blank.ax-color-secondary ax-button-item.ax-state-selected{color:rgba(var(--ax-color-secondary-500))}ax-button-group-2.ax-look-default.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500));border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}ax-button-group-2.ax-look-default.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-color-success ax-button-item:is(ax-button-group-2.ax-color-success ax-button-item:focus-visible,ax-button-group-2.ax-color-success ax-button-item:focus){outline-color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-blank.ax-color-success ax-button-item.ax-state-selected{color:rgba(var(--ax-color-success-500))}ax-button-group-2.ax-look-default.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500));border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}ax-button-group-2.ax-look-default.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-color-warning ax-button-item:is(ax-button-group-2.ax-color-warning ax-button-item:focus-visible,ax-button-group-2.ax-color-warning ax-button-item:focus){outline-color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-blank.ax-color-warning ax-button-item.ax-state-selected{color:rgba(var(--ax-color-warning-500))}ax-button-group-2.ax-look-default.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500));border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}ax-button-group-2.ax-look-default.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-color-danger ax-button-item:is(ax-button-group-2.ax-color-danger ax-button-item:focus-visible,ax-button-group-2.ax-color-danger ax-button-item:focus){outline-color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-blank.ax-color-danger ax-button-item.ax-state-selected{color:rgba(var(--ax-color-danger-500))}ax-button-group-2.ax-look-default.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500));border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}ax-button-group-2.ax-look-default.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected{border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-color-info ax-button-item:is(ax-button-group-2.ax-color-info ax-button-item:focus-visible,ax-button-group-2.ax-color-info ax-button-item:focus){outline-color:rgba(var(--ax-color-info-500))}ax-button-group-2.ax-look-blank.ax-color-info ax-button-item.ax-state-selected{color:rgba(var(--ax-color-info-500))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500),.25);border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-primary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-primary-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-primary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-primary-500),.25);color:rgba(var(--ax-color-primary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500),.25);border-color:rgba(var(--ax-color-secondary-500));color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-secondary ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-secondary-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-secondary ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-secondary-500),.25);color:rgba(var(--ax-color-secondary-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500),.25);border-color:rgba(var(--ax-color-success-500));color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-success ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-success-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-success ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-success-500),.25);color:rgba(var(--ax-color-success-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500),.25);border-color:rgba(var(--ax-color-warning-500));color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-warning ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-warning-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-warning ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-warning-500),.25);color:rgba(var(--ax-color-warning-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500),.25);border-color:rgba(var(--ax-color-danger-500));color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-danger ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-danger-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-danger ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-danger-500),.25);color:rgba(var(--ax-color-danger-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500),.25);border-color:rgba(var(--ax-color-info-500));color:rgba(var(--ax-color-info-fore))}.ax-dark ax-button-group-2.ax-look-outline.ax-color-info ax-button-item.ax-state-selected:before{background-color:rgba(var(--ax-color-info-500))}.ax-dark ax-button-group-2.ax-look-blank.ax-color-info ax-button-item.ax-state-selected{background-color:rgba(var(--ax-color-info-500),.25);color:rgba(var(--ax-color-info-fore))}\n"] }]
+        }], propDecorators: { _contentButtons: [{
+                type: ContentChildren,
+                args: [AXButtonItemComponent]
+            }], selectionChange: [{
+                type: Output
+            }], selection: [{
+                type: Input
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const COMPONENT = [AXButtonGroupComponent];
+const MODULES = [CommonModule];
+class AXButtonGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupModule, declarations: [AXButtonGroupComponent], imports: [CommonModule], exports: [AXButtonGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXButtonGroupComponent, AXButtonGroupModule };
+//# sourceMappingURL=acorex-components-button-group.mjs.map

package/fesm2022/acorex-components-button-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-button-group.mjs","sources":["../../../../libs/components/button-group/src/lib/button-group.component.ts","../../../../libs/components/button-group/src/lib/button-group.component.html","../../../../libs/components/button-group/src/lib/button-group.module.ts","../../../../libs/components/button-group/src/acorex-components-button-group.ts"],"sourcesContent":["import { AXButtonItemComponent } from '@acorex/components/button';\nimport {\n  AXClickEvent,\n  AXSelectionMode,\n  MXColorLookComponent,\n  MXInteractiveComponent,\n} from '@acorex/components/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { classes } from 'polytype';\n\n@Component({\n  selector: 'ax-button-group-2',\n  templateUrl: './button-group.component.html',\n  styleUrls: ['./button-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['disabled', 'color', 'look'],\n  outputs: ['onBlur', 'onFocus', 'lookChange', 'colorChange', 'disabledChange'],\n})\nexport class AXButtonGroupComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {\n  @ContentChildren(AXButtonItemComponent)\n  private _contentButtons: QueryList<AXButtonItemComponent>;\n\n  @Output()\n  selectionChange: EventEmitter<AXSelectionMode> = new EventEmitter();\n\n  private _selection: AXSelectionMode;\n  @Input()\n  public get selection(): AXSelectionMode {\n    return this._selection;\n  }\n  public set selection(value: AXSelectionMode) {\n    this.setOption({\n      name: 'selection',\n      value: value,\n      afterCallback: (o, n) => {\n        if (value == 'none') {\n          this.clearSelection();\n        }\n      },\n    });\n  }\n\n  ngAfterContentInit() {\n    this._bindEvents();\n    this._bindProps();\n    this._contentButtons.changes.subscribe(() => {\n      this._bindEvents();\n      this._bindProps();\n    });\n  }\n\n  private _bindEvents() {\n    this._contentButtons?.forEach((b: any) => {\n      if (!b.onClick.length)\n        b.onClick.subscribe((c: any) => {\n          this._handleClickEvent(c, b);\n        });\n    });\n  }\n\n  private _bindProps() {\n    this._contentButtons?.forEach((b: any) => {\n      if (b['originDisabled'] == null) {\n        b['originDisabled'] = b.disabled;\n      }\n      b.look = this.look ?? this.look;\n      b.color = this.color ?? this.color;\n      b.disabled = b['originDisabled'] || this.disabled;\n      b.toggleable = false;\n    });\n  }\n\n  override internalOptionChanged() {\n    this._bindProps();\n  }\n\n  private _handleClickEvent(e: AXClickEvent, button: AXButtonItemComponent) {\n    if (this.selection == 'multiple') {\n      button.selected = !button.selected;\n    } else if (this.selection == 'single') {\n      this.clearSelection();\n      button.selected = true;\n    } else {\n      button.selected = false;\n    }\n  }\n\n  private clearSelection() {\n    this._contentButtons?.forEach((c: AXButtonItemComponent) => {\n      c.selected = false;\n    });\n  }\n\n  @HostBinding('class')\n  private get __hostClass(): { [key: string]: boolean } {\n    const cssClasses = {\n      'ax-state-disabled': this.disabled,\n    };\n    cssClasses[`ax-color-${this.color || 'primary'}`] = true;\n    cssClasses[`ax-look-${this.look || 'default'}`] = true;\n    return cssClasses;\n  }\n}\n","<ng-container>\n  <ng-content select=\"ax-button-item\"></ng-content>\n</ng-container>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXButtonGroupComponent } from './button-group.component';\n\nconst COMPONENT = [AXButtonGroupComponent];\nconst MODULES = [CommonModule];\n\n@NgModule({\n    declarations: [...COMPONENT],\n    imports: [...MODULES],\n    exports: [...COMPONENT],\n    providers: [],\n})\nexport class AXButtonGroupModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AA6BM,MAAO,sBAAuB,SAAQ,OAAO,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAA;AATjG,IAAA,WAAA,GAAA;;AAcE,QAAA,IAAA,CAAA,eAAe,GAAkC,IAAI,YAAY,EAAE,CAAC;AA+ErE,KAAA;AA5EC,IAAA,IACW,SAAS,GAAA;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC;KACxB;IACD,IAAW,SAAS,CAAC,KAAsB,EAAA;QACzC,IAAI,CAAC,SAAS,CAAC;AACb,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAI;gBACtB,IAAI,KAAK,IAAI,MAAM,EAAE;oBACnB,IAAI,CAAC,cAAc,EAAE,CAAC;AACvB,iBAAA;aACF;AACF,SAAA,CAAC,CAAC;KACJ;IAED,kBAAkB,GAAA;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;YAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,CAAC;AACpB,SAAC,CAAC,CAAC;KACJ;IAEO,WAAW,GAAA;QACjB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAM,KAAI;AACvC,YAAA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM;gBACnB,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAM,KAAI;AAC7B,oBAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/B,iBAAC,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACJ;IAEO,UAAU,GAAA;QAChB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAM,KAAI;AACvC,YAAA,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,IAAI,EAAE;AAC/B,gBAAA,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC;AAClC,aAAA;YACD,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;YAChC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACnC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;AAClD,YAAA,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC;AACvB,SAAC,CAAC,CAAC;KACJ;IAEQ,qBAAqB,GAAA;QAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAEO,iBAAiB,CAAC,CAAe,EAAE,MAA6B,EAAA;AACtE,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;AAChC,YAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;AACpC,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE;YACrC,IAAI,CAAC,cAAc,EAAE,CAAC;AACtB,YAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;AACxB,SAAA;AAAM,aAAA;AACL,YAAA,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;AACzB,SAAA;KACF;IAEO,cAAc,GAAA;QACpB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAwB,KAAI;AACzD,YAAA,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;AACrB,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,IACY,WAAW,GAAA;AACrB,QAAA,MAAM,UAAU,GAAG;YACjB,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,CAAC;QACF,UAAU,CAAC,CAAY,SAAA,EAAA,IAAI,CAAC,KAAK,IAAI,SAAS,CAAE,CAAA,CAAC,GAAG,IAAI,CAAC;QACzD,UAAU,CAAC,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,IAAI,SAAS,CAAE,CAAA,CAAC,GAAG,IAAI,CAAC;AACvD,QAAA,OAAO,UAAU,CAAC;KACnB;8GAnFU,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAtB,sBAAsB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,SAAA,EAChB,qBAAqB,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9BxC,0FAGA,EAAA,MAAA,EAAA,CAAA,igXAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FD0Ba,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;+BACE,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAC7B,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EAAA,OAAA,EAC5B,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,0FAAA,EAAA,MAAA,EAAA,CAAA,igXAAA,CAAA,EAAA,CAAA;8BAIrE,eAAe,EAAA,CAAA;sBADtB,eAAe;uBAAC,qBAAqB,CAAA;gBAItC,eAAe,EAAA,CAAA;sBADd,MAAM;gBAKI,SAAS,EAAA,CAAA;sBADnB,KAAK;gBAoEM,WAAW,EAAA,CAAA;sBADtB,WAAW;uBAAC,OAAO,CAAA;;;AEpGtB,MAAM,SAAS,GAAG,CAAC,sBAAsB,CAAC,CAAC;AAC3C,MAAM,OAAO,GAAG,CAAC,YAAY,CAAC,CAAC;MAQlB,mBAAmB,CAAA;8GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EATb,YAAA,EAAA,CAAA,sBAAsB,CACxB,EAAA,OAAA,EAAA,CAAA,YAAY,aADV,sBAAsB,CAAA,EAAA,CAAA,CAAA,EAAA;AAS5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAJf,OAAO,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAIX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC;AACrB,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AAChB,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}