@mozaic-ds/angular 2.0.34 → 2.0.35
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.
|
@@ -2935,20 +2935,26 @@ class MozSegmentedControlComponent {
|
|
|
2935
2935
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2936
2936
|
size = input('s', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2937
2937
|
full = input(false, { ...(ngDevMode ? { debugName: "full" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2938
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2938
2939
|
ariaLabel = input('Segmented control', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2939
2940
|
selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
2940
2941
|
change = output();
|
|
2941
2942
|
classes = computed(() => ({
|
|
2942
2943
|
'segmented-control': true,
|
|
2944
|
+
'segmented-control--disabled': this.disabled(),
|
|
2943
2945
|
'segmented-control--m': this.size() === 'm',
|
|
2944
2946
|
'segmented-control--full': this.full(),
|
|
2945
2947
|
}), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2946
2948
|
segmentClasses = (index) => computed(() => ({
|
|
2949
|
+
'segmented-control__segment--disabled': this.disabled() || !!this.items()[index]?.disabled,
|
|
2947
2950
|
'segmented-control__segment': true,
|
|
2948
2951
|
'segmented-control__segment--selected': index === this.selectedIndex(),
|
|
2949
2952
|
}));
|
|
2950
2953
|
buttons = viewChildren('segBtn', ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
2951
2954
|
onSelect(index) {
|
|
2955
|
+
if (this.disabled() || this.items()[index]?.disabled) {
|
|
2956
|
+
return;
|
|
2957
|
+
}
|
|
2952
2958
|
const item = this.items()[index];
|
|
2953
2959
|
this.selectedIndex.set(index);
|
|
2954
2960
|
this.change.emit({ index, value: item.value });
|
|
@@ -2960,12 +2966,12 @@ class MozSegmentedControlComponent {
|
|
|
2960
2966
|
btn?.focus();
|
|
2961
2967
|
}
|
|
2962
2968
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2963
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozSegmentedControlComponent, isStandalone: true, selector: "moz-segmented-control", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", change: "change" }, viewQueries: [{ propertyName: "buttons", predicate: ["segBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n
|
|
2969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: MozSegmentedControlComponent, isStandalone: true, selector: "moz-segmented-control", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", change: "change" }, viewQueries: [{ propertyName: "buttons", predicate: ["segBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n #segBtn\n type=\"button\"\n [class]=\"segmentClasses(i)()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"disabled() || !!item.disabled\"\n [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n [disabled]=\"disabled() || !!item.disabled\"\n (click)=\"onSelect(i)\"\n >\n {{ item.label }}\n </button>\n }\n</div>\n", styles: [".mc-segmented-control,.segmented-control{display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:.25rem;box-sizing:border-box;gap:.25rem}.mc-segmented-control__segment,.segmented-control__segment{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color .3s ease;white-space:nowrap}.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover,.segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover{background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, .05))}.mc-segmented-control__segment--selected,.segmented-control__segment--selected{color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63)}.mc-segmented-control__segment:focus-visible,.segmented-control__segment: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-segmented-control--m,.segmented-control--m{height:3rem;padding:.5rem}.mc-segmented-control--m .mc-segmented-control__segment,.segmented-control--m .mc-segmented-control__segment,.mc-segmented-control--m .segmented-control__segment,.segmented-control--m .segmented-control__segment{height:2rem}.mc-segmented-control--full,.segmented-control--full{display:flex}.segmented-control--disabled{cursor:not-allowed}.segmented-control__segment:disabled{color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.segmented-control__segment:disabled:not(.segmented-control__segment--selected):hover{background-color:transparent}.segmented-control__segment:disabled.segmented-control__segment--selected{background-color:var(--button-state-disabled-background, #d9d9d9);color:var(--button-state-disabled-color, #737373)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2964
2970
|
}
|
|
2965
2971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: MozSegmentedControlComponent, decorators: [{
|
|
2966
2972
|
type: Component,
|
|
2967
|
-
args: [{ selector: 'moz-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n
|
|
2968
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], change: [{ type: i0.Output, args: ["change"] }], buttons: [{ type: i0.ViewChildren, args: ['segBtn', { isSignal: true }] }] } });
|
|
2973
|
+
args: [{ selector: 'moz-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n #segBtn\n type=\"button\"\n [class]=\"segmentClasses(i)()\"\n role=\"tab\"\n [attr.aria-selected]=\"i === selectedIndex()\"\n [attr.aria-disabled]=\"disabled() || !!item.disabled\"\n [attr.tabindex]=\"i === selectedIndex() ? 0 : -1\"\n [disabled]=\"disabled() || !!item.disabled\"\n (click)=\"onSelect(i)\"\n >\n {{ item.label }}\n </button>\n }\n</div>\n", styles: [".mc-segmented-control,.segmented-control{display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:.25rem;box-sizing:border-box;gap:.25rem}.mc-segmented-control__segment,.segmented-control__segment{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color .3s ease;white-space:nowrap}.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover,.segmented-control__segment:not(.mc-segmented-control__segment--selected):not(.segmented-control__segment--selected):hover{background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, .05))}.mc-segmented-control__segment--selected,.segmented-control__segment--selected{color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63)}.mc-segmented-control__segment:focus-visible,.segmented-control__segment: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-segmented-control--m,.segmented-control--m{height:3rem;padding:.5rem}.mc-segmented-control--m .mc-segmented-control__segment,.segmented-control--m .mc-segmented-control__segment,.mc-segmented-control--m .segmented-control__segment,.segmented-control--m .segmented-control__segment{height:2rem}.mc-segmented-control--full,.segmented-control--full{display:flex}.segmented-control--disabled{cursor:not-allowed}.segmented-control__segment:disabled{color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.segmented-control__segment:disabled:not(.segmented-control__segment--selected):hover{background-color:transparent}.segmented-control__segment:disabled.segmented-control__segment--selected{background-color:var(--button-state-disabled-background, #d9d9d9);color:var(--button-state-disabled-color, #737373)}\n"] }]
|
|
2974
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], change: [{ type: i0.Output, args: ["change"] }], buttons: [{ type: i0.ViewChildren, args: ['segBtn', { isSignal: true }] }] } });
|
|
2969
2975
|
|
|
2970
2976
|
class MozAccordionHeaderComponent {
|
|
2971
2977
|
tpl = viewChild('tpl', { ...(ngDevMode ? { debugName: "tpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|