@ifsworld/granite-components 4.0.0-beta.11 → 4.0.0-beta.14
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 +52 -36
- package/bundles/ifsworld-granite-components.umd.js.map +1 -1
- package/bundles/ifsworld-granite-components.umd.min.js +2 -17
- package/bundles/ifsworld-granite-components.umd.min.js.map +1 -1
- package/esm2015/lib/button/button.component.js +25 -16
- package/esm2015/lib/button/button.component.js.map +1 -1
- package/esm2015/lib/button/button.component.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.component.js +14 -9
- package/esm2015/lib/menu/menu.component.js.map +1 -1
- package/esm2015/lib/menu/menu.component.metadata.json +1 -1
- package/fesm2015/ifsworld-granite-components.js +57 -32
- package/fesm2015/ifsworld-granite-components.js.map +1 -1
- package/ifsworld-granite-components.metadata.json +1 -1
- package/lib/button/button.component.d.ts +8 -7
- package/lib/menu/menu.component.d.ts +2 -2
- package/package.json +2 -2
- package/src/lib/core/style/_mixins.scss +13 -0
- package/src/lib/core/style/_tokens.scss +1 -0
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
},] }
|
|
349
349
|
];
|
|
350
350
|
|
|
351
|
-
|
|
351
|
+
/******************************************************************************
|
|
352
352
|
Copyright (c) Microsoft Corporation.
|
|
353
353
|
|
|
354
354
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -510,7 +510,11 @@
|
|
|
510
510
|
var __createBinding = Object.create ? (function (o, m, k, k2) {
|
|
511
511
|
if (k2 === undefined)
|
|
512
512
|
k2 = k;
|
|
513
|
-
Object.
|
|
513
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
514
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
515
|
+
desc = { enumerable: true, get: function () { return m[k]; } };
|
|
516
|
+
}
|
|
517
|
+
Object.defineProperty(o, k2, desc);
|
|
514
518
|
}) : (function (o, m, k, k2) {
|
|
515
519
|
if (k2 === undefined)
|
|
516
520
|
k2 = k;
|
|
@@ -665,6 +669,11 @@
|
|
|
665
669
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
666
670
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
667
671
|
}
|
|
672
|
+
function __classPrivateFieldIn(state, receiver) {
|
|
673
|
+
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
|
|
674
|
+
throw new TypeError("Cannot use 'in' operator on non-object");
|
|
675
|
+
return typeof state === "function" ? receiver === state : state.has(receiver);
|
|
676
|
+
}
|
|
668
677
|
|
|
669
678
|
var TOKEN_PREFIX = 'granite-';
|
|
670
679
|
var TOKEN_PREFIX_OLD = 'fnd-'; // TODO: Remove this when all tokens have 'granite-' as the prefix
|
|
@@ -905,7 +914,7 @@
|
|
|
905
914
|
{ type: core.Component, args: [{
|
|
906
915
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
907
916
|
selector: '[graniteMenuItem]',
|
|
908
|
-
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>",
|
|
909
918
|
exportAs: 'graniteMenuItem',
|
|
910
919
|
host: {
|
|
911
920
|
'[attr.role]': 'role',
|
|
@@ -917,7 +926,7 @@
|
|
|
917
926
|
//#endregion --- Touch device customizations ---
|
|
918
927
|
'(mouseenter)': '_hovered.next(this)',
|
|
919
928
|
},
|
|
920
|
-
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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;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;-ms-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:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
|
|
921
930
|
},] }
|
|
922
931
|
];
|
|
923
932
|
GraniteMenuItemComponent.ctorParameters = function () { return [
|
|
@@ -1185,11 +1194,9 @@
|
|
|
1185
1194
|
/** Emits whenever an animation on the menu completes. */
|
|
1186
1195
|
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
1187
1196
|
this._animationDone = new rxjs.Subject();
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
this.
|
|
1191
|
-
.asObservable()
|
|
1192
|
-
.pipe(operators.delay(0));
|
|
1197
|
+
this._menuEmpty$ = new rxjs.BehaviorSubject(false);
|
|
1198
|
+
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
1199
|
+
this._isMenuEmpty$ = this._menuEmpty$;
|
|
1193
1200
|
/** Only the direct descendant menu items. */
|
|
1194
1201
|
this._directDescendantItems = new core.QueryList();
|
|
1195
1202
|
/** Subscription to tab events on the menu panel */
|
|
@@ -1242,12 +1249,19 @@
|
|
|
1242
1249
|
configurable: true
|
|
1243
1250
|
});
|
|
1244
1251
|
_MenuBaseComponent.prototype.ngAfterContentChecked = function () {
|
|
1245
|
-
this.
|
|
1252
|
+
this._menuEmpty$.next(this._allItems.length < 1 ? true : false);
|
|
1246
1253
|
};
|
|
1247
1254
|
_MenuBaseComponent.prototype.ngAfterContentInit = function () {
|
|
1248
1255
|
var _this = this;
|
|
1249
1256
|
this._updateDirectDescendants();
|
|
1250
|
-
this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
|
|
1257
|
+
this._keyManager = new a11y.FocusKeyManager(this._directDescendantItems)
|
|
1258
|
+
.withWrap()
|
|
1259
|
+
.skipPredicate(function (menuItem) {
|
|
1260
|
+
var hostElement = menuItem._getHostElement();
|
|
1261
|
+
return hostElement instanceof HTMLButtonElement
|
|
1262
|
+
? hostElement.disabled
|
|
1263
|
+
: hostElement.hasAttribute('graniteTitle');
|
|
1264
|
+
});
|
|
1251
1265
|
this._tabSubscription = this._keyManager.tabOut.subscribe(function () {
|
|
1252
1266
|
_this.closed.emit('tab');
|
|
1253
1267
|
});
|
|
@@ -1499,7 +1513,7 @@
|
|
|
1499
1513
|
GraniteMenuComponent.decorators = [
|
|
1500
1514
|
{ type: core.Component, args: [{
|
|
1501
1515
|
selector: 'granite-menu',
|
|
1502
|
-
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]=\"
|
|
1516
|
+
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",
|
|
1503
1517
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
1504
1518
|
exportAs: 'graniteMenu',
|
|
1505
1519
|
animations: [
|
|
@@ -2221,7 +2235,7 @@
|
|
|
2221
2235
|
host: {
|
|
2222
2236
|
'[class.granite-device-output-touch]': 'true',
|
|
2223
2237
|
},
|
|
2224
|
-
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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;height:
|
|
2238
|
+
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;-ms-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:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
|
|
2225
2239
|
},] }
|
|
2226
2240
|
];
|
|
2227
2241
|
|
|
@@ -2242,14 +2256,14 @@
|
|
|
2242
2256
|
{ type: core.Component, args: [{
|
|
2243
2257
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2244
2258
|
selector: '[graniteMenuTouchTitleItem]',
|
|
2245
|
-
template: "\n <ng-container *ngIf=\"_triggersBack\">\n <granite-icon
|
|
2259
|
+
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 ",
|
|
2246
2260
|
exportAs: 'graniteMenuTouchTitleItem',
|
|
2247
2261
|
host: {
|
|
2248
2262
|
'[class.granite-menu-item-title]': 'true',
|
|
2249
2263
|
'[class.granite-menu-item-back-trigger]': '_triggersBack',
|
|
2250
2264
|
'[class.granite-device-output-touch]': 'true',
|
|
2251
2265
|
},
|
|
2252
|
-
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;-ms-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){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){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;height:
|
|
2266
|
+
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;-ms-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:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover:none) and (pointer:coarse){:host:active:enabled:not(.granite-title){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-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}"]
|
|
2253
2267
|
},] }
|
|
2254
2268
|
];
|
|
2255
2269
|
GraniteMenuTouchTitleItemComponent.ctorParameters = function () { return [
|
|
@@ -2942,16 +2956,12 @@
|
|
|
2942
2956
|
return Derived;
|
|
2943
2957
|
};
|
|
2944
2958
|
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
granitePrimaryButton: PRIMARY_BUTTON_CLASS,
|
|
2952
|
-
graniteFlatButton: FLAT_BUTTON_CLASS,
|
|
2953
|
-
graniteNavButton: NAV_BUTTON_CLASS,
|
|
2954
|
-
};
|
|
2959
|
+
(function (ButtonSelectors) {
|
|
2960
|
+
ButtonSelectors["graniteButton"] = "granite-button";
|
|
2961
|
+
ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
|
|
2962
|
+
ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
|
|
2963
|
+
ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
|
|
2964
|
+
})(exports.ButtonSelectors || (exports.ButtonSelectors = {}));
|
|
2955
2965
|
var ButtonComponentMixin = disabledMixin();
|
|
2956
2966
|
var GraniteButtonComponent = /** @class */ (function (_super) {
|
|
2957
2967
|
__extends(GraniteButtonComponent, _super);
|
|
@@ -2960,11 +2970,13 @@
|
|
|
2960
2970
|
var _this = _super.call(this) || this;
|
|
2961
2971
|
_this._focusMonitor = _focusMonitor;
|
|
2962
2972
|
_this._elementRef = _elementRef;
|
|
2973
|
+
_this.toggled = false;
|
|
2974
|
+
_this._buttonToggled = false;
|
|
2963
2975
|
try {
|
|
2964
|
-
for (var _b = __values(Object.keys(ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2976
|
+
for (var _b = __values(Object.keys(exports.ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2965
2977
|
var selector = _c.value;
|
|
2966
2978
|
if (_this._getHostElement().hasAttribute(selector)) {
|
|
2967
|
-
_this._getHostElement().classList.add(ButtonSelectors[selector]);
|
|
2979
|
+
_this._getHostElement().classList.add(exports.ButtonSelectors[selector]);
|
|
2968
2980
|
}
|
|
2969
2981
|
}
|
|
2970
2982
|
}
|
|
@@ -2979,6 +2991,11 @@
|
|
|
2979
2991
|
}
|
|
2980
2992
|
GraniteButtonComponent.prototype.ngOnChanges = function (changes) {
|
|
2981
2993
|
_super.prototype.ngOnChanges.call(this, changes);
|
|
2994
|
+
if (changes.toggled &&
|
|
2995
|
+
(this._getHostElement().classList.contains(exports.ButtonSelectors.graniteFlatButton) ||
|
|
2996
|
+
this._getHostElement().classList.contains(exports.ButtonSelectors.graniteToolbarButton))) {
|
|
2997
|
+
this._buttonToggled = coercion.coerceBooleanProperty(changes.toggled.currentValue);
|
|
2998
|
+
}
|
|
2982
2999
|
};
|
|
2983
3000
|
GraniteButtonComponent.prototype.focus = function (origin, options) {
|
|
2984
3001
|
if (origin === void 0) { origin = 'program'; }
|
|
@@ -2992,23 +3009,27 @@
|
|
|
2992
3009
|
GraniteButtonComponent.decorators = [
|
|
2993
3010
|
{ type: core.Component, args: [{
|
|
2994
3011
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2995
|
-
selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[
|
|
3012
|
+
selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ",
|
|
2996
3013
|
host: {
|
|
2997
3014
|
class: 'granite-button-base',
|
|
2998
3015
|
'[class.granite-button-disabled]': 'disabled',
|
|
3016
|
+
'[class.granite-button-toggled]': '_buttonToggled',
|
|
2999
3017
|
'[attr.disabled]': 'disabled || null',
|
|
3000
3018
|
},
|
|
3001
3019
|
exportAs: 'graniteButton',
|
|
3002
3020
|
template: '<ng-content></ng-content>',
|
|
3003
3021
|
inputs: ['disabled'],
|
|
3004
3022
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3005
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body
|
|
3023
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}"]
|
|
3006
3024
|
},] }
|
|
3007
3025
|
];
|
|
3008
3026
|
GraniteButtonComponent.ctorParameters = function () { return [
|
|
3009
3027
|
{ type: a11y.FocusMonitor },
|
|
3010
3028
|
{ type: core.ElementRef }
|
|
3011
3029
|
]; };
|
|
3030
|
+
GraniteButtonComponent.propDecorators = {
|
|
3031
|
+
toggled: [{ type: core.Input }]
|
|
3032
|
+
};
|
|
3012
3033
|
var GraniteAnchorComponent = /** @class */ (function (_super) {
|
|
3013
3034
|
__extends(GraniteAnchorComponent, _super);
|
|
3014
3035
|
function GraniteAnchorComponent(_focusMonitor, _elementRef) {
|
|
@@ -3030,7 +3051,7 @@
|
|
|
3030
3051
|
GraniteAnchorComponent.decorators = [
|
|
3031
3052
|
{ type: core.Component, args: [{
|
|
3032
3053
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3033
|
-
selector:
|
|
3054
|
+
selector: "a[graniteButton],\n a[graniteFlatButton]",
|
|
3034
3055
|
host: {
|
|
3035
3056
|
class: 'granite-button-base',
|
|
3036
3057
|
'[attr.tabindex]': 'disabled ? -1 : 0',
|
|
@@ -3040,7 +3061,7 @@
|
|
|
3040
3061
|
template: '<ng-content></ng-content>',
|
|
3041
3062
|
inputs: ['disabled'],
|
|
3042
3063
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3043
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body
|
|
3064
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit;cursor:pointer}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}a:host,button:host{outline:none}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-s) var(--granite-spacing-s);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:none;outline:none}button:host.granite-primary-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus);outline:none}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-selected);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-button-toggled{background-color:none;color:none;outline:none}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}"]
|
|
3044
3065
|
},] }
|
|
3045
3066
|
];
|
|
3046
3067
|
GraniteAnchorComponent.ctorParameters = function () { return [
|
|
@@ -3491,13 +3512,10 @@
|
|
|
3491
3512
|
* Generated bundle index. Do not edit.
|
|
3492
3513
|
*/
|
|
3493
3514
|
|
|
3494
|
-
exports.BUTTON_CLASS = BUTTON_CLASS;
|
|
3495
|
-
exports.ButtonSelectors = ButtonSelectors;
|
|
3496
3515
|
exports.ClientInputDesktopDirective = ClientInputDesktopDirective;
|
|
3497
3516
|
exports.ClientInputTouchDirective = ClientInputTouchDirective;
|
|
3498
3517
|
exports.ClientOutputDesktopDirective = ClientOutputDesktopDirective;
|
|
3499
3518
|
exports.ClientOutputTouchDirective = ClientOutputTouchDirective;
|
|
3500
|
-
exports.FLAT_BUTTON_CLASS = FLAT_BUTTON_CLASS;
|
|
3501
3519
|
exports.GRANITE_CLIENT_INPUT = GRANITE_CLIENT_INPUT;
|
|
3502
3520
|
exports.GRANITE_CLIENT_OUTPUT = GRANITE_CLIENT_OUTPUT;
|
|
3503
3521
|
exports.GraniteAnchorComponent = GraniteAnchorComponent;
|
|
@@ -3536,8 +3554,6 @@
|
|
|
3536
3554
|
exports.GraniteTitleDirective = GraniteTitleDirective;
|
|
3537
3555
|
exports.GraniteToggleSwitchComponent = GraniteToggleSwitchComponent;
|
|
3538
3556
|
exports.GraniteToggleSwitchModule = GraniteToggleSwitchModule;
|
|
3539
|
-
exports.NAV_BUTTON_CLASS = NAV_BUTTON_CLASS;
|
|
3540
|
-
exports.PRIMARY_BUTTON_CLASS = PRIMARY_BUTTON_CLASS;
|
|
3541
3557
|
exports._MenuBaseComponent = _MenuBaseComponent;
|
|
3542
3558
|
exports.deviceDesktop = deviceDesktop;
|
|
3543
3559
|
exports.deviceTouch = deviceTouch;
|