@mozaic-ds/angular 2.0.0-beta.10 → 2.0.0-beta.11
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, signal, forwardRef, output, ContentChild, viewChild, inject, effect, afterNextRender, TemplateRef, Injector, Injectable, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, model, EventEmitter, Output, ElementRef, HostListener, Input, Directive, booleanAttribute, contentChildren } from '@angular/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, signal, forwardRef, output, ContentChild, viewChild, inject, effect, afterNextRender, TemplateRef, Injector, Injectable, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, model, EventEmitter, Output, ContentChildren, ElementRef, HostListener, Input, Directive, booleanAttribute, contentChildren } from '@angular/core';
|
|
3
3
|
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
4
4
|
import { NgTemplateOutlet, NgComponentOutlet, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -1594,13 +1594,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1594
1594
|
args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n <h2 class=\"mc-status-notification__title\">{{ title() }}</h2>\n <p class=\"mc-status-notification__message\">{{ description() }}</p>\n\n @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <button\n class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n type=\"button\"\n (click)=\"onCloseClick()\"\n >\n <Cross20 class=\"mc-button__icon\" aria-hidden=\"true\" />\n </button>\n }\n</section>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.875rem}.mc-link__label{line-height:1.3}.mc-link__icon{display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline) .mc-link__label{text-decoration:underline}.mc-link:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-link--m{min-height:2rem;font-size:1rem}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff)}.mc-link--stand-alone{min-height:2rem;font-weight:var(--link-font-weight, 600)}.mc-link--stand-alone .mc-link__label{border-bottom:var(--border-width-s, .0625rem) solid currentColor}.mc-link--stand-alone:hover .mc-link__label{border-color:transparent}.mc-link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label{line-height:1}.mc-link--inline:hover{text-decoration:none}.mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
|
|
1595
1595
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
1596
1596
|
|
|
1597
|
+
class MozTabComponent {
|
|
1598
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1599
|
+
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
1600
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1601
|
+
routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
|
|
1602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTabComponent, isStandalone: true, selector: "moz-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1604
|
+
}
|
|
1605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabComponent, decorators: [{
|
|
1606
|
+
type: Component,
|
|
1607
|
+
args: [{
|
|
1608
|
+
selector: 'moz-tab',
|
|
1609
|
+
template: `<ng-content></ng-content>`,
|
|
1610
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1611
|
+
encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom,
|
|
1612
|
+
}]
|
|
1613
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }] } });
|
|
1614
|
+
|
|
1597
1615
|
class MozTabsComponent {
|
|
1598
|
-
tabs
|
|
1616
|
+
tabs;
|
|
1599
1617
|
description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
|
|
1600
1618
|
divider = input(true, ...(ngDevMode ? [{ debugName: "divider" }] : []));
|
|
1601
1619
|
centered = input(false, ...(ngDevMode ? [{ debugName: "centered" }] : []));
|
|
1602
1620
|
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
1621
|
+
tabsInput = input([], { ...(ngDevMode ? { debugName: "tabsInput" } : {}), alias: 'tabs' });
|
|
1603
1622
|
selectedIndexChange = new EventEmitter();
|
|
1623
|
+
tabsArray = signal([], ...(ngDevMode ? [{ debugName: "tabsArray" }] : []));
|
|
1624
|
+
virtualTabs = signal([], ...(ngDevMode ? [{ debugName: "virtualTabs" }] : []));
|
|
1625
|
+
constructor() {
|
|
1626
|
+
effect(() => {
|
|
1627
|
+
const inputTabs = this.tabsInput();
|
|
1628
|
+
if (inputTabs.length > 0) {
|
|
1629
|
+
this.virtualTabs.set(inputTabs);
|
|
1630
|
+
}
|
|
1631
|
+
});
|
|
1632
|
+
}
|
|
1633
|
+
ngAfterContentInit() {
|
|
1634
|
+
this.tabsArray.set(this.tabs.toArray());
|
|
1635
|
+
this.tabs.changes.subscribe(() => {
|
|
1636
|
+
this.tabsArray.set(this.tabs.toArray());
|
|
1637
|
+
});
|
|
1638
|
+
}
|
|
1639
|
+
hasVirtualTabs = computed(() => this.virtualTabs().length > 0, ...(ngDevMode ? [{ debugName: "hasVirtualTabs" }] : []));
|
|
1604
1640
|
classes = computed(() => ({
|
|
1605
1641
|
'mc-tabs': true,
|
|
1606
1642
|
'mc-tabs--centered': this.centered(),
|
|
@@ -1608,7 +1644,17 @@ class MozTabsComponent {
|
|
|
1608
1644
|
isTabSelected = (index) => index === this.selectedIndex();
|
|
1609
1645
|
getTabClasses(index) {
|
|
1610
1646
|
return computed(() => {
|
|
1611
|
-
const tab = this.
|
|
1647
|
+
const tab = this.tabsArray()[index];
|
|
1648
|
+
return {
|
|
1649
|
+
'mc-tabs__tab': true,
|
|
1650
|
+
'mc-tabs__tab--selected': this.isTabSelected(index),
|
|
1651
|
+
'mc-tabs__tab--disabled': !!tab?.disabled(),
|
|
1652
|
+
};
|
|
1653
|
+
});
|
|
1654
|
+
}
|
|
1655
|
+
getVirtualTabClasses(index) {
|
|
1656
|
+
return computed(() => {
|
|
1657
|
+
const tab = this.virtualTabs()[index];
|
|
1612
1658
|
return {
|
|
1613
1659
|
'mc-tabs__tab': true,
|
|
1614
1660
|
'mc-tabs__tab--selected': this.isTabSelected(index),
|
|
@@ -1617,8 +1663,16 @@ class MozTabsComponent {
|
|
|
1617
1663
|
});
|
|
1618
1664
|
}
|
|
1619
1665
|
onClickTab(index) {
|
|
1620
|
-
const tab = this.
|
|
1621
|
-
if (!tab || tab.disabled)
|
|
1666
|
+
const tab = this.tabsArray()[index];
|
|
1667
|
+
if (!tab || tab.disabled())
|
|
1668
|
+
return;
|
|
1669
|
+
if (index !== this.selectedIndex()) {
|
|
1670
|
+
this.selectedIndexChange.emit(index);
|
|
1671
|
+
this.selectedIndex.set(index);
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1674
|
+
onClickVirtualTab(index, tab) {
|
|
1675
|
+
if (tab.disabled)
|
|
1622
1676
|
return;
|
|
1623
1677
|
if (index !== this.selectedIndex()) {
|
|
1624
1678
|
this.selectedIndexChange.emit(index);
|
|
@@ -1626,12 +1680,15 @@ class MozTabsComponent {
|
|
|
1626
1680
|
}
|
|
1627
1681
|
}
|
|
1628
1682
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: {
|
|
1683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) {\n @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n }\n } @else {\n @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n }\n }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover{background:none}.mc-tabs__label{pointer-events:none}.mc-tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list{justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1630
1684
|
}
|
|
1631
1685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, decorators: [{
|
|
1632
1686
|
type: Component,
|
|
1633
|
-
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @for (tab of
|
|
1634
|
-
}],
|
|
1687
|
+
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) {\n @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n }\n } @else {\n @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n }\n }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover{background:none}.mc-tabs__label{pointer-events:none}.mc-tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list{justify-content:center}\n"] }]
|
|
1688
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
1689
|
+
type: ContentChildren,
|
|
1690
|
+
args: [MozTabComponent]
|
|
1691
|
+
}], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], tabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], selectedIndexChange: [{
|
|
1635
1692
|
type: Output
|
|
1636
1693
|
}] } });
|
|
1637
1694
|
|
|
@@ -3553,7 +3610,7 @@ class MozPageHeaderComponent {
|
|
|
3553
3610
|
this.activeTabChange.emit(index);
|
|
3554
3611
|
}
|
|
3555
3612
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3556
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n ariaLabel=\"Burger menu\"\n (click)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n ariaLabel=\"Notification button\"\n (click)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag type=\"interactive\" [id]=\"'scope-tag'\" (click)=\"onScopeTagClick()\">{{\n $any(scope())\n }}</moz-tag>\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag type=\"interactive\" [id]=\"'mobile-scope-tag'\" (click)=\"onToggleScope()\">{{\n mobileTagLabel()\n }}</moz-tag>\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["
|
|
3613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n ariaLabel=\"Burger menu\"\n (click)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n ariaLabel=\"Notification button\"\n (click)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag type=\"interactive\" [id]=\"'scope-tag'\" (click)=\"onScopeTagClick()\">{{\n $any(scope())\n }}</moz-tag>\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag type=\"interactive\" [id]=\"'mobile-scope-tag'\" (click)=\"onToggleScope()\">{{\n mobileTagLabel()\n }}</moz-tag>\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["description", "divider", "centered", "selectedIndex", "tabs"], outputs: ["selectedIndexChange"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["color", "hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["color", "hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["color", "hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3557
3614
|
}
|
|
3558
3615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, decorators: [{
|
|
3559
3616
|
type: Component,
|
|
@@ -3748,5 +3805,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3748
3805
|
* Generated bundle index. Do not edit.
|
|
3749
3806
|
*/
|
|
3750
3807
|
|
|
3751
|
-
export { BuiltInMenuComponent, DrawerComponent, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalBodyComponent, MozModalComponent, MozModalContainerComponent, MozModalFooterComponent, MozModalHeaderComponent, MozModalRef, MozModalService, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabsComponent, MozTagComponent, MozTextInputDirective, MozTextareaDirective, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective };
|
|
3808
|
+
export { BuiltInMenuComponent, DrawerComponent, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalBodyComponent, MozModalComponent, MozModalContainerComponent, MozModalFooterComponent, MozModalHeaderComponent, MozModalRef, MozModalService, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInputDirective, MozTextareaDirective, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective };
|
|
3752
3809
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|