@ifsworld/granite-components 4.0.0 → 4.1.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 +19 -8
- 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/lib/button/button.component.js +21 -6
- package/esm2015/lib/button/button.component.js.map +1 -1
- package/esm2015/lib/button/button.component.metadata.json +1 -1
- package/fesm2015/ifsworld-granite-components.js +19 -5
- 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 -0
- package/package.json +1 -1
- package/src/lib/core/style/_mixins.scss +13 -0
- package/src/lib/core/style/_tokens.scss +2 -0
|
@@ -2955,12 +2955,12 @@
|
|
|
2955
2955
|
return Derived;
|
|
2956
2956
|
};
|
|
2957
2957
|
|
|
2958
|
-
var ButtonSelectors;
|
|
2959
2958
|
(function (ButtonSelectors) {
|
|
2960
2959
|
ButtonSelectors["graniteButton"] = "granite-button";
|
|
2961
2960
|
ButtonSelectors["granitePrimaryButton"] = "granite-primary-button";
|
|
2962
2961
|
ButtonSelectors["graniteFlatButton"] = "granite-flat-button";
|
|
2963
|
-
|
|
2962
|
+
ButtonSelectors["graniteToolbarButton"] = "granite-toolbar-button";
|
|
2963
|
+
})(exports.ButtonSelectors || (exports.ButtonSelectors = {}));
|
|
2964
2964
|
var ButtonComponentMixin = disabledMixin();
|
|
2965
2965
|
var GraniteButtonComponent = /** @class */ (function (_super) {
|
|
2966
2966
|
__extends(GraniteButtonComponent, _super);
|
|
@@ -2969,11 +2969,13 @@
|
|
|
2969
2969
|
var _this = _super.call(this) || this;
|
|
2970
2970
|
_this._focusMonitor = _focusMonitor;
|
|
2971
2971
|
_this._elementRef = _elementRef;
|
|
2972
|
+
_this.toggled = false;
|
|
2973
|
+
_this._buttonToggled = false;
|
|
2972
2974
|
try {
|
|
2973
|
-
for (var _b = __values(Object.keys(ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2975
|
+
for (var _b = __values(Object.keys(exports.ButtonSelectors)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2974
2976
|
var selector = _c.value;
|
|
2975
2977
|
if (_this._getHostElement().hasAttribute(selector)) {
|
|
2976
|
-
_this._getHostElement().classList.add(ButtonSelectors[selector]);
|
|
2978
|
+
_this._getHostElement().classList.add(exports.ButtonSelectors[selector]);
|
|
2977
2979
|
}
|
|
2978
2980
|
}
|
|
2979
2981
|
}
|
|
@@ -2988,6 +2990,11 @@
|
|
|
2988
2990
|
}
|
|
2989
2991
|
GraniteButtonComponent.prototype.ngOnChanges = function (changes) {
|
|
2990
2992
|
_super.prototype.ngOnChanges.call(this, changes);
|
|
2993
|
+
if (changes.toggled &&
|
|
2994
|
+
(this._getHostElement().classList.contains(exports.ButtonSelectors.graniteFlatButton) ||
|
|
2995
|
+
this._getHostElement().classList.contains(exports.ButtonSelectors.graniteToolbarButton))) {
|
|
2996
|
+
this._buttonToggled = coercion.coerceBooleanProperty(changes.toggled.currentValue);
|
|
2997
|
+
}
|
|
2991
2998
|
};
|
|
2992
2999
|
GraniteButtonComponent.prototype.focus = function (origin, options) {
|
|
2993
3000
|
if (origin === void 0) { origin = 'program'; }
|
|
@@ -3001,23 +3008,27 @@
|
|
|
3001
3008
|
GraniteButtonComponent.decorators = [
|
|
3002
3009
|
{ type: core.Component, args: [{
|
|
3003
3010
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3004
|
-
selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton]\n ",
|
|
3011
|
+
selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ",
|
|
3005
3012
|
host: {
|
|
3006
3013
|
class: 'granite-button-base',
|
|
3007
3014
|
'[class.granite-button-disabled]': 'disabled',
|
|
3015
|
+
'[class.granite-button-toggled]': '_buttonToggled',
|
|
3008
3016
|
'[attr.disabled]': 'disabled || null',
|
|
3009
3017
|
},
|
|
3010
3018
|
exportAs: 'graniteButton',
|
|
3011
3019
|
template: '<ng-content></ng-content>',
|
|
3012
3020
|
inputs: ['disabled'],
|
|
3013
3021
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3014
|
-
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
|
|
3022
|
+
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-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-pressed);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-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-pressed);color:none;outline:none}button:host.granite-primary-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-pressed);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-pressed);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);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-pressed);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-pressed);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;-webkit-user-select:none;user-select:none}"]
|
|
3015
3023
|
},] }
|
|
3016
3024
|
];
|
|
3017
3025
|
GraniteButtonComponent.ctorParameters = function () { return [
|
|
3018
3026
|
{ type: a11y.FocusMonitor },
|
|
3019
3027
|
{ type: core.ElementRef }
|
|
3020
3028
|
]; };
|
|
3029
|
+
GraniteButtonComponent.propDecorators = {
|
|
3030
|
+
toggled: [{ type: core.Input }]
|
|
3031
|
+
};
|
|
3021
3032
|
var GraniteAnchorComponent = /** @class */ (function (_super) {
|
|
3022
3033
|
__extends(GraniteAnchorComponent, _super);
|
|
3023
3034
|
function GraniteAnchorComponent(_focusMonitor, _elementRef) {
|
|
@@ -3039,7 +3050,7 @@
|
|
|
3039
3050
|
GraniteAnchorComponent.decorators = [
|
|
3040
3051
|
{ type: core.Component, args: [{
|
|
3041
3052
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
3042
|
-
selector:
|
|
3053
|
+
selector: "a[graniteButton],\n a[graniteFlatButton]",
|
|
3043
3054
|
host: {
|
|
3044
3055
|
class: 'granite-button-base',
|
|
3045
3056
|
'[attr.tabindex]': 'disabled ? -1 : 0',
|
|
@@ -3049,7 +3060,7 @@
|
|
|
3049
3060
|
template: '<ng-content></ng-content>',
|
|
3050
3061
|
inputs: ['disabled'],
|
|
3051
3062
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3052
|
-
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
|
|
3063
|
+
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-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-pressed);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-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-pressed);color:none;outline:none}button:host.granite-primary-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-pressed);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-pressed);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);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-pressed);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-pressed);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;-webkit-user-select:none;user-select:none}"]
|
|
3053
3064
|
},] }
|
|
3054
3065
|
];
|
|
3055
3066
|
GraniteAnchorComponent.ctorParameters = function () { return [
|