@ifsworld/granite-components 4.1.0 → 4.2.0
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/bundles/ifsworld-granite-components.umd.js +62 -12
- package/bundles/ifsworld-granite-components.umd.js.map +1 -1
- package/bundles/ifsworld-granite-components.umd.min.js +2 -2
- package/bundles/ifsworld-granite-components.umd.min.js.map +1 -1
- package/esm2015/index.js +1 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/index.metadata.json +1 -1
- package/esm2015/lib/menu/menu-item.component.js +9 -3
- package/esm2015/lib/menu/menu-item.component.js.map +1 -1
- package/esm2015/lib/menu/menu-item.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-touch-close.component.js +1 -1
- package/esm2015/lib/menu/menu-touch-close.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-touch-title.component.js +9 -3
- package/esm2015/lib/menu/menu-touch-title.component.js.map +1 -1
- package/esm2015/lib/menu/menu-touch-title.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu-trigger-for.directive.js +15 -4
- package/esm2015/lib/menu/menu-trigger-for.directive.js.map +1 -1
- package/esm2015/lib/menu/menu-trigger-for.directive.metadata.json +1 -1
- package/esm2015/lib/menu/menu.component.js +23 -5
- package/esm2015/lib/menu/menu.component.js.map +1 -1
- package/esm2015/lib/menu/menu.component.metadata.json +1 -1
- package/esm2015/lib/menu/menu.module.js +3 -0
- package/esm2015/lib/menu/menu.module.js.map +1 -1
- package/esm2015/lib/menu/menu.module.metadata.json +1 -1
- package/esm2015/lib/menu/title.directive.js +13 -0
- package/esm2015/lib/menu/title.directive.js.map +1 -0
- package/esm2015/lib/menu/title.directive.metadata.json +1 -0
- package/fesm2015/ifsworld-granite-components.js +72 -17
- package/fesm2015/ifsworld-granite-components.js.map +1 -1
- package/ifsworld-granite-components.metadata.json +1 -1
- package/index.d.ts +1 -0
- package/lib/menu/menu-trigger-for.directive.d.ts +1 -0
- package/lib/menu/menu.component.d.ts +6 -2
- package/lib/menu/title.directive.d.ts +2 -0
- package/package.json +3 -1
|
@@ -914,7 +914,7 @@
|
|
|
914
914
|
{ type: core.Component, args: [{
|
|
915
915
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
916
916
|
selector: '[graniteMenuItem]',
|
|
917
|
-
template: "<ng-content></ng-content>\n <ng-container *ngIf=\"_triggersSubmenu\">\n <granite-icon
|
|
917
|
+
template: "<ng-content></ng-content>\n <ng-container *ngIf=\"_triggersSubmenu\">\n <granite-icon\n class=\"caret-left\"\n [fontIcon]=\"'icon-caret-left'\"\n ></granite-icon>\n <granite-icon\n class=\"caret-right\"\n [fontIcon]=\"'icon-caret-right'\"\n ></granite-icon>\n </ng-container>",
|
|
918
918
|
exportAs: 'graniteMenuItem',
|
|
919
919
|
host: {
|
|
920
920
|
'[attr.role]': 'role',
|
|
@@ -926,7 +926,7 @@
|
|
|
926
926
|
//#endregion --- Touch device customizations ---
|
|
927
927
|
'(mouseenter)': '_hovered.next(this)',
|
|
928
928
|
},
|
|
929
|
-
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:
|
|
929
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
|
|
930
930
|
},] }
|
|
931
931
|
];
|
|
932
932
|
GraniteMenuItemComponent.ctorParameters = function () { return [
|
|
@@ -1173,6 +1173,7 @@
|
|
|
1173
1173
|
var _MenuBaseComponent = /** @class */ (function () {
|
|
1174
1174
|
function _MenuBaseComponent(_changeDetectorRef) {
|
|
1175
1175
|
this._changeDetectorRef = _changeDetectorRef;
|
|
1176
|
+
this.openOnHover = true;
|
|
1176
1177
|
/**
|
|
1177
1178
|
* Event emitted when the menu is closed
|
|
1178
1179
|
*/
|
|
@@ -1194,6 +1195,15 @@
|
|
|
1194
1195
|
/** Emits whenever an animation on the menu completes. */
|
|
1195
1196
|
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
1196
1197
|
this._animationDone = new rxjs.Subject();
|
|
1198
|
+
this._menuEmpty$ = new rxjs.BehaviorSubject(false);
|
|
1199
|
+
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
1200
|
+
this._isMenuEmpty$ = rxjs.combineLatest([
|
|
1201
|
+
this._menuEmpty$,
|
|
1202
|
+
this._animationDone,
|
|
1203
|
+
]).pipe(operators.filter(function (_b) {
|
|
1204
|
+
var _c = __read(_b, 2), m = _c[0], a = _c[1];
|
|
1205
|
+
return m && a != null;
|
|
1206
|
+
}), operators.map(function () { return true; }));
|
|
1197
1207
|
/** Only the direct descendant menu items. */
|
|
1198
1208
|
this._directDescendantItems = new core.QueryList();
|
|
1199
1209
|
/** Subscription to tab events on the menu panel */
|
|
@@ -1245,10 +1255,20 @@
|
|
|
1245
1255
|
enumerable: false,
|
|
1246
1256
|
configurable: true
|
|
1247
1257
|
});
|
|
1258
|
+
_MenuBaseComponent.prototype.ngAfterContentChecked = function () {
|
|
1259
|
+
this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
|
|
1260
|
+
};
|
|
1248
1261
|
_MenuBaseComponent.prototype.ngAfterContentInit = function () {
|
|
1249
1262
|
var _this = this;
|
|
1250
1263
|
this._updateDirectDescendants();
|
|
1251
|
-
this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
|
|
1264
|
+
this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
|
|
1265
|
+
.withWrap()
|
|
1266
|
+
.skipPredicate(function (menuItem) {
|
|
1267
|
+
var hostElement = menuItem._getHostElement();
|
|
1268
|
+
return hostElement instanceof HTMLButtonElement
|
|
1269
|
+
? hostElement.disabled
|
|
1270
|
+
: hostElement.hasAttribute('graniteTitle');
|
|
1271
|
+
});
|
|
1252
1272
|
this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
|
|
1253
1273
|
_this.closed.emit('tab');
|
|
1254
1274
|
});
|
|
@@ -1486,6 +1506,7 @@
|
|
|
1486
1506
|
yPosition: [{ type: core.Input }],
|
|
1487
1507
|
title: [{ type: core.Input }],
|
|
1488
1508
|
closeLabel: [{ type: core.Input }],
|
|
1509
|
+
openOnHover: [{ type: core.Input }],
|
|
1489
1510
|
templateRef: [{ type: core.ViewChild, args: [core.TemplateRef,] }],
|
|
1490
1511
|
_allItems: [{ type: core.ContentChildren, args: [GraniteMenuItemComponent, { descendants: true },] }],
|
|
1491
1512
|
closed: [{ type: core.Output }]
|
|
@@ -1500,7 +1521,7 @@
|
|
|
1500
1521
|
GraniteMenuComponent.decorators = [
|
|
1501
1522
|
{ type: core.Component, args: [{
|
|
1502
1523
|
selector: 'granite-menu',
|
|
1503
|
-
template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick()\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n",
|
|
1524
|
+
template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick()\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n",
|
|
1504
1525
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
1505
1526
|
exportAs: 'graniteMenu',
|
|
1506
1527
|
animations: [
|
|
@@ -1511,7 +1532,7 @@
|
|
|
1511
1532
|
providers: [
|
|
1512
1533
|
{ provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
|
|
1513
1534
|
],
|
|
1514
|
-
styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;
|
|
1535
|
+
styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-xs)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-m) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem;max-height:calc(100% - ($granite-base-rem * 7))}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-xs)}.granite-menu.granite-device-output-touch.close{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}.granite-menu.granite-device-output-touch .header-container{position:-webkit-sticky;position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:-webkit-sticky;position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 2rem);outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-xs)}.close:not(:empty).close{-webkit-margin-start:var(--granite-spacing-xs);margin-inline-start:var(--granite-spacing-xs);-webkit-margin-end:var(--granite-spacing-xs);margin-inline-end:var(--granite-spacing-xs);-webkit-margin-after:var(--granite-spacing-xs);margin-block-end:var(--granite-spacing-xs)}"]
|
|
1515
1536
|
},] }
|
|
1516
1537
|
];
|
|
1517
1538
|
|
|
@@ -1687,7 +1708,9 @@
|
|
|
1687
1708
|
}
|
|
1688
1709
|
};
|
|
1689
1710
|
GraniteMenuTriggerForDirective.prototype.ngAfterContentInit = function () {
|
|
1690
|
-
|
|
1711
|
+
// removed checkMenu here to avoid errors in dynamically genarated menus
|
|
1712
|
+
// menu is checked when opening the menu
|
|
1713
|
+
// this._checkMenu();
|
|
1691
1714
|
this._handleHover();
|
|
1692
1715
|
};
|
|
1693
1716
|
GraniteMenuTriggerForDirective.prototype.ngOnDestroy = function () {
|
|
@@ -1744,6 +1767,9 @@
|
|
|
1744
1767
|
});
|
|
1745
1768
|
}
|
|
1746
1769
|
};
|
|
1770
|
+
GraniteMenuTriggerForDirective.prototype.isOpen = function () {
|
|
1771
|
+
return this._isMenuOpen;
|
|
1772
|
+
};
|
|
1747
1773
|
/** Open the associated menu */
|
|
1748
1774
|
GraniteMenuTriggerForDirective.prototype.openMenu = function () {
|
|
1749
1775
|
var _this = this;
|
|
@@ -2057,7 +2083,10 @@
|
|
|
2057
2083
|
*/
|
|
2058
2084
|
GraniteMenuTriggerForDirective.prototype._openOnHover = function () {
|
|
2059
2085
|
var _a, _b;
|
|
2060
|
-
return ((
|
|
2086
|
+
return ((this.triggersSubmenu()
|
|
2087
|
+
? this._parentMenu.openOnHover
|
|
2088
|
+
: this.menu.openOnHover) &&
|
|
2089
|
+
((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' && ((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse')));
|
|
2061
2090
|
};
|
|
2062
2091
|
/**
|
|
2063
2092
|
* Whether to toggle submenus on click. This is true when showing desktop menus
|
|
@@ -2065,8 +2094,11 @@
|
|
|
2065
2094
|
*/
|
|
2066
2095
|
GraniteMenuTriggerForDirective.prototype._toggleOnSubmenuClick = function () {
|
|
2067
2096
|
var _a, _b;
|
|
2068
|
-
return ((
|
|
2069
|
-
|
|
2097
|
+
return (!(this.triggersSubmenu()
|
|
2098
|
+
? this._parentMenu.openOnHover
|
|
2099
|
+
: this.menu.openOnHover) ||
|
|
2100
|
+
(((_a = this._parentMenu._clientOutput) === null || _a === void 0 ? void 0 : _a.device) === 'desktop' &&
|
|
2101
|
+
!((_b = this._parentMenu._clientInput) === null || _b === void 0 ? void 0 : _b.devices.includes('mouse'))));
|
|
2070
2102
|
};
|
|
2071
2103
|
// ------------------------------------------- //
|
|
2072
2104
|
// --- Here be touch device customizations --- //
|
|
@@ -2213,7 +2245,7 @@
|
|
|
2213
2245
|
host: {
|
|
2214
2246
|
'[class.granite-device-output-touch]': 'true',
|
|
2215
2247
|
},
|
|
2216
|
-
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:
|
|
2248
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
|
|
2217
2249
|
},] }
|
|
2218
2250
|
];
|
|
2219
2251
|
|
|
@@ -2234,14 +2266,14 @@
|
|
|
2234
2266
|
{ type: core.Component, args: [{
|
|
2235
2267
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2236
2268
|
selector: '[graniteMenuTouchTitleItem]',
|
|
2237
|
-
template: "\n <ng-container *ngIf=\"_triggersBack\">\n <granite-icon
|
|
2269
|
+
template: "\n <ng-container *ngIf=\"_triggersBack\">\n <granite-icon\n class=\"caret-left\"\n [fontIcon]=\"'icon-caret-left'\"\n ></granite-icon>\n <granite-icon\n class=\"caret-right\"\n [fontIcon]=\"'icon-caret-right'\"\n ></granite-icon>\n </ng-container>\n <ng-content></ng-content>\n ",
|
|
2238
2270
|
exportAs: 'graniteMenuTouchTitleItem',
|
|
2239
2271
|
host: {
|
|
2240
2272
|
'[class.granite-menu-item-title]': 'true',
|
|
2241
2273
|
'[class.granite-menu-item-back-trigger]': '_triggersBack',
|
|
2242
2274
|
'[class.granite-device-output-touch]': 'true',
|
|
2243
2275
|
},
|
|
2244
|
-
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:
|
|
2276
|
+
styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-s);width:100%;max-width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover:hover) and (pointer:fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-keyboard-focused,:host.cdk-program-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{-webkit-padding-end:var(--granite-spacing-l);padding-inline-end:var(--granite-spacing-l)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon,html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-xs)}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left,[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-l)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover:none) and (pointer:coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-xs)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon,html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-xs)}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right,[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}"]
|
|
2245
2277
|
},] }
|
|
2246
2278
|
];
|
|
2247
2279
|
GraniteMenuTouchTitleItemComponent.ctorParameters = function () { return [
|
|
@@ -2328,6 +2360,21 @@
|
|
|
2328
2360
|
},] }
|
|
2329
2361
|
];
|
|
2330
2362
|
|
|
2363
|
+
var GraniteTitleDirective = /** @class */ (function () {
|
|
2364
|
+
function GraniteTitleDirective() {
|
|
2365
|
+
}
|
|
2366
|
+
return GraniteTitleDirective;
|
|
2367
|
+
}());
|
|
2368
|
+
GraniteTitleDirective.decorators = [
|
|
2369
|
+
{ type: core.Directive, args: [{
|
|
2370
|
+
selector: '[graniteTitle]',
|
|
2371
|
+
exportAs: 'graniteTitle',
|
|
2372
|
+
host: {
|
|
2373
|
+
'[class.granite-title]': 'true',
|
|
2374
|
+
},
|
|
2375
|
+
},] }
|
|
2376
|
+
];
|
|
2377
|
+
|
|
2331
2378
|
var GraniteMenuModule = /** @class */ (function () {
|
|
2332
2379
|
function GraniteMenuModule() {
|
|
2333
2380
|
}
|
|
@@ -2342,6 +2389,7 @@
|
|
|
2342
2389
|
GraniteMenuTouchCloseComponent,
|
|
2343
2390
|
GraniteMenuTouchTitleItemComponent,
|
|
2344
2391
|
GraniteDividerDirective,
|
|
2392
|
+
GraniteTitleDirective,
|
|
2345
2393
|
],
|
|
2346
2394
|
imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule, GraniteIconModule],
|
|
2347
2395
|
exports: [
|
|
@@ -2351,6 +2399,7 @@
|
|
|
2351
2399
|
GraniteMenuTouchCloseComponent,
|
|
2352
2400
|
GraniteMenuTouchTitleItemComponent,
|
|
2353
2401
|
GraniteDividerDirective,
|
|
2402
|
+
GraniteTitleDirective,
|
|
2354
2403
|
],
|
|
2355
2404
|
},] }
|
|
2356
2405
|
];
|
|
@@ -3551,6 +3600,7 @@
|
|
|
3551
3600
|
exports.GraniteTableColumnDirective = GraniteTableColumnDirective;
|
|
3552
3601
|
exports.GraniteTableComponent = GraniteTableComponent;
|
|
3553
3602
|
exports.GraniteTableModule = GraniteTableModule;
|
|
3603
|
+
exports.GraniteTitleDirective = GraniteTitleDirective;
|
|
3554
3604
|
exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
|
|
3555
3605
|
exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
|
|
3556
3606
|
exports._MenuBaseComponent = _MenuBaseComponent;
|