@vsn-ux/ngx-gaia 0.15.0 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/menu.md
CHANGED
|
@@ -22,6 +22,7 @@ Menu item directive.
|
|
|
22
22
|
- `gaMenuItemDescription: string` - Item description
|
|
23
23
|
- `gaMenuItemShortcut: string` - Keyboard shortcut
|
|
24
24
|
- `gaMenuItemSelected: boolean` - Selected state (default: false)
|
|
25
|
+
- `gaMenuItemDisabled: boolean` - Disabled state (default: false)
|
|
25
26
|
|
|
26
27
|
## `<ga-menu-separator>`
|
|
27
28
|
|
|
@@ -3108,16 +3108,24 @@ class GaMenuItemComponent {
|
|
|
3108
3108
|
shortcut = input('', { ...(ngDevMode ? { debugName: "shortcut" } : {}), alias: 'gaMenuItemShortcut' });
|
|
3109
3109
|
selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), alias: 'gaMenuItemSelected',
|
|
3110
3110
|
transform: booleanAttribute });
|
|
3111
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), alias: 'gaMenuItemDisabled',
|
|
3112
|
+
transform: booleanAttribute });
|
|
3111
3113
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "gaMenuItemSelected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-menu__item--selected": "selected()" }, classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$1.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n <div class=\"ga-menu__item-title\">\n <div class=\"ga-menu__item-label\"><ng-content /></div>\n @if (shortcut()) {\n <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n }\n </div>\n @if (description()) {\n <div class=\"ga-menu__item-description\">{{ description() }}</div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "gaMenuItemSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "gaMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-menu__item--selected": "selected()", "class.ga-menu__item--disabled": "disabled()" }, classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "gaMenuItemDisabled"] }], ngImport: i0, template: "@if (icon()) {\n <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n <div class=\"ga-menu__item-title\">\n <div class=\"ga-menu__item-label\"><ng-content /></div>\n @if (shortcut()) {\n <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n }\n </div>\n @if (description()) {\n <div class=\"ga-menu__item-description\">{{ description() }}</div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3113
3115
|
}
|
|
3114
3116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuItemComponent, decorators: [{
|
|
3115
3117
|
type: Component,
|
|
3116
|
-
args: [{ selector: '[gaMenuItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], hostDirectives: [
|
|
3118
|
+
args: [{ selector: '[gaMenuItem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GaIconModule], hostDirectives: [
|
|
3119
|
+
{
|
|
3120
|
+
directive: CdkMenuItem,
|
|
3121
|
+
inputs: ['cdkMenuItemDisabled: gaMenuItemDisabled'],
|
|
3122
|
+
},
|
|
3123
|
+
], host: {
|
|
3117
3124
|
class: 'ga-menu__item',
|
|
3118
3125
|
'[class.ga-menu__item--selected]': 'selected()',
|
|
3126
|
+
'[class.ga-menu__item--disabled]': 'disabled()',
|
|
3119
3127
|
}, template: "@if (icon()) {\n <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n <div class=\"ga-menu__item-title\">\n <div class=\"ga-menu__item-label\"><ng-content /></div>\n @if (shortcut()) {\n <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n }\n </div>\n @if (description()) {\n <div class=\"ga-menu__item-description\">{{ description() }}</div>\n }\n</div>\n" }]
|
|
3120
|
-
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemIcon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemDescription", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemShortcut", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemSelected", required: false }] }] } });
|
|
3128
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemIcon", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemDescription", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemShortcut", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemSelected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaMenuItemDisabled", required: false }] }] } });
|
|
3121
3129
|
|
|
3122
3130
|
class GaMenuTitleComponent {
|
|
3123
3131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -6214,7 +6222,7 @@ class GaTabsComponent {
|
|
|
6214
6222
|
this.overflowTabIndices.set(overflow);
|
|
6215
6223
|
}
|
|
6216
6224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTabsComponent, isStandalone: true, selector: "ga-tabs", inputs: { withKeyline: { classPropertyName: "withKeyline", publicName: "withKeyline", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beforeTabChange: "beforeTabChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ga-tabs-container--horizontal": "orientation() === 'horizontal'", "class.ga-tabs-container--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "tabs", predicate: GaTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabButtonRefs", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "moreButtonRef", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n #tabList\n role=\"tablist\"\n [attr.id]=\"uniqueId\"\n class=\"ga-tabs\"\n [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n [class.ga-tabs--keyline]=\"withKeyline()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-orientation]=\"orientation()\"\n>\n @for (tab of tabs(); track tab; let i = $index) {\n @if (visibleTabIndices().includes(i)) {\n <li\n #tabButton\n [attr.id]=\"uniqueId + '-tablabel-' + i\"\n class=\"ga-tabs__tab\"\n [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [tabindex]=\"tab.disabled() ? -1 : undefined\"\n (click)=\"onTabClick(i); $event.preventDefault()\"\n (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n >\n {{ tab.title() }}\n @let tabTitleIcon = tab.rightIcon();\n @if (tabTitleIcon) {\n <ga-icon\n [icon]=\"tabTitleIcon\"\n size=\"16\"\n class=\"ga-tabs__tab-icon\"\n [color]=\"tab.rightIconColor()\"\n />\n }\n </li>\n }\n }\n\n <!-- More button for overflow tabs -->\n <li\n #moreButton\n class=\"ga-tabs__tab ga-tabs__more\"\n [class.ga-tabs__more--hidden]=\"!hasOverflow()\"\n [class.ga-tabs__tab--selected]=\"selectedInOverflow()\"\n [gaMenuTrigger]=\"overflowMenu\"\n aria-haspopup=\"menu\"\n >\n {{ i18n.moreLabel }}\n <ga-icon [icon]=\"chevronDown\" size=\"16\" />\n </li>\n</ul>\n\n<!-- Overflow menu -->\n<ng-template #overflowMenu>\n <ga-menu>\n @for (i of overflowTabIndices(); track i) {\n <button\n gaMenuItem\n (click)=\"onTabClick(i)\"\n [gaMenuItemSelected]=\"i === selectedIndex()\"\n >\n {{ tabs()[i].title() }}\n </button>\n }\n </ga-menu>\n</ng-template>\n\n@for (tab of tabs(); track tab; let i = $index) {\n @if (tab === selectedTab()) {\n <div\n role=\"tabpanel\"\n [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n >\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n </div>\n }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{white-space:nowrap}:host .ga-tabs__more{display:flex;align-items:center;gap:4px;cursor:pointer}:host .ga-tabs__more--hidden{visibility:hidden;position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaMenuComponent, selector: "ga-menu" }, { kind: "directive", type: GaMenuTriggerDirective, selector: "[gaMenuTrigger]", inputs: ["gaMenuTrigger"], exportAs: ["gaMenuTrigger"] }, { kind: "component", type: GaMenuItemComponent, selector: "[gaMenuItem]", inputs: ["gaMenuItemIcon", "gaMenuItemDescription", "gaMenuItemShortcut", "gaMenuItemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaTabsComponent, isStandalone: true, selector: "ga-tabs", inputs: { withKeyline: { classPropertyName: "withKeyline", publicName: "withKeyline", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, selectedIndexInput: { classPropertyName: "selectedIndexInput", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beforeTabChange: "beforeTabChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "class.ga-tabs-container--horizontal": "orientation() === 'horizontal'", "class.ga-tabs-container--vertical": "orientation() === 'vertical'" } }, queries: [{ propertyName: "tabs", predicate: GaTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabButtonRefs", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "moreButtonRef", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n #tabList\n role=\"tablist\"\n [attr.id]=\"uniqueId\"\n class=\"ga-tabs\"\n [class.ga-tabs--horizontal]=\"orientation() === 'horizontal'\"\n [class.ga-tabs--vertical]=\"orientation() === 'vertical'\"\n [class.ga-tabs--keyline]=\"withKeyline()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-orientation]=\"orientation()\"\n>\n @for (tab of tabs(); track tab; let i = $index) {\n @if (visibleTabIndices().includes(i)) {\n <li\n #tabButton\n [attr.id]=\"uniqueId + '-tablabel-' + i\"\n class=\"ga-tabs__tab\"\n [class.ga-tabs__tab--selected]=\"i === selectedIndex()\"\n [class.ga-tabs__tab--disabled]=\"tab.disabled()\"\n role=\"tab\"\n [tabindex]=\"tab.disabled() ? -1 : undefined\"\n (click)=\"onTabClick(i); $event.preventDefault()\"\n (keydown.enter)=\"onTabClick(i); $event.preventDefault()\"\n (keydown.space)=\"onTabClick(i); $event.preventDefault()\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"tab.disabled()\"\n [attr.aria-controls]=\"uniqueId + '-tabpanel-' + i\"\n >\n {{ tab.title() }}\n @let tabTitleIcon = tab.rightIcon();\n @if (tabTitleIcon) {\n <ga-icon\n [icon]=\"tabTitleIcon\"\n size=\"16\"\n class=\"ga-tabs__tab-icon\"\n [color]=\"tab.rightIconColor()\"\n />\n }\n </li>\n }\n }\n\n <!-- More button for overflow tabs -->\n <li\n #moreButton\n class=\"ga-tabs__tab ga-tabs__more\"\n [class.ga-tabs__more--hidden]=\"!hasOverflow()\"\n [class.ga-tabs__tab--selected]=\"selectedInOverflow()\"\n [gaMenuTrigger]=\"overflowMenu\"\n aria-haspopup=\"menu\"\n >\n {{ i18n.moreLabel }}\n <ga-icon [icon]=\"chevronDown\" size=\"16\" />\n </li>\n</ul>\n\n<!-- Overflow menu -->\n<ng-template #overflowMenu>\n <ga-menu>\n @for (i of overflowTabIndices(); track i) {\n <button\n gaMenuItem\n (click)=\"onTabClick(i)\"\n [gaMenuItemSelected]=\"i === selectedIndex()\"\n >\n {{ tabs()[i].title() }}\n </button>\n }\n </ga-menu>\n</ng-template>\n\n@for (tab of tabs(); track tab; let i = $index) {\n @if (tab === selectedTab()) {\n <div\n role=\"tabpanel\"\n [attr.id]=\"uniqueId + '-tabpanel-' + i\"\n [attr.aria-labelledby]=\"uniqueId + '-tablabel-' + i\"\n >\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl()\"></ng-template>\n </div>\n }\n}\n", styles: [":host{display:flex}:host.ga-tabs-container--horizontal{flex-direction:column}:host.ga-tabs-container--vertical{flex-direction:row}:host .ga-tabs{white-space:nowrap}:host .ga-tabs__more{display:flex;align-items:center;gap:4px;cursor:pointer}:host .ga-tabs__more--hidden{visibility:hidden;position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "component", type: GaMenuComponent, selector: "ga-menu" }, { kind: "directive", type: GaMenuTriggerDirective, selector: "[gaMenuTrigger]", inputs: ["gaMenuTrigger"], exportAs: ["gaMenuTrigger"] }, { kind: "component", type: GaMenuItemComponent, selector: "[gaMenuItem]", inputs: ["gaMenuItemIcon", "gaMenuItemDescription", "gaMenuItemShortcut", "gaMenuItemSelected", "gaMenuItemDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6218
6226
|
}
|
|
6219
6227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaTabsComponent, decorators: [{
|
|
6220
6228
|
type: Component,
|