@aurodesignsystem-dev/auro-formkit 0.0.0-pr1505.0 → 0.0.0-pr1506.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +138 -266
- package/components/combobox/demo/getting-started.min.js +138 -266
- package/components/combobox/demo/index.min.js +138 -266
- package/components/combobox/dist/auro-combobox.d.ts +9 -0
- package/components/combobox/dist/index.js +138 -266
- package/components/combobox/dist/registered.js +138 -266
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.md +0 -2
- package/components/datepicker/demo/customize.md +33 -195
- package/components/datepicker/demo/customize.min.js +41 -164
- package/components/datepicker/demo/index.min.js +40 -156
- package/components/datepicker/dist/index.js +40 -156
- package/components/datepicker/dist/registered.js +40 -156
- package/components/datepicker/dist/src/auro-datepicker.d.ts +0 -2
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +351 -599
- package/components/form/demo/getting-started.min.js +351 -599
- package/components/form/demo/index.min.js +351 -599
- package/components/form/demo/registerDemoDeps.min.js +351 -599
- package/components/input/demo/customize.md +55 -56
- package/components/input/demo/customize.min.js +36 -147
- package/components/input/demo/getting-started.min.js +36 -147
- package/components/input/demo/index.md +2 -2
- package/components/input/demo/index.min.js +36 -147
- package/components/input/dist/base-input.d.ts +0 -48
- package/components/input/dist/index.js +36 -147
- package/components/input/dist/registered.js +36 -147
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.md +1 -0
- package/components/select/demo/customize.md +71 -0
- package/components/select/demo/customize.min.js +133 -26
- package/components/select/demo/getting-started.min.js +133 -26
- package/components/select/demo/index.min.js +133 -26
- package/components/select/demo/keyboard-behavior.md +18 -0
- package/components/select/dist/auro-select.d.ts +38 -2
- package/components/select/dist/index.js +133 -26
- package/components/select/dist/registered.js +133 -26
- package/components/select/dist/selectUtils.d.ts +12 -0
- package/custom-elements.json +114 -274
- package/package.json +1 -1
|
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
};
|
|
1101
1101
|
|
|
1102
|
-
var formkitVersion$1 = '
|
|
1102
|
+
var formkitVersion$1 = '202606192004';
|
|
1103
1103
|
|
|
1104
1104
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1105
1105
|
// See LICENSE in the project root for license information.
|
|
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202606192004';
|
|
5449
5449
|
|
|
5450
5450
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5451
5451
|
static get properties() {
|
|
@@ -1099,7 +1099,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1099
1099
|
}
|
|
1100
1100
|
};
|
|
1101
1101
|
|
|
1102
|
-
var formkitVersion$1 = '
|
|
1102
|
+
var formkitVersion$1 = '202606192004';
|
|
1103
1103
|
|
|
1104
1104
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1105
1105
|
// See LICENSE in the project root for license information.
|
|
@@ -5445,7 +5445,7 @@ class AuroHelpText extends i$2 {
|
|
|
5445
5445
|
}
|
|
5446
5446
|
}
|
|
5447
5447
|
|
|
5448
|
-
var formkitVersion = '
|
|
5448
|
+
var formkitVersion = '202606192004';
|
|
5449
5449
|
|
|
5450
5450
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5451
5451
|
static get properties() {
|
|
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1049
1049
|
}
|
|
1050
1050
|
};
|
|
1051
1051
|
|
|
1052
|
-
var formkitVersion$1 = '
|
|
1052
|
+
var formkitVersion$1 = '202606192004';
|
|
1053
1053
|
|
|
1054
1054
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1055
1055
|
// See LICENSE in the project root for license information.
|
|
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
}
|
|
5379
5379
|
|
|
5380
|
-
var formkitVersion = '
|
|
5380
|
+
var formkitVersion = '202606192004';
|
|
5381
5381
|
|
|
5382
5382
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5383
5383
|
static get properties() {
|
|
@@ -1049,7 +1049,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1049
1049
|
}
|
|
1050
1050
|
};
|
|
1051
1051
|
|
|
1052
|
-
var formkitVersion$1 = '
|
|
1052
|
+
var formkitVersion$1 = '202606192004';
|
|
1053
1053
|
|
|
1054
1054
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1055
1055
|
// See LICENSE in the project root for license information.
|
|
@@ -5377,7 +5377,7 @@ class AuroHelpText extends LitElement {
|
|
|
5377
5377
|
}
|
|
5378
5378
|
}
|
|
5379
5379
|
|
|
5380
|
-
var formkitVersion = '
|
|
5380
|
+
var formkitVersion = '202606192004';
|
|
5381
5381
|
|
|
5382
5382
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5383
5383
|
static get properties() {
|
|
@@ -109,8 +109,6 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
109
109
|
| `fromLabel` | Defines the label content for the first input. |
|
|
110
110
|
| `helpText` | Defines the content of the helpText. |
|
|
111
111
|
| `label` | Defines the label content for the entire datepicker when `layout="snowflake"`. |
|
|
112
|
-
| `optionalFromLabel` | Overrides the "(optional)" text rendered next to the first input's label when the datepicker is not `required`. |
|
|
113
|
-
| `optionalToLabel` | Overrides the "(optional)" text rendered next to the second input's label when `range` is set and the datepicker is not `required`. |
|
|
114
112
|
| `popover_YYYY_MM_DD` | Defines the content to display in the auro-calendar-cell popover for the specified date. |
|
|
115
113
|
| `toLabel` | Defines the label content for the second input when the `range` attribute is used. |
|
|
116
114
|
|
|
@@ -255,9 +255,9 @@
|
|
|
255
255
|
<auro-header level="3" id="localization">Localization</auro-header>
|
|
256
256
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/localization.md) -->
|
|
257
257
|
<!-- The below content is automatically added from ./../docs/partials/customize/localization.md -->
|
|
258
|
-
<p>The component supports complete localization, including visible strings, screen reader announcements
|
|
258
|
+
<p>The component supports complete localization, including visible strings, screen reader announcements and locale based date formatting.</p>
|
|
259
259
|
<auro-header level="4" id="localizationTrigger">Trigger</auro-header>
|
|
260
|
-
<auro-header level="
|
|
260
|
+
<auro-header level="4" id="localizationTriggerVisibleStrings">Trigger Visible strings</auro-header>
|
|
261
261
|
<p>The visible strings rendered in the input, trigger, and fullscreen bib are not derived from <code>locale</code> — they are projected through named slots so each language can supply its own translation. Pass a <code><span></code> with the matching <code>slot</code> attribute for every string you need to localize.</p>
|
|
262
262
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-visible-strings.html) -->
|
|
263
263
|
<!-- The below content is automatically added from ./../apiExamples/localization-visible-strings.html -->
|
|
@@ -265,13 +265,13 @@
|
|
|
265
265
|
<pre class="language-diff"><code class="language-diff"> <auro-datepicker>
|
|
266
266
|
+ <span slot="fromLabel">Abreisedatum</span>
|
|
267
267
|
+ <span slot="helpText">Wählen Sie ein Datum</span>
|
|
268
|
-
+ <span slot="
|
|
268
|
+
+ <span slot="optionalLabel">(freiwillig)</span>
|
|
269
269
|
+ <span slot="bib.fullscreen.headline">Datum auswählen</span>
|
|
270
270
|
+ <span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
|
|
271
271
|
</auro-datepicker></code></pre>
|
|
272
272
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
273
273
|
<auro-header level="4" id="localizationCalendar">Calendar</auro-header>
|
|
274
|
-
<auro-header level="
|
|
274
|
+
<auro-header level="4" id="localizationCalendarVisibleStrings">Visible strings</auro-header>
|
|
275
275
|
<p>By default, the calendar weekday names rendered above the day grid and the month names rendered in the calendar header are derived from the active <code>locale</code> using the browser's <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</auro-hyperlink> API, so they update automatically when <code>locale</code> changes. Use the <code>monthNames</code> attribute to override the derived month names — for example, to supply a translation the browser does not produce or to support a locale the browser does not recognize.</p>
|
|
276
276
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-calendar-strings.html) -->
|
|
277
277
|
<!-- The below content is automatically added from ./../apiExamples/localization-calendar-strings.html -->
|
|
@@ -280,64 +280,9 @@
|
|
|
280
280
|
+ <auro-datepicker monthNames='["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]'>
|
|
281
281
|
<span slot="fromLabel">Abreisedatum</span>
|
|
282
282
|
<span slot="helpText">Wählen Sie ein Datum</span>
|
|
283
|
-
<span slot="optionalFromLabel">(freiwillig)</span>
|
|
284
283
|
</auro-datepicker></code></pre>
|
|
285
284
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
286
|
-
<
|
|
287
|
-
<div class="exampleWrapper">
|
|
288
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
|
|
289
|
-
<!-- The below content is automatically added from ./../apiExamples/localization.html -->
|
|
290
|
-
<auro-datepicker
|
|
291
|
-
range
|
|
292
|
-
locale="es-MX"
|
|
293
|
-
rangeLabelStart="fecha de salida"
|
|
294
|
-
rangeLabelEnd="fecha de regreso"
|
|
295
|
-
rangeLabelBeforeRange="antes de la salida"
|
|
296
|
-
rangeLabelInRange="entre vuelos"
|
|
297
|
-
rangeLabelAfterRange="después del regreso"
|
|
298
|
-
navLabelPrevMonth="Ir al mes anterior"
|
|
299
|
-
navLabelNextMonth="Ir al mes siguiente"
|
|
300
|
-
calendarGridLabel="Días del mes del calendario"
|
|
301
|
-
id="localizationExample">
|
|
302
|
-
<span slot="fromLabel">Salida</span>
|
|
303
|
-
<span slot="toLabel">Regreso</span>
|
|
304
|
-
<span slot="helpText">Seleccione un rango de fechas</span>
|
|
305
|
-
<span slot="optionalFromLabel">(opcional)</span>
|
|
306
|
-
<span slot="optionalToLabel">(opcional)</span>
|
|
307
|
-
<span slot="bib.fullscreen.headline">Seleccione fechas</span>
|
|
308
|
-
<span slot="bib.fullscreen.fromLabel">Salida</span>
|
|
309
|
-
<span slot="bib.fullscreen.toLabel">Regreso</span>
|
|
310
|
-
</auro-datepicker>
|
|
311
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
312
|
-
</div>
|
|
313
|
-
<auro-accordion alignRight>
|
|
314
|
-
<span slot="trigger">See code</span>
|
|
315
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
|
|
316
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
|
|
317
|
-
<pre class="language-html"><code class="language-html"><auro-datepicker
|
|
318
|
-
range
|
|
319
|
-
locale="es-MX"
|
|
320
|
-
rangeLabelStart="fecha de salida"
|
|
321
|
-
rangeLabelEnd="fecha de regreso"
|
|
322
|
-
rangeLabelBeforeRange="antes de la salida"
|
|
323
|
-
rangeLabelInRange="entre vuelos"
|
|
324
|
-
rangeLabelAfterRange="después del regreso"
|
|
325
|
-
navLabelPrevMonth="Ir al mes anterior"
|
|
326
|
-
navLabelNextMonth="Ir al mes siguiente"
|
|
327
|
-
calendarGridLabel="Días del mes del calendario"
|
|
328
|
-
id="localizationExample">
|
|
329
|
-
<span slot="fromLabel">Salida</span>
|
|
330
|
-
<span slot="toLabel">Regreso</span>
|
|
331
|
-
<span slot="helpText">Seleccione un rango de fechas</span>
|
|
332
|
-
<span slot="optionalFromLabel">(opcional)</span>
|
|
333
|
-
<span slot="optionalToLabel">(opcional)</span>
|
|
334
|
-
<span slot="bib.fullscreen.headline">Seleccione fechas</span>
|
|
335
|
-
<span slot="bib.fullscreen.fromLabel">Salida</span>
|
|
336
|
-
<span slot="bib.fullscreen.toLabel">Regreso</span>
|
|
337
|
-
</auro-datepicker></code></pre>
|
|
338
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
339
|
-
</auro-accordion>
|
|
340
|
-
<auro-header level="5" id="localizationCalendarA11yStrings">Screen Reader Strings</auro-header>
|
|
285
|
+
<auro-header level="4" id="localizationCalendarA11yStrings">Screen reader strings</auro-header>
|
|
341
286
|
<p>Assistive-technology announcements — range descriptors (<code>rangeLabelStart</code>, <code>rangeLabelEnd</code>, <code>rangeLabelBeforeRange</code>, <code>rangeLabelInRange</code>, <code>rangeLabelAfterRange</code>), month navigation labels (<code>navLabelPrevMonth</code>, <code>navLabelNextMonth</code>), and the calendar grid label (<code>calendarGridLabel</code>) — are exposed as individual attributes so they can be translated independently of the visible UI. These strings are not derived from <code>locale</code>; supply translated values for every language you support.</p>
|
|
342
287
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-screenreader-strings.html) -->
|
|
343
288
|
<!-- The below content is automatically added from ./../apiExamples/localization-screenreader-strings.html -->
|
|
@@ -356,11 +301,9 @@
|
|
|
356
301
|
<span slot="fromLabel">Abreise</span>
|
|
357
302
|
<span slot="toLabel">Rückkehr</span>
|
|
358
303
|
<span slot="helpText">Wählen Sie einen Zeitraum</span>
|
|
359
|
-
<span slot="optionalFromLabel">(freiwillig)</span>
|
|
360
|
-
<span slot="optionalToLabel">(freiwillig)</span>
|
|
361
304
|
</auro-datepicker></code></pre>
|
|
362
305
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
363
|
-
<auro-header level="4" id="localizationDateFormatting">Date
|
|
306
|
+
<auro-header level="4" id="localizationDateFormatting">Date formatting</auro-header>
|
|
364
307
|
<p>The <code>locale</code> attribute drives the date format used by the input and the calendar. Setting <code>locale</code> automatically selects the regional format (for example <code>en-US</code> → <code>mm/dd/yyyy</code>, <code>de-DE</code> → <code>dd.mm.yyyy</code>, <code>ja-JP</code> → <code>yyyy/mm/dd</code>), derived from the browser's <code>Intl</code> API, so <code>format</code> does not need to be set manually.</p>
|
|
365
308
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization-locale.html) -->
|
|
366
309
|
<!-- The below content is automatically added from ./../apiExamples/localization-locale.html -->
|
|
@@ -369,7 +312,7 @@
|
|
|
369
312
|
+ <auro-datepicker locale="de-DE">
|
|
370
313
|
<span slot="fromLabel">Deutsches Datum</span>
|
|
371
314
|
<span slot="helpText">Hilfetext</span>
|
|
372
|
-
<span slot="
|
|
315
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
373
316
|
</auro-datepicker></code></pre>
|
|
374
317
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
375
318
|
<p>If no <code>locale</code> attribute is present, the component walks up the DOM looking for the nearest ancestor with a <code>data-locale</code> attribute; if none is found, it defaults to <code>en-US</code>.</p>
|
|
@@ -380,7 +323,7 @@
|
|
|
380
323
|
<auro-datepicker>
|
|
381
324
|
<span slot="fromLabel">継承された ja-JP 日付形式</span>
|
|
382
325
|
<span slot="helpText">ヘルプテキスト</span>
|
|
383
|
-
<span slot="
|
|
326
|
+
<span slot="optionalLabel">(任意)</span>
|
|
384
327
|
</auro-datepicker>
|
|
385
328
|
+ </div></code></pre>
|
|
386
329
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -393,15 +336,14 @@
|
|
|
393
336
|
+ format="mm/dd/yyyy">
|
|
394
337
|
<span slot="fromLabel">Deutsches Datum mit mm/dd/yyyy-Format</span>
|
|
395
338
|
<span slot="helpText">Hilfetext</span>
|
|
396
|
-
<span slot="
|
|
339
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
397
340
|
</auro-datepicker></code></pre>
|
|
398
341
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
399
|
-
<p>The following live example shows several locale configurations in action:</p>
|
|
400
342
|
<div class="exampleWrapper">
|
|
401
343
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale.html) -->
|
|
402
344
|
<!-- The below content is automatically added from ./../apiExamples/locale.html -->
|
|
403
345
|
<div data-locale="de-DE">
|
|
404
|
-
<
|
|
346
|
+
<auro-header level="4" >de-DE Example</auro-header>
|
|
405
347
|
<auro-datepicker
|
|
406
348
|
locale="de-DE"
|
|
407
349
|
range
|
|
@@ -413,16 +355,11 @@
|
|
|
413
355
|
navLabelPrevMonth="Vorheriger Monat"
|
|
414
356
|
navLabelNextMonth="Nächster Monat"
|
|
415
357
|
calendarGridLabel="Kalendertage des Monats">
|
|
416
|
-
<span slot="fromLabel">
|
|
417
|
-
<span slot="toLabel">Rückkehrdatum</span>
|
|
358
|
+
<span slot="fromLabel">Deutsches Datum</span>
|
|
418
359
|
<span slot="helpText">Hilfetext</span>
|
|
419
|
-
<span slot="
|
|
420
|
-
<span slot="optionalToLabel">(freiwillig)</span>
|
|
421
|
-
<span slot="bib.fullscreen.headline">Datum auswählen</span>
|
|
422
|
-
<span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
|
|
423
|
-
<span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
|
|
360
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
424
361
|
</auro-datepicker>
|
|
425
|
-
<
|
|
362
|
+
<auro-header level="4" >zh-CN Example</auro-header>
|
|
426
363
|
<auro-datepicker
|
|
427
364
|
locale="zh-CN"
|
|
428
365
|
range
|
|
@@ -434,16 +371,11 @@
|
|
|
434
371
|
navLabelPrevMonth="上个月"
|
|
435
372
|
navLabelNextMonth="下个月"
|
|
436
373
|
calendarGridLabel="本月的日历天数">
|
|
437
|
-
<span slot="fromLabel"
|
|
438
|
-
<span slot="toLabel">返回日期</span>
|
|
374
|
+
<span slot="fromLabel">中文日期</span>
|
|
439
375
|
<span slot="helpText">帮助文本</span>
|
|
440
|
-
<span slot="
|
|
441
|
-
<span slot="optionalToLabel">(可选)</span>
|
|
442
|
-
<span slot="bib.fullscreen.headline">选择日期</span>
|
|
443
|
-
<span slot="bib.fullscreen.fromLabel">出发日期</span>
|
|
444
|
-
<span slot="bib.fullscreen.toLabel">返回日期</span>
|
|
376
|
+
<span slot="optionalLabel">(可选)</span>
|
|
445
377
|
</auro-datepicker>
|
|
446
|
-
<
|
|
378
|
+
<auro-header level="4">Inherited de-DE date-locale Example</auro-header>
|
|
447
379
|
<auro-datepicker
|
|
448
380
|
range
|
|
449
381
|
rangeLabelStart="Startdatum"
|
|
@@ -454,16 +386,11 @@
|
|
|
454
386
|
navLabelPrevMonth="Vorheriger Monat"
|
|
455
387
|
navLabelNextMonth="Nächster Monat"
|
|
456
388
|
calendarGridLabel="Kalendertage des Monats">
|
|
457
|
-
<span slot="fromLabel">
|
|
458
|
-
<span slot="toLabel">Rückkehrdatum</span>
|
|
389
|
+
<span slot="fromLabel">Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)</span>
|
|
459
390
|
<span slot="helpText">Hilfetext</span>
|
|
460
|
-
<span slot="
|
|
461
|
-
<span slot="optionalToLabel">(freiwillig)</span>
|
|
462
|
-
<span slot="bib.fullscreen.headline">Datum auswählen</span>
|
|
463
|
-
<span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
|
|
464
|
-
<span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
|
|
391
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
465
392
|
</auro-datepicker>
|
|
466
|
-
<
|
|
393
|
+
<auro-header level="4" >ja-JP with `mm/dd/yyyy` format Example</auro-header>
|
|
467
394
|
<auro-datepicker
|
|
468
395
|
locale="ja-JP"
|
|
469
396
|
format="mm/dd/yyyy"
|
|
@@ -476,14 +403,9 @@
|
|
|
476
403
|
navLabelPrevMonth="前の月"
|
|
477
404
|
navLabelNextMonth="次の月"
|
|
478
405
|
calendarGridLabel="カレンダーの日付">
|
|
479
|
-
<span slot="fromLabel"
|
|
480
|
-
<span slot="toLabel">帰国日</span>
|
|
406
|
+
<span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
|
|
481
407
|
<span slot="helpText">ヘルプテキスト</span>
|
|
482
|
-
<span slot="
|
|
483
|
-
<span slot="optionalToLabel">(任意)</span>
|
|
484
|
-
<span slot="bib.fullscreen.headline">日付を選択</span>
|
|
485
|
-
<span slot="bib.fullscreen.fromLabel">出発日</span>
|
|
486
|
-
<span slot="bib.fullscreen.toLabel">帰国日</span>
|
|
408
|
+
<span slot="optionalLabel">(任意)</span>
|
|
487
409
|
</auro-datepicker>
|
|
488
410
|
</div>
|
|
489
411
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -493,7 +415,7 @@
|
|
|
493
415
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale.html) -->
|
|
494
416
|
<!-- The below code snippet is automatically added from ./../apiExamples/locale.html -->
|
|
495
417
|
<pre class="language-html"><code class="language-html"><div data-locale="de-DE">
|
|
496
|
-
<
|
|
418
|
+
<auro-header level="4" >de-DE Example</auro-header>
|
|
497
419
|
<auro-datepicker
|
|
498
420
|
locale="de-DE"
|
|
499
421
|
range
|
|
@@ -505,16 +427,11 @@
|
|
|
505
427
|
navLabelPrevMonth="Vorheriger Monat"
|
|
506
428
|
navLabelNextMonth="Nächster Monat"
|
|
507
429
|
calendarGridLabel="Kalendertage des Monats">
|
|
508
|
-
<span slot="fromLabel">
|
|
509
|
-
<span slot="toLabel">Rückkehrdatum</span>
|
|
430
|
+
<span slot="fromLabel">Deutsches Datum</span>
|
|
510
431
|
<span slot="helpText">Hilfetext</span>
|
|
511
|
-
<span slot="
|
|
512
|
-
<span slot="optionalToLabel">(freiwillig)</span>
|
|
513
|
-
<span slot="bib.fullscreen.headline">Datum auswählen</span>
|
|
514
|
-
<span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
|
|
515
|
-
<span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
|
|
432
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
516
433
|
</auro-datepicker>
|
|
517
|
-
<
|
|
434
|
+
<auro-header level="4" >zh-CN Example</auro-header>
|
|
518
435
|
<auro-datepicker
|
|
519
436
|
locale="zh-CN"
|
|
520
437
|
range
|
|
@@ -526,16 +443,11 @@
|
|
|
526
443
|
navLabelPrevMonth="上个月"
|
|
527
444
|
navLabelNextMonth="下个月"
|
|
528
445
|
calendarGridLabel="本月的日历天数">
|
|
529
|
-
<span slot="fromLabel">
|
|
530
|
-
<span slot="toLabel">返回日期</span>
|
|
446
|
+
<span slot="fromLabel">中文日期</span>
|
|
531
447
|
<span slot="helpText">帮助文本</span>
|
|
532
|
-
<span slot="
|
|
533
|
-
<span slot="optionalToLabel">(可选)</span>
|
|
534
|
-
<span slot="bib.fullscreen.headline">选择日期</span>
|
|
535
|
-
<span slot="bib.fullscreen.fromLabel">出发日期</span>
|
|
536
|
-
<span slot="bib.fullscreen.toLabel">返回日期</span>
|
|
448
|
+
<span slot="optionalLabel">(可选)</span>
|
|
537
449
|
</auro-datepicker>
|
|
538
|
-
<
|
|
450
|
+
<auro-header level="4">Inherited de-DE date-locale Example</auro-header>
|
|
539
451
|
<auro-datepicker
|
|
540
452
|
range
|
|
541
453
|
rangeLabelStart="Startdatum"
|
|
@@ -546,16 +458,11 @@
|
|
|
546
458
|
navLabelPrevMonth="Vorheriger Monat"
|
|
547
459
|
navLabelNextMonth="Nächster Monat"
|
|
548
460
|
calendarGridLabel="Kalendertage des Monats">
|
|
549
|
-
<span slot="fromLabel">
|
|
550
|
-
<span slot="toLabel">Rückkehrdatum</span>
|
|
461
|
+
<span slot="fromLabel">Nächstes `data-locale`-Attributformat (`de-DE` in diesem Fall)</span>
|
|
551
462
|
<span slot="helpText">Hilfetext</span>
|
|
552
|
-
<span slot="
|
|
553
|
-
<span slot="optionalToLabel">(freiwillig)</span>
|
|
554
|
-
<span slot="bib.fullscreen.headline">Datum auswählen</span>
|
|
555
|
-
<span slot="bib.fullscreen.fromLabel">Abreisedatum</span>
|
|
556
|
-
<span slot="bib.fullscreen.toLabel">Rückkehrdatum</span>
|
|
463
|
+
<span slot="optionalLabel">(freiwillig)</span>
|
|
557
464
|
</auro-datepicker>
|
|
558
|
-
<
|
|
465
|
+
<auro-header level="4" >ja-JP with `mm/dd/yyyy` format Example</auro-header>
|
|
559
466
|
<auro-datepicker
|
|
560
467
|
locale="ja-JP"
|
|
561
468
|
format="mm/dd/yyyy"
|
|
@@ -568,82 +475,13 @@
|
|
|
568
475
|
navLabelPrevMonth="前の月"
|
|
569
476
|
navLabelNextMonth="次の月"
|
|
570
477
|
calendarGridLabel="カレンダーの日付">
|
|
571
|
-
<span slot="fromLabel">
|
|
572
|
-
<span slot="toLabel">帰国日</span>
|
|
478
|
+
<span slot="fromLabel">明示的な mm/dd/yyyy 形式の ja-JP ロケール</span>
|
|
573
479
|
<span slot="helpText">ヘルプテキスト</span>
|
|
574
|
-
<span slot="
|
|
575
|
-
<span slot="optionalToLabel">(任意)</span>
|
|
576
|
-
<span slot="bib.fullscreen.headline">日付を選択</span>
|
|
577
|
-
<span slot="bib.fullscreen.fromLabel">出発日</span>
|
|
578
|
-
<span slot="bib.fullscreen.toLabel">帰国日</span>
|
|
480
|
+
<span slot="optionalLabel">(任意)</span>
|
|
579
481
|
</auro-datepicker>
|
|
580
482
|
</div></code></pre>
|
|
581
483
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
582
484
|
</auro-accordion>
|
|
583
|
-
<auro-header level="4" id="localizationSnowflake">Layout Interaction</auro-header>
|
|
584
|
-
<p>Locale-driven formatting applies across both the <code>classic</code> and <code>snowflake</code> layouts. In the snowflake layout, the localized value renders via <code>Intl.DateTimeFormat</code> using the active <code>locale</code>, so the visible date adapts automatically.</p>
|
|
585
|
-
<p>The localized value is a compact summary — by design it uses a fixed <code>{ month: 'short', day: '2-digit' }</code> shape and does <strong>not</strong> reflect the <code>format</code> attribute. <code>format</code> governs the input mask only. To render it differently (for example, to include the year or honor a custom format), project content into the <code>displayValue</code> slot.</p>
|
|
586
|
-
<div class="exampleWrapper--ondark">
|
|
587
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake-locale.html) -->
|
|
588
|
-
<!-- The below content is automatically added from ./../apiExamples/snowflake-locale.html -->
|
|
589
|
-
<p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code></strong> — derives <code>dd/mm/yyyy</code> from the locale. Mask: <code>DD/MM/YYYY</code>.</p>
|
|
590
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR">
|
|
591
|
-
<span slot="label">Date de départ</span>
|
|
592
|
-
<span slot="bib.fullscreen.headline">Choisir une date</span>
|
|
593
|
-
<span slot="fromLabel">Date de départ</span>
|
|
594
|
-
<span slot="bib.fullscreen.fromLabel">Date de départ</span>
|
|
595
|
-
<span slot="helpText">Texte d'aide</span>
|
|
596
|
-
</auro-datepicker>
|
|
597
|
-
<p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="ja-JP"</code>, range</strong> — derives <code>yyyy/mm/dd</code>. Mask: <code>YYYY/MM/DD</code>.</p>
|
|
598
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="ja-JP" range>
|
|
599
|
-
<span slot="label">出発日 / 帰国日</span>
|
|
600
|
-
<span slot="bib.fullscreen.headline">日付を選択</span>
|
|
601
|
-
<span slot="fromLabel">出発日</span>
|
|
602
|
-
<span slot="toLabel">帰国日</span>
|
|
603
|
-
<span slot="bib.fullscreen.fromLabel">出発日</span>
|
|
604
|
-
<span slot="bib.fullscreen.toLabel">帰国日</span>
|
|
605
|
-
</auro-datepicker>
|
|
606
|
-
<p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code> + explicit <code>format="yyyy/mm/dd"</code></strong> — explicit format wins for the mask, but the localized value is rendered the same as the first picker (it ignores <code>format</code>).</p>
|
|
607
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR" format="yyyy/mm/dd">
|
|
608
|
-
<span slot="label">Date avec format explicite</span>
|
|
609
|
-
<span slot="bib.fullscreen.headline">Choisir une date</span>
|
|
610
|
-
<span slot="fromLabel">Date avec format explicite</span>
|
|
611
|
-
<span slot="bib.fullscreen.fromLabel">Date avec format explicite</span>
|
|
612
|
-
</auro-datepicker>
|
|
613
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
614
|
-
</div>
|
|
615
|
-
<auro-accordion alignRight>
|
|
616
|
-
<span slot="trigger">See code</span>
|
|
617
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake-locale.html) -->
|
|
618
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/snowflake-locale.html -->
|
|
619
|
-
<pre class="language-html"><code class="language-html"><p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code></strong> — derives <code>dd/mm/yyyy</code> from the locale. Mask: <code>DD/MM/YYYY</code>.</p>
|
|
620
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR">
|
|
621
|
-
<span slot="label">Date de départ</span>
|
|
622
|
-
<span slot="bib.fullscreen.headline">Choisir une date</span>
|
|
623
|
-
<span slot="fromLabel">Date de départ</span>
|
|
624
|
-
<span slot="bib.fullscreen.fromLabel">Date de départ</span>
|
|
625
|
-
<span slot="helpText">Texte d'aide</span>
|
|
626
|
-
</auro-datepicker>
|
|
627
|
-
|
|
628
|
-
<p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="ja-JP"</code>, range</strong> — derives <code>yyyy/mm/dd</code>. Mask: <code>YYYY/MM/DD</code>.</p>
|
|
629
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="ja-JP" range>
|
|
630
|
-
<span slot="label">出発日 / 帰国日</span>
|
|
631
|
-
<span slot="bib.fullscreen.headline">日付を選択</span>
|
|
632
|
-
<span slot="fromLabel">出発日</span>
|
|
633
|
-
<span slot="toLabel">帰国日</span>
|
|
634
|
-
<span slot="bib.fullscreen.fromLabel">出発日</span>
|
|
635
|
-
<span slot="bib.fullscreen.toLabel">帰国日</span>
|
|
636
|
-
</auro-datepicker>
|
|
637
|
-
|
|
638
|
-
<p class="body-sm" style="color: var(--ds-basic-color-texticon-inverse);"><strong><code>locale="fr-FR"</code> + explicit <code>format="yyyy/mm/dd"</code></strong> — explicit format wins for the mask, but the localized value is rendered the same as the first picker (it ignores <code>format</code>).</p>
|
|
639
|
-
<auro-datepicker layout="snowflake" shape="snowflake" appearance="inverse" locale="fr-FR" format="yyyy/mm/dd">
|
|
640
|
-
<span slot="label">Date avec format explicite</span>
|
|
641
|
-
<span slot="bib.fullscreen.headline">Choisir une date</span>
|
|
642
|
-
<span slot="fromLabel">Date avec format explicite</span>
|
|
643
|
-
<span slot="bib.fullscreen.fromLabel">Date avec format explicite</span>
|
|
644
|
-
</auro-datepicker></code></pre>
|
|
645
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
646
|
-
</auro-accordion>
|
|
647
485
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
648
486
|
<auro-header level="3" id="layout">Shape, Size & Layout</auro-header>
|
|
649
487
|
<p>The <code>shape</code>, <code>size</code> and <code>layout</code> attributes work in collaboration to control the overall architecture of the component.</p>
|