@mozaic-ds/angular 2.5.0 → 2.5.1
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,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, effect, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, afterRenderEffect, untracked } from '@angular/core';
|
|
3
3
|
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
4
|
+
import { ChevronRight20, WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, CrossCircleFilled24, More24, Less24, InfoCircleFilled24, ErrorFilled24, WarningTriangleFilled24, CheckCircleFilled24, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle20, Menu24, Notification20, Search20, PauseCircle24, PlayCircle24, Search24, CheckCircle24, SortDown20, SortTop20, SortTopDown20, ChevronUp20 } from '@mozaic-ds/icons-angular';
|
|
4
5
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
|
|
5
6
|
import * as i1 from '@angular/forms';
|
|
6
7
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
-
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircleFilled24, ErrorFilled24, WarningTriangleFilled24, CheckCircleFilled24, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle20, Menu24, Notification20, Search20, PauseCircle24, PlayCircle24, Search24, CheckCircle24, SortDown20, SortTop20, SortTopDown20, ChevronUp20 } from '@mozaic-ds/icons-angular';
|
|
8
8
|
import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject, map, of, take, tap } from 'rxjs';
|
|
@@ -26,20 +26,18 @@ class MozBreadcrumbComponent {
|
|
|
26
26
|
};
|
|
27
27
|
}, /* @ts-ignore */
|
|
28
28
|
...(ngDevMode ? [{ debugName: "classObject" }] : /* istanbul ignore next */ []));
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return `link breadcrumb__current${linkClass}`;
|
|
36
|
-
}
|
|
29
|
+
appearanceClass = computed(() => this.appearance() !== 'standard' ? ` link--${this.appearance()}` : '', /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "appearanceClass" }] : /* istanbul ignore next */ []));
|
|
31
|
+
linkClass = computed(() => `link link--inline${this.appearanceClass()}`, /* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
|
|
33
|
+
currentLinkClass = computed(() => `link breadcrumb__current${this.appearanceClass()}`, /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "currentLinkClass" }] : /* istanbul ignore next */ []));
|
|
37
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozBreadcrumbComponent, isStandalone: true, selector: "moz-breadcrumb", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozBreadcrumbComponent, isStandalone: true, selector: "moz-breadcrumb", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isFirst = $first, isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (link.router) {\n <a\n [routerLink]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a\n [href]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-breadcrumb,.breadcrumb{color:var(--breadcrumb-color-text-standard, #000000)}.mc-breadcrumb__container,.breadcrumb__container{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:var(--spacing-050, .25rem)}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (width<=679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon,.mc-breadcrumb__item:nth-last-child(2) .link__icon,.breadcrumb__item:nth-last-child(2) .link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;text-align:left;opacity:0}}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current.mc-link{cursor:default;text-decoration:none}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current:active,.mc-breadcrumb__current:focus,.mc-breadcrumb__current:hover,.mc-breadcrumb__current:visited,.mc-breadcrumb__current.mc-link,.mc-breadcrumb__current.mc-link:active,.mc-breadcrumb__current.mc-link:focus,.mc-breadcrumb__current.mc-link:hover,.mc-breadcrumb__current.mc-link:visited{color:currentcolor}.mc-breadcrumb--inverse,.breadcrumb--inverse{color:var(--breadcrumb-color-text-inverse, #ffffff)}.mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-050, .25rem);min-height:var(--spacing-300, 1.5rem);text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:var(--link-size-font-s, .875rem)}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon,.link__icon{display:block;height:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label{text-decoration:underline}.mc-link:focus,.link:focus{box-shadow:none;outline:none}.mc-link:focus-visible,.link:focus-visible{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .125rem)}.mc-link--m{min-height:var(--spacing-400, 2rem);font-size:var(--link-size-font-m, 1rem)}.mc-link--m .mc-link__label,.mc-link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse,.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:var(--spacing-400, 2rem);font-weight:var(--font-weight-semi-bold, 600)}.mc-link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label{text-decoration:none}.mc-link--inline,.link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label,.link--inline .mc-link__label,.mc-link--inline .link__label,.link--inline .link__label{line-height:1}.mc-link--inline:hover,.link--inline:hover{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
39
37
|
}
|
|
40
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozBreadcrumbComponent, decorators: [{
|
|
41
39
|
type: Component,
|
|
42
|
-
args: [{ selector: 'moz-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (
|
|
40
|
+
args: [{ selector: 'moz-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, ChevronRight20], template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isFirst = $first, isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (link.router) {\n <a\n [routerLink]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a\n [href]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-breadcrumb,.breadcrumb{color:var(--breadcrumb-color-text-standard, #000000)}.mc-breadcrumb__container,.breadcrumb__container{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:var(--spacing-050, .25rem)}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (width<=679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon,.mc-breadcrumb__item:nth-last-child(2) .link__icon,.breadcrumb__item:nth-last-child(2) .link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;text-align:left;opacity:0}}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current.mc-link{cursor:default;text-decoration:none}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current:active,.mc-breadcrumb__current:focus,.mc-breadcrumb__current:hover,.mc-breadcrumb__current:visited,.mc-breadcrumb__current.mc-link,.mc-breadcrumb__current.mc-link:active,.mc-breadcrumb__current.mc-link:focus,.mc-breadcrumb__current.mc-link:hover,.mc-breadcrumb__current.mc-link:visited{color:currentcolor}.mc-breadcrumb--inverse,.breadcrumb--inverse{color:var(--breadcrumb-color-text-inverse, #ffffff)}.mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-050, .25rem);min-height:var(--spacing-300, 1.5rem);text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:var(--link-size-font-s, .875rem)}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon,.link__icon{display:block;height:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label{text-decoration:underline}.mc-link:focus,.link:focus{box-shadow:none;outline:none}.mc-link:focus-visible,.link:focus-visible{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .125rem)}.mc-link--m{min-height:var(--spacing-400, 2rem);font-size:var(--link-size-font-m, 1rem)}.mc-link--m .mc-link__label,.mc-link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse,.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:var(--spacing-400, 2rem);font-weight:var(--font-weight-semi-bold, 600)}.mc-link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label{text-decoration:none}.mc-link--inline,.link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label,.link--inline .mc-link__label,.mc-link--inline .link__label,.link--inline .link__label{line-height:1}.mc-link--inline:hover,.link--inline:hover{text-decoration:none}\n"] }]
|
|
43
41
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
|
|
44
42
|
|
|
45
43
|
class MozButtonComponent {
|