@slotted/angular 0.1.0-beta.2 → 0.1.0-beta.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.
- package/docs/app-shell.json +1 -1
- package/docs/button-group.json +1 -0
- package/docs/button-group.md +1 -1
- package/docs/button.json +45 -11
- package/docs/button.md +10 -6
- package/docs/chart.json +7 -0
- package/docs/chart.md +1 -0
- package/docs/currency-field.json +32 -1
- package/docs/currency-field.md +4 -1
- package/docs/dialog.examples.md +20 -0
- package/docs/dialog.json +14 -2
- package/docs/dialog.md +1 -1
- package/docs/list.json +19 -1
- package/docs/list.md +3 -1
- package/docs/popover.json +1 -1
- package/docs/segmented-control.json +29 -1
- package/docs/segmented-control.md +17 -1
- package/docs/skills/theme-app/SKILL.md +5 -0
- package/docs/split-button.json +1 -0
- package/docs/split-button.md +1 -1
- package/docs/stat-card.json +1 -0
- package/docs/stat-card.md +1 -1
- package/docs/table.examples.md +1 -1
- package/docs/table.json +70 -1
- package/docs/table.md +10 -1
- package/docs/toggle-group.json +14 -3
- package/docs/toggle-group.md +3 -3
- package/docs/toggle.json +12 -3
- package/docs/toggle.md +3 -3
- package/docs/tokens.md +25 -1
- package/docs/tour.json +1 -1
- package/fesm2022/slotted-angular-app-shell.mjs +48 -16
- package/fesm2022/slotted-angular-app-shell.mjs.map +1 -1
- package/fesm2022/slotted-angular-button-group.mjs +4 -4
- package/fesm2022/slotted-angular-button-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-button.mjs +51 -19
- package/fesm2022/slotted-angular-button.mjs.map +1 -1
- package/fesm2022/slotted-angular-cascader.mjs +1 -1
- package/fesm2022/slotted-angular-cascader.mjs.map +1 -1
- package/fesm2022/slotted-angular-chart.mjs +41 -20
- package/fesm2022/slotted-angular-chart.mjs.map +1 -1
- package/fesm2022/slotted-angular-column-manager.mjs +1 -1
- package/fesm2022/slotted-angular-column-manager.mjs.map +1 -1
- package/fesm2022/slotted-angular-currency-field.mjs +59 -8
- package/fesm2022/slotted-angular-currency-field.mjs.map +1 -1
- package/fesm2022/slotted-angular-dashboard-grid.mjs +1 -1
- package/fesm2022/slotted-angular-dashboard-grid.mjs.map +1 -1
- package/fesm2022/slotted-angular-data-grid.mjs +2 -2
- package/fesm2022/slotted-angular-data-grid.mjs.map +1 -1
- package/fesm2022/slotted-angular-data-list.mjs +2 -2
- package/fesm2022/slotted-angular-data-list.mjs.map +1 -1
- package/fesm2022/slotted-angular-dialog.mjs +4 -4
- package/fesm2022/slotted-angular-dialog.mjs.map +1 -1
- package/fesm2022/slotted-angular-event-calendar.mjs +1 -1
- package/fesm2022/slotted-angular-event-calendar.mjs.map +1 -1
- package/fesm2022/slotted-angular-filter-bar.mjs +8 -8
- package/fesm2022/slotted-angular-filter-bar.mjs.map +1 -1
- package/fesm2022/slotted-angular-import-export-center.mjs +1 -1
- package/fesm2022/slotted-angular-import-export-center.mjs.map +1 -1
- package/fesm2022/slotted-angular-list.mjs +28 -17
- package/fesm2022/slotted-angular-list.mjs.map +1 -1
- package/fesm2022/slotted-angular-markdown.mjs +1 -1
- package/fesm2022/slotted-angular-markdown.mjs.map +1 -1
- package/fesm2022/slotted-angular-notification-center.mjs +1 -1
- package/fesm2022/slotted-angular-notification-center.mjs.map +1 -1
- package/fesm2022/slotted-angular-saved-views.mjs +1 -1
- package/fesm2022/slotted-angular-saved-views.mjs.map +1 -1
- package/fesm2022/slotted-angular-segmented-control.mjs +25 -5
- package/fesm2022/slotted-angular-segmented-control.mjs.map +1 -1
- package/fesm2022/slotted-angular-split-button.mjs +4 -4
- package/fesm2022/slotted-angular-split-button.mjs.map +1 -1
- package/fesm2022/slotted-angular-stat-card.mjs +2 -2
- package/fesm2022/slotted-angular-stat-card.mjs.map +1 -1
- package/fesm2022/slotted-angular-table.mjs +94 -7
- package/fesm2022/slotted-angular-table.mjs.map +1 -1
- package/fesm2022/slotted-angular-toggle-group.mjs +17 -4
- package/fesm2022/slotted-angular-toggle-group.mjs.map +1 -1
- package/fesm2022/slotted-angular-toggle.mjs +2 -2
- package/fesm2022/slotted-angular-toggle.mjs.map +1 -1
- package/fesm2022/slotted-angular-tour.mjs +1 -1
- package/fesm2022/slotted-angular-tour.mjs.map +1 -1
- package/fesm2022/slotted-angular-transfer.mjs +1 -1
- package/fesm2022/slotted-angular-transfer.mjs.map +1 -1
- package/fesm2022/slotted-angular-wizard.mjs +1 -1
- package/fesm2022/slotted-angular-wizard.mjs.map +1 -1
- package/package.json +3 -3
- package/types/slotted-angular-app-shell.d.ts +6 -0
- package/types/slotted-angular-app-shell.d.ts.map +1 -1
- package/types/slotted-angular-button-group.d.ts +1 -1
- package/types/slotted-angular-button.d.ts +33 -13
- package/types/slotted-angular-button.d.ts.map +1 -1
- package/types/slotted-angular-chart.d.ts +9 -0
- package/types/slotted-angular-chart.d.ts.map +1 -1
- package/types/slotted-angular-currency-field.d.ts +25 -3
- package/types/slotted-angular-currency-field.d.ts.map +1 -1
- package/types/slotted-angular-list.d.ts +42 -27
- package/types/slotted-angular-list.d.ts.map +1 -1
- package/types/slotted-angular-segmented-control.d.ts +15 -2
- package/types/slotted-angular-segmented-control.d.ts.map +1 -1
- package/types/slotted-angular-split-button.d.ts +2 -2
- package/types/slotted-angular-table.d.ts +43 -3
- package/types/slotted-angular-table.d.ts.map +1 -1
- package/types/slotted-angular-toggle-group.d.ts +8 -2
- package/types/slotted-angular-toggle-group.d.ts.map +1 -1
- package/types/slotted-angular-toggle.d.ts +1 -1
- package/types/slotted-angular-toggle.d.ts.map +1 -1
|
@@ -84,7 +84,7 @@ class SlButtonGroup {
|
|
|
84
84
|
flow = computed(() => this.orientation() ?? 'horizontal', /* @ts-ignore */
|
|
85
85
|
...(ngDevMode ? [{ debugName: "flow" }] : /* istanbul ignore next */ []));
|
|
86
86
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlButtonGroup, isStandalone: true, selector: "[slButtonGroup]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "button-group", "data-part": "root" }, properties: { "attr.role": "role", "attr.data-orientation": "orientation() ?? null", "attr.data-align": "align() ?? null", "attr.data-justify": "justify() ?? null", "attr.data-full-width": "fullWidth() ? \"\" : null" } }, providers: [provideGroupPaint()], exportAs: ["slButtonGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlButtonGroup, isStandalone: true, selector: "[slButtonGroup]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "button-group", "data-part": "root" }, properties: { "attr.role": "role", "attr.data-orientation": "orientation() ?? null", "attr.data-align": "align() ?? null", "attr.data-justify": "justify() ?? null", "attr.data-full-width": "fullWidth() ? \"\" : null" } }, providers: [provideGroupPaint()], exportAs: ["slButtonGroup"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=neutral]{--_seam: var(--slotted-tone-neutral-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
88
88
|
}
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonGroup, decorators: [{
|
|
90
90
|
type: Component,
|
|
@@ -96,7 +96,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
|
|
|
96
96
|
'[attr.data-align]': 'align() ?? null',
|
|
97
97
|
'[attr.data-justify]': 'justify() ?? null',
|
|
98
98
|
'[attr.data-full-width]': 'fullWidth() ? "" : null',
|
|
99
|
-
}, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"] }]
|
|
99
|
+
}, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=neutral]{--_seam: var(--slotted-tone-neutral-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"] }]
|
|
100
100
|
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
101
101
|
|
|
102
102
|
/**
|
|
@@ -126,7 +126,7 @@ class SlButtonGroupSeparator {
|
|
|
126
126
|
}, /* @ts-ignore */
|
|
127
127
|
...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
|
|
128
128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonGroupSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlButtonGroupSeparator, isStandalone: true, selector: "[slButtonGroupSeparator]", inputs: { decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "separator" }, properties: { "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.aria-orientation": "axis()" } }, exportAs: ["slButtonGroupSeparator"], ngImport: i0, template: '', isInline: true, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlButtonGroupSeparator, isStandalone: true, selector: "[slButtonGroupSeparator]", inputs: { decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "separator" }, properties: { "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-hidden": "decorative() ? \"true\" : null", "attr.aria-orientation": "axis()" } }, exportAs: ["slButtonGroupSeparator"], ngImport: i0, template: '', isInline: true, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=neutral]{--_seam: var(--slotted-tone-neutral-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
130
130
|
}
|
|
131
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlButtonGroupSeparator, decorators: [{
|
|
132
132
|
type: Component,
|
|
@@ -135,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
|
|
|
135
135
|
'[attr.role]': 'decorative() ? "none" : "separator"',
|
|
136
136
|
'[attr.aria-hidden]': 'decorative() ? "true" : null',
|
|
137
137
|
'[attr.aria-orientation]': 'axis()',
|
|
138
|
-
}, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"] }]
|
|
138
|
+
}, styles: ["@layer slotted.components{[data-ui=button-group]{--_radius: var(--slotted-control-radius, 4px);--_overlap: calc(-1 * var(--slotted-control-border-width, 1px));--_join-main: var(--_radius);--_join-cross: 0;--_overlap-inline: var(--_overlap);--_overlap-block: 0;align-items:stretch;display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:0;isolation:isolate;min-inline-size:0}[data-ui=button-group]:empty{display:none}[data-ui=button-group][data-orientation=vertical]{--_join-main: 0;--_join-cross: var(--_radius);--_overlap-inline: 0;--_overlap-block: var(--_overlap);flex-direction:column}[data-ui=button-group][data-align=start]{align-items:start}[data-ui=button-group][data-align=center]{align-items:center}[data-ui=button-group][data-align=end]{align-items:end}[data-ui=button-group][data-align=stretch]{align-items:stretch}[data-ui=button-group][data-justify]{display:flex;inline-size:100%}[data-ui=button-group][data-justify=start]{justify-content:start}[data-ui=button-group][data-justify=center]{justify-content:center}[data-ui=button-group][data-justify=end]{justify-content:end}[data-ui=button-group][data-justify=between]{justify-content:space-between}[data-ui=button-group][data-full-width]{display:flex;inline-size:100%}[data-ui=button-group][data-full-width]:not([data-orientation=vertical])>:not([data-part=separator]){flex:1 1 0;min-inline-size:0}[data-ui=button-group]>:not([data-part=separator]):not([data-shape]){min-inline-size:0}[data-ui=button-group]>[data-shape]{flex:none}[data-ui=button-group]>:not([data-ui=button-group]){border-radius:0}[data-ui=button-group]>:not(:first-child):not([data-part=separator]){margin-block-start:var(--_overlap-block);margin-inline-start:var(--_overlap-inline)}[data-ui=button-group]>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group]>:only-child{border-radius:var(--_radius)}[data-ui=button-group] [data-ui=button-group]>:not([data-part=separator]){border-radius:0}[data-ui=button-group]>[data-ui=button-group]:first-child>:first-child{border-end-start-radius:var(--_join-main);border-start-end-radius:var(--_join-cross);border-start-start-radius:var(--_radius)}[data-ui=button-group]>[data-ui=button-group]:last-child>:last-child{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_join-cross);border-start-end-radius:var(--_join-main)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=outline]:disabled{border-color:var(--slotted-control-border-color, ButtonBorder)}[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-pressed],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost][data-disabled],[data-ui=button-group][data-part=root]>[data-ui=button][data-variant=ghost]:disabled{border-color:transparent}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-inline-end-color:transparent}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button]:not(:last-child),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button-group]:not(:last-child)>[data-ui=button]:last-child{border-block-end-color:transparent}[data-ui=button-group]>[data-tone=accent]{--_seam: var(--slotted-tone-accent-solid-active)}[data-ui=button-group]>[data-tone=secondary]{--_seam: var(--slotted-tone-secondary-solid-active)}[data-ui=button-group]>[data-tone=neutral]{--_seam: var(--slotted-tone-neutral-solid-active)}[data-ui=button-group]>[data-tone=success]{--_seam: var(--slotted-tone-success-solid-active)}[data-ui=button-group]>[data-tone=warning]{--_seam: var(--slotted-tone-warning-solid-active)}[data-ui=button-group]>[data-tone=danger]{--_seam: var(--slotted-tone-danger-solid-active)}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-ui=button][data-variant=solid]:not(:first-child){border-inline-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-ui=button][data-variant=solid]:not(:first-child){border-block-start-color:var(--_seam, ButtonBorder)}[data-ui=button-group]>*:focus-visible,[data-ui=button-group]>*:has(:focus-visible){z-index:1}@media(forced-colors:active){[data-ui=button-group][data-part=root]>[data-ui=button][data-pressed]{border-color:Highlight}}[data-ui=button-group]>[data-part=separator]{background:none;block-size:0;border:0;flex:none;inline-size:0;margin:0}[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root]:not([data-orientation=vertical])>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-inline-start-color:var(--slotted-text-muted, ButtonBorder)}[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button]:not([data-variant=solid]),[data-ui=button-group][data-part=root][data-orientation=vertical]>[data-part=separator]+[data-ui=button-group]>[data-ui=button]:first-child:not([data-variant=solid]){border-block-start-color:var(--slotted-text-muted, ButtonBorder)}}\n"] }]
|
|
139
139
|
}], propDecorators: { decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }] } });
|
|
140
140
|
|
|
141
141
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slotted-angular-button-group.mjs","sources":["../../button-group/src/button-group.ts","../../button-group/src/button-group-separator.ts","../../button-group/src/slotted-angular-button-group.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n HostAttributeToken,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { BUTTON_DEFAULTS_TOKEN } from '@slotted/angular/button';\nimport type {\n ButtonDefaults,\n ButtonSize,\n ButtonTone,\n ButtonVariant,\n} from '@slotted/angular/button';\n\nimport type {\n ButtonGroupAlign,\n ButtonGroupJustify,\n ButtonGroupOrientation,\n} from './button-group.types';\n\n/**\n * The three axes the group hands down to the buttons inside it, through the\n * button family's own defaults token rather than through a second channel of\n * this family's invention. That is what keeps an explicit input on a button\n * winning over the group, because it is the rule `button` already implements.\n *\n * The value is read through getters so that a button's `computed` tracks the\n * group's signals: a plain snapshot would fix the paint at the moment the\n * first button was created and never move again.\n */\nfunction provideGroupPaint() {\n return {\n provide: BUTTON_DEFAULTS_TOKEN,\n useFactory: (): ButtonDefaults => {\n const group = inject(SlButtonGroup);\n const inherited = inject(BUTTON_DEFAULTS_TOKEN, { skipSelf: true });\n\n return {\n get size() {\n return group.size() ?? inherited.size;\n },\n get tone() {\n return group.tone() ?? inherited.tone;\n },\n get variant() {\n return group.variant() ?? inherited.variant;\n },\n };\n },\n };\n}\n\n/**\n * A set of related actions joined into one shape. The group arranges what the\n * consumer wrote and changes the semantics of nothing inside it: every button\n * keeps its own role, its own state and its own place in the tab sequence.\n *\n * One shape and no other: the buttons share their edges, one border is painted\n * in each shared column, and only the two ends of the bar are rounded. There\n * is no input that spaces the buttons apart and none that unjoins them — a\n * spaced row of buttons is `slInline` or `slStack` holding buttons.\n *\n * It is `role=\"group\"` and not `role=\"toolbar\"`, and the difference is a\n * keyboard model rather than a name. A toolbar is one tab stop with arrow-key\n * navigation between its controls, which is the `toolbar` family. A consumer\n * who wrote `role` on the element keeps it, read before the host binding is\n * written, so the role and the model are never confused by accident.\n *\n * There is no `label` input. The element already accepts `aria-label` and\n * `aria-labelledby`, and a second way to name one thing is a second thing to\n * get wrong.\n */\n@Component({\n selector: '[slButtonGroup]',\n standalone: true,\n exportAs: 'slButtonGroup',\n template: '<ng-content></ng-content>',\n styleUrl: '../../../styles/src/button-group/button-group.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [provideGroupPaint()],\n host: {\n 'data-ui': 'button-group',\n 'data-part': 'root',\n '[attr.role]': 'role',\n '[attr.data-orientation]': 'orientation() ?? null',\n '[attr.data-align]': 'align() ?? null',\n '[attr.data-justify]': 'justify() ?? null',\n '[attr.data-full-width]': 'fullWidth() ? \"\" : null',\n },\n})\nexport class SlButtonGroup {\n /** Positions the buttons across the flow. */\n readonly align = input<ButtonGroupAlign>();\n /** Positions the buttons along the flow, which makes the group hold the line. */\n readonly justify = input<ButtonGroupJustify>();\n readonly orientation = input<ButtonGroupOrientation>();\n /** The group holds the line and its buttons share it in equal segments. */\n readonly fullWidth = input(false, { transform: booleanAttribute });\n\n readonly size = input<ButtonSize | undefined>(undefined);\n readonly tone = input<ButtonTone | undefined>(undefined);\n readonly variant = input<ButtonVariant | undefined>(undefined);\n\n /**\n * A static attribute the consumer wrote survives the host binding, which is\n * how `role=\"toolbar\"` stays possible on an element this family would\n * otherwise call a group.\n *\n * `role=\"\"` is the way out: ARIA reads an empty role as \"use the element's\n * implicit one\", so a `nav` or a `section` carrying this directive keeps the\n * semantics it was chosen for instead of being flattened to a group.\n */\n private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n protected readonly role = this.writtenRole === '' ? null : (this.writtenRole ?? 'group');\n\n /** What the rule between two runs turns with. */\n readonly flow = computed(() => this.orientation() ?? 'horizontal');\n}\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SlButtonGroup } from './button-group';\n\n/**\n * A rule between two runs of actions. It takes no room at all: the bar is one\n * shape, and a rule is not licence to cut it — what the rule marks is painted\n * in the column the shared edge already occupies, one step stronger than the\n * seams around it, so the boundary reads without the bar coming apart. A\n * filled run keeps its seam, which is the darkest step of its own tone and the\n * strongest line that bar has.\n *\n * Its axis is the group's, mirrored: a rule across a row is vertical. It is\n * derived rather than accepted, because a rule that could disagree with the\n * group it divides is a rule that eventually does.\n */\n@Component({\n selector: '[slButtonGroupSeparator]',\n standalone: true,\n exportAs: 'slButtonGroupSeparator',\n template: '',\n styleUrl: '../../../styles/src/button-group/button-group.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'data-part': 'separator',\n '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n '[attr.aria-hidden]': 'decorative() ? \"true\" : null',\n '[attr.aria-orientation]': 'axis()',\n },\n})\nexport class SlButtonGroupSeparator {\n private readonly group = inject(SlButtonGroup, { optional: true });\n\n /**\n * Drops the rule out of the accessibility tree. Use it when the boundary is\n * cosmetic; a boundary that carries meaning is better said by a nested group\n * with a name of its own.\n */\n readonly decorative = input(false, { transform: booleanAttribute });\n\n protected readonly axis = computed(() => {\n if (this.decorative()) return null;\n return (this.group?.flow() ?? 'horizontal') === 'vertical' ? 'horizontal' : 'vertical';\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"slotted-angular-button-group.mjs","sources":["../../button-group/src/button-group.ts","../../button-group/src/button-group-separator.ts","../../button-group/src/slotted-angular-button-group.ts"],"sourcesContent":["import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n HostAttributeToken,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { BUTTON_DEFAULTS_TOKEN } from '@slotted/angular/button';\nimport type {\n ButtonDefaults,\n ButtonSize,\n ButtonTone,\n ButtonVariant,\n} from '@slotted/angular/button';\n\nimport type {\n ButtonGroupAlign,\n ButtonGroupJustify,\n ButtonGroupOrientation,\n} from './button-group.types';\n\n/**\n * The three axes the group hands down to the buttons inside it, through the\n * button family's own defaults token rather than through a second channel of\n * this family's invention. That is what keeps an explicit input on a button\n * winning over the group, because it is the rule `button` already implements.\n *\n * The value is read through getters so that a button's `computed` tracks the\n * group's signals: a plain snapshot would fix the paint at the moment the\n * first button was created and never move again.\n */\nfunction provideGroupPaint() {\n return {\n provide: BUTTON_DEFAULTS_TOKEN,\n useFactory: (): ButtonDefaults => {\n const group = inject(SlButtonGroup);\n const inherited = inject(BUTTON_DEFAULTS_TOKEN, { skipSelf: true });\n\n return {\n get size() {\n return group.size() ?? inherited.size;\n },\n get tone() {\n return group.tone() ?? inherited.tone;\n },\n get variant() {\n return group.variant() ?? inherited.variant;\n },\n };\n },\n };\n}\n\n/**\n * A set of related actions joined into one shape. The group arranges what the\n * consumer wrote and changes the semantics of nothing inside it: every button\n * keeps its own role, its own state and its own place in the tab sequence.\n *\n * One shape and no other: the buttons share their edges, one border is painted\n * in each shared column, and only the two ends of the bar are rounded. There\n * is no input that spaces the buttons apart and none that unjoins them — a\n * spaced row of buttons is `slInline` or `slStack` holding buttons.\n *\n * It is `role=\"group\"` and not `role=\"toolbar\"`, and the difference is a\n * keyboard model rather than a name. A toolbar is one tab stop with arrow-key\n * navigation between its controls, which is the `toolbar` family. A consumer\n * who wrote `role` on the element keeps it, read before the host binding is\n * written, so the role and the model are never confused by accident.\n *\n * There is no `label` input. The element already accepts `aria-label` and\n * `aria-labelledby`, and a second way to name one thing is a second thing to\n * get wrong.\n */\n@Component({\n selector: '[slButtonGroup]',\n standalone: true,\n exportAs: 'slButtonGroup',\n template: '<ng-content></ng-content>',\n styleUrl: '../../../styles/src/button-group/button-group.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [provideGroupPaint()],\n host: {\n 'data-ui': 'button-group',\n 'data-part': 'root',\n '[attr.role]': 'role',\n '[attr.data-orientation]': 'orientation() ?? null',\n '[attr.data-align]': 'align() ?? null',\n '[attr.data-justify]': 'justify() ?? null',\n '[attr.data-full-width]': 'fullWidth() ? \"\" : null',\n },\n})\nexport class SlButtonGroup {\n /** Positions the buttons across the flow. */\n readonly align = input<ButtonGroupAlign>();\n /** Positions the buttons along the flow, which makes the group hold the line. */\n readonly justify = input<ButtonGroupJustify>();\n readonly orientation = input<ButtonGroupOrientation>();\n /** The group holds the line and its buttons share it in equal segments. */\n readonly fullWidth = input(false, { transform: booleanAttribute });\n\n readonly size = input<ButtonSize | undefined>(undefined);\n readonly tone = input<ButtonTone | undefined>(undefined);\n readonly variant = input<ButtonVariant | undefined>(undefined);\n\n /**\n * A static attribute the consumer wrote survives the host binding, which is\n * how `role=\"toolbar\"` stays possible on an element this family would\n * otherwise call a group.\n *\n * `role=\"\"` is the way out: ARIA reads an empty role as \"use the element's\n * implicit one\", so a `nav` or a `section` carrying this directive keeps the\n * semantics it was chosen for instead of being flattened to a group.\n */\n private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n protected readonly role = this.writtenRole === '' ? null : (this.writtenRole ?? 'group');\n\n /** What the rule between two runs turns with. */\n readonly flow = computed(() => this.orientation() ?? 'horizontal');\n}\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { SlButtonGroup } from './button-group';\n\n/**\n * A rule between two runs of actions. It takes no room at all: the bar is one\n * shape, and a rule is not licence to cut it — what the rule marks is painted\n * in the column the shared edge already occupies, one step stronger than the\n * seams around it, so the boundary reads without the bar coming apart. A\n * filled run keeps its seam, which is the darkest step of its own tone and the\n * strongest line that bar has.\n *\n * Its axis is the group's, mirrored: a rule across a row is vertical. It is\n * derived rather than accepted, because a rule that could disagree with the\n * group it divides is a rule that eventually does.\n */\n@Component({\n selector: '[slButtonGroupSeparator]',\n standalone: true,\n exportAs: 'slButtonGroupSeparator',\n template: '',\n styleUrl: '../../../styles/src/button-group/button-group.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'data-part': 'separator',\n '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n '[attr.aria-hidden]': 'decorative() ? \"true\" : null',\n '[attr.aria-orientation]': 'axis()',\n },\n})\nexport class SlButtonGroupSeparator {\n private readonly group = inject(SlButtonGroup, { optional: true });\n\n /**\n * Drops the rule out of the accessibility tree. Use it when the boundary is\n * cosmetic; a boundary that carries meaning is better said by a nested group\n * with a name of its own.\n */\n readonly decorative = input(false, { transform: booleanAttribute });\n\n protected readonly axis = computed(() => {\n if (this.decorative()) return null;\n return (this.group?.flow() ?? 'horizontal') === 'vertical' ? 'horizontal' : 'vertical';\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|