@flywheel-io/vision 0.15.0 → 0.15.1

package/fesm2020/flywheel-io-vision.mjs

@@ -185,6 +185,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class FwAppIconComponent {
+    constructor() {
+        this.color = 'primary';
+        this.size = 'medium';
+        this.variant = 'interactive';
+        this.tabindex = '';
+        this.locked = false;
+        this.animated = false;
+        this.role = 'button';
+    }
+    get cssClass() {
+        return ['fw-app-icon', this.size, this.color, this.variant].join(' ');
+    }
+}
+FwAppIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FwAppIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FwAppIconComponent, selector: "fw-app-icon", inputs: { label: "label", icon: "icon", color: "color", size: "size", variant: "variant", badge: "badge", tabindex: "tabindex", locked: "locked", animated: "animated" }, host: { properties: { "tabindex": "this.tabindex", "class.locked": "this.locked", "class.animated": "this.animated", "role": "this.role", "class": "this.cssClass" } }, ngImport: i0, template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin-top:6px}:host p{margin-top:6px;margin-bottom:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fw-app-icon', template: "<div class=\"icon-highlight\"></div>\n<div class=\"icon-wrapper\">\n  <div class=\"app-badge\" *ngIf=\"badge\">{{ badge }}</div>\n  <div class=\"app-locked\" *ngIf=\"locked\">\n    <fw-icon>lock</fw-icon>\n  </div>\n  <fw-icon *ngIf=\"icon\">{{ icon }}</fw-icon>\n</div>\n<p class=\"vision-p3\" *ngIf=\"label\">{{ label }}</p>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none}:host .icon-highlight{box-sizing:content-box;display:inline-flex;border:4px solid transparent;padding:2px;position:absolute;top:0}:host .icon-wrapper{display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;margin-top:6px}:host p{margin-top:6px;margin-bottom:0;line-height:16.8px;-webkit-user-select:none;user-select:none;display:inline-block;color:var(--typography-muted);text-align:center}:host .app-badge{width:18px;height:18px;border-radius:64px;background:var(--red-base);font-size:10px;font-weight:500;line-height:17px;letter-spacing:0;text-align:center;color:var(--typography-contrast);display:inline-flex;align-items:start;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000000d}:host .app-locked{width:21px;height:21px;border-radius:64px;background:var(--slate-base);font-size:15px;color:var(--typography-contrast);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-6px;right:-6px;overflow:hidden;white-space:nowrap;box-shadow:0 2px 5px #0000001a}:host.primary .icon-wrapper{background-color:var(--primary-base)}:host.primary .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.dark .icon-wrapper{background-color:var(--primary-dark)}:host.dark .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.gradient .icon-wrapper{background:linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%)}:host.gradient .icon-wrapper>fw-icon{color:var(--typography-contrast)}:host.light .icon-wrapper{background-color:var(--page-light);outline:1px solid #e3e6ea}:host.light .icon-wrapper>fw-icon{background:-webkit-linear-gradient(23.3deg,#093af6 -22.41%,#1b68fa 41.03%,#b080fc 94.31%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host.small .icon-highlight{border-radius:12px;width:24px;height:24px}:host.small .icon-wrapper{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center}:host.small .icon-wrapper>fw-icon{font-size:16px}:host.small .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.medium .icon-highlight{border-radius:14px;width:32px;height:32px}:host.medium .icon-wrapper{display:inline-flex;width:32px;height:32px;border-radius:8px;align-items:center;justify-content:center}:host.medium .icon-wrapper>fw-icon{font-size:20px}:host.medium .app-badge{width:8px;height:8px;border-radius:8px;text-indent:-9999px;top:-3px;right:-3px;box-shadow:-1px 1px #00000040}:host.large .icon-highlight{border-radius:18px;width:48px;height:48px}:host.large .icon-wrapper{display:inline-flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center}:host.large .icon-wrapper>fw-icon{font-size:32px}:host.extra-large .icon-highlight{border-radius:22px;width:64px;height:64px}:host.extra-large .icon-wrapper{display:inline-flex;width:64px;height:64px;border-radius:16px;align-items:center;justify-content:center}:host.extra-large .icon-wrapper>fw-icon{font-size:48px}:host.extra-large p{max-width:64px}:host.interactive .icon-highlight{border:4px solid transparent}:host.hover .icon-highlight,:host:hover .icon-highlight{border:4px solid var(--primary-border)}@keyframes rubber-band{0%{transform:scale(.95)}20%{transform:scale(1.05)}32%{transform:scale(.95)}48%{transform:scale(1)}}:host.animated.hover .icon-highlight,:host.animated:hover .icon-highlight{animation:rubber-band .5s linear forwards;border:4px solid var(--primary-border)}:host.focused .icon-highlight,:host:focus .icon-highlight,:host.animated:focus .icon-highlight{border:4px solid var(--primary-base)}:host.focused p,:host:focus p,:host.animated:focus p{color:var(--typography-base)}:host.static .icon-highlight,:host.static:hover .icon-highlight,:host.static.animated:hover .icon-highlight{border:4px solid transparent}:host.locked{pointer-events:none}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], badge: [{
+                type: Input
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['tabindex']
+            }, {
+                type: Input
+            }], locked: [{
+                type: HostBinding,
+                args: ['class.locked']
+            }, {
+                type: Input
+            }], animated: [{
+                type: HostBinding,
+                args: ['class.animated']
+            }, {
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['role']
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class FwAppIconModule {
+}
+FwAppIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FwAppIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconModule, declarations: [FwAppIconComponent], imports: [CommonModule,
+        FwIconModule], exports: [FwAppIconComponent] });
+FwAppIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconModule, imports: [CommonModule,
+        FwIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FwAppIconModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FwIconModule,
+                    ],
+                    exports: [
+                        FwAppIconComponent,
+                    ],
+                    declarations: [
+                        FwAppIconComponent,
+                    ],
+                }]
+        }] });
+
 class FwAvatarComponent {
     constructor() {
         this.color = 'primary';
@@ -3294,5 +3371,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAvatarComponent, FwAvatarModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwChoiceDialogComponent, FwConfirmDialogComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogModule, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwErrorDialogComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPopoverComponent, FwPopoverModule, FwPopoverTriggerComponent, FwPopoverTriggerDirective, FwPortalDialogComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwStepComponent, FwStepperComponent, FwStepperModule, FwTextInputComponent, FwTextInputModule, MinimalTranslationService, TranslationService, genId };
+export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwChipComponent, FwChipModule, FwChoiceDialogComponent, FwConfirmDialogComponent, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogModule, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwErrorDialogComponent, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuModule, FwMenuSeparatorComponent, FwMultiSelectMenuComponent, FwNotificationComponent, FwNotificationContainerComponent, FwNotificationModule, FwNotificationService, FwNotificationType, FwPopoverComponent, FwPopoverModule, FwPopoverTriggerComponent, FwPopoverTriggerDirective, FwPortalDialogComponent, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwStepComponent, FwStepperComponent, FwStepperModule, FwTextInputComponent, FwTextInputModule, MinimalTranslationService, TranslationService, genId };
 //# sourceMappingURL=flywheel-io-vision.mjs.map