@almoamendev/ngx-md3 0.5.0 → 0.5.1

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -2273,12 +2273,15 @@ class Button {
         return this.el.nativeElement;
     }
     enableSelection() {
+        let enabled = false;
         this.isSelected.update((current) => {
             if (current !== null) {
                 return current;
             }
+            enabled = true;
             return false;
         });
+        return enabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Button, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Button, isStandalone: true, selector: "button[md3-button], a[md3-button]", inputs: { buttonSize: { classPropertyName: "buttonSize", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "button-type", isSignal: true, isRequired: false, transformFunction: null }, isSquared: { classPropertyName: "isSquared", publicName: "button-squared", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "selectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.md3-square": "effectiveSquared()" } }, hostDirectives: [{ directive: StateComponent }], ngImport: i0, template: "<ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n<div class=\"md3-label\">\n    <ng-content></ng-content>\n</div>\n<ng-content select=\"[md3-icon-element=trailing]\"></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: .0625em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: 1em;font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);gap:.5em;padding:0 calc(var(--inline-padding) - var(--border-size));height:2.5em;box-shadow:var(--md-shadow-0dp);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled:before{display:none}:host:disabled .md3-state-layer{display:none}:host>::ng-deep [md3-icon-element]{color:inherit!important;font-size:1.25em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: .75em;gap:.25em;height:2em}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small .md3-label{font-size:.875em;font-weight:500;line-height:1.4286em;letter-spacing:.071429em}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small{--inline-padding: 1em}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 2.5em}:host.md3-medium{--border-radius: 3.5em;--inline-padding: 1.5em;gap:.5em;height:3.5em}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium .md3-label{font-size:1em;font-weight:500;line-height:1.5em;letter-spacing:.09375em}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-size: .125em;--border-radius: 6em;--inline-padding: 3em;gap:.75em;height:6em}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large .md3-label{font-size:1.5em;font-weight:400;line-height:1.333332em;letter-spacing:0}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-size: .1875em;--border-radius: 8.5em;--inline-padding: 4em;gap:1em;height:8.5em}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large .md3-label{font-size:2em;font-weight:400;line-height:1.25em;letter-spacing:0}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-elevated{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em;box-shadow:var(--md-shadow-1dp)}:host.md3-elevated:disabled{box-shadow:var(--md-shadow-0dp)}:host.md3-elevated.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container-low));--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}:host.md3-elevated.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-filled{--border-size: 0em}:host.md3-filled.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-filled.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container);--border-size: 0em}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);border:var(--border-size) solid rgb(var(--md-scheme-outline-variant));padding-inline:calc(var(--inline-padding) - var(--border-size))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-text{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary);--border-size: 0em}\n"] });
@@ -2410,12 +2413,15 @@ class IconButton {
         return this.el.nativeElement;
     }
     enableSelection() {
+        let enabled = false;
         this.isSelected.update((current) => {
             if (current !== null) {
                 return current;
             }
+            enabled = true;
             return false;
         });
+        return enabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IconButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: IconButton, isStandalone: true, selector: "button[md3-icon-button], a[md3-icon-button]", inputs: { buttonSize: { classPropertyName: "buttonSize", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "button-type", isSignal: true, isRequired: false, transformFunction: null }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "button-width", isSignal: true, isRequired: false, transformFunction: null }, isSquared: { classPropertyName: "isSquared", publicName: "button-squared", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "selectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.md3-square": "effectiveSquared()" } }, hostDirectives: [{ directive: StateComponent }], ngImport: i0, template: "<ng-content select=\"[md3-icon-element]\"></ng-content>\n<ng-content></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary);--border-radius: 2.5em;--border-size: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: -.125em;--inline-padding: calc(.5em - var(--border-size));font-size:1rem;border:none;outline:none;cursor:pointer;display:inline-flex;position:relative;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);background-color:var(--background-color);color:var(--foreground-color);padding:0 var(--inline-padding);height:2.5em;border:var(--border-size) solid transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host.md3-narrow{--inline-padding: calc(.25em - var(--border-size))}:host.md3-wide{--inline-padding: calc(.825em - var(--border-size))}:host.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-toggle{--background-color: rgb(var(--md-scheme-surface-container));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-primary));--foreground-color: rgb(var(--md-scheme-on-primary));--state-color: var(--md-scheme-on-primary)}:host.md3-toggle.md3-selected:not(:active){--border-radius: var(--md-border-radius-medium)}:host.md3-toggle.md3-selected:not(:active).md3-square{--border-radius: 2.5em}:host:disabled{--background-color: rgba(var(--md-scheme-on-surface), .1) !important;--foreground-color: rgba(var(--md-scheme-on-surface), .38) !important;cursor:default!important}:host:disabled .md3-state-layer{display:none}:host:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-x-small{--border-radius: var(--md-border-radius-xlarge-i);--inline-padding: calc(.375em - var(--border-size));height:2em}:host.md3-x-small ::ng-deep [md3-icon-element]{font-size:1.25em!important}:host.md3-x-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-x-small.md3-narrow{--inline-padding: calc(.25em - var(--border-size))}:host.md3-x-small.md3-wide{--inline-padding: calc(.625em - var(--border-size))}:host.md3-x-small.md3-square{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-medium)}:host.md3-x-small:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: var(--md-border-radius-xlarge-i)}:host.md3-x-small:not(:disabled):active{--border-radius: var(--md-border-radius-small)}:host.md3-small:before{content:\"\";position:absolute;display:block;min-width:3rem;min-height:3rem;width:100%}:host.md3-medium{--border-radius: 3.5em;--inline-padding: calc(1em - var(--border-size));height:3.5em}:host.md3-medium ::ng-deep [md3-icon-element]{font-size:1.5em!important}:host.md3-medium.md3-narrow{--inline-padding: calc(.75em - var(--border-size))}:host.md3-medium.md3-wide{--inline-padding: calc(1.5em - var(--border-size))}:host.md3-medium.md3-square{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-large)}:host.md3-medium:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 3.5em}:host.md3-medium:not(:disabled):active{--border-radius: var(--md-border-radius-medium)}:host.md3-large{--border-radius: 6em;--inline-padding: calc(2em - var(--border-size));height:6em}:host.md3-large ::ng-deep [md3-icon-element]{font-size:2em!important}:host.md3-large.md3-narrow{--inline-padding: calc(1em - var(--border-size))}:host.md3-large.md3-wide{--inline-padding: calc(3em - var(--border-size))}:host.md3-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 6em}:host.md3-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-x-large{--border-radius: 8.5em;--inline-padding: calc(3em - var(--border-size));height:8.5em}:host.md3-x-large ::ng-deep [md3-icon-element]{font-size:2.5em!important}:host.md3-x-large.md3-narrow{--inline-padding: calc(2em - var(--border-size))}:host.md3-x-large.md3-wide{--inline-padding: calc(4.5em - var(--border-size))}:host.md3-x-large.md3-square{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected{--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large:not(:active).md3-toggle.md3-selected.md3-square{--border-radius: 8.5em}:host.md3-x-large:not(:disabled):active{--border-radius: var(--md-border-radius-large)}:host.md3-tonal{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--state-color: var(--md-scheme-on-secondary-container)}:host.md3-tonal.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-secondary));--foreground-color: rgb(var(--md-scheme-on-secondary));--state-color: var(--md-scheme-on-secondary)}:host.md3-outlined{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant);--border-size: .0625em}:host.md3-outlined.md3-large{--border-size: .125em}:host.md3-outlined.md3-x-large{--border-size: .1875em}:host.md3-outlined{border-color:rgb(var(--md-scheme-outline-variant))}:host.md3-outlined.md3-toggle.md3-selected{--background-color: rgb(var(--md-scheme-inverse-surface));--foreground-color: rgb(var(--md-scheme-inverse-on-surface));--state-color: var(--md-scheme-inverse-on-surface)}:host.md3-standard{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface-variant)}:host.md3-standard.md3-toggle.md3-selected{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-primary));--state-color: var(--md-scheme-primary)}\n"] });
@@ -2519,6 +2525,7 @@ class ButtonGroup {
     groupSelection = input('none', { ...(ngDevMode ? { debugName: "groupSelection" } : /* istanbul ignore next */ {}), alias: 'selection' });
     buttons = contentChildren(Button, { ...(ngDevMode ? { debugName: "buttons" } : /* istanbul ignore next */ {}), descendants: true });
     iconButtons = contentChildren(IconButton, { ...(ngDevMode ? { debugName: "iconButtons" } : /* istanbul ignore next */ {}), descendants: true });
+    managedButtons = new WeakSet();
     // context values
     buttonContextSize = this.buttonSize;
     buttonContextSelection = this.groupSelection;
@@ -2540,14 +2547,28 @@ class ButtonGroup {
         });
         effect(() => {
             const selection = this.groupSelection();
+            const buttons = this.allButtons();
+            if (selection == 'manual') {
+                // hand the control back, only for the buttons the group made selectable
+                buttons.forEach((item) => {
+                    if (this.managedButtons.has(item)) {
+                        item.isSelected.set(null);
+                    }
+                });
+                this.managedButtons = new WeakSet();
+                return;
+            }
             if (selection == 'none') {
-                this.allButtons().forEach((item) => {
+                buttons.forEach((item) => {
                     item.isSelected.set(null);
                 });
+                this.managedButtons = new WeakSet();
             }
             else {
-                this.allButtons().forEach((item) => {
-                    item.enableSelection();
+                buttons.forEach((item) => {
+                    if (item.enableSelection()) {
+                        this.managedButtons.add(item);
+                    }
                 });
                 if (selection == 'single') {
                     this.normalizeSingleSelection();