@ifsworld/granite-components 4.0.0-beta.10 → 4.0.0-beta.13

package/index.d.ts

@@ -14,6 +14,7 @@ export * from './lib/menu/menu-item.component';
 export * from './lib/menu/menu-trigger-for.directive';
 export * from './lib/menu/testing/menu.harness';
 export * from './lib/menu/divider.directive';
+export * from './lib/menu/title.directive';
 export * from './lib/menu/menu-touch-close.component';
 export * from './lib/menu/menu-touch-title.component';
 export * from './lib/icon/icon.module';

package/lib/button/button.component.d.ts

@@ -1,5 +1,11 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+export declare enum ButtonSelectors {
+    graniteButton = "granite-button",
+    granitePrimaryButton = "granite-primary-button",
+    graniteFlatButton = "granite-flat-button",
+    graniteToolbarButton = "granite-toolbar-button"
+}
 declare const ButtonComponentMixin: {
     new (...args: any[]): {
         [x: string]: unknown;
@@ -10,6 +16,8 @@ declare const ButtonComponentMixin: {
 export declare class GraniteButtonComponent extends ButtonComponentMixin implements OnChanges {
     protected _focusMonitor: FocusMonitor;
     protected _elementRef: ElementRef;
+    toggled: boolean;
+    _buttonToggled: boolean;
     constructor(_focusMonitor: FocusMonitor, _elementRef: ElementRef);
     ngOnChanges(changes: SimpleChanges): void;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;

package/lib/input-field/input-field.component.d.ts

@@ -16,7 +16,7 @@ export declare class GraniteInputFieldComponent implements OnInit, OnChanges {
     countcharacters: boolean;
     ariaLabel: string | null;
     ariaLabelledby: string | null;
-    valueChange: EventEmitter<string>;
+    readonly valueChange: EventEmitter<string>;
     private _inputElement;
     private _textareaElement;
     _supported: boolean;

package/lib/menu/menu-trigger-for.directive.d.ts

@@ -32,6 +32,7 @@ export declare class GraniteMenuTriggerForDirective implements AfterContentInit,
     private _focusMonitor;
     /** References the menu instance that the trigger is associated with. */
     menu: _MenuBaseComponent;
+    openOnHover: boolean;
     /** Whether the associated menu is open */
     _isMenuOpen: boolean;
     _openedBy: 'mouse' | 'touch' | null;
@@ -71,6 +72,7 @@ export declare class GraniteMenuTriggerForDirective implements AfterContentInit,
     ngOnDestroy(): void;
     /** Handles change of associated menu */
     _handleMenuChange(): void;
+    isOpen(): boolean;
     /** Open the associated menu */
     openMenu(): void;
     /** Whether the menu triggers a sub-menu or a top-level one. */

package/lib/menu/menu.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
+import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { Direction } from '@angular/cdk/bidi';
 import { AnimationEvent } from '@angular/animations';
@@ -22,7 +22,7 @@ declare type TransformMenu = {
     };
 };
 /** Base class with all of the menu functionality. */
-export declare class _MenuBaseComponent implements AfterContentInit, OnDestroy, GraniteMenuPanelInterface {
+export declare class _MenuBaseComponent implements AfterContentInit, OnDestroy, AfterContentChecked, GraniteMenuPanelInterface {
     private _changeDetectorRef;
     /** Position of the menu in the X axis. */
     get xPosition(): MenuPositionX;
@@ -71,6 +71,8 @@ export declare class _MenuBaseComponent implements AfterContentInit, OnDestroy,
     _clientInput: ClientInputInterface;
     /** Client output device information */
     _clientOutput: ClientOutputInterface;
+    private _menuEmpty$;
+    _isMenuEmpty$: Observable<boolean>;
     /** Only the direct descendant menu items. */
     private _directDescendantItems;
     private _keyManager;
@@ -86,6 +88,7 @@ export declare class _MenuBaseComponent implements AfterContentInit, OnDestroy,
      */
     private xOffset;
     constructor(_changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentChecked(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /**

package/lib/menu/title.directive.d.ts

@@ -0,0 +1,2 @@
+export declare class GraniteTitleDirective {
+}

package/lib/toggle-switch/toggle-switch.component.d.ts

@@ -10,9 +10,9 @@ export declare class GraniteToggleSwitchComponent implements OnChanges {
     labelPosition: Position;
     ariaLabel: string | null;
     ariaLabelledby: string | null;
-    valueChange: EventEmitter<boolean>;
-    toggleChange: EventEmitter<void>;
-    toggleBlur: EventEmitter<void>;
+    readonly valueChange: EventEmitter<boolean>;
+    readonly toggleChange: EventEmitter<void>;
+    readonly toggleBlur: EventEmitter<void>;
     private _inputElement;
     _positionBefore: boolean;
     _toggleSwitchDisabled: boolean;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ifsworld/granite-components",
-  "version": "4.0.0-beta.10",
+  "version": "4.0.0-beta.13",
   "peerDependencies": {
     "@angular/cdk": ">=11.2.13",
     "@angular/common": ">=11.2.14",
     "@angular/core": ">=11.2.14",
-    "@ifsworld/granite-icons": "^0.0.6",
+    "@ifsworld/granite-icons": "^1.0.2",
     "@ifsworld/token-interfaces": "^1.0.0",
     "@ifsworld/granite-tokens": "^3.0.0",
     "rxjs": "~6.6.3",

package/src/lib/core/style/_mixins.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable declaration-block-no-duplicate-properties */
 @use 'direction' as *;
+@use 'tokens' as *;
 
 @mixin display-flex() {
   display: -webkit-flex;
@@ -392,3 +393,15 @@
     box-sizing: inherit;
   }
 }
+
+@mixin outline(
+  $offset: 0,
+  $width: $granite-outline-width-regular,
+  $color: --granite-color-focus,
+  $style: solid
+) {
+  outline-offset: $offset;
+  outline-width: $width;
+  outline-color: var($color);
+  outline-style: $style;
+}

package/src/lib/core/style/_tokens.scss

@@ -8,6 +8,7 @@ $layout-breakpoint-xl: 1920px !default;
 // Remove these when correct rem based tokens are exposed from design tokens
 $granite-base-rem: 1rem;
 $granite-border-width-regular: 0.0625rem;
+$granite-outline-width-regular: 0.0625rem;
 $granite-radius-l: 1rem;
 $granite-radius-m: 0.5rem;
 $granite-radius-s: 0.25rem;