@compsych-ui-components/angular 7.0.1 → 7.0.3
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.
|
@@ -172,7 +172,7 @@ export class ButtonComponent {
|
|
|
172
172
|
<span class="icon" aria-hidden="true" [innerHTML]="trailingIconSvg"></span>
|
|
173
173
|
}
|
|
174
174
|
</button>
|
|
175
|
-
`, isInline: true, styles: [":host{display:inline-flex}:host(.full-width){display:flex;width:100%}.cmp-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:none;border-radius:var(--border-radius-sys-radius-full);background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;appearance:none;-webkit-appearance:none;transition:box-shadow .15s ease}.cmp-btn.full-width{width:100%}.cmp-btn:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.cmp-btn:hover:before{opacity:.08}.cmp-btn:active:before{opacity:.1}.cmp-btn.filled:hover:not(:disabled),.cmp-btn.danger:hover:not(:disabled){box-shadow:0 .25rem 1rem var(--transparent-neutral-sys-black-10),0 .125rem .25rem #00000014}.cmp-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick)}.cmp-btn:focus-visible:before{opacity:.12}.cmp-btn:disabled{pointer-events:none}.cmp-btn:disabled:not(.loading){cursor:not-allowed;background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface);border-color:transparent;box-shadow:none;opacity:.48}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.text:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){background-color:transparent}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){border-color:var(--outline-sys-outline-variant)}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;-webkit-user-select:none;user-select:none;width:1rem;height:1rem}.cmp-btn.large .icon{width:1.25rem;height:1.25rem}.cmp-btn.xlarge .icon{width:1.5rem;height:1.5rem}.icon svg{width:100%;height:100%}.cmp-btn.icon-only{padding:0;aspect-ratio:1}.cmp-btn.icon-only.small{width:2rem}.cmp-btn.icon-only.medium{width:2.5rem}.cmp-btn.icon-only.large{width:3rem}.cmp-btn.icon-only.xlarge{width:3.5rem}.spinner{border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;animation:cmp-btn-spin 1s linear infinite}@keyframes cmp-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.cmp-btn.small{gap:var(--spacing-padding-sys-padding-4);height:
|
|
175
|
+
`, isInline: true, styles: [":host{display:inline-flex}:host(.full-width){display:flex;width:100%}.cmp-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:none;border-radius:var(--border-radius-sys-radius-full);background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;appearance:none;-webkit-appearance:none;transition:box-shadow .15s ease}.cmp-btn.full-width{width:100%}.cmp-btn:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.cmp-btn:hover:before{opacity:.08}.cmp-btn:active:before{opacity:.1}.cmp-btn.filled:hover:not(:disabled),.cmp-btn.danger:hover:not(:disabled){box-shadow:0 .25rem 1rem var(--transparent-neutral-sys-black-10),0 .125rem .25rem #00000014}.cmp-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick)}.cmp-btn:focus-visible:before{opacity:.12}.cmp-btn:disabled{pointer-events:none}.cmp-btn:disabled:not(.loading){cursor:not-allowed;background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface);border-color:transparent;box-shadow:none;opacity:.48}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.text:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){background-color:transparent}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){border-color:var(--outline-sys-outline-variant)}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;-webkit-user-select:none;user-select:none;width:1rem;height:1rem}.cmp-btn.large .icon{width:1.25rem;height:1.25rem}.cmp-btn.xlarge .icon{width:1.5rem;height:1.5rem}.icon svg{width:100%;height:100%}.cmp-btn.icon-only{padding:0;aspect-ratio:1}.cmp-btn.icon-only.small{width:2rem}.cmp-btn.icon-only.medium{width:2.5rem}.cmp-btn.icon-only.large{width:3rem}.cmp-btn.icon-only.xlarge{width:3.5rem}.spinner{border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;animation:cmp-btn-spin 1s linear infinite}@keyframes cmp-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.cmp-btn.small{gap:var(--spacing-padding-sys-padding-4);height:32px;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking)}.cmp-btn.medium{gap:var(--spacing-padding-sys-padding-8);height:40px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-16);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking)}.cmp-btn.large{gap:var(--spacing-padding-sys-padding-8);height:48px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.cmp-btn.xlarge{gap:var(--spacing-padding-sys-padding-12);height:56px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.cmp-btn.filled{background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.cmp-btn.tonal{background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cmp-btn.outlined{background-color:transparent;color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cmp-btn.elevated{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);box-shadow:0 .125rem .25rem #00000014,0 .25rem 1rem var(--transparent-neutral-sys-black-10)}.cmp-btn.text{background-color:transparent;color:var(--surface-surface-sys-on-surface);padding-inline:0}.cmp-btn.danger{background-color:var(--error-sys-error);color:var(--error-sys-on-error)}.cmp-btn.danger-outlined{background-color:transparent;color:var(--error-sys-error);border:var(--border-width-sys-stroke-thin) solid var(--error-sys-error-container)}@media(forced-colors:active){.cmp-btn{border:1px solid ButtonText;forced-color-adjust:none}.cmp-btn.filled,.cmp-btn.tonal,.cmp-btn.danger{background:ButtonText;color:ButtonFace}.cmp-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}.cmp-btn:disabled:not(.loading){color:GrayText;border-color:GrayText;background:ButtonFace}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
176
176
|
}
|
|
177
177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
178
178
|
type: Component,
|
|
@@ -198,7 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
198
198
|
<span class="icon" aria-hidden="true" [innerHTML]="trailingIconSvg"></span>
|
|
199
199
|
}
|
|
200
200
|
</button>
|
|
201
|
-
`, styles: [":host{display:inline-flex}:host(.full-width){display:flex;width:100%}.cmp-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:none;border-radius:var(--border-radius-sys-radius-full);background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;appearance:none;-webkit-appearance:none;transition:box-shadow .15s ease}.cmp-btn.full-width{width:100%}.cmp-btn:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.cmp-btn:hover:before{opacity:.08}.cmp-btn:active:before{opacity:.1}.cmp-btn.filled:hover:not(:disabled),.cmp-btn.danger:hover:not(:disabled){box-shadow:0 .25rem 1rem var(--transparent-neutral-sys-black-10),0 .125rem .25rem #00000014}.cmp-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick)}.cmp-btn:focus-visible:before{opacity:.12}.cmp-btn:disabled{pointer-events:none}.cmp-btn:disabled:not(.loading){cursor:not-allowed;background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface);border-color:transparent;box-shadow:none;opacity:.48}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.text:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){background-color:transparent}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){border-color:var(--outline-sys-outline-variant)}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;-webkit-user-select:none;user-select:none;width:1rem;height:1rem}.cmp-btn.large .icon{width:1.25rem;height:1.25rem}.cmp-btn.xlarge .icon{width:1.5rem;height:1.5rem}.icon svg{width:100%;height:100%}.cmp-btn.icon-only{padding:0;aspect-ratio:1}.cmp-btn.icon-only.small{width:2rem}.cmp-btn.icon-only.medium{width:2.5rem}.cmp-btn.icon-only.large{width:3rem}.cmp-btn.icon-only.xlarge{width:3.5rem}.spinner{border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;animation:cmp-btn-spin 1s linear infinite}@keyframes cmp-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.cmp-btn.small{gap:var(--spacing-padding-sys-padding-4);height:
|
|
201
|
+
`, styles: [":host{display:inline-flex}:host(.full-width){display:flex;width:100%}.cmp-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:none;border-radius:var(--border-radius-sys-radius-full);background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;appearance:none;-webkit-appearance:none;transition:box-shadow .15s ease}.cmp-btn.full-width{width:100%}.cmp-btn:before{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.cmp-btn:hover:before{opacity:.08}.cmp-btn:active:before{opacity:.1}.cmp-btn.filled:hover:not(:disabled),.cmp-btn.danger:hover:not(:disabled){box-shadow:0 .25rem 1rem var(--transparent-neutral-sys-black-10),0 .125rem .25rem #00000014}.cmp-btn:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick)}.cmp-btn:focus-visible:before{opacity:.12}.cmp-btn:disabled{pointer-events:none}.cmp-btn:disabled:not(.loading){cursor:not-allowed;background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface);border-color:transparent;box-shadow:none;opacity:.48}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.text:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){background-color:transparent}.cmp-btn.outlined:disabled:not(.loading),.cmp-btn.danger-outlined:disabled:not(.loading){border-color:var(--outline-sys-outline-variant)}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;-webkit-user-select:none;user-select:none;width:1rem;height:1rem}.cmp-btn.large .icon{width:1.25rem;height:1.25rem}.cmp-btn.xlarge .icon{width:1.5rem;height:1.5rem}.icon svg{width:100%;height:100%}.cmp-btn.icon-only{padding:0;aspect-ratio:1}.cmp-btn.icon-only.small{width:2rem}.cmp-btn.icon-only.medium{width:2.5rem}.cmp-btn.icon-only.large{width:3rem}.cmp-btn.icon-only.xlarge{width:3.5rem}.spinner{border:2px solid currentColor;border-right-color:transparent;border-radius:50%;box-sizing:border-box;animation:cmp-btn-spin 1s linear infinite}@keyframes cmp-btn-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.cmp-btn.small{gap:var(--spacing-padding-sys-padding-4);height:32px;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking)}.cmp-btn.medium{gap:var(--spacing-padding-sys-padding-8);height:40px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-16);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking)}.cmp-btn.large{gap:var(--spacing-padding-sys-padding-8);height:48px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.cmp-btn.xlarge{gap:var(--spacing-padding-sys-padding-12);height:56px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.cmp-btn.filled{background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.cmp-btn.tonal{background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cmp-btn.outlined{background-color:transparent;color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cmp-btn.elevated{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);box-shadow:0 .125rem .25rem #00000014,0 .25rem 1rem var(--transparent-neutral-sys-black-10)}.cmp-btn.text{background-color:transparent;color:var(--surface-surface-sys-on-surface);padding-inline:0}.cmp-btn.danger{background-color:var(--error-sys-error);color:var(--error-sys-on-error)}.cmp-btn.danger-outlined{background-color:transparent;color:var(--error-sys-error);border:var(--border-width-sys-stroke-thin) solid var(--error-sys-error-container)}@media(forced-colors:active){.cmp-btn{border:1px solid ButtonText;forced-color-adjust:none}.cmp-btn.filled,.cmp-btn.tonal,.cmp-btn.danger{background:ButtonText;color:ButtonFace}.cmp-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px}.cmp-btn:disabled:not(.loading){color:GrayText;border-color:GrayText;background:ButtonFace}}\n"] }]
|
|
202
202
|
}], propDecorators: { label: [{
|
|
203
203
|
type: Input
|
|
204
204
|
}], variant: [{
|
|
@@ -26,6 +26,11 @@ export class FooterComponent {
|
|
|
26
26
|
* Signal so OnPush picks up DOM-driven updates from async callbacks.
|
|
27
27
|
*/
|
|
28
28
|
isRow = signal(false, ...(ngDevMode ? [{ debugName: "isRow" }] : /* istanbul ignore next */ []));
|
|
29
|
+
/**
|
|
30
|
+
* Indices of link items whose leading divider should be hidden because
|
|
31
|
+
* the item has wrapped onto a new row.
|
|
32
|
+
*/
|
|
33
|
+
hiddenDividerIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenDividerIndices" }] : /* istanbul ignore next */ []));
|
|
29
34
|
/** Combined natural width of copyright + links + gap + padding. */
|
|
30
35
|
breakpoint = 0;
|
|
31
36
|
constructor(el) {
|
|
@@ -33,6 +38,7 @@ export class FooterComponent {
|
|
|
33
38
|
afterNextRender(() => {
|
|
34
39
|
this.measureBreakpoint();
|
|
35
40
|
this.checkLayout();
|
|
41
|
+
requestAnimationFrame(() => this.updateDividers());
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
ngOnChanges() {
|
|
@@ -40,10 +46,14 @@ export class FooterComponent {
|
|
|
40
46
|
requestAnimationFrame(() => {
|
|
41
47
|
this.measureBreakpoint();
|
|
42
48
|
this.checkLayout();
|
|
49
|
+
// Second rAF ensures the layout class change has been rendered before
|
|
50
|
+
// measuring vertical positions for divider visibility.
|
|
51
|
+
requestAnimationFrame(() => this.updateDividers());
|
|
43
52
|
});
|
|
44
53
|
}
|
|
45
54
|
onResize() {
|
|
46
55
|
this.checkLayout();
|
|
56
|
+
requestAnimationFrame(() => this.updateDividers());
|
|
47
57
|
}
|
|
48
58
|
/**
|
|
49
59
|
* Measures the natural widths of the copyright and links elements once and
|
|
@@ -69,15 +79,34 @@ export class FooterComponent {
|
|
|
69
79
|
return;
|
|
70
80
|
this.isRow.set(this.el.nativeElement.offsetWidth >= this.breakpoint);
|
|
71
81
|
}
|
|
82
|
+
/**
|
|
83
|
+
* Compares the vertical positions of adjacent link list items and marks
|
|
84
|
+
* dividers as hidden for any item that has wrapped onto a new row.
|
|
85
|
+
*/
|
|
86
|
+
updateDividers() {
|
|
87
|
+
const items = Array.from(this.el.nativeElement.querySelectorAll('.compsych-footer__links li'));
|
|
88
|
+
if (items.length === 0)
|
|
89
|
+
return;
|
|
90
|
+
const hidden = new Set();
|
|
91
|
+
let prevTop = items[0].getBoundingClientRect().top;
|
|
92
|
+
for (let i = 1; i < items.length; i++) {
|
|
93
|
+
const top = items[i].getBoundingClientRect().top;
|
|
94
|
+
if (Math.round(top) !== Math.round(prevTop)) {
|
|
95
|
+
hidden.add(i);
|
|
96
|
+
}
|
|
97
|
+
prevTop = top;
|
|
98
|
+
}
|
|
99
|
+
this.hiddenDividerIndices.set(hidden);
|
|
100
|
+
}
|
|
72
101
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FooterComponent, isStandalone: true, selector: "compsych-footer", inputs: { links: "links" }, host: { attributes: { "role": "contentinfo" }, listeners: { "window:resize": "onResize()" }, properties: { "class.compsych-footer--row": "isRow()" } }, usesOnChanges: true, ngImport: i0, template: "@if (links.length) {\n <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\n <ul role=\"list\">\n @for (link of links; track link.href; let first = $first) {\n <li>\n @if (!first) {\n <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\n }\n <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\n </li>\n }\n </ul>\n </nav>\n}\n\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;
|
|
102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: FooterComponent, isStandalone: true, selector: "compsych-footer", inputs: { links: "links" }, host: { attributes: { "role": "contentinfo" }, listeners: { "window:resize": "onResize()" }, properties: { "class.compsych-footer--row": "isRow()" } }, usesOnChanges: true, ngImport: i0, template: "@if (links.length) {\r\n <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n <ul role=\"list\">\r\n @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n <li>\r\n @if (!first && !hiddenDividerIndices().has(idx)) {\r\n <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n }\r\n <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n </li>\r\n }\r\n </ul>\r\n </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
74
103
|
}
|
|
75
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FooterComponent, decorators: [{
|
|
76
105
|
type: Component,
|
|
77
106
|
args: [{ selector: 'compsych-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
|
|
78
107
|
role: 'contentinfo',
|
|
79
108
|
'[class.compsych-footer--row]': 'isRow()',
|
|
80
|
-
}, template: "@if (links.length) {\n <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\n <ul role=\"list\">\n @for (link of links; track link.href; let first = $first) {\n <li>\n @if (!first) {\n <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\n }\n <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\n </li>\n }\n </ul>\n </nav>\n}\n\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;
|
|
109
|
+
}, template: "@if (links.length) {\r\n <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n <ul role=\"list\">\r\n @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n <li>\r\n @if (!first && !hiddenDividerIndices().has(idx)) {\r\n <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n }\r\n <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n </li>\r\n }\r\n </ul>\r\n </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n", styles: [":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-padding-sys-padding-8);min-height:var(--sys-size-xl);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-24);background:var(--surface-surface-container-sys-surface-container-lowest);border-top:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);box-sizing:border-box;font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}:host(.compsych-footer--row){flex-direction:row;justify-content:space-between;align-items:center}.compsych-footer__copyright{margin:0;text-align:center;font-weight:var(--label-small-sys-font-weight);overflow-wrap:anywhere}:host(.compsych-footer--row) .compsych-footer__copyright{text-align:left;order:-1}.compsych-footer__links{display:flex;align-items:center}.compsych-footer__links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--spacing-padding-sys-padding-16);row-gap:var(--spacing-padding-sys-padding-8)}.compsych-footer__links li{display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.compsych-footer__link{color:var(--surface-surface-sys-on-surface-variant);font-family:var(--label-small-sys-font-family);font-size:var(--label-small-sys-font-size);font-weight:var(--label-small-sys-font-weight-emphasized);line-height:var(--label-small-sys-line-height);letter-spacing:var(--label-small-sys-tracking);text-decoration:none;white-space:nowrap}.compsych-footer__link:hover{text-decoration:underline}.compsych-footer__link:focus-visible{outline:var(--border-width-sys-stroke-thick) solid var(--add-on-primary-fixed-sys-on-primary-fixed-variant);outline-offset:var(--border-width-sys-stroke-thick);border-radius:var(--border-radius-sys-radius-xs)}.compsych-footer__divider{display:block;width:0;height:var(--sys-size-xs);border-left:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-fixed);flex-shrink:0}\n"] }]
|
|
81
110
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { links: [{
|
|
82
111
|
type: Input
|
|
83
112
|
}], onResize: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/footer/footer.ts","../../../../../../packages/angular/src/lib/footer/footer.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EAET,YAAY,EACZ,KAAK,EAEL,eAAe,EACf,MAAM,GACP,MAAM,eAAe,CAAC;;AAUvB;;;;;;;;GAQG;AAaH,MAAM,OAAO,eAAe;
|
|
1
|
+
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/footer/footer.ts","../../../../../../packages/angular/src/lib/footer/footer.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n HostListener,\r\n Input,\r\n OnChanges,\r\n afterNextRender,\r\n signal,\r\n} from '@angular/core';\r\n\r\n/** A single navigation link in the footer. */\r\nexport interface FooterLink {\r\n /** Text displayed in the link. */\r\n label: string;\r\n /** URL the link navigates to. */\r\n href: string;\r\n}\r\n\r\n/**\r\n * Footer — bottom bar from the ComPsych Design System.\r\n *\r\n * Displays a copyright notice and an optional list of navigation links.\r\n * On initialisation the component measures the natural widths of the copyright\r\n * and links to establish a breakpoint. On every window resize it compares the\r\n * host width against that breakpoint and switches between a row layout\r\n * (copyright left, links right) and a stacked, centered column layout.\r\n */\r\n@Component({\r\n selector: 'compsych-footer',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [],\r\n templateUrl: './footer.html',\r\n styleUrl: './footer.css',\r\n host: {\r\n role: 'contentinfo',\r\n '[class.compsych-footer--row]': 'isRow()',\r\n },\r\n})\r\nexport class FooterComponent implements OnChanges {\r\n /**\r\n * Navigation links rendered alongside the copyright notice.\r\n * The layout switches automatically based on their combined natural width.\r\n */\r\n @Input() links: FooterLink[] = [];\r\n\r\n /**\r\n * Copyright notice generated from the current calendar year.\r\n * Left-aligned in the row layout and centered when stacked.\r\n */\r\n readonly copyright = `Copyright \\u00a9 ${new Date().getFullYear()} ComPsych\\u00ae. All rights reserved.`;\r\n\r\n /**\r\n * Reflects whether the row layout is active.\r\n * Signal so OnPush picks up DOM-driven updates from async callbacks.\r\n */\r\n protected readonly isRow = signal(false);\r\n\r\n /**\r\n * Indices of link items whose leading divider should be hidden because\r\n * the item has wrapped onto a new row.\r\n */\r\n protected readonly hiddenDividerIndices = signal<ReadonlySet<number>>(new Set());\r\n\r\n /** Combined natural width of copyright + links + gap + padding. */\r\n private breakpoint = 0;\r\n\r\n constructor(private readonly el: ElementRef<HTMLElement>) {\r\n afterNextRender(() => {\r\n this.measureBreakpoint();\r\n this.checkLayout();\r\n requestAnimationFrame(() => this.updateDividers());\r\n });\r\n }\r\n\r\n ngOnChanges(): void {\r\n // Wait for Angular to update the DOM with the new links before re-measuring.\r\n requestAnimationFrame(() => {\r\n this.measureBreakpoint();\r\n this.checkLayout();\r\n // Second rAF ensures the layout class change has been rendered before\r\n // measuring vertical positions for divider visibility.\r\n requestAnimationFrame(() => this.updateDividers());\r\n });\r\n }\r\n\r\n @HostListener('window:resize')\r\n protected onResize(): void {\r\n this.checkLayout();\r\n requestAnimationFrame(() => this.updateDividers());\r\n }\r\n\r\n /**\r\n * Measures the natural widths of the copyright and links elements once and\r\n * stores their sum (plus padding and gap) as the layout breakpoint.\r\n */\r\n private measureBreakpoint(): void {\r\n const host = this.el.nativeElement;\r\n const copyrightEl = host.querySelector<HTMLElement>('.compsych-footer__copyright');\r\n const linksEl = host.querySelector<HTMLElement>('.compsych-footer__links');\r\n if (!copyrightEl) return;\r\n\r\n const style = getComputedStyle(host);\r\n const paddingInline = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\r\n const gap = parseFloat(style.columnGap) || 0;\r\n\r\n this.breakpoint =\r\n copyrightEl.scrollWidth +\r\n (linksEl ? linksEl.scrollWidth + gap : 0) +\r\n paddingInline;\r\n }\r\n\r\n /** Switches to the row layout when the host is wide enough for both children. */\r\n private checkLayout(): void {\r\n if (!this.breakpoint) return;\r\n this.isRow.set(this.el.nativeElement.offsetWidth >= this.breakpoint);\r\n }\r\n\r\n /**\r\n * Compares the vertical positions of adjacent link list items and marks\r\n * dividers as hidden for any item that has wrapped onto a new row.\r\n */\r\n private updateDividers(): void {\r\n const items = Array.from(\r\n this.el.nativeElement.querySelectorAll<HTMLElement>('.compsych-footer__links li'),\r\n );\r\n if (items.length === 0) return;\r\n\r\n const hidden = new Set<number>();\r\n let prevTop = items[0].getBoundingClientRect().top;\r\n\r\n for (let i = 1; i < items.length; i++) {\r\n const top = items[i].getBoundingClientRect().top;\r\n if (Math.round(top) !== Math.round(prevTop)) {\r\n hidden.add(i);\r\n }\r\n prevTop = top;\r\n }\r\n\r\n this.hiddenDividerIndices.set(hidden);\r\n }\r\n}\r\n","@if (links.length) {\r\n <nav class=\"compsych-footer__links\" aria-label=\"Footer navigation\">\r\n <ul role=\"list\">\r\n @for (link of links; track link.href; let first = $first; let idx = $index) {\r\n <li>\r\n @if (!first && !hiddenDividerIndices().has(idx)) {\r\n <span class=\"compsych-footer__divider\" aria-hidden=\"true\"></span>\r\n }\r\n <a class=\"compsych-footer__link\" [href]=\"link.href\">{{ link.label }}</a>\r\n </li>\r\n }\r\n </ul>\r\n </nav>\r\n}\r\n\r\n<p class=\"compsych-footer__copyright\">{{ copyright }}</p>\r\n"]}
|
package/lib/footer/footer.d.ts
CHANGED
|
@@ -33,6 +33,11 @@ export declare class FooterComponent implements OnChanges {
|
|
|
33
33
|
* Signal so OnPush picks up DOM-driven updates from async callbacks.
|
|
34
34
|
*/
|
|
35
35
|
protected readonly isRow: import("@angular/core").WritableSignal<boolean>;
|
|
36
|
+
/**
|
|
37
|
+
* Indices of link items whose leading divider should be hidden because
|
|
38
|
+
* the item has wrapped onto a new row.
|
|
39
|
+
*/
|
|
40
|
+
protected readonly hiddenDividerIndices: import("@angular/core").WritableSignal<ReadonlySet<number>>;
|
|
36
41
|
/** Combined natural width of copyright + links + gap + padding. */
|
|
37
42
|
private breakpoint;
|
|
38
43
|
constructor(el: ElementRef<HTMLElement>);
|
|
@@ -45,6 +50,11 @@ export declare class FooterComponent implements OnChanges {
|
|
|
45
50
|
private measureBreakpoint;
|
|
46
51
|
/** Switches to the row layout when the host is wide enough for both children. */
|
|
47
52
|
private checkLayout;
|
|
53
|
+
/**
|
|
54
|
+
* Compares the vertical positions of adjacent link list items and marks
|
|
55
|
+
* dividers as hidden for any item that has wrapped onto a new row.
|
|
56
|
+
*/
|
|
57
|
+
private updateDividers;
|
|
48
58
|
static ɵfac: i0.ɵɵFactoryDeclaration<FooterComponent, never>;
|
|
49
59
|
static ɵcmp: i0.ɵɵComponentDeclaration<FooterComponent, "compsych-footer", never, { "links": { "alias": "links"; "required": false; }; }, {}, never, never, true, never>;
|
|
50
60
|
}
|