@lilydesignsystem/angular-picker-bar 0.1.0
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/README.md +128 -0
- package/fesm2022/lilydesignsystem-angular-picker-bar.mjs +309 -0
- package/fesm2022/lilydesignsystem-angular-picker-bar.mjs.map +1 -0
- package/package.json +55 -0
- package/types/lilydesignsystem-angular-picker-bar.d.ts +106 -0
- package/types/lilydesignsystem-angular-picker-bar.d.ts.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Lily Design System™ — Angular PickerBar
|
|
2
|
+
|
|
3
|
+
A single page-header row that composes four of the Lily
|
|
4
|
+
[`*-picker` helpers](../index.md) — theme, locale, text size, and
|
|
5
|
+
share — with two catalog-wide defaults pre-wired, so you can drop one
|
|
6
|
+
component into a header instead of assembling and configuring four.
|
|
7
|
+
|
|
8
|
+
`motion-picker` and `date-time-picker` are not part of the bar: motion
|
|
9
|
+
has no natural spot next to the other three header preferences, and
|
|
10
|
+
`date-time-picker` is a form control, not a header control.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
npm install @lilydesignsystem/angular-picker-bar
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`@lilydesignsystem/angular-theme-picker`, `-locale-picker`,
|
|
19
|
+
`-text-size-picker`, and `-share-picker` install automatically as
|
|
20
|
+
regular dependencies — `PickerBar` is a thin wrapper around them, not
|
|
21
|
+
a reimplementation.
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { Component } from "@angular/core";
|
|
27
|
+
import { PickerBar } from "@lilydesignsystem/angular-picker-bar";
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
selector: "app-header",
|
|
31
|
+
standalone: true,
|
|
32
|
+
imports: [PickerBar],
|
|
33
|
+
template: `
|
|
34
|
+
<lily-picker-bar
|
|
35
|
+
[labels]="{ theme: 'Theme', locale: 'Language', textSize: 'Text size', share: 'Share' }"
|
|
36
|
+
themesUrl="/assets/themes/"
|
|
37
|
+
[locales]="['en', 'cy', 'gd', 'ga']"
|
|
38
|
+
[shareTargets]="[{ id: 'email', label: 'Email', href: (url, title) => 'mailto:?subject=' + title + '&body=' + url }]"
|
|
39
|
+
/>
|
|
40
|
+
`,
|
|
41
|
+
})
|
|
42
|
+
export class HeaderComponent {}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
That's a complete, working header row: 45 themes, four locales, the
|
|
46
|
+
seven-step text-size scale, and one share destination plus copy-to-URL
|
|
47
|
+
if you add `[copyLabel]="'Copy link'"`.
|
|
48
|
+
|
|
49
|
+
## Defaults
|
|
50
|
+
|
|
51
|
+
- **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
|
|
52
|
+
theme slugs, alphabetical, with the 8 United Kingdom / United States
|
|
53
|
+
government themes moved to their own alphabetical group at the
|
|
54
|
+
bottom. Pass your own `[themes]` array to override.
|
|
55
|
+
- **`sizes`** defaults to `DEFAULT_SIZES` — the seven-step scale
|
|
56
|
+
`largest`, `larger`, `large`, `normal`, `small`, `smaller`,
|
|
57
|
+
`smallest` — and the text-size picker starts on `normal`. Pass your
|
|
58
|
+
own `[sizes]` array (and `[textSizeDefaultValue]="'…'"` for a
|
|
59
|
+
different starting point) to override.
|
|
60
|
+
|
|
61
|
+
Both are exported as named constants:
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
import { DEFAULT_THEMES, DEFAULT_SIZES } from "@lilydesignsystem/angular-picker-bar";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Overriding one picker's extra options
|
|
68
|
+
|
|
69
|
+
Unlike the canonical Svelte contract's per-picker `*Props` bag,
|
|
70
|
+
Angular inputs are always named bindings — there is no generic spread
|
|
71
|
+
onto a child component's inputs. `PickerBar` flattens the most common
|
|
72
|
+
extras onto its own inputs, prefixed by which picker they belong to:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<lily-picker-bar
|
|
76
|
+
[labels]="labels"
|
|
77
|
+
themesUrl="/assets/themes/"
|
|
78
|
+
[locales]="['en', 'cy']"
|
|
79
|
+
themeStorageKey="lily-theme"
|
|
80
|
+
[themeDetectFromSystem]="true"
|
|
81
|
+
localeStorageKey="lily-locale"
|
|
82
|
+
[localeDetectFromNavigator]="true"
|
|
83
|
+
textSizeStorageKey="lily-text-size"
|
|
84
|
+
copyLabel="Copy link"
|
|
85
|
+
copiedLabel="Copied"
|
|
86
|
+
/>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Two-way bind a picker's current value with the matching `model()`
|
|
90
|
+
input:
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<lily-picker-bar ... [(themeValue)]="currentTheme" />
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
For anything not flattened here (a custom icon template, for
|
|
97
|
+
instance), compose the four wrapped pickers directly instead of using
|
|
98
|
+
`PickerBar` — see each picker's own `index.md`.
|
|
99
|
+
|
|
100
|
+
## Styling
|
|
101
|
+
|
|
102
|
+
`PickerBar` renders no CSS of its own beyond the `picker-bar` root
|
|
103
|
+
wrapper — style each child through its own package's class hooks
|
|
104
|
+
(`theme-picker`, `locale-picker`, `text-size-picker`, `share-picker`;
|
|
105
|
+
see each package's own `index.md`). A typical header layout:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
.picker-bar {
|
|
109
|
+
display: flex;
|
|
110
|
+
gap: var(--theme-space-sm, 0.5rem);
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Accessibility
|
|
116
|
+
|
|
117
|
+
Every accessible name comes from `labels` — there is no English
|
|
118
|
+
default, because a set of names this catalog invented is exactly the
|
|
119
|
+
case the rest of Lily's i18n rule exists for. Each wrapped picker keeps
|
|
120
|
+
its own WAI-ARIA APG contract unchanged; see that picker's own `index.md`.
|
|
121
|
+
|
|
122
|
+
## Full contract
|
|
123
|
+
|
|
124
|
+
See [`spec/index.md`](./spec/index.md).
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
Lily™ and Lily Design System™ are trademarks.
|
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { ThemePicker } from '@lilydesignsystem/angular-theme-picker';
|
|
4
|
+
import { LocalePicker } from '@lilydesignsystem/angular-locale-picker';
|
|
5
|
+
import { TextSizePicker } from '@lilydesignsystem/angular-text-size-picker';
|
|
6
|
+
import { SharePicker } from '@lilydesignsystem/angular-share-picker';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* All 45 Lily reference theme slugs (see `themes/` at the repo root),
|
|
10
|
+
* sorted alphabetically except the United Kingdom and United States
|
|
11
|
+
* government/public-sector themes, which sort last as one alphabetical
|
|
12
|
+
* group of their own. Mirrors `theme-picker`'s own title-casing of each
|
|
13
|
+
* slug, so no `themeLabels` override is needed for these to read well.
|
|
14
|
+
*/
|
|
15
|
+
const DEFAULT_THEMES = [
|
|
16
|
+
"abyss",
|
|
17
|
+
"acid",
|
|
18
|
+
"adobe-spectrum",
|
|
19
|
+
"aqua",
|
|
20
|
+
"autumn",
|
|
21
|
+
"black",
|
|
22
|
+
"bumblebee",
|
|
23
|
+
"business",
|
|
24
|
+
"caramellatte",
|
|
25
|
+
"cmyk",
|
|
26
|
+
"coffee",
|
|
27
|
+
"corporate",
|
|
28
|
+
"cupcake",
|
|
29
|
+
"cyberpunk",
|
|
30
|
+
"dark",
|
|
31
|
+
"dim",
|
|
32
|
+
"dracula",
|
|
33
|
+
"emerald",
|
|
34
|
+
"fantasy",
|
|
35
|
+
"forest",
|
|
36
|
+
"garden",
|
|
37
|
+
"halloween",
|
|
38
|
+
"lemonade",
|
|
39
|
+
"light",
|
|
40
|
+
"lofi",
|
|
41
|
+
"luxury",
|
|
42
|
+
"mozilla-protocol",
|
|
43
|
+
"night",
|
|
44
|
+
"nord",
|
|
45
|
+
"pastel",
|
|
46
|
+
"retro",
|
|
47
|
+
"silk",
|
|
48
|
+
"sunset",
|
|
49
|
+
"synthwave",
|
|
50
|
+
"valentine",
|
|
51
|
+
"winter",
|
|
52
|
+
"wireframe",
|
|
53
|
+
"united-kingdom-government-digital-service",
|
|
54
|
+
"united-kingdom-national-health-service-england-for-patients",
|
|
55
|
+
"united-kingdom-national-health-service-england-for-practitioners",
|
|
56
|
+
"united-kingdom-national-health-service-scotland-for-patients",
|
|
57
|
+
"united-kingdom-national-health-service-scotland-for-practitioners",
|
|
58
|
+
"united-kingdom-national-health-service-wales-for-patients",
|
|
59
|
+
"united-kingdom-national-health-service-wales-for-practitioners",
|
|
60
|
+
"united-states-web-design-system",
|
|
61
|
+
];
|
|
62
|
+
/**
|
|
63
|
+
* The seven-step text-size scale. Each slug title-cases to exactly the
|
|
64
|
+
* requested label ("largest" → "Largest", …) via `text-size-picker`'s
|
|
65
|
+
* own default `labelFor`, so no `sizeLabels` override is needed either.
|
|
66
|
+
*/
|
|
67
|
+
const DEFAULT_SIZES = [
|
|
68
|
+
"largest",
|
|
69
|
+
"larger",
|
|
70
|
+
"large",
|
|
71
|
+
"normal",
|
|
72
|
+
"small",
|
|
73
|
+
"smaller",
|
|
74
|
+
"smallest",
|
|
75
|
+
];
|
|
76
|
+
/**
|
|
77
|
+
* PickerBar — composes theme-picker, locale-picker, text-size-picker,
|
|
78
|
+
* and share-picker into one page-header row.
|
|
79
|
+
*
|
|
80
|
+
* A thin wrapper: it renders the four picker components, each imported
|
|
81
|
+
* as a real npm dependency from its own published package, unmodified.
|
|
82
|
+
* It pre-wires two catalog-specific defaults (`DEFAULT_THEMES`,
|
|
83
|
+
* `DEFAULT_SIZES`) and flattens each wrapped picker's most commonly
|
|
84
|
+
* needed optional props onto its own inputs — Angular has no spread
|
|
85
|
+
* binding for component inputs, so unlike the canonical Svelte
|
|
86
|
+
* contract's `*Props` bag, overrides here are named inputs rather than
|
|
87
|
+
* an object spread. `motion-picker` and `date-time-picker` are
|
|
88
|
+
* deliberately not included — see `spec/index.md` §1.
|
|
89
|
+
*/
|
|
90
|
+
class PickerBar {
|
|
91
|
+
constructor() {
|
|
92
|
+
/** Accessible names for each picker. */
|
|
93
|
+
this.labels = input.required(/* @ts-ignore */
|
|
94
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
95
|
+
// --- theme-picker ---
|
|
96
|
+
/** Base URL of the themes directory, forwarded to ThemePicker. */
|
|
97
|
+
this.themesUrl = input.required(/* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "themesUrl" }] : /* istanbul ignore next */ []));
|
|
99
|
+
/** Available theme slugs. Defaults to {@link DEFAULT_THEMES}. */
|
|
100
|
+
this.themes = input(DEFAULT_THEMES, /* @ts-ignore */
|
|
101
|
+
...(ngDevMode ? [{ debugName: "themes" }] : /* istanbul ignore next */ []));
|
|
102
|
+
/** Two-way bindable current theme slug. */
|
|
103
|
+
this.themeValue = model("", /* @ts-ignore */
|
|
104
|
+
...(ngDevMode ? [{ debugName: "themeValue" }] : /* istanbul ignore next */ []));
|
|
105
|
+
this.themeDefaultValue = input("", /* @ts-ignore */
|
|
106
|
+
...(ngDevMode ? [{ debugName: "themeDefaultValue" }] : /* istanbul ignore next */ []));
|
|
107
|
+
this.themeStorageKey = input("", /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "themeStorageKey" }] : /* istanbul ignore next */ []));
|
|
109
|
+
this.themeDetectFromSystem = input(false, /* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [{ debugName: "themeDetectFromSystem" }] : /* istanbul ignore next */ []));
|
|
111
|
+
this.themeName = input("theme", /* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [{ debugName: "themeName" }] : /* istanbul ignore next */ []));
|
|
113
|
+
this.themeTarget = input(null, /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "themeTarget" }] : /* istanbul ignore next */ []));
|
|
115
|
+
this.themeLabels = input({}, /* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [{ debugName: "themeLabels" }] : /* istanbul ignore next */ []));
|
|
117
|
+
// --- locale-picker ---
|
|
118
|
+
/** Available locale codes. No catalog default exists — supply the set you support. */
|
|
119
|
+
this.locales = input.required(/* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "locales" }] : /* istanbul ignore next */ []));
|
|
121
|
+
/** Two-way bindable current locale code. */
|
|
122
|
+
this.localeValue = model("", /* @ts-ignore */
|
|
123
|
+
...(ngDevMode ? [{ debugName: "localeValue" }] : /* istanbul ignore next */ []));
|
|
124
|
+
this.localeDefaultValue = input("", /* @ts-ignore */
|
|
125
|
+
...(ngDevMode ? [{ debugName: "localeDefaultValue" }] : /* istanbul ignore next */ []));
|
|
126
|
+
this.localeStorageKey = input("", /* @ts-ignore */
|
|
127
|
+
...(ngDevMode ? [{ debugName: "localeStorageKey" }] : /* istanbul ignore next */ []));
|
|
128
|
+
this.localeDetectFromNavigator = input(false, /* @ts-ignore */
|
|
129
|
+
...(ngDevMode ? [{ debugName: "localeDetectFromNavigator" }] : /* istanbul ignore next */ []));
|
|
130
|
+
this.localeName = input("locale", /* @ts-ignore */
|
|
131
|
+
...(ngDevMode ? [{ debugName: "localeName" }] : /* istanbul ignore next */ []));
|
|
132
|
+
this.localeTarget = input(null, /* @ts-ignore */
|
|
133
|
+
...(ngDevMode ? [{ debugName: "localeTarget" }] : /* istanbul ignore next */ []));
|
|
134
|
+
this.localeApplyDir = input(true, /* @ts-ignore */
|
|
135
|
+
...(ngDevMode ? [{ debugName: "localeApplyDir" }] : /* istanbul ignore next */ []));
|
|
136
|
+
this.localeLabels = input({}, /* @ts-ignore */
|
|
137
|
+
...(ngDevMode ? [{ debugName: "localeLabels" }] : /* istanbul ignore next */ []));
|
|
138
|
+
// --- text-size-picker ---
|
|
139
|
+
/** Available size slugs. Defaults to {@link DEFAULT_SIZES}. */
|
|
140
|
+
this.sizes = input(DEFAULT_SIZES, /* @ts-ignore */
|
|
141
|
+
...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
|
|
142
|
+
/** Two-way bindable current size slug. */
|
|
143
|
+
this.textSizeValue = model("", /* @ts-ignore */
|
|
144
|
+
...(ngDevMode ? [{ debugName: "textSizeValue" }] : /* istanbul ignore next */ []));
|
|
145
|
+
/**
|
|
146
|
+
* `text-size-picker`'s own fallback ("medium", else `sizes[0]`) does
|
|
147
|
+
* not fit the seven-slug scale — "medium" is not one of the seven,
|
|
148
|
+
* and `sizes[0]` would silently start every consumer on "Largest".
|
|
149
|
+
*/
|
|
150
|
+
this.textSizeDefaultValue = input("normal", /* @ts-ignore */
|
|
151
|
+
...(ngDevMode ? [{ debugName: "textSizeDefaultValue" }] : /* istanbul ignore next */ []));
|
|
152
|
+
this.textSizeStorageKey = input("", /* @ts-ignore */
|
|
153
|
+
...(ngDevMode ? [{ debugName: "textSizeStorageKey" }] : /* istanbul ignore next */ []));
|
|
154
|
+
this.textSizeName = input("text-size", /* @ts-ignore */
|
|
155
|
+
...(ngDevMode ? [{ debugName: "textSizeName" }] : /* istanbul ignore next */ []));
|
|
156
|
+
this.textSizeTarget = input(null, /* @ts-ignore */
|
|
157
|
+
...(ngDevMode ? [{ debugName: "textSizeTarget" }] : /* istanbul ignore next */ []));
|
|
158
|
+
this.textSizeLabels = input({}, /* @ts-ignore */
|
|
159
|
+
...(ngDevMode ? [{ debugName: "textSizeLabels" }] : /* istanbul ignore next */ []));
|
|
160
|
+
// --- share-picker ---
|
|
161
|
+
/** Destinations offered by the share picker. Empty is valid if `copyLabel` is set. */
|
|
162
|
+
this.shareTargets = input([], /* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "shareTargets" }] : /* istanbul ignore next */ []));
|
|
164
|
+
this.shareUrl = input("", /* @ts-ignore */
|
|
165
|
+
...(ngDevMode ? [{ debugName: "shareUrl" }] : /* istanbul ignore next */ []));
|
|
166
|
+
this.shareTitle = input("", /* @ts-ignore */
|
|
167
|
+
...(ngDevMode ? [{ debugName: "shareTitle" }] : /* istanbul ignore next */ []));
|
|
168
|
+
this.shareText = input("", /* @ts-ignore */
|
|
169
|
+
...(ngDevMode ? [{ debugName: "shareText" }] : /* istanbul ignore next */ []));
|
|
170
|
+
this.copyLabel = input("", /* @ts-ignore */
|
|
171
|
+
...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
|
|
172
|
+
this.copiedLabel = input("", /* @ts-ignore */
|
|
173
|
+
...(ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []));
|
|
174
|
+
this.copyFailedLabel = input("", /* @ts-ignore */
|
|
175
|
+
...(ngDevMode ? [{ debugName: "copyFailedLabel" }] : /* istanbul ignore next */ []));
|
|
176
|
+
this.shareStrategy = input("auto", /* @ts-ignore */
|
|
177
|
+
...(ngDevMode ? [{ debugName: "shareStrategy" }] : /* istanbul ignore next */ []));
|
|
178
|
+
/** Fires after a share destination is chosen. */
|
|
179
|
+
this.share = output();
|
|
180
|
+
/** Fires after the URL is copied. */
|
|
181
|
+
this.copy = output();
|
|
182
|
+
/** Fires when the native share sheet was used instead of the list. */
|
|
183
|
+
this.nativeShare = output();
|
|
184
|
+
/** Extra CSS class on the root. */
|
|
185
|
+
this.className = input("", /* @ts-ignore */
|
|
186
|
+
...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
|
|
187
|
+
}
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PickerBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PickerBar, isStandalone: true, selector: "lily-picker-bar", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, themesUrl: { classPropertyName: "themesUrl", publicName: "themesUrl", isSignal: true, isRequired: true, transformFunction: null }, themes: { classPropertyName: "themes", publicName: "themes", isSignal: true, isRequired: false, transformFunction: null }, themeValue: { classPropertyName: "themeValue", publicName: "themeValue", isSignal: true, isRequired: false, transformFunction: null }, themeDefaultValue: { classPropertyName: "themeDefaultValue", publicName: "themeDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, themeStorageKey: { classPropertyName: "themeStorageKey", publicName: "themeStorageKey", isSignal: true, isRequired: false, transformFunction: null }, themeDetectFromSystem: { classPropertyName: "themeDetectFromSystem", publicName: "themeDetectFromSystem", isSignal: true, isRequired: false, transformFunction: null }, themeName: { classPropertyName: "themeName", publicName: "themeName", isSignal: true, isRequired: false, transformFunction: null }, themeTarget: { classPropertyName: "themeTarget", publicName: "themeTarget", isSignal: true, isRequired: false, transformFunction: null }, themeLabels: { classPropertyName: "themeLabels", publicName: "themeLabels", isSignal: true, isRequired: false, transformFunction: null }, locales: { classPropertyName: "locales", publicName: "locales", isSignal: true, isRequired: true, transformFunction: null }, localeValue: { classPropertyName: "localeValue", publicName: "localeValue", isSignal: true, isRequired: false, transformFunction: null }, localeDefaultValue: { classPropertyName: "localeDefaultValue", publicName: "localeDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, localeStorageKey: { classPropertyName: "localeStorageKey", publicName: "localeStorageKey", isSignal: true, isRequired: false, transformFunction: null }, localeDetectFromNavigator: { classPropertyName: "localeDetectFromNavigator", publicName: "localeDetectFromNavigator", isSignal: true, isRequired: false, transformFunction: null }, localeName: { classPropertyName: "localeName", publicName: "localeName", isSignal: true, isRequired: false, transformFunction: null }, localeTarget: { classPropertyName: "localeTarget", publicName: "localeTarget", isSignal: true, isRequired: false, transformFunction: null }, localeApplyDir: { classPropertyName: "localeApplyDir", publicName: "localeApplyDir", isSignal: true, isRequired: false, transformFunction: null }, localeLabels: { classPropertyName: "localeLabels", publicName: "localeLabels", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, textSizeValue: { classPropertyName: "textSizeValue", publicName: "textSizeValue", isSignal: true, isRequired: false, transformFunction: null }, textSizeDefaultValue: { classPropertyName: "textSizeDefaultValue", publicName: "textSizeDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, textSizeStorageKey: { classPropertyName: "textSizeStorageKey", publicName: "textSizeStorageKey", isSignal: true, isRequired: false, transformFunction: null }, textSizeName: { classPropertyName: "textSizeName", publicName: "textSizeName", isSignal: true, isRequired: false, transformFunction: null }, textSizeTarget: { classPropertyName: "textSizeTarget", publicName: "textSizeTarget", isSignal: true, isRequired: false, transformFunction: null }, textSizeLabels: { classPropertyName: "textSizeLabels", publicName: "textSizeLabels", isSignal: true, isRequired: false, transformFunction: null }, shareTargets: { classPropertyName: "shareTargets", publicName: "shareTargets", isSignal: true, isRequired: false, transformFunction: null }, shareUrl: { classPropertyName: "shareUrl", publicName: "shareUrl", isSignal: true, isRequired: false, transformFunction: null }, shareTitle: { classPropertyName: "shareTitle", publicName: "shareTitle", isSignal: true, isRequired: false, transformFunction: null }, shareText: { classPropertyName: "shareText", publicName: "shareText", isSignal: true, isRequired: false, transformFunction: null }, copyLabel: { classPropertyName: "copyLabel", publicName: "copyLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedLabel: { classPropertyName: "copiedLabel", publicName: "copiedLabel", isSignal: true, isRequired: false, transformFunction: null }, copyFailedLabel: { classPropertyName: "copyFailedLabel", publicName: "copyFailedLabel", isSignal: true, isRequired: false, transformFunction: null }, shareStrategy: { classPropertyName: "shareStrategy", publicName: "shareStrategy", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeValue: "themeValueChange", localeValue: "localeValueChange", textSizeValue: "textSizeValueChange", share: "share", copy: "copy", nativeShare: "nativeShare" }, ngImport: i0, template: `
|
|
190
|
+
<div class="picker-bar {{ className() }}">
|
|
191
|
+
<lily-theme-picker
|
|
192
|
+
[label]="labels().theme"
|
|
193
|
+
[themesUrl]="themesUrl()"
|
|
194
|
+
[themes]="themes()"
|
|
195
|
+
[(value)]="themeValue"
|
|
196
|
+
[defaultValue]="themeDefaultValue()"
|
|
197
|
+
[storageKey]="themeStorageKey()"
|
|
198
|
+
[detectFromSystem]="themeDetectFromSystem()"
|
|
199
|
+
[name]="themeName()"
|
|
200
|
+
[target]="themeTarget()"
|
|
201
|
+
[themeLabels]="themeLabels()"
|
|
202
|
+
/>
|
|
203
|
+
<lily-locale-picker
|
|
204
|
+
[label]="labels().locale"
|
|
205
|
+
[locales]="locales()"
|
|
206
|
+
[(value)]="localeValue"
|
|
207
|
+
[defaultValue]="localeDefaultValue()"
|
|
208
|
+
[storageKey]="localeStorageKey()"
|
|
209
|
+
[detectFromNavigator]="localeDetectFromNavigator()"
|
|
210
|
+
[name]="localeName()"
|
|
211
|
+
[target]="localeTarget()"
|
|
212
|
+
[applyDir]="localeApplyDir()"
|
|
213
|
+
[localeLabels]="localeLabels()"
|
|
214
|
+
/>
|
|
215
|
+
<lily-text-size-picker
|
|
216
|
+
[label]="labels().textSize"
|
|
217
|
+
[sizes]="sizes()"
|
|
218
|
+
[(value)]="textSizeValue"
|
|
219
|
+
[defaultValue]="textSizeDefaultValue()"
|
|
220
|
+
[storageKey]="textSizeStorageKey()"
|
|
221
|
+
[name]="textSizeName()"
|
|
222
|
+
[target]="textSizeTarget()"
|
|
223
|
+
[sizeLabels]="textSizeLabels()"
|
|
224
|
+
/>
|
|
225
|
+
<lily-share-picker
|
|
226
|
+
[label]="labels().share"
|
|
227
|
+
[targets]="shareTargets()"
|
|
228
|
+
[url]="shareUrl()"
|
|
229
|
+
[title]="shareTitle()"
|
|
230
|
+
[text]="shareText()"
|
|
231
|
+
[copyLabel]="copyLabel()"
|
|
232
|
+
[copiedLabel]="copiedLabel()"
|
|
233
|
+
[copyFailedLabel]="copyFailedLabel()"
|
|
234
|
+
[strategy]="shareStrategy()"
|
|
235
|
+
(share)="share.emit($event)"
|
|
236
|
+
(copy)="copy.emit($event)"
|
|
237
|
+
(nativeShare)="nativeShare.emit($event)"
|
|
238
|
+
/>
|
|
239
|
+
</div>
|
|
240
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ThemePicker, selector: "lily-theme-picker", inputs: ["label", "themesUrl", "themes", "value", "defaultValue", "storageKey", "detectFromSystem", "name", "extension", "target", "themeLabels", "className"], outputs: ["valueChange", "themeChange"] }, { kind: "component", type: LocalePicker, selector: "lily-locale-picker", inputs: ["label", "locales", "value", "defaultValue", "storageKey", "detectFromNavigator", "name", "target", "applyDir", "localeLabels", "className"], outputs: ["valueChange", "localeChange"] }, { kind: "component", type: TextSizePicker, selector: "lily-text-size-picker", inputs: ["label", "sizes", "value", "defaultValue", "storageKey", "name", "target", "sizeLabels", "className"], outputs: ["valueChange", "sizeChange"] }, { kind: "component", type: SharePicker, selector: "lily-share-picker", inputs: ["label", "targets", "url", "title", "text", "copyLabel", "copiedLabel", "copyFailedLabel", "strategy", "className"], outputs: ["share", "copy", "nativeShare"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
241
|
+
}
|
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PickerBar, decorators: [{
|
|
243
|
+
type: Component,
|
|
244
|
+
args: [{
|
|
245
|
+
selector: "lily-picker-bar",
|
|
246
|
+
standalone: true,
|
|
247
|
+
imports: [ThemePicker, LocalePicker, TextSizePicker, SharePicker],
|
|
248
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
249
|
+
template: `
|
|
250
|
+
<div class="picker-bar {{ className() }}">
|
|
251
|
+
<lily-theme-picker
|
|
252
|
+
[label]="labels().theme"
|
|
253
|
+
[themesUrl]="themesUrl()"
|
|
254
|
+
[themes]="themes()"
|
|
255
|
+
[(value)]="themeValue"
|
|
256
|
+
[defaultValue]="themeDefaultValue()"
|
|
257
|
+
[storageKey]="themeStorageKey()"
|
|
258
|
+
[detectFromSystem]="themeDetectFromSystem()"
|
|
259
|
+
[name]="themeName()"
|
|
260
|
+
[target]="themeTarget()"
|
|
261
|
+
[themeLabels]="themeLabels()"
|
|
262
|
+
/>
|
|
263
|
+
<lily-locale-picker
|
|
264
|
+
[label]="labels().locale"
|
|
265
|
+
[locales]="locales()"
|
|
266
|
+
[(value)]="localeValue"
|
|
267
|
+
[defaultValue]="localeDefaultValue()"
|
|
268
|
+
[storageKey]="localeStorageKey()"
|
|
269
|
+
[detectFromNavigator]="localeDetectFromNavigator()"
|
|
270
|
+
[name]="localeName()"
|
|
271
|
+
[target]="localeTarget()"
|
|
272
|
+
[applyDir]="localeApplyDir()"
|
|
273
|
+
[localeLabels]="localeLabels()"
|
|
274
|
+
/>
|
|
275
|
+
<lily-text-size-picker
|
|
276
|
+
[label]="labels().textSize"
|
|
277
|
+
[sizes]="sizes()"
|
|
278
|
+
[(value)]="textSizeValue"
|
|
279
|
+
[defaultValue]="textSizeDefaultValue()"
|
|
280
|
+
[storageKey]="textSizeStorageKey()"
|
|
281
|
+
[name]="textSizeName()"
|
|
282
|
+
[target]="textSizeTarget()"
|
|
283
|
+
[sizeLabels]="textSizeLabels()"
|
|
284
|
+
/>
|
|
285
|
+
<lily-share-picker
|
|
286
|
+
[label]="labels().share"
|
|
287
|
+
[targets]="shareTargets()"
|
|
288
|
+
[url]="shareUrl()"
|
|
289
|
+
[title]="shareTitle()"
|
|
290
|
+
[text]="shareText()"
|
|
291
|
+
[copyLabel]="copyLabel()"
|
|
292
|
+
[copiedLabel]="copiedLabel()"
|
|
293
|
+
[copyFailedLabel]="copyFailedLabel()"
|
|
294
|
+
[strategy]="shareStrategy()"
|
|
295
|
+
(share)="share.emit($event)"
|
|
296
|
+
(copy)="copy.emit($event)"
|
|
297
|
+
(nativeShare)="nativeShare.emit($event)"
|
|
298
|
+
/>
|
|
299
|
+
</div>
|
|
300
|
+
`,
|
|
301
|
+
}]
|
|
302
|
+
}], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], themesUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "themesUrl", required: true }] }], themes: [{ type: i0.Input, args: [{ isSignal: true, alias: "themes", required: false }] }], themeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeValue", required: false }] }, { type: i0.Output, args: ["themeValueChange"] }], themeDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeDefaultValue", required: false }] }], themeStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeStorageKey", required: false }] }], themeDetectFromSystem: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeDetectFromSystem", required: false }] }], themeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeName", required: false }] }], themeTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeTarget", required: false }] }], themeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeLabels", required: false }] }], locales: [{ type: i0.Input, args: [{ isSignal: true, alias: "locales", required: true }] }], localeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeValue", required: false }] }, { type: i0.Output, args: ["localeValueChange"] }], localeDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeDefaultValue", required: false }] }], localeStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeStorageKey", required: false }] }], localeDetectFromNavigator: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeDetectFromNavigator", required: false }] }], localeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeName", required: false }] }], localeTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeTarget", required: false }] }], localeApplyDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeApplyDir", required: false }] }], localeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeLabels", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], textSizeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeValue", required: false }] }, { type: i0.Output, args: ["textSizeValueChange"] }], textSizeDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeDefaultValue", required: false }] }], textSizeStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeStorageKey", required: false }] }], textSizeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeName", required: false }] }], textSizeTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeTarget", required: false }] }], textSizeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSizeLabels", required: false }] }], shareTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareTargets", required: false }] }], shareUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareUrl", required: false }] }], shareTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareTitle", required: false }] }], shareText: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareText", required: false }] }], copyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyLabel", required: false }] }], copiedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedLabel", required: false }] }], copyFailedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyFailedLabel", required: false }] }], shareStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareStrategy", required: false }] }], share: [{ type: i0.Output, args: ["share"] }], copy: [{ type: i0.Output, args: ["copy"] }], nativeShare: [{ type: i0.Output, args: ["nativeShare"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }] } });
|
|
303
|
+
|
|
304
|
+
/**
|
|
305
|
+
* Generated bundle index. Do not edit.
|
|
306
|
+
*/
|
|
307
|
+
|
|
308
|
+
export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar };
|
|
309
|
+
//# sourceMappingURL=lilydesignsystem-angular-picker-bar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lilydesignsystem-angular-picker-bar.mjs","sources":["../../picker-bar.component.ts","../../lilydesignsystem-angular-picker-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from \"@angular/core\";\n\nimport { ThemePicker } from \"@lilydesignsystem/angular-theme-picker\";\nimport { LocalePicker } from \"@lilydesignsystem/angular-locale-picker\";\nimport { TextSizePicker } from \"@lilydesignsystem/angular-text-size-picker\";\nimport {\n SharePicker,\n type ShareEvent,\n type ShareStrategy,\n type ShareTarget,\n} from \"@lilydesignsystem/angular-share-picker\";\n\n/**\n * All 45 Lily reference theme slugs (see `themes/` at the repo root),\n * sorted alphabetically except the United Kingdom and United States\n * government/public-sector themes, which sort last as one alphabetical\n * group of their own. Mirrors `theme-picker`'s own title-casing of each\n * slug, so no `themeLabels` override is needed for these to read well.\n */\nexport const DEFAULT_THEMES: string[] = [\n \"abyss\",\n \"acid\",\n \"adobe-spectrum\",\n \"aqua\",\n \"autumn\",\n \"black\",\n \"bumblebee\",\n \"business\",\n \"caramellatte\",\n \"cmyk\",\n \"coffee\",\n \"corporate\",\n \"cupcake\",\n \"cyberpunk\",\n \"dark\",\n \"dim\",\n \"dracula\",\n \"emerald\",\n \"fantasy\",\n \"forest\",\n \"garden\",\n \"halloween\",\n \"lemonade\",\n \"light\",\n \"lofi\",\n \"luxury\",\n \"mozilla-protocol\",\n \"night\",\n \"nord\",\n \"pastel\",\n \"retro\",\n \"silk\",\n \"sunset\",\n \"synthwave\",\n \"valentine\",\n \"winter\",\n \"wireframe\",\n \"united-kingdom-government-digital-service\",\n \"united-kingdom-national-health-service-england-for-patients\",\n \"united-kingdom-national-health-service-england-for-practitioners\",\n \"united-kingdom-national-health-service-scotland-for-patients\",\n \"united-kingdom-national-health-service-scotland-for-practitioners\",\n \"united-kingdom-national-health-service-wales-for-patients\",\n \"united-kingdom-national-health-service-wales-for-practitioners\",\n \"united-states-web-design-system\",\n];\n\n/**\n * The seven-step text-size scale. Each slug title-cases to exactly the\n * requested label (\"largest\" → \"Largest\", …) via `text-size-picker`'s\n * own default `labelFor`, so no `sizeLabels` override is needed either.\n */\nexport const DEFAULT_SIZES: string[] = [\n \"largest\",\n \"larger\",\n \"large\",\n \"normal\",\n \"small\",\n \"smaller\",\n \"smallest\",\n];\n\n/** Accessible names for the four pickers. Required — no English default. */\nexport type PickerBarLabels = {\n /** Accessible name for the theme picker's button and listbox. */\n theme: string;\n /** Accessible name for the locale picker's button and listbox. */\n locale: string;\n /** Accessible name for the text-size picker's button and listbox. */\n textSize: string;\n /** Accessible name for the share picker's button and list. */\n share: string;\n};\n\n/**\n * PickerBar — composes theme-picker, locale-picker, text-size-picker,\n * and share-picker into one page-header row.\n *\n * A thin wrapper: it renders the four picker components, each imported\n * as a real npm dependency from its own published package, unmodified.\n * It pre-wires two catalog-specific defaults (`DEFAULT_THEMES`,\n * `DEFAULT_SIZES`) and flattens each wrapped picker's most commonly\n * needed optional props onto its own inputs — Angular has no spread\n * binding for component inputs, so unlike the canonical Svelte\n * contract's `*Props` bag, overrides here are named inputs rather than\n * an object spread. `motion-picker` and `date-time-picker` are\n * deliberately not included — see `spec/index.md` §1.\n */\n@Component({\n selector: \"lily-picker-bar\",\n standalone: true,\n imports: [ThemePicker, LocalePicker, TextSizePicker, SharePicker],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"picker-bar {{ className() }}\">\n <lily-theme-picker\n [label]=\"labels().theme\"\n [themesUrl]=\"themesUrl()\"\n [themes]=\"themes()\"\n [(value)]=\"themeValue\"\n [defaultValue]=\"themeDefaultValue()\"\n [storageKey]=\"themeStorageKey()\"\n [detectFromSystem]=\"themeDetectFromSystem()\"\n [name]=\"themeName()\"\n [target]=\"themeTarget()\"\n [themeLabels]=\"themeLabels()\"\n />\n <lily-locale-picker\n [label]=\"labels().locale\"\n [locales]=\"locales()\"\n [(value)]=\"localeValue\"\n [defaultValue]=\"localeDefaultValue()\"\n [storageKey]=\"localeStorageKey()\"\n [detectFromNavigator]=\"localeDetectFromNavigator()\"\n [name]=\"localeName()\"\n [target]=\"localeTarget()\"\n [applyDir]=\"localeApplyDir()\"\n [localeLabels]=\"localeLabels()\"\n />\n <lily-text-size-picker\n [label]=\"labels().textSize\"\n [sizes]=\"sizes()\"\n [(value)]=\"textSizeValue\"\n [defaultValue]=\"textSizeDefaultValue()\"\n [storageKey]=\"textSizeStorageKey()\"\n [name]=\"textSizeName()\"\n [target]=\"textSizeTarget()\"\n [sizeLabels]=\"textSizeLabels()\"\n />\n <lily-share-picker\n [label]=\"labels().share\"\n [targets]=\"shareTargets()\"\n [url]=\"shareUrl()\"\n [title]=\"shareTitle()\"\n [text]=\"shareText()\"\n [copyLabel]=\"copyLabel()\"\n [copiedLabel]=\"copiedLabel()\"\n [copyFailedLabel]=\"copyFailedLabel()\"\n [strategy]=\"shareStrategy()\"\n (share)=\"share.emit($event)\"\n (copy)=\"copy.emit($event)\"\n (nativeShare)=\"nativeShare.emit($event)\"\n />\n </div>\n `,\n})\nexport class PickerBar {\n /** Accessible names for each picker. */\n readonly labels = input.required<PickerBarLabels>();\n\n // --- theme-picker ---\n /** Base URL of the themes directory, forwarded to ThemePicker. */\n readonly themesUrl = input.required<string>();\n /** Available theme slugs. Defaults to {@link DEFAULT_THEMES}. */\n readonly themes = input<string[]>(DEFAULT_THEMES);\n /** Two-way bindable current theme slug. */\n readonly themeValue = model<string>(\"\");\n readonly themeDefaultValue = input<string>(\"\");\n readonly themeStorageKey = input<string>(\"\");\n readonly themeDetectFromSystem = input<boolean>(false);\n readonly themeName = input<string>(\"theme\");\n readonly themeTarget = input<HTMLElement | null>(null);\n readonly themeLabels = input<Record<string, string>>({});\n\n // --- locale-picker ---\n /** Available locale codes. No catalog default exists — supply the set you support. */\n readonly locales = input.required<string[]>();\n /** Two-way bindable current locale code. */\n readonly localeValue = model<string>(\"\");\n readonly localeDefaultValue = input<string>(\"\");\n readonly localeStorageKey = input<string>(\"\");\n readonly localeDetectFromNavigator = input<boolean>(false);\n readonly localeName = input<string>(\"locale\");\n readonly localeTarget = input<HTMLElement | null>(null);\n readonly localeApplyDir = input<boolean>(true);\n readonly localeLabels = input<Record<string, string>>({});\n\n // --- text-size-picker ---\n /** Available size slugs. Defaults to {@link DEFAULT_SIZES}. */\n readonly sizes = input<string[]>(DEFAULT_SIZES);\n /** Two-way bindable current size slug. */\n readonly textSizeValue = model<string>(\"\");\n /**\n * `text-size-picker`'s own fallback (\"medium\", else `sizes[0]`) does\n * not fit the seven-slug scale — \"medium\" is not one of the seven,\n * and `sizes[0]` would silently start every consumer on \"Largest\".\n */\n readonly textSizeDefaultValue = input<string>(\"normal\");\n readonly textSizeStorageKey = input<string>(\"\");\n readonly textSizeName = input<string>(\"text-size\");\n readonly textSizeTarget = input<HTMLElement | null>(null);\n readonly textSizeLabels = input<Record<string, string>>({});\n\n // --- share-picker ---\n /** Destinations offered by the share picker. Empty is valid if `copyLabel` is set. */\n readonly shareTargets = input<ShareTarget[]>([]);\n readonly shareUrl = input<string>(\"\");\n readonly shareTitle = input<string>(\"\");\n readonly shareText = input<string>(\"\");\n readonly copyLabel = input<string>(\"\");\n readonly copiedLabel = input<string>(\"\");\n readonly copyFailedLabel = input<string>(\"\");\n readonly shareStrategy = input<ShareStrategy>(\"auto\");\n /** Fires after a share destination is chosen. */\n readonly share = output<ShareEvent>();\n /** Fires after the URL is copied. */\n readonly copy = output<string>();\n /** Fires when the native share sheet was used instead of the list. */\n readonly nativeShare = output<string>();\n\n /** Extra CSS class on the root. */\n readonly className = input<string>(\"\");\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lilydesignsystem/angular-picker-bar",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"engines": {
|
|
5
|
+
"node": "=26"
|
|
6
|
+
},
|
|
7
|
+
"description": "Lily Design System Angular 20 picker bar: composes theme-picker, locale-picker, text-size-picker, and share-picker into one page-header row. Headless, SSR-safe, no CSS.",
|
|
8
|
+
"peerDependencies": {
|
|
9
|
+
"@angular/core": ">=20.0.0 <23.0.0",
|
|
10
|
+
"@angular/common": ">=20.0.0 <23.0.0"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@lilydesignsystem/angular-theme-picker": "^0.1.0",
|
|
14
|
+
"@lilydesignsystem/angular-locale-picker": "^0.1.0",
|
|
15
|
+
"@lilydesignsystem/angular-text-size-picker": "^0.1.0",
|
|
16
|
+
"@lilydesignsystem/angular-share-picker": "^0.1.0",
|
|
17
|
+
"tslib": "^2.3.0"
|
|
18
|
+
},
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"keywords": [
|
|
21
|
+
"lily",
|
|
22
|
+
"design",
|
|
23
|
+
"system",
|
|
24
|
+
"angular",
|
|
25
|
+
"picker",
|
|
26
|
+
"picker-bar",
|
|
27
|
+
"theme",
|
|
28
|
+
"locale",
|
|
29
|
+
"text-size",
|
|
30
|
+
"share"
|
|
31
|
+
],
|
|
32
|
+
"author": "Joel Parker Henderson <joel@joelparkerhenderson.com>",
|
|
33
|
+
"license": "MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause",
|
|
34
|
+
"repository": {
|
|
35
|
+
"type": "git",
|
|
36
|
+
"url": "git+https://github.com/LilyDesignSystem/lily-design-system-angular-helpers.git",
|
|
37
|
+
"directory": "lily-design-system-angular-picker-bar"
|
|
38
|
+
},
|
|
39
|
+
"homepage": "https://lilydesignsystem.com/",
|
|
40
|
+
"bugs": {
|
|
41
|
+
"url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
|
|
42
|
+
},
|
|
43
|
+
"module": "fesm2022/lilydesignsystem-angular-picker-bar.mjs",
|
|
44
|
+
"typings": "types/lilydesignsystem-angular-picker-bar.d.ts",
|
|
45
|
+
"exports": {
|
|
46
|
+
"./package.json": {
|
|
47
|
+
"default": "./package.json"
|
|
48
|
+
},
|
|
49
|
+
".": {
|
|
50
|
+
"types": "./types/lilydesignsystem-angular-picker-bar.d.ts",
|
|
51
|
+
"default": "./fesm2022/lilydesignsystem-angular-picker-bar.mjs"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"type": "module"
|
|
55
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ShareTarget, ShareStrategy, ShareEvent } from '@lilydesignsystem/angular-share-picker';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* All 45 Lily reference theme slugs (see `themes/` at the repo root),
|
|
6
|
+
* sorted alphabetically except the United Kingdom and United States
|
|
7
|
+
* government/public-sector themes, which sort last as one alphabetical
|
|
8
|
+
* group of their own. Mirrors `theme-picker`'s own title-casing of each
|
|
9
|
+
* slug, so no `themeLabels` override is needed for these to read well.
|
|
10
|
+
*/
|
|
11
|
+
declare const DEFAULT_THEMES: string[];
|
|
12
|
+
/**
|
|
13
|
+
* The seven-step text-size scale. Each slug title-cases to exactly the
|
|
14
|
+
* requested label ("largest" → "Largest", …) via `text-size-picker`'s
|
|
15
|
+
* own default `labelFor`, so no `sizeLabels` override is needed either.
|
|
16
|
+
*/
|
|
17
|
+
declare const DEFAULT_SIZES: string[];
|
|
18
|
+
/** Accessible names for the four pickers. Required — no English default. */
|
|
19
|
+
type PickerBarLabels = {
|
|
20
|
+
/** Accessible name for the theme picker's button and listbox. */
|
|
21
|
+
theme: string;
|
|
22
|
+
/** Accessible name for the locale picker's button and listbox. */
|
|
23
|
+
locale: string;
|
|
24
|
+
/** Accessible name for the text-size picker's button and listbox. */
|
|
25
|
+
textSize: string;
|
|
26
|
+
/** Accessible name for the share picker's button and list. */
|
|
27
|
+
share: string;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* PickerBar — composes theme-picker, locale-picker, text-size-picker,
|
|
31
|
+
* and share-picker into one page-header row.
|
|
32
|
+
*
|
|
33
|
+
* A thin wrapper: it renders the four picker components, each imported
|
|
34
|
+
* as a real npm dependency from its own published package, unmodified.
|
|
35
|
+
* It pre-wires two catalog-specific defaults (`DEFAULT_THEMES`,
|
|
36
|
+
* `DEFAULT_SIZES`) and flattens each wrapped picker's most commonly
|
|
37
|
+
* needed optional props onto its own inputs — Angular has no spread
|
|
38
|
+
* binding for component inputs, so unlike the canonical Svelte
|
|
39
|
+
* contract's `*Props` bag, overrides here are named inputs rather than
|
|
40
|
+
* an object spread. `motion-picker` and `date-time-picker` are
|
|
41
|
+
* deliberately not included — see `spec/index.md` §1.
|
|
42
|
+
*/
|
|
43
|
+
declare class PickerBar {
|
|
44
|
+
/** Accessible names for each picker. */
|
|
45
|
+
readonly labels: _angular_core.InputSignal<PickerBarLabels>;
|
|
46
|
+
/** Base URL of the themes directory, forwarded to ThemePicker. */
|
|
47
|
+
readonly themesUrl: _angular_core.InputSignal<string>;
|
|
48
|
+
/** Available theme slugs. Defaults to {@link DEFAULT_THEMES}. */
|
|
49
|
+
readonly themes: _angular_core.InputSignal<string[]>;
|
|
50
|
+
/** Two-way bindable current theme slug. */
|
|
51
|
+
readonly themeValue: _angular_core.ModelSignal<string>;
|
|
52
|
+
readonly themeDefaultValue: _angular_core.InputSignal<string>;
|
|
53
|
+
readonly themeStorageKey: _angular_core.InputSignal<string>;
|
|
54
|
+
readonly themeDetectFromSystem: _angular_core.InputSignal<boolean>;
|
|
55
|
+
readonly themeName: _angular_core.InputSignal<string>;
|
|
56
|
+
readonly themeTarget: _angular_core.InputSignal<HTMLElement | null>;
|
|
57
|
+
readonly themeLabels: _angular_core.InputSignal<Record<string, string>>;
|
|
58
|
+
/** Available locale codes. No catalog default exists — supply the set you support. */
|
|
59
|
+
readonly locales: _angular_core.InputSignal<string[]>;
|
|
60
|
+
/** Two-way bindable current locale code. */
|
|
61
|
+
readonly localeValue: _angular_core.ModelSignal<string>;
|
|
62
|
+
readonly localeDefaultValue: _angular_core.InputSignal<string>;
|
|
63
|
+
readonly localeStorageKey: _angular_core.InputSignal<string>;
|
|
64
|
+
readonly localeDetectFromNavigator: _angular_core.InputSignal<boolean>;
|
|
65
|
+
readonly localeName: _angular_core.InputSignal<string>;
|
|
66
|
+
readonly localeTarget: _angular_core.InputSignal<HTMLElement | null>;
|
|
67
|
+
readonly localeApplyDir: _angular_core.InputSignal<boolean>;
|
|
68
|
+
readonly localeLabels: _angular_core.InputSignal<Record<string, string>>;
|
|
69
|
+
/** Available size slugs. Defaults to {@link DEFAULT_SIZES}. */
|
|
70
|
+
readonly sizes: _angular_core.InputSignal<string[]>;
|
|
71
|
+
/** Two-way bindable current size slug. */
|
|
72
|
+
readonly textSizeValue: _angular_core.ModelSignal<string>;
|
|
73
|
+
/**
|
|
74
|
+
* `text-size-picker`'s own fallback ("medium", else `sizes[0]`) does
|
|
75
|
+
* not fit the seven-slug scale — "medium" is not one of the seven,
|
|
76
|
+
* and `sizes[0]` would silently start every consumer on "Largest".
|
|
77
|
+
*/
|
|
78
|
+
readonly textSizeDefaultValue: _angular_core.InputSignal<string>;
|
|
79
|
+
readonly textSizeStorageKey: _angular_core.InputSignal<string>;
|
|
80
|
+
readonly textSizeName: _angular_core.InputSignal<string>;
|
|
81
|
+
readonly textSizeTarget: _angular_core.InputSignal<HTMLElement | null>;
|
|
82
|
+
readonly textSizeLabels: _angular_core.InputSignal<Record<string, string>>;
|
|
83
|
+
/** Destinations offered by the share picker. Empty is valid if `copyLabel` is set. */
|
|
84
|
+
readonly shareTargets: _angular_core.InputSignal<ShareTarget[]>;
|
|
85
|
+
readonly shareUrl: _angular_core.InputSignal<string>;
|
|
86
|
+
readonly shareTitle: _angular_core.InputSignal<string>;
|
|
87
|
+
readonly shareText: _angular_core.InputSignal<string>;
|
|
88
|
+
readonly copyLabel: _angular_core.InputSignal<string>;
|
|
89
|
+
readonly copiedLabel: _angular_core.InputSignal<string>;
|
|
90
|
+
readonly copyFailedLabel: _angular_core.InputSignal<string>;
|
|
91
|
+
readonly shareStrategy: _angular_core.InputSignal<ShareStrategy>;
|
|
92
|
+
/** Fires after a share destination is chosen. */
|
|
93
|
+
readonly share: _angular_core.OutputEmitterRef<ShareEvent>;
|
|
94
|
+
/** Fires after the URL is copied. */
|
|
95
|
+
readonly copy: _angular_core.OutputEmitterRef<string>;
|
|
96
|
+
/** Fires when the native share sheet was used instead of the list. */
|
|
97
|
+
readonly nativeShare: _angular_core.OutputEmitterRef<string>;
|
|
98
|
+
/** Extra CSS class on the root. */
|
|
99
|
+
readonly className: _angular_core.InputSignal<string>;
|
|
100
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PickerBar, never>;
|
|
101
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PickerBar, "lily-picker-bar", never, { "labels": { "alias": "labels"; "required": true; "isSignal": true; }; "themesUrl": { "alias": "themesUrl"; "required": true; "isSignal": true; }; "themes": { "alias": "themes"; "required": false; "isSignal": true; }; "themeValue": { "alias": "themeValue"; "required": false; "isSignal": true; }; "themeDefaultValue": { "alias": "themeDefaultValue"; "required": false; "isSignal": true; }; "themeStorageKey": { "alias": "themeStorageKey"; "required": false; "isSignal": true; }; "themeDetectFromSystem": { "alias": "themeDetectFromSystem"; "required": false; "isSignal": true; }; "themeName": { "alias": "themeName"; "required": false; "isSignal": true; }; "themeTarget": { "alias": "themeTarget"; "required": false; "isSignal": true; }; "themeLabels": { "alias": "themeLabels"; "required": false; "isSignal": true; }; "locales": { "alias": "locales"; "required": true; "isSignal": true; }; "localeValue": { "alias": "localeValue"; "required": false; "isSignal": true; }; "localeDefaultValue": { "alias": "localeDefaultValue"; "required": false; "isSignal": true; }; "localeStorageKey": { "alias": "localeStorageKey"; "required": false; "isSignal": true; }; "localeDetectFromNavigator": { "alias": "localeDetectFromNavigator"; "required": false; "isSignal": true; }; "localeName": { "alias": "localeName"; "required": false; "isSignal": true; }; "localeTarget": { "alias": "localeTarget"; "required": false; "isSignal": true; }; "localeApplyDir": { "alias": "localeApplyDir"; "required": false; "isSignal": true; }; "localeLabels": { "alias": "localeLabels"; "required": false; "isSignal": true; }; "sizes": { "alias": "sizes"; "required": false; "isSignal": true; }; "textSizeValue": { "alias": "textSizeValue"; "required": false; "isSignal": true; }; "textSizeDefaultValue": { "alias": "textSizeDefaultValue"; "required": false; "isSignal": true; }; "textSizeStorageKey": { "alias": "textSizeStorageKey"; "required": false; "isSignal": true; }; "textSizeName": { "alias": "textSizeName"; "required": false; "isSignal": true; }; "textSizeTarget": { "alias": "textSizeTarget"; "required": false; "isSignal": true; }; "textSizeLabels": { "alias": "textSizeLabels"; "required": false; "isSignal": true; }; "shareTargets": { "alias": "shareTargets"; "required": false; "isSignal": true; }; "shareUrl": { "alias": "shareUrl"; "required": false; "isSignal": true; }; "shareTitle": { "alias": "shareTitle"; "required": false; "isSignal": true; }; "shareText": { "alias": "shareText"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; "copyFailedLabel": { "alias": "copyFailedLabel"; "required": false; "isSignal": true; }; "shareStrategy": { "alias": "shareStrategy"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "themeValue": "themeValueChange"; "localeValue": "localeValueChange"; "textSizeValue": "textSizeValueChange"; "share": "share"; "copy": "copy"; "nativeShare": "nativeShare"; }, never, never, true, never>;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar };
|
|
105
|
+
export type { PickerBarLabels };
|
|
106
|
+
//# sourceMappingURL=lilydesignsystem-angular-picker-bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lilydesignsystem-angular-picker-bar.d.ts","sources":["../../picker-bar.component.ts"],"mappings":";;;AAYA;;;;;;AAMG;AACH,cAAa,cAAc;AAgD3B;;;;AAIG;AACH,cAAa,aAAa;AAU1B;AACM,KAAM,eAAe;;;;;;;;;;AAW3B;;;;;;;;;;;;;AAaG;AACH,cA0Da,SAAS;;qBAEL,aAAA,CAAA,WAAA,CAAA,eAAA;;wBAIG,aAAA,CAAA,WAAA;;qBAEH,aAAA,CAAA,WAAA;;yBAEI,aAAA,CAAA,WAAA;gCACO,aAAA,CAAA,WAAA;8BACF,aAAA,CAAA,WAAA;oCACM,aAAA,CAAA,WAAA;wBACZ,aAAA,CAAA,WAAA;0BACE,aAAA,CAAA,WAAA,CAAA,WAAA;0BACA,aAAA,CAAA,WAAA,CAAA,MAAA;;sBAIJ,aAAA,CAAA,WAAA;;0BAEI,aAAA,CAAA,WAAA;iCACO,aAAA,CAAA,WAAA;+BACF,aAAA,CAAA,WAAA;wCACS,aAAA,CAAA,WAAA;yBACf,aAAA,CAAA,WAAA;2BACE,aAAA,CAAA,WAAA,CAAA,WAAA;6BACE,aAAA,CAAA,WAAA;2BACF,aAAA,CAAA,WAAA,CAAA,MAAA;;oBAIP,aAAA,CAAA,WAAA;;4BAEQ,aAAA,CAAA,WAAA;AACtB;;;;AAIG;mCAC0B,aAAA,CAAA,WAAA;iCACF,aAAA,CAAA,WAAA;2BACN,aAAA,CAAA,WAAA;6BACE,aAAA,CAAA,WAAA,CAAA,WAAA;6BACA,aAAA,CAAA,WAAA,CAAA,MAAA;;2BAIF,aAAA,CAAA,WAAA,CAAA,WAAA;uBACJ,aAAA,CAAA,WAAA;yBACE,aAAA,CAAA,WAAA;wBACD,aAAA,CAAA,WAAA;wBACA,aAAA,CAAA,WAAA;0BACE,aAAA,CAAA,WAAA;8BACI,aAAA,CAAA,WAAA;4BACF,aAAA,CAAA,WAAA,CAAA,aAAA;;oBAER,aAAA,CAAA,gBAAA,CAAA,UAAA;;mBAED,aAAA,CAAA,gBAAA;;0BAEO,aAAA,CAAA,gBAAA;;wBAGF,aAAA,CAAA,WAAA;oDAjEP,SAAS;sDAAT,SAAS;AAkErB;;","names":[]}
|