ngx-strata 0.4.2 → 0.4.3-beta.2

package/fesm2022/ngx-strata.mjs

@@ -541,7 +541,15 @@ class StrataAccordionItemComponent {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    variant = input('standalone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     toggled = output();
+    get isFlush() {
+        return this.variant() === 'flush';
+    }
+    get isStandalone() {
+        return this.variant() === 'standalone';
+    }
     constructor() {
         let firstRun = true;
         effect(() => {
@@ -560,12 +568,18 @@ class StrataAccordionItemComponent {
         return this.open();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataAccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "attr.open": "this.isOpen" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"accordion-header\"\n  [id]=\"headerId\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"contentId\"\n  (click)=\"toggle()\"\n>\n  <span>{{ title() }}</span>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</button>\n\n<div\n  class=\"accordion-content\"\n  [id]=\"contentId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId\"\n>\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: StrataAccordionItemComponent, isStandalone: true, selector: "st-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "class.flush": "this.isFlush", "class.standalone": "this.isStandalone", "attr.open": "this.isOpen" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"accordion-header\"\n  [id]=\"headerId\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"contentId\"\n  (click)=\"toggle()\"\n>\n  <span>{{ title() }}</span>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</button>\n\n<div\n  class=\"accordion-content\"\n  [id]=\"contentId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId\"\n>\n  <ng-content></ng-content>\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-item', imports: [], template: "<button\n  type=\"button\"\n  class=\"accordion-header\"\n  [id]=\"headerId\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"contentId\"\n  (click)=\"toggle()\"\n>\n  <span>{{ title() }}</span>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\n    ></path>\n  </svg>\n</button>\n\n<div\n  class=\"accordion-content\"\n  [id]=\"contentId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"headerId\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }], isOpen: [{
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], isFlush: [{
+                type: HostBinding,
+                args: ['class.flush']
+            }], isStandalone: [{
+                type: HostBinding,
+                args: ['class.standalone']
+            }], isOpen: [{
                 type: HostBinding,
                 args: ['attr.open']
             }] } });
@@ -575,6 +589,14 @@ class StrataAccordionGroupComponent {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     allowMultipleOpen = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allowMultipleOpen" }] : /* istanbul ignore next */ []));
+    variant = input('standalone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    get isFlush() {
+        return this.variant() === 'flush';
+    }
+    get isStandalone() {
+        return this.variant() === 'standalone';
+    }
     constructor() {
         effect((onCleanup) => {
             const subs = this.items().map((item) => item.toggled.subscribe((open) => {
@@ -595,12 +617,18 @@ class StrataAccordionGroupComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataAccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: StrataAccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataAccordionGroupComponent, isStandalone: true, selector: "st-accordion-group", inputs: { allowMultipleOpen: { classPropertyName: "allowMultipleOpen", publicName: "allowMultipleOpen", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.flush": "this.isFlush", "class.standalone": "this.isStandalone" } }, queries: [{ propertyName: "items", predicate: StrataAccordionItemComponent, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAccordionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-accordion-group', imports: [], template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataAccordionItemComponent), { isSignal: true }] }], allowMultipleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleOpen", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isFlush: [{
+                type: HostBinding,
+                args: ['class.flush']
+            }], isStandalone: [{
+                type: HostBinding,
+                args: ['class.standalone']
+            }] } });
 
 let nextUniqueId = 0;
 class StrataCheckboxComponent {
@@ -774,11 +802,11 @@ class StrataActionMenuItemComponent {
         this.toggle()?.nativeElement.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataActionMenuItemComponent, isStandalone: true, selector: "st-action-menu-item", inputs: { closeMenuOnClick: { classPropertyName: "closeMenuOnClick", publicName: "closeMenuOnClick", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.active": "this.isActive" } }, queries: [{ propertyName: "checkbox", first: true, predicate: StrataCheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: StrataToggleComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: StrataActionMenuItemComponent, isStandalone: true, selector: "st-action-menu-item", inputs: { closeMenuOnClick: { classPropertyName: "closeMenuOnClick", publicName: "closeMenuOnClick", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClicked: "menuItemClicked" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.active": "this.isActive" } }, queries: [{ propertyName: "checkbox", first: true, predicate: StrataCheckboxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "toggle", first: true, predicate: StrataToggleComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{min-height:var(--st-interactive-element-height-md);height:fit-content}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-action-menu-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{height:48px}\n"] }]
+            args: [{ selector: 'st-action-menu-item', imports: [], template: "<span class=\"item-start\">\n  <ng-content select=\"[area='start']\"></ng-content\n></span>\n<span class=\"item-default\"> <ng-content></ng-content></span>\n<span class=\"item-end\">\n  <ng-content select=\"[area='end']\"></ng-content>\n</span>\n", styles: [":host{min-height:var(--st-interactive-element-height-md);height:fit-content}\n"] }]
         }], propDecorators: { checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataCheckboxComponent), { ...{ read: ElementRef }, isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataToggleComponent), { ...{ read: ElementRef }, isSignal: true }] }], closeMenuOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeMenuOnClick", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], isActive: [{
                 type: HostBinding,
                 args: ['class.active']
@@ -2290,11 +2318,11 @@ class StrataKbdComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedKeys" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataKbdComponent, isStandalone: true, selector: "st-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataKbdComponent, isStandalone: true, selector: "st-kbd", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);--st-kbd-border-radius: var(--st-border-radius-sm);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-kbd-border-radius);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataKbdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-kbd', imports: [], template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-border-radius-sm);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'st-kbd', imports: [], template: "@for (key of resolvedKeys(); track key) {\n<kbd class=\"st-kbd-key st-mono-s\">{{ key }}</kbd>\n}", styles: [":host{--st-kbd-bg: transparent;--st-kbd-border: var(--st-color-text-secondary);--st-kbd-text: var(--st-color-text-secondary);--st-kbd-border-radius: var(--st-border-radius-sm);display:inline-flex;align-items:center;gap:4px}:host .st-kbd-key{font-style:normal;line-height:1;padding:3px 6px;border-radius:var(--st-kbd-border-radius);background:var(--st-kbd-bg);border:1px solid var(--st-kbd-border);color:var(--st-kbd-text);white-space:nowrap;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }] } });
 
 class StrataThemeDirective {