@eui/eds 22.0.0-alpha.26 → 22.0.0-alpha.28
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/changelog.html +26 -0
- package/docs/components/EdsBreadcrumbItem.html +31 -0
- package/docs/components/EdsDatepicker.html +3 -3
- package/docs/components/EdsOverlay.html +31 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/EdsBreadcrumbItem.md +1 -0
- package/docs/json/EdsOverlay.md +1 -0
- package/docs/json/documentation.json +112 -63
- package/docs/llms.txt +4 -2
- package/docs/miscellaneous/typealiases.html +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-breadcrumb.mjs +14 -7
- package/fesm2022/eui-eds-eds-breadcrumb.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-chip.mjs +2 -2
- package/fesm2022/eui-eds-eds-chip.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-datepicker.mjs +5 -5
- package/fesm2022/eui-eds-eds-datepicker.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-language-selector.mjs +2 -2
- package/fesm2022/eui-eds-eds-language-selector.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-overlay.mjs +5 -3
- package/fesm2022/eui-eds-eds-overlay.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eui-eds-eds-breadcrumb.d.ts +6 -1
- package/types/eui-eds-eds-breadcrumb.d.ts.map +1 -1
- package/types/eui-eds-eds-chip.d.ts +1 -1
- package/types/eui-eds-eds-overlay.d.ts +3 -1
- package/types/eui-eds-eds-overlay.d.ts.map +1 -1
|
@@ -21553,7 +21553,7 @@
|
|
|
21553
21553
|
"assetsDirs": [],
|
|
21554
21554
|
"styleUrlsData": [
|
|
21555
21555
|
{
|
|
21556
|
-
"data": "@use '../base' as base;\n\n
|
|
21556
|
+
"data": "@use '../base' as base;\n\n:host {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--eds-sp-3xs);\n font: var(--eds-f-label-m);\n color: var(--eds-c-foreground-subtler);\n}\n\n@include base.media(base.$eds-bkp-mobile) {\n :host {\n display: none;\n }\n}\n",
|
|
21557
21557
|
"styleUrl": "./eds-breadcrumb.scss"
|
|
21558
21558
|
}
|
|
21559
21559
|
],
|
|
@@ -21615,7 +21615,7 @@
|
|
|
21615
21615
|
},
|
|
21616
21616
|
{
|
|
21617
21617
|
"name": "EdsBreadcrumbItem",
|
|
21618
|
-
"id": "component-EdsBreadcrumbItem-
|
|
21618
|
+
"id": "component-EdsBreadcrumbItem-6a7050af7c66f6304f9fe8f8e0dd2da0247b1fac078b1fe0a13641829d80d85585562a22575b4fbbee1e36cb7accbf957ff05106e060c899da68579ce97c6d0a",
|
|
21619
21619
|
"file": "packages/eds/eds-breadcrumb/eds-breadcrumb-item.ts",
|
|
21620
21620
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
21621
21621
|
"encapsulation": [],
|
|
@@ -21646,10 +21646,45 @@
|
|
|
21646
21646
|
"indexKey": "",
|
|
21647
21647
|
"optional": false,
|
|
21648
21648
|
"description": "<p>ARIA label for accessibility (especially useful for icon-only items).</p>\n",
|
|
21649
|
-
"line":
|
|
21649
|
+
"line": 47,
|
|
21650
21650
|
"rawdescription": "\nARIA label for accessibility (especially useful for icon-only items).",
|
|
21651
21651
|
"required": false
|
|
21652
21652
|
},
|
|
21653
|
+
{
|
|
21654
|
+
"name": "e2eAttr",
|
|
21655
|
+
"coverageIgnore": false,
|
|
21656
|
+
"defaultValue": "'eds-breadcrumb-item'",
|
|
21657
|
+
"deprecated": false,
|
|
21658
|
+
"deprecationMessage": "",
|
|
21659
|
+
"type": "string",
|
|
21660
|
+
"indexKey": "",
|
|
21661
|
+
"optional": false,
|
|
21662
|
+
"description": "<p>Data attribute value for end-to-end testing identification.\n'eds-breadcrumb-item'</p>\n",
|
|
21663
|
+
"line": 53,
|
|
21664
|
+
"rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-breadcrumb-item'\n",
|
|
21665
|
+
"jsdoctags": [
|
|
21666
|
+
{
|
|
21667
|
+
"pos": 1688,
|
|
21668
|
+
"end": 1724,
|
|
21669
|
+
"kind": 328,
|
|
21670
|
+
"id": 0,
|
|
21671
|
+
"flags": 16842752,
|
|
21672
|
+
"modifierFlagsCache": 0,
|
|
21673
|
+
"transformFlags": 0,
|
|
21674
|
+
"tagName": {
|
|
21675
|
+
"pos": 1689,
|
|
21676
|
+
"end": 1696,
|
|
21677
|
+
"kind": 80,
|
|
21678
|
+
"id": 0,
|
|
21679
|
+
"flags": 16842752,
|
|
21680
|
+
"transformFlags": 0,
|
|
21681
|
+
"escapedText": "default"
|
|
21682
|
+
},
|
|
21683
|
+
"comment": "<p>'eds-breadcrumb-item'</p>\n"
|
|
21684
|
+
}
|
|
21685
|
+
],
|
|
21686
|
+
"required": false
|
|
21687
|
+
},
|
|
21653
21688
|
{
|
|
21654
21689
|
"name": "icon",
|
|
21655
21690
|
"coverageIgnore": false,
|
|
@@ -21660,7 +21695,7 @@
|
|
|
21660
21695
|
"indexKey": "",
|
|
21661
21696
|
"optional": false,
|
|
21662
21697
|
"description": "<p>Icon name (EDS icon) displayed instead of or alongside the label.</p>\n",
|
|
21663
|
-
"line":
|
|
21698
|
+
"line": 44,
|
|
21664
21699
|
"rawdescription": "\nIcon name (EDS icon) displayed instead of or alongside the label.",
|
|
21665
21700
|
"required": false
|
|
21666
21701
|
},
|
|
@@ -21674,7 +21709,7 @@
|
|
|
21674
21709
|
"indexKey": "",
|
|
21675
21710
|
"optional": false,
|
|
21676
21711
|
"description": "<p>Text label for the breadcrumb item.</p>\n",
|
|
21677
|
-
"line":
|
|
21712
|
+
"line": 41,
|
|
21678
21713
|
"rawdescription": "\nText label for the breadcrumb item.",
|
|
21679
21714
|
"required": false
|
|
21680
21715
|
},
|
|
@@ -21688,7 +21723,7 @@
|
|
|
21688
21723
|
"indexKey": "",
|
|
21689
21724
|
"optional": false,
|
|
21690
21725
|
"description": "<p>Navigation target — string URL or Router commands array. Undefined makes item non-clickable.</p>\n",
|
|
21691
|
-
"line":
|
|
21726
|
+
"line": 57,
|
|
21692
21727
|
"rawdescription": "\nNavigation target — string URL or Router commands array. Undefined makes item non-clickable.",
|
|
21693
21728
|
"required": false
|
|
21694
21729
|
},
|
|
@@ -21702,7 +21737,7 @@
|
|
|
21702
21737
|
"indexKey": "",
|
|
21703
21738
|
"optional": false,
|
|
21704
21739
|
"description": "<p>Additional navigation options passed to Angular Router.</p>\n",
|
|
21705
|
-
"line":
|
|
21740
|
+
"line": 60,
|
|
21706
21741
|
"rawdescription": "\nAdditional navigation options passed to Angular Router.",
|
|
21707
21742
|
"required": false
|
|
21708
21743
|
}
|
|
@@ -21717,7 +21752,7 @@
|
|
|
21717
21752
|
"optional": false,
|
|
21718
21753
|
"returnType": "void",
|
|
21719
21754
|
"typeParameters": [],
|
|
21720
|
-
"line":
|
|
21755
|
+
"line": 70,
|
|
21721
21756
|
"deprecated": false,
|
|
21722
21757
|
"deprecationMessage": "",
|
|
21723
21758
|
"rawdescription": "\n",
|
|
@@ -21738,12 +21773,12 @@
|
|
|
21738
21773
|
"description": "<p>Individual breadcrumb item representing a single segment in the navigation path.\nSupports Angular Router navigation, icons, and labels.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><eds-breadcrumb-item link="/" icon="house" ariaLabel="Home"></eds-breadcrumb-item>\n<eds-breadcrumb-item link="/section" label="Section"></eds-breadcrumb-item>\n<eds-breadcrumb-item label="Current page"></eds-breadcrumb-item></code></pre></div>",
|
|
21739
21774
|
"rawdescription": "\n\nIndividual breadcrumb item representing a single segment in the navigation path.\nSupports Angular Router navigation, icons, and labels.\n\n```html\n<eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n<eds-breadcrumb-item link=\"/section\" label=\"Section\"></eds-breadcrumb-item>\n<eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n```\n",
|
|
21740
21775
|
"type": "component",
|
|
21741
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n inject,\n} from '@angular/core';\nimport { Router, NavigationExtras } from '@angular/router';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * Individual breadcrumb item representing a single segment in the navigation path.\n * Supports Angular Router navigation, icons, and labels.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item link=\"/section\" label=\"Section\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * ```\n */\n@Component({\n selector: 'eds-breadcrumb-item',\n templateUrl: './eds-breadcrumb-item.html',\n styleUrl: './eds-breadcrumb-item.scss',\n imports: [...EDS_ICON],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(click)': 'onClick()',\n '(keydown.enter)': 'onClick()',\n '[
|
|
21776
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n inject,\n} from '@angular/core';\nimport { Router, NavigationExtras } from '@angular/router';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\n\n/**\n * @description\n * Individual breadcrumb item representing a single segment in the navigation path.\n * Supports Angular Router navigation, icons, and labels.\n *\n * @usageNotes\n * ```html\n * <eds-breadcrumb-item link=\"/\" icon=\"house\" ariaLabel=\"Home\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item link=\"/section\" label=\"Section\"></eds-breadcrumb-item>\n * <eds-breadcrumb-item label=\"Current page\"></eds-breadcrumb-item>\n * ```\n */\n@Component({\n selector: 'eds-breadcrumb-item',\n templateUrl: './eds-breadcrumb-item.html',\n styleUrl: './eds-breadcrumb-item.scss',\n imports: [...EDS_ICON],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(click)': 'onClick()',\n '(keydown.enter)': 'onClick()',\n '[attr.clickable]': '!!link() || null',\n '[attr.current]': '_isLast || null',\n '[attr.aria-current]': '_isLast ? \"page\" : null',\n '[attr.tabindex]': '!!link() && !_isLast ? 0 : null',\n '[attr.role]': '!!link() ? \"link\" : null',\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsBreadcrumbItem {\n /** Text label for the breadcrumb item. */\n label = input<string>('');\n\n /** Icon name (EDS icon) displayed instead of or alongside the label. */\n icon = input<string>('');\n\n /** ARIA label for accessibility (especially useful for icon-only items). */\n ariaLabel = input('Breadcrumb item');\n\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-breadcrumb-item'\n */\n e2eAttr = input('eds-breadcrumb-item');\n\n /** Navigation target — string URL or Router commands array. Undefined makes item non-clickable. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n link = input<string | any[] | undefined>(undefined);\n\n /** Additional navigation options passed to Angular Router. */\n navigationExtras = input<NavigationExtras | undefined>(undefined);\n\n /** @internal Set by parent EdsBreadcrumb. */\n _isFirst = false;\n\n /** @internal Set by parent EdsBreadcrumb. */\n _isLast = false;\n\n private _router = inject(Router);\n\n onClick(): void {\n const linkValue = this.link();\n if (!linkValue) return;\n\n if (typeof linkValue === 'string') {\n if (linkValue.startsWith('http')) {\n window.location.href = linkValue;\n return;\n }\n this._router.navigateByUrl(linkValue, this.navigationExtras() || {});\n } else {\n this._router.navigate(linkValue, this.navigationExtras());\n }\n }\n}\n",
|
|
21742
21777
|
"styleUrl": "./eds-breadcrumb-item.scss",
|
|
21743
21778
|
"assetsDirs": [],
|
|
21744
21779
|
"styleUrlsData": [
|
|
21745
21780
|
{
|
|
21746
|
-
"data": "@use '../base' as base;\n\n
|
|
21781
|
+
"data": "@use '../base' as base;\n\n:host {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-3xs);\n white-space: nowrap;\n font: var(--eds-f-label-s);\n color: var(--eds-c-foreground-subtler);\n}\n\n:host([clickable]) {\n cursor: pointer;\n color: var(--eds-c-foreground-primary);\n\n &:hover .eds-breadcrumb-item__label {\n text-decoration: underline;\n }\n}\n\n:host([current]) {\n color: var(--eds-c-foreground);\n cursor: default;\n}\n\n:host .eds-breadcrumb-item__separator {\n color: var(--eds-c-foreground-subtler);\n}\n\n:host .eds-breadcrumb-item__label {\n @include base.eds-ellipsis();\n max-width: 200px;\n}\n",
|
|
21747
21782
|
"styleUrl": "./eds-breadcrumb-item.scss"
|
|
21748
21783
|
}
|
|
21749
21784
|
],
|
|
@@ -28102,7 +28137,7 @@
|
|
|
28102
28137
|
},
|
|
28103
28138
|
{
|
|
28104
28139
|
"name": "EdsChip",
|
|
28105
|
-
"id": "component-EdsChip-
|
|
28140
|
+
"id": "component-EdsChip-010367764117c5686d7cde5dfc9ed3b4c04698f91b1e286df1d01e1b53f72c6d38ef41ad4ce01de33e0035fec01b2b0bc84f3b1e835c0c21a72f161b97272202",
|
|
28106
28141
|
"file": "packages/eds/eds-chip/eds-chip.ts",
|
|
28107
28142
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
28108
28143
|
"encapsulation": [],
|
|
@@ -28137,16 +28172,16 @@
|
|
|
28137
28172
|
"rawdescription": "\n\nSets the `aria-label` attribute for the host element.\nWhen not set, assistive technology will use the text content of the chip.\n\nundefined\n",
|
|
28138
28173
|
"jsdoctags": [
|
|
28139
28174
|
{
|
|
28140
|
-
"pos":
|
|
28141
|
-
"end":
|
|
28175
|
+
"pos": 2563,
|
|
28176
|
+
"end": 2587,
|
|
28142
28177
|
"kind": 328,
|
|
28143
28178
|
"id": 0,
|
|
28144
28179
|
"flags": 16842752,
|
|
28145
28180
|
"modifierFlagsCache": 0,
|
|
28146
28181
|
"transformFlags": 0,
|
|
28147
28182
|
"tagName": {
|
|
28148
|
-
"pos":
|
|
28149
|
-
"end":
|
|
28183
|
+
"pos": 2564,
|
|
28184
|
+
"end": 2571,
|
|
28150
28185
|
"kind": 80,
|
|
28151
28186
|
"id": 0,
|
|
28152
28187
|
"flags": 16842752,
|
|
@@ -28172,16 +28207,16 @@
|
|
|
28172
28207
|
"rawdescription": "\n\nSemantic color of the chip.\n'neutral'\n",
|
|
28173
28208
|
"jsdoctags": [
|
|
28174
28209
|
{
|
|
28175
|
-
"pos":
|
|
28176
|
-
"end":
|
|
28210
|
+
"pos": 2075,
|
|
28211
|
+
"end": 2099,
|
|
28177
28212
|
"kind": 328,
|
|
28178
28213
|
"id": 0,
|
|
28179
28214
|
"flags": 16842752,
|
|
28180
28215
|
"modifierFlagsCache": 0,
|
|
28181
28216
|
"transformFlags": 0,
|
|
28182
28217
|
"tagName": {
|
|
28183
|
-
"pos":
|
|
28184
|
-
"end":
|
|
28218
|
+
"pos": 2076,
|
|
28219
|
+
"end": 2083,
|
|
28185
28220
|
"kind": 80,
|
|
28186
28221
|
"id": 0,
|
|
28187
28222
|
"flags": 16842752,
|
|
@@ -28220,16 +28255,16 @@
|
|
|
28220
28255
|
"rawdescription": "\n\nControls the disabled state of the chip.\nWhen true, prevents interaction and applies disabled styling.\n\nfalse\n",
|
|
28221
28256
|
"jsdoctags": [
|
|
28222
28257
|
{
|
|
28223
|
-
"pos":
|
|
28224
|
-
"end":
|
|
28258
|
+
"pos": 4068,
|
|
28259
|
+
"end": 4088,
|
|
28225
28260
|
"kind": 328,
|
|
28226
28261
|
"id": 0,
|
|
28227
28262
|
"flags": 16842752,
|
|
28228
28263
|
"modifierFlagsCache": 0,
|
|
28229
28264
|
"transformFlags": 0,
|
|
28230
28265
|
"tagName": {
|
|
28231
|
-
"pos":
|
|
28232
|
-
"end":
|
|
28266
|
+
"pos": 4069,
|
|
28267
|
+
"end": 4076,
|
|
28233
28268
|
"kind": 80,
|
|
28234
28269
|
"id": 0,
|
|
28235
28270
|
"flags": 16842752,
|
|
@@ -28255,16 +28290,16 @@
|
|
|
28255
28290
|
"rawdescription": "\n\nSets the `data-e2e` attribute for the host element.\n\n'eds-chip'\n",
|
|
28256
28291
|
"jsdoctags": [
|
|
28257
28292
|
{
|
|
28258
|
-
"pos":
|
|
28259
|
-
"end":
|
|
28293
|
+
"pos": 2942,
|
|
28294
|
+
"end": 2967,
|
|
28260
28295
|
"kind": 328,
|
|
28261
28296
|
"id": 0,
|
|
28262
28297
|
"flags": 16842752,
|
|
28263
28298
|
"modifierFlagsCache": 0,
|
|
28264
28299
|
"transformFlags": 0,
|
|
28265
28300
|
"tagName": {
|
|
28266
|
-
"pos":
|
|
28267
|
-
"end":
|
|
28301
|
+
"pos": 2943,
|
|
28302
|
+
"end": 2950,
|
|
28268
28303
|
"kind": 80,
|
|
28269
28304
|
"id": 0,
|
|
28270
28305
|
"flags": 16842752,
|
|
@@ -28290,16 +28325,16 @@
|
|
|
28290
28325
|
"rawdescription": "\n\nSets the edsInternalId of the chip.\n\n''\n",
|
|
28291
28326
|
"jsdoctags": [
|
|
28292
28327
|
{
|
|
28293
|
-
"pos":
|
|
28294
|
-
"end":
|
|
28328
|
+
"pos": 3069,
|
|
28329
|
+
"end": 3086,
|
|
28295
28330
|
"kind": 328,
|
|
28296
28331
|
"id": 0,
|
|
28297
28332
|
"flags": 16842752,
|
|
28298
28333
|
"modifierFlagsCache": 0,
|
|
28299
28334
|
"transformFlags": 0,
|
|
28300
28335
|
"tagName": {
|
|
28301
|
-
"pos":
|
|
28302
|
-
"end":
|
|
28336
|
+
"pos": 3070,
|
|
28337
|
+
"end": 3077,
|
|
28303
28338
|
"kind": 80,
|
|
28304
28339
|
"id": 0,
|
|
28305
28340
|
"flags": 16842752,
|
|
@@ -28339,16 +28374,16 @@
|
|
|
28339
28374
|
"rawdescription": "\n\nWhether the chip is in active/pressed state.\n\nfalse\n",
|
|
28340
28375
|
"jsdoctags": [
|
|
28341
28376
|
{
|
|
28342
|
-
"pos":
|
|
28343
|
-
"end":
|
|
28377
|
+
"pos": 3843,
|
|
28378
|
+
"end": 3863,
|
|
28344
28379
|
"kind": 328,
|
|
28345
28380
|
"id": 0,
|
|
28346
28381
|
"flags": 16842752,
|
|
28347
28382
|
"modifierFlagsCache": 0,
|
|
28348
28383
|
"transformFlags": 0,
|
|
28349
28384
|
"tagName": {
|
|
28350
|
-
"pos":
|
|
28351
|
-
"end":
|
|
28385
|
+
"pos": 3844,
|
|
28386
|
+
"end": 3851,
|
|
28352
28387
|
"kind": 80,
|
|
28353
28388
|
"id": 0,
|
|
28354
28389
|
"flags": 16842752,
|
|
@@ -28374,16 +28409,16 @@
|
|
|
28374
28409
|
"rawdescription": "\n\nWhether the chip can be removed.\n\nfalse\n",
|
|
28375
28410
|
"jsdoctags": [
|
|
28376
28411
|
{
|
|
28377
|
-
"pos":
|
|
28378
|
-
"end":
|
|
28412
|
+
"pos": 3680,
|
|
28413
|
+
"end": 3700,
|
|
28379
28414
|
"kind": 328,
|
|
28380
28415
|
"id": 0,
|
|
28381
28416
|
"flags": 16842752,
|
|
28382
28417
|
"modifierFlagsCache": 0,
|
|
28383
28418
|
"transformFlags": 0,
|
|
28384
28419
|
"tagName": {
|
|
28385
|
-
"pos":
|
|
28386
|
-
"end":
|
|
28420
|
+
"pos": 3681,
|
|
28421
|
+
"end": 3688,
|
|
28387
28422
|
"kind": 80,
|
|
28388
28423
|
"id": 0,
|
|
28389
28424
|
"flags": 16842752,
|
|
@@ -28409,16 +28444,16 @@
|
|
|
28409
28444
|
"rawdescription": "\n\nSize of the chip.\n'm'\n",
|
|
28410
28445
|
"jsdoctags": [
|
|
28411
28446
|
{
|
|
28412
|
-
"pos":
|
|
28413
|
-
"end":
|
|
28447
|
+
"pos": 2187,
|
|
28448
|
+
"end": 2205,
|
|
28414
28449
|
"kind": 328,
|
|
28415
28450
|
"id": 0,
|
|
28416
28451
|
"flags": 16842752,
|
|
28417
28452
|
"modifierFlagsCache": 0,
|
|
28418
28453
|
"transformFlags": 0,
|
|
28419
28454
|
"tagName": {
|
|
28420
|
-
"pos":
|
|
28421
|
-
"end":
|
|
28455
|
+
"pos": 2188,
|
|
28456
|
+
"end": 2195,
|
|
28422
28457
|
"kind": 80,
|
|
28423
28458
|
"id": 0,
|
|
28424
28459
|
"flags": 16842752,
|
|
@@ -28634,12 +28669,12 @@
|
|
|
28634
28669
|
"description": "",
|
|
28635
28670
|
"rawdescription": "\n",
|
|
28636
28671
|
"type": "component",
|
|
28637
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n booleanAttribute,\n inject,\n input,\n output,\n computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n s: 'xs',\n m: 's',\n l: 'm',\n};\n\n@Component({\n templateUrl: './eds-chip.html',\n selector: 'eds-chip, span[edsChip], li[edsChip]',\n styleUrl: './eds-chip.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ...EDS_ICON,\n ...EDS_ICON_BUTTON,\n ...EDS_BUTTON,\n ],\n host: {\n class: 'eds-chip',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.removable]': 'isRemovable() || null',\n '[attr.active]': 'isActive() || null',\n '[attr.disabled]': 'disabled() || null',\n '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n '[attr.role]': 'hostRole()',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n '[attr.aria-label]': 'ariaLabel()',\n '[attr.data-e2e]': 'e2eAttr()',\n '(click)': 'onHostClick($event)',\n '(keydown.enter)': 'onHostClick($event)',\n '(keydown.space)': 'onHostKeyActivate($event)',\n '(keydown.delete)': 'onKeyRemove($event)',\n '(keydown.backspace)': 'onKeyRemove($event)',\n },\n})\nexport class EdsChip {\n /**\n * Semantic color of the chip.\n * @default 'neutral'\n */\n color = input<EdsChipColor>('neutral');\n\n /**\n * Size of the chip.\n * @default 'm'\n */\n size = input<EdsChipSize>('m');\n\n /** Size of the inner remove icon, derived from the chip size. */\n protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n /**\n * Sets the `aria-label` attribute for the host element.\n * When not set, assistive technology will use the text content of the chip.\n *\n * @default undefined\n */\n ariaLabel = input<string | undefined>(undefined);\n\n /**\n * Resolved role for the host element.\n * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n */\n protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n /**\n * Sets the `data-e2e` attribute for the host element.\n *\n * @default 'eds-chip'\n */\n e2eAttr = input('eds-chip');\n\n /**\n * Sets the edsInternalId of the chip.\n *\n * @default ''\n */\n edsInternalId = input<string>('');\n\n /**\n * Sets the label of the tooltip to display on hover.\n */\n tooltipMessage = input<string>('');\n\n /**\n * Sets the id of the chip.\n */\n id = input<string | number>('');\n\n /**\n * Sets the data of the chip like tooltip configuration.\n */\n data = input<EdsChipData>({\n id: crypto.randomUUID(),\n tooltip: {\n color: 'edsTooltipPrimary',\n contentAlignment: null,\n position: 'above',\n },\n });\n\n /**\n * Whether the chip can be removed.\n *\n * @default false\n */\n isRemovable = input(false, { transform: booleanAttribute });\n\n /**\n * Whether the chip is in active/pressed state.\n *\n * @default false\n */\n isActive = input(false, { transform: booleanAttribute });\n\n /**\n * Controls the disabled state of the chip.\n * When true, prevents interaction and applies disabled styling.\n *\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Event emitted when the chip is removed.\n */\n chipRemove = output<EdsChipData>();\n\n /**\n * Event emitted when the chip is clicked.\n */\n chipClick = output<EdsChipData>();\n\n /** Optional parent chip-list — used to determine role. */\n private chipList = inject(EdsChipList, { optional: true });\n\n onHostClick(event?: Event): void {\n if (this.disabled()) {\n return;\n }\n\n if (this.isRemovable()) {\n this.onRemove(event);\n } else {\n this.onClick(event);\n }\n }\n\n /**\n * Handles Space key activation — prevents page scroll and triggers click.\n */\n onHostKeyActivate(event: Event): void {\n event.preventDefault();\n this.onHostClick(event);\n }\n\n /**\n * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n */\n onKeyRemove(event: Event): void {\n if (this.disabled() || !this.isRemovable()) {\n return;\n }\n event.preventDefault();\n this.chipRemove.emit(this.data());\n }\n\n /**\n * Remove chip handler\n *\n * @param event Click event\n */\n private onRemove(event?: Event): void {\n if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n this.chipRemove.emit({ ...this.data(), _event: event });\n } else {\n this.chipRemove.emit(this.data());\n }\n }\n\n private onClick(event?: Event): void {\n this.chipClick.emit(this.data());\n }\n}\n",
|
|
28672
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n booleanAttribute,\n inject,\n input,\n output,\n computed,\n} from '@angular/core';\n\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\nimport { EdsChipList } from '@eui/eds/eds-chip-list';\n\nimport { EdsChipData } from './models/eui-chip.model';\nimport { EdsIconSize } from '@eui/eds/eds-icon';\n\n/**\n * Local narrowed color union — the chip's color contract.\n */\nexport type EdsChipColor = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'critical';\n\n/**\n * Local narrowed size union — the chip's size contract.\n */\nexport type EdsChipSize = 's' | 'm' | 'l';\n\n/** Maps a chip size to the size of its inner (remove) icon. */\nconst CHIP_ICON_SIZE: Record<EdsChipSize, EdsIconSize> = {\n s: 'xs',\n m: 's',\n l: 'm',\n};\n\n@Component({\n templateUrl: './eds-chip.html',\n selector: 'eds-chip, span[edsChip], li[edsChip]',\n styleUrl: './eds-chip.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ...EDS_ICON,\n ...EDS_ICON_BUTTON,\n ...EDS_BUTTON,\n ],\n host: {\n class: 'eds-chip',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.removable]': 'isRemovable() || null',\n '[attr.active]': 'isActive() || null',\n '[attr.disabled]': 'disabled() || null',\n '[attr.tabindex]': 'disabled() ? \"-1\" : \"0\"',\n '[attr.role]': 'hostRole()',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.aria-pressed]': 'isActive() ? \"true\" : null',\n '[attr.aria-label]': 'ariaLabel()',\n '[attr.data-e2e]': 'e2eAttr()',\n '(click)': 'onHostClick($event)',\n '(keydown.enter)': 'onHostClick($event)',\n '(keydown.space)': 'onHostKeyActivate($event)',\n '(keydown.delete)': 'onKeyRemove($event)',\n '(keydown.backspace)': 'onKeyRemove($event)',\n },\n})\nexport class EdsChip {\n /**\n * Semantic color of the chip.\n * @default 'neutral'\n */\n color = input<EdsChipColor>('neutral');\n\n /**\n * Size of the chip.\n * @default 'm'\n */\n size = input<EdsChipSize>('m');\n\n /** Size of the inner remove icon, derived from the chip size. */\n protected iconSize = computed<EdsIconSize>(() => CHIP_ICON_SIZE[this.size()]);\n\n /**\n * Sets the `aria-label` attribute for the host element.\n * When not set, assistive technology will use the text content of the chip.\n *\n * @default undefined\n */\n ariaLabel = input<string | undefined>(undefined);\n\n /**\n * Resolved role for the host element.\n * Returns 'listitem' when inside an eds-chip-list, 'button' otherwise.\n */\n protected hostRole = computed(() => this.chipList ? 'listitem' : 'button');\n\n /**\n * Sets the `data-e2e` attribute for the host element.\n *\n * @default 'eds-chip'\n */\n e2eAttr = input('eds-chip');\n\n /**\n * Sets the edsInternalId of the chip.\n *\n * @default ''\n */\n edsInternalId = input<string>('');\n\n /**\n * Sets the label of the tooltip to display on hover.\n */\n tooltipMessage = input<string>('');\n\n /**\n * Sets the id of the chip.\n */\n id = input<string | number>('');\n\n /**\n * Sets the data of the chip like tooltip configuration.\n */\n data = input<EdsChipData>({\n id: crypto.randomUUID(),\n tooltip: {\n color: 'edsTooltipPrimary',\n contentAlignment: null,\n position: 'above',\n },\n });\n\n /**\n * Whether the chip can be removed.\n *\n * @default false\n */\n isRemovable = input(false, { transform: booleanAttribute });\n\n /**\n * Whether the chip is in active/pressed state.\n *\n * @default false\n */\n isActive = input(false, { transform: booleanAttribute });\n\n /**\n * Controls the disabled state of the chip.\n * When true, prevents interaction and applies disabled styling.\n *\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Event emitted when the chip is removed.\n */\n chipRemove = output<EdsChipData>();\n\n /**\n * Event emitted when the chip is clicked.\n */\n chipClick = output<EdsChipData>();\n\n /** Optional parent chip-list — used to determine role. */\n private chipList = inject(EdsChipList, { optional: true });\n\n onHostClick(event?: Event): void {\n if (this.disabled()) {\n return;\n }\n\n if (this.isRemovable()) {\n this.onRemove(event);\n } else {\n this.onClick(event);\n }\n }\n\n /**\n * Handles Space key activation — prevents page scroll and triggers click.\n */\n onHostKeyActivate(event: Event): void {\n event.preventDefault();\n this.onHostClick(event);\n }\n\n /**\n * Handles Delete/Backspace key to remove chip (WAI-ARIA APG convention).\n */\n onKeyRemove(event: Event): void {\n if (this.disabled() || !this.isRemovable()) {\n return;\n }\n event.preventDefault();\n this.chipRemove.emit(this.data());\n }\n\n /**\n * Remove chip handler\n *\n * @param event Click event\n */\n private onRemove(event?: Event): void {\n if (event instanceof KeyboardEvent && (event as KeyboardEvent).code === 'Backspace') {\n this.chipRemove.emit({ ...this.data(), _event: event });\n } else {\n this.chipRemove.emit(this.data());\n }\n }\n\n private onClick(event?: Event): void {\n this.chipClick.emit(this.data());\n }\n}\n",
|
|
28638
28673
|
"styleUrl": "./eds-chip.scss",
|
|
28639
28674
|
"assetsDirs": [],
|
|
28640
28675
|
"styleUrlsData": [
|
|
28641
28676
|
{
|
|
28642
|
-
"data": "@use 'sass:map';\n@use '../base' as base;\n\n:host {\n // default color = neutral\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground
|
|
28677
|
+
"data": "@use 'sass:map';\n@use '../base' as base;\n\n:host {\n // default color = neutral\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground);\n --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);\n\n // default size = m\n --_eds-chip-font: var(--eds-f-paragraph-s);\n --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n --_eds-chip-height: var(--eds-sp-xl);\n\n // a projected eds-icon follows the chip foreground (on-surface) color\n --_eds-icon-on-surface: var(--_eds-chip-on-surface);\n\n border-radius: var(--eds-br-full);\n display: inline-flex;\n border: var(--eds-bw-xs) solid var(--_eds-chip-border-color);\n padding: var(--_eds-chip-padding);\n font: var(--_eds-chip-font);\n background-color: var(--_eds-chip-surface);\n color: var(--_eds-chip-on-surface);\n height: var(--_eds-chip-height);\n cursor: pointer;\n gap: var(--eds-sp-2xs);\n align-items: center;\n\n &:not([disabled]) {\n @include base.eds-focus-visible-ring-rounded();\n }\n\n &:hover {\n background-color: var(--_eds-chip-surface-hover);\n color: var(--_eds-chip-on-surface-hover);\n }\n &:active {\n background-color: var(--_eds-chip-surface-active);\n color: var(--_eds-chip-on-surface-active);\n }\n\n .eds-chip__content {\n display: inline-flex;\n align-items: center;\n background: transparent;\n gap: var(--eds-sp-2xs);\n\n // A projected icon sitting at the very start/end of the chip content is pulled slightly\n // toward the edge so it reads as tucked in against the chip rather than double-padded\n // (host padding + gap). Only the leading/trailing icon is nudged, not icons between text.\n ::ng-deep eds-icon:first-child {\n margin-left: calc(-1 * var(--eds-sp-3xs));\n }\n\n ::ng-deep eds-icon:last-child {\n margin-right: calc(-1 * var(--eds-sp-3xs));\n }\n }\n\n .eds-chip__close {\n margin-left: var(--eds-sp-xs);\n }\n}\n\n// SIZE VARIANTS\n// -------------\n\n:host([size=\"s\"]) {\n --_eds-chip-font: var(--eds-f-paragraph-xs);\n --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-3xs);\n --_eds-chip-height: var(--eds-sp-l);\n}\n\n:host([size=\"m\"]) {\n --_eds-chip-font: var(--eds-f-paragraph-s);\n --_eds-chip-padding: var(--eds-sp-4xs) var(--eds-sp-2xs);\n --_eds-chip-height: var(--eds-sp-xl);\n}\n\n:host([size=\"l\"]) {\n --_eds-chip-font: var(--eds-f-paragraph-s);\n --_eds-chip-padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n --_eds-chip-height: var(--eds-sp-2xl);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground);\n --_eds-chip-border-color: var(--eds-c-border-neutral-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-neutral-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-neutral-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-neutral-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-neutral-subtle);\n}\n\n:host([color=\"primary\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground-primary);\n --_eds-chip-border-color: var(--eds-c-border-primary-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-primary-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-primary-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary-subtle);\n}\n\n:host([color=\"info\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground-info);\n --_eds-chip-border-color: var(--eds-c-border-info-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-info-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-info-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-info-subtle);\n}\n\n:host([color=\"success\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground-success);\n --_eds-chip-border-color: var(--eds-c-border-success-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-success-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-success-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-success-subtle);\n}\n\n:host([color=\"warning\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground-warning);\n --_eds-chip-border-color: var(--eds-c-border-warning-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-warning-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-warning-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning-subtle);\n}\n\n:host([color=\"critical\"]) {\n --_eds-chip-surface: transparent;\n --_eds-chip-on-surface: var(--eds-c-foreground-critical);\n --_eds-chip-border-color: var(--eds-c-border-critical-subtle);\n --_eds-chip-surface-hover: var(--eds-c-surface-critical-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical-subtle);\n --_eds-chip-surface-active: var(--eds-c-surface-critical-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical-subtle);\n}\n\n// STATE OVERRIDES — ACTIVE (filled)\n// ---------------------------------\n// Active fills the chip with its OWN color. The default (no explicit color) and the neutral color\n// resolve to the neutral filled scale; primary resolves to the primary filled scale.\n\n:host([active]),\n:host([active][color=\"neutral\"]) {\n --_eds-chip-surface: var(--eds-c-surface-inverted);\n --_eds-chip-on-surface: var(--eds-c-on-surface-inverted);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-inverted--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-inverted--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-inverted--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-inverted--pressed);\n}\n\n:host([active][color=\"primary\"]) {\n --_eds-chip-surface: var(--eds-c-surface-primary);\n --_eds-chip-on-surface: var(--eds-c-on-surface-primary);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-primary--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-primary--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-primary--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-primary--pressed);\n}\n\n:host([active][color=\"info\"]) {\n --_eds-chip-surface: var(--eds-c-surface-info);\n --_eds-chip-on-surface: var(--eds-c-on-surface-info);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-info--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-info--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-info--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-info--pressed);\n}\n\n:host([active][color=\"success\"]) {\n --_eds-chip-surface: var(--eds-c-surface-success);\n --_eds-chip-on-surface: var(--eds-c-on-surface-success);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-success--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-success--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-success--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-success--pressed);\n}\n\n:host([active][color=\"warning\"]) {\n --_eds-chip-surface: var(--eds-c-surface-warning);\n --_eds-chip-on-surface: var(--eds-c-on-surface-warning);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-warning--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-warning--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-warning--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-warning--pressed);\n}\n\n:host([active][color=\"critical\"]) {\n --_eds-chip-surface: var(--eds-c-surface-critical);\n --_eds-chip-on-surface: var(--eds-c-on-surface-critical);\n --_eds-chip-border-color: transparent;\n --_eds-chip-surface-hover: var(--eds-c-surface-critical--hover);\n --_eds-chip-on-surface-hover: var(--eds-c-on-surface-critical--hover);\n --_eds-chip-surface-active: var(--eds-c-surface-critical--pressed);\n --_eds-chip-on-surface-active: var(--eds-c-on-surface-critical--pressed);\n}\n\n// Disabled wins over every color/active combination — the extra [disabled] raises specificity\n// above the two-attribute :host([active][color=\"…\"]) active overrides above.\n:host([disabled]),\n:host([disabled][active]) {\n --_eds-chip-surface: var(--eds-c-surface-disabled-subtle);\n --_eds-chip-on-surface: var(--eds-c-foreground-disabled);\n --_eds-chip-border-color: var(--eds-c-border-disabled);\n --_eds-chip-surface-hover: var(--eds-c-surface-disabled-subtle);\n --_eds-chip-on-surface-hover: var(--eds-c-foreground-disabled);\n --_eds-chip-surface-active: var(--eds-c-surface-disabled-subtle);\n --_eds-chip-on-surface-active: var(--eds-c-foreground-disabled);\n\n cursor: default;\n}\n",
|
|
28643
28678
|
"styleUrl": "./eds-chip.scss"
|
|
28644
28679
|
}
|
|
28645
28680
|
],
|
|
@@ -29134,7 +29169,7 @@
|
|
|
29134
29169
|
},
|
|
29135
29170
|
{
|
|
29136
29171
|
"name": "EdsDatepicker",
|
|
29137
|
-
"id": "component-EdsDatepicker-
|
|
29172
|
+
"id": "component-EdsDatepicker-940e727f076eb85335162e5ecc2ea7a930e9583dc4d0e64e9ea764804ba795c0bb53e559e4cbb063910e2568b51aed5b08b02c5e5056106a42d350940bab6674",
|
|
29138
29173
|
"file": "packages/eds/eds-datepicker/eds-datepicker.ts",
|
|
29139
29174
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
29140
29175
|
"encapsulation": [],
|
|
@@ -29941,7 +29976,7 @@
|
|
|
29941
29976
|
"name": "EDS_INPUT_TEXT"
|
|
29942
29977
|
},
|
|
29943
29978
|
{
|
|
29944
|
-
"name": "
|
|
29979
|
+
"name": "EDS_INPUT_BUTTON"
|
|
29945
29980
|
},
|
|
29946
29981
|
{
|
|
29947
29982
|
"name": "EDS_BUTTON"
|
|
@@ -29953,7 +29988,7 @@
|
|
|
29953
29988
|
"description": "",
|
|
29954
29989
|
"rawdescription": "\n",
|
|
29955
29990
|
"type": "component",
|
|
29956
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n model,\n signal,\n computed,\n booleanAttribute,\n inject,\n ElementRef,\n HostListener,\n OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_GROUP } from '@eui/eds/eds-input-group';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n selector: 'eds-datepicker',\n templateUrl: './eds-datepicker.html',\n styleUrl: './eds-datepicker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_GROUP, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n host: {\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n /** Data attribute for e2e testing. */\n e2eAttr = input('eds-datepicker');\n\n /** Input element id. */\n inputId = input('eds-datepicker-input');\n\n /** Placeholder text. */\n placeholder = input('dd/mm/yyyy');\n\n /** Aria label for the input. */\n ariaLabel = input('Date input');\n\n /** Date format for display (default: dd/mm/yyyy). */\n dateFormat = input('dd/mm/yyyy');\n\n /** Minimum selectable date. */\n minDate = input<Date | null>(null);\n\n /** Maximum selectable date. */\n maxDate = input<Date | null>(null);\n\n /** Whether the datepicker is disabled. */\n disabled = input(false, { transform: booleanAttribute });\n\n /** Whether the datepicker is readonly. */\n readonly = input(false, { transform: booleanAttribute });\n\n /** Whether to show a timepicker alongside the calendar. */\n isDatetimepicker = input(false, { transform: booleanAttribute });\n\n /** Whether the timepicker shows seconds. */\n hasSeconds = input(false, { transform: booleanAttribute });\n\n /** Emitted when a date is selected. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dateChange = output<any>();\n\n /** The selected date value. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value = model<any>(null);\n\n /** Whether the calendar dropdown is open. */\n isOpen = signal(false);\n\n /** Whether the dropdown should open above the input. */\n dropUp = signal(false);\n\n /** Current viewed month/year for the calendar. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n viewDate = signal<any>(null);\n\n /** Weekday header labels. */\n weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n /** Current time selection (for datetime mode). */\n selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n /** The date adapter (native Date or Luxon). */\n adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n /** Computed display value for the input. */\n displayValue = computed(() => {\n const date = this.value();\n if (!date || !this.adapter.isValid(date)) {\n return '';\n }\n const dateStr = this.adapter.format(date);\n if (this.isDatetimepicker()) {\n const time = this.selectedTime();\n const h = String(time.hours).padStart(2, '0');\n const m = String(time.minutes).padStart(2, '0');\n if (this.hasSeconds() && time.seconds !== undefined) {\n const s = String(time.seconds).padStart(2, '0');\n return `${dateStr} ${h}:${m}:${s}`;\n }\n return `${dateStr} ${h}:${m}`;\n }\n return dateStr;\n });\n\n /** Computed month/year label for the header. */\n monthLabel = computed(() => {\n const d = this.viewDate() || this.adapter.today();\n const months = ['January', 'February', 'March', 'April', 'May', 'June',\n 'July', 'August', 'September', 'October', 'November', 'December'];\n return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n });\n\n /** Computed calendar day grid. */\n calendarDays = computed(() => {\n const vd = this.viewDate() || this.adapter.today();\n const year = this.adapter.getYear(vd);\n const month = this.adapter.getMonth(vd);\n const firstDay = this.adapter.create(year, month, 1);\n // Monday-based: 1=Mon, 7=Sun\n const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const days: (any | null)[] = [];\n\n // Empty slots before first day\n for (let i = 0; i < startDay; i++) {\n days.push(null);\n }\n // Actual days\n for (let i = 1; i <= daysInMonth; i++) {\n days.push(this.adapter.create(year, month, i));\n }\n return days;\n });\n\n private _elementRef = inject(ElementRef);\n private _ngControl = inject(NgControl, { optional: true, self: true });\n private _documentClickListener: ((e: Event) => void) | null = null;\n\n constructor() {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n this.viewDate.set(this.adapter.today());\n }\n\n ngOnDestroy(): void {\n this._removeDocumentListener();\n }\n\n // --- Public API ---\n\n toggle(): void {\n if (this.disabled() || this.readonly()) {\n return;\n }\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n // Set view to selected date or today\n this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n // Check if there's enough space below — if not, open above\n const rect = this._elementRef.nativeElement.getBoundingClientRect();\n const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n const spaceBelow = window.innerHeight - rect.bottom;\n this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n this._addDocumentListener();\n } else {\n this._removeDocumentListener();\n }\n }\n\n onInputClick(): void {\n if (!this.isOpen()) {\n this.toggle();\n }\n }\n\n prevMonth(): void {\n this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n }\n\n nextMonth(): void {\n this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n selectDay(date: any): void {\n this.value.set(date);\n this._onChange(date);\n this.dateChange.emit(date);\n this.isOpen.set(false);\n this._removeDocumentListener();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isToday(date: any): boolean {\n return this.adapter.isSameDay(date, this.adapter.today());\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isSelected(date: any): boolean {\n const sel = this.value();\n if (!sel || !this.adapter.isValid(sel)) {\n return false;\n }\n return this.adapter.isSameDay(date, sel);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isOutsideRange(date: any): boolean {\n const min = this.minDate();\n const max = this.maxDate();\n if (min && this.adapter.isBefore(date, min)) {\n return true;\n }\n if (max && this.adapter.isAfter(date, max)) {\n return true;\n }\n return false;\n }\n\n onInputChange(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n if (val === '') {\n this.value.set(null);\n this._onChange(null);\n this.dateChange.emit(null);\n return;\n }\n const parsed = this.adapter.parse(val);\n if (parsed) {\n this.value.set(parsed);\n this._onChange(parsed);\n this.dateChange.emit(parsed);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onTimeChange(time: any): void {\n this.selectedTime.set(time);\n // If a date is already selected, re-emit with the time applied\n // (consumer is responsible for combining date + time as needed)\n }\n\n // --- ControlValueAccessor ---\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n writeValue(value: any): void {\n this.value.set(value);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnChange(fn: (value: any) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(_isDisabled: boolean): void {\n // Handled via input signal\n }\n\n // ControlValueAccessor\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n protected onTouched: () => void = () => { /* noop */ };\n\n // --- Private ---\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n private _onChange: (value: any) => void = () => { /* noop */ };\n\n private _addDocumentListener(): void {\n if (!this._documentClickListener) {\n this._documentClickListener = (e: Event): void => {\n if (!this._elementRef.nativeElement.contains(e.target)) {\n this.isOpen.set(false);\n this._removeDocumentListener();\n }\n };\n document.addEventListener('click', this._documentClickListener);\n }\n }\n\n private _removeDocumentListener(): void {\n if (this._documentClickListener) {\n document.removeEventListener('click', this._documentClickListener);\n this._documentClickListener = null;\n }\n }\n}\n",
|
|
29991
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n output,\n model,\n signal,\n computed,\n booleanAttribute,\n inject,\n ElementRef,\n HostListener,\n OnDestroy,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_ICON } from '@eui/eds/eds-icon';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_BUTTON } from '@eui/eds/eds-button';\nimport { EDS_TIMEPICKER } from '@eui/eds/eds-timepicker';\nimport { EDS_DATE_ADAPTER, EdsDateAdapter, EdsNativeDateAdapter } from './eds-date-adapter';\n\n@Component({\n selector: 'eds-datepicker',\n templateUrl: './eds-datepicker.html',\n styleUrl: './eds-datepicker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER],\n host: {\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsDatepicker implements ControlValueAccessor, OnDestroy {\n /** Data attribute for e2e testing. */\n e2eAttr = input('eds-datepicker');\n\n /** Input element id. */\n inputId = input('eds-datepicker-input');\n\n /** Placeholder text. */\n placeholder = input('dd/mm/yyyy');\n\n /** Aria label for the input. */\n ariaLabel = input('Date input');\n\n /** Date format for display (default: dd/mm/yyyy). */\n dateFormat = input('dd/mm/yyyy');\n\n /** Minimum selectable date. */\n minDate = input<Date | null>(null);\n\n /** Maximum selectable date. */\n maxDate = input<Date | null>(null);\n\n /** Whether the datepicker is disabled. */\n disabled = input(false, { transform: booleanAttribute });\n\n /** Whether the datepicker is readonly. */\n readonly = input(false, { transform: booleanAttribute });\n\n /** Whether to show a timepicker alongside the calendar. */\n isDatetimepicker = input(false, { transform: booleanAttribute });\n\n /** Whether the timepicker shows seconds. */\n hasSeconds = input(false, { transform: booleanAttribute });\n\n /** Emitted when a date is selected. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n dateChange = output<any>();\n\n /** The selected date value. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n value = model<any>(null);\n\n /** Whether the calendar dropdown is open. */\n isOpen = signal(false);\n\n /** Whether the dropdown should open above the input. */\n dropUp = signal(false);\n\n /** Current viewed month/year for the calendar. */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n viewDate = signal<any>(null);\n\n /** Weekday header labels. */\n weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];\n\n /** Current time selection (for datetime mode). */\n selectedTime = signal<{ hours: number; minutes: number; seconds?: number }>({ hours: 0, minutes: 0, seconds: 0 });\n\n /** The date adapter (native Date or Luxon). */\n adapter: EdsDateAdapter = inject(EDS_DATE_ADAPTER, { optional: true }) || new EdsNativeDateAdapter();\n\n /** Computed display value for the input. */\n displayValue = computed(() => {\n const date = this.value();\n if (!date || !this.adapter.isValid(date)) {\n return '';\n }\n const dateStr = this.adapter.format(date);\n if (this.isDatetimepicker()) {\n const time = this.selectedTime();\n const h = String(time.hours).padStart(2, '0');\n const m = String(time.minutes).padStart(2, '0');\n if (this.hasSeconds() && time.seconds !== undefined) {\n const s = String(time.seconds).padStart(2, '0');\n return `${dateStr} ${h}:${m}:${s}`;\n }\n return `${dateStr} ${h}:${m}`;\n }\n return dateStr;\n });\n\n /** Computed month/year label for the header. */\n monthLabel = computed(() => {\n const d = this.viewDate() || this.adapter.today();\n const months = ['January', 'February', 'March', 'April', 'May', 'June',\n 'July', 'August', 'September', 'October', 'November', 'December'];\n return `${months[this.adapter.getMonth(d)]} ${this.adapter.getYear(d)}`;\n });\n\n /** Computed calendar day grid. */\n calendarDays = computed(() => {\n const vd = this.viewDate() || this.adapter.today();\n const year = this.adapter.getYear(vd);\n const month = this.adapter.getMonth(vd);\n const firstDay = this.adapter.create(year, month, 1);\n // Monday-based: 1=Mon, 7=Sun\n const startDay = this.adapter.getDayOfWeek(firstDay) - 1;\n const daysInMonth = this.adapter.getDaysInMonth(firstDay);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const days: (any | null)[] = [];\n\n // Empty slots before first day\n for (let i = 0; i < startDay; i++) {\n days.push(null);\n }\n // Actual days\n for (let i = 1; i <= daysInMonth; i++) {\n days.push(this.adapter.create(year, month, i));\n }\n return days;\n });\n\n private _elementRef = inject(ElementRef);\n private _ngControl = inject(NgControl, { optional: true, self: true });\n private _documentClickListener: ((e: Event) => void) | null = null;\n\n constructor() {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n this.viewDate.set(this.adapter.today());\n }\n\n ngOnDestroy(): void {\n this._removeDocumentListener();\n }\n\n // --- Public API ---\n\n toggle(): void {\n if (this.disabled() || this.readonly()) {\n return;\n }\n this.isOpen.set(!this.isOpen());\n if (this.isOpen()) {\n // Set view to selected date or today\n this.viewDate.set(this.adapter.isValid(this.value()) ? this.value() : this.adapter.today());\n\n // Check if there's enough space below — if not, open above\n const rect = this._elementRef.nativeElement.getBoundingClientRect();\n const dropdownHeight = this.isDatetimepicker() ? 420 : 320;\n const spaceBelow = window.innerHeight - rect.bottom;\n this.dropUp.set(spaceBelow < dropdownHeight && rect.top > dropdownHeight);\n\n this._addDocumentListener();\n } else {\n this._removeDocumentListener();\n }\n }\n\n onInputClick(): void {\n if (!this.isOpen()) {\n this.toggle();\n }\n }\n\n prevMonth(): void {\n this.viewDate.set(this.adapter.addMonths(this.viewDate(), -1));\n }\n\n nextMonth(): void {\n this.viewDate.set(this.adapter.addMonths(this.viewDate(), 1));\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n selectDay(date: any): void {\n this.value.set(date);\n this._onChange(date);\n this.dateChange.emit(date);\n this.isOpen.set(false);\n this._removeDocumentListener();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isToday(date: any): boolean {\n return this.adapter.isSameDay(date, this.adapter.today());\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isSelected(date: any): boolean {\n const sel = this.value();\n if (!sel || !this.adapter.isValid(sel)) {\n return false;\n }\n return this.adapter.isSameDay(date, sel);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isOutsideRange(date: any): boolean {\n const min = this.minDate();\n const max = this.maxDate();\n if (min && this.adapter.isBefore(date, min)) {\n return true;\n }\n if (max && this.adapter.isAfter(date, max)) {\n return true;\n }\n return false;\n }\n\n onInputChange(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n if (val === '') {\n this.value.set(null);\n this._onChange(null);\n this.dateChange.emit(null);\n return;\n }\n const parsed = this.adapter.parse(val);\n if (parsed) {\n this.value.set(parsed);\n this._onChange(parsed);\n this.dateChange.emit(parsed);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onTimeChange(time: any): void {\n this.selectedTime.set(time);\n // If a date is already selected, re-emit with the time applied\n // (consumer is responsible for combining date + time as needed)\n }\n\n // --- ControlValueAccessor ---\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n writeValue(value: any): void {\n this.value.set(value);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnChange(fn: (value: any) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(_isDisabled: boolean): void {\n // Handled via input signal\n }\n\n // ControlValueAccessor\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n protected onTouched: () => void = () => { /* noop */ };\n\n // --- Private ---\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any\n private _onChange: (value: any) => void = () => { /* noop */ };\n\n private _addDocumentListener(): void {\n if (!this._documentClickListener) {\n this._documentClickListener = (e: Event): void => {\n if (!this._elementRef.nativeElement.contains(e.target)) {\n this.isOpen.set(false);\n this._removeDocumentListener();\n }\n };\n document.addEventListener('click', this._documentClickListener);\n }\n }\n\n private _removeDocumentListener(): void {\n if (this._documentClickListener) {\n document.removeEventListener('click', this._documentClickListener);\n this._documentClickListener = null;\n }\n }\n}\n",
|
|
29957
29992
|
"styleUrl": "./eds-datepicker.scss",
|
|
29958
29993
|
"assetsDirs": [],
|
|
29959
29994
|
"styleUrlsData": [
|
|
@@ -29989,7 +30024,7 @@
|
|
|
29989
30024
|
"type": "module"
|
|
29990
30025
|
},
|
|
29991
30026
|
{
|
|
29992
|
-
"name": "
|
|
30027
|
+
"name": "EDS_INPUT_BUTTON",
|
|
29993
30028
|
"type": "module"
|
|
29994
30029
|
},
|
|
29995
30030
|
{
|
|
@@ -30010,7 +30045,7 @@
|
|
|
30010
30045
|
}
|
|
30011
30046
|
]
|
|
30012
30047
|
},
|
|
30013
|
-
"templateData": "<
|
|
30048
|
+
"templateData": "<eds-input-button class=\"eds-datepicker__group\">\n <input edsInputText\n [edsClearable]=\"false\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouched()\"\n (click)=\"onInputClick()\"/>\n @if (!readonly() && !disabled()) {\n <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n <eds-icon icon=\"calendar-blank:core\"/>\n </button>\n }\n</eds-input-button>\n\n@if (isOpen()) {\n <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n <div class=\"eds-datepicker__header\">\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">‹</button>\n <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">›</button>\n </div>\n <div class=\"eds-datepicker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n }\n </div>\n <div class=\"eds-datepicker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day === null) {\n <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n } @else {\n <button class=\"eds-datepicker__day\"\n type=\"button\"\n [class.eds-datepicker__day--today]=\"isToday(day)\"\n [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n [disabled]=\"isOutsideRange(day)\"\n (click)=\"selectDay(day)\">\n {{ adapter.getDate(day) }}\n </button>\n }\n }\n </div>\n\n @if (isDatetimepicker()) {\n <div class=\"eds-datepicker__time\">\n <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n </div>\n }\n </div>\n}\n"
|
|
30014
30049
|
},
|
|
30015
30050
|
{
|
|
30016
30051
|
"name": "EdsDialog",
|
|
@@ -47704,7 +47739,7 @@
|
|
|
47704
47739
|
"assetsDirs": [],
|
|
47705
47740
|
"styleUrlsData": [
|
|
47706
47741
|
{
|
|
47707
|
-
"data": "@use '../base' as base;\n\n.eui-21 {\n :host {\n display: inline-flex;\n position: relative;\n\n .language-toggle {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-3xs);\n padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);\n border-radius: var(--eds-br-s);\n background: none;\n cursor: pointer;\n font: var(--eds-f-label-m-semibold);\n color: inherit;\n transition: background 0.15s ease, border-color 0.15s ease;\n\n @include base.eds-focus-visible-ring();\n\n &:hover {\n background: var(--eds-c-surface-elevation-sunken);\n border-color: var(--eds-c-border-neutral);\n }\n\n &--icon-layout {\n border: none;\n padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n gap: var(--eds-sp-3xs);\n border-radius: var(--eds-br-s);\n\n &:hover {\n background: var(--eds-c-surface-elevation-sunken);\n }\n }\n }\n\n .language-code {\n font: var(--eds-f-label-m-semibold);\n }\n\n .chevron {\n font-size: var(--eds-f-s-xs);\n color: var(--eds-c-foreground-subtler);\n }\n\n .language-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 200;\n margin-top: var(--eds-sp-3xs);\n min-width: 160px;\n list-style: none;\n padding: var(--eds-sp-3xs) var(--eds-sp-none);\n background: var(--eds-c-surface-elevation-overlay);\n border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n border-radius: var(--eds-br-m);\n box-shadow: var(--eds-sh-3);\n\n &--align-right {\n left: auto;\n right: 0;\n }\n }\n\n .language-option {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-xs);\n padding: var(--eds-sp-xs) var(--eds-sp-m);\n cursor: pointer;\n font: var(--eds-f-paragraph-s);\n color: var(--eds-c-foreground);\n transition: background 0.15s ease;\n outline: none;\n\n &:hover,\n &.focused {\n background: var(--eds-c-surface-elevation-sunken);\n }\n\n &.focused {\n outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n outline-offset: -1px;\n }\n\n &.selected {\n color: var(--eds-c-foreground-primary);\n font-weight: var(--eds-f-w-semibold);\n }\n }\n\n .option-code {\n font: var(--eds-f-label-m-semibold);\n min-width: 2rem;\n }\n\n .option-label {\n flex: 1;\n }\n }\n\n // COLOR VARIANTS\n :host.eds-language-selector--brand {\n .language-toggle {\n color: var(--eds-c-on-surface-brand);\n border-color: transparent;\n\n &:hover {\n background: var(--eds-c-surface-brand--hover);\n color: var(--eds-c-on-surface-brand--hover);\n }\n\n &--icon-layout:hover {\n background: var(--eds-c-surface-brand--hover);\n color: var(--eds-c-on-surface-brand--hover);\n }\n\n ::ng-deep
|
|
47742
|
+
"data": "@use '../base' as base;\n\n.eui-21 {\n :host {\n display: inline-flex;\n position: relative;\n\n .language-toggle {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-3xs);\n padding: var(--eds-sp-3xs) var(--eds-sp-xs);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral-subtle);\n border-radius: var(--eds-br-s);\n background: none;\n cursor: pointer;\n font: var(--eds-f-label-m-semibold);\n color: inherit;\n transition: background 0.15s ease, border-color 0.15s ease;\n\n @include base.eds-focus-visible-ring();\n\n &:hover {\n background: var(--eds-c-surface-elevation-sunken);\n border-color: var(--eds-c-border-neutral);\n }\n\n &--icon-layout {\n border: none;\n padding: var(--eds-sp-3xs) var(--eds-sp-2xs);\n gap: var(--eds-sp-3xs);\n border-radius: var(--eds-br-s);\n\n &:hover {\n background: var(--eds-c-surface-elevation-sunken);\n }\n }\n }\n\n .language-code {\n font: var(--eds-f-label-m-semibold);\n }\n\n .chevron {\n font-size: var(--eds-f-s-xs);\n color: var(--eds-c-foreground-subtler);\n }\n\n .language-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 200;\n margin-top: var(--eds-sp-3xs);\n min-width: 160px;\n list-style: none;\n padding: var(--eds-sp-3xs) var(--eds-sp-none);\n background: var(--eds-c-surface-elevation-overlay);\n border: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n border-radius: var(--eds-br-m);\n box-shadow: var(--eds-sh-3);\n\n &--align-right {\n left: auto;\n right: 0;\n }\n }\n\n .language-option {\n display: flex;\n align-items: center;\n gap: var(--eds-sp-xs);\n padding: var(--eds-sp-xs) var(--eds-sp-m);\n cursor: pointer;\n font: var(--eds-f-paragraph-s);\n color: var(--eds-c-foreground);\n transition: background 0.15s ease;\n outline: none;\n\n &:hover,\n &.focused {\n background: var(--eds-c-surface-elevation-sunken);\n }\n\n &.focused {\n outline: var(--eds-bw-xs) solid var(--eds-c-border-primary);\n outline-offset: -1px;\n }\n\n &.selected {\n color: var(--eds-c-foreground-primary);\n font-weight: var(--eds-f-w-semibold);\n }\n }\n\n .option-code {\n font: var(--eds-f-label-m-semibold);\n min-width: 2rem;\n }\n\n .option-label {\n flex: 1;\n }\n }\n\n // COLOR VARIANTS\n :host.eds-language-selector--brand {\n .language-toggle {\n color: var(--eds-c-on-surface-brand);\n border-color: transparent;\n\n &:hover {\n background: var(--eds-c-surface-brand--hover);\n color: var(--eds-c-on-surface-brand--hover);\n }\n\n &--icon-layout:hover {\n background: var(--eds-c-surface-brand--hover);\n color: var(--eds-c-on-surface-brand--hover);\n }\n\n ::ng-deep eds-icon {\n // --_eds-icon-on-surface is the icon's top-priority color override; it is\n // honored even by the icon's own color=\"…\" variant branches, whereas\n // --_on-surface is only a lower-priority fallback the variant branches ignore.\n --_eds-icon-on-surface: var(--eds-c-on-surface-brand);\n }\n }\n\n .chevron {\n color: var(--eds-c-on-surface-brand);\n }\n }\n}\n",
|
|
47708
47743
|
"styleUrl": "./eds-language-selector.scss"
|
|
47709
47744
|
}
|
|
47710
47745
|
],
|
|
@@ -52282,7 +52317,7 @@
|
|
|
52282
52317
|
},
|
|
52283
52318
|
{
|
|
52284
52319
|
"name": "EdsOverlay",
|
|
52285
|
-
"id": "component-EdsOverlay-
|
|
52320
|
+
"id": "component-EdsOverlay-1b392b510b939cf5c652fd2b23120e50f0de213ec7253738e3cf53e8dbdfc7c6bd815cf5e1569960bebd518b0fe223e83c85be3b4c4c3c4e1a4a7386cb411815",
|
|
52286
52321
|
"file": "packages/eds/eds-overlay/eds-overlay.ts",
|
|
52287
52322
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
52288
52323
|
"encapsulation": [],
|
|
@@ -52317,6 +52352,20 @@
|
|
|
52317
52352
|
"rawdescription": "\nFixed width value (overrides responsive width).",
|
|
52318
52353
|
"required": false
|
|
52319
52354
|
},
|
|
52355
|
+
{
|
|
52356
|
+
"name": "hasBackdrop",
|
|
52357
|
+
"coverageIgnore": false,
|
|
52358
|
+
"defaultValue": "false",
|
|
52359
|
+
"deprecated": false,
|
|
52360
|
+
"deprecationMessage": "",
|
|
52361
|
+
"type": "boolean",
|
|
52362
|
+
"indexKey": "",
|
|
52363
|
+
"optional": false,
|
|
52364
|
+
"description": "<p>Shows a dimmed backdrop behind the overlay panel. Off by default.</p>\n",
|
|
52365
|
+
"line": 36,
|
|
52366
|
+
"rawdescription": "\nShows a dimmed backdrop behind the overlay panel. Off by default.",
|
|
52367
|
+
"required": false
|
|
52368
|
+
},
|
|
52320
52369
|
{
|
|
52321
52370
|
"name": "hasClosedOnClickOutside",
|
|
52322
52371
|
"coverageIgnore": false,
|
|
@@ -52355,7 +52404,7 @@
|
|
|
52355
52404
|
"indexKey": "",
|
|
52356
52405
|
"optional": false,
|
|
52357
52406
|
"description": "<p>Applies highlighted visual styling.</p>\n",
|
|
52358
|
-
"line":
|
|
52407
|
+
"line": 39,
|
|
52359
52408
|
"rawdescription": "\nApplies highlighted visual styling.",
|
|
52360
52409
|
"required": false
|
|
52361
52410
|
},
|
|
@@ -52398,7 +52447,7 @@
|
|
|
52398
52447
|
"indexKey": "",
|
|
52399
52448
|
"optional": false,
|
|
52400
52449
|
"description": "<p>Emitted when the overlay's active state changes (typically false for close requests).</p>\n",
|
|
52401
|
-
"line":
|
|
52450
|
+
"line": 42,
|
|
52402
52451
|
"rawdescription": "\nEmitted when the overlay's active state changes (typically false for close requests).",
|
|
52403
52452
|
"required": false
|
|
52404
52453
|
}
|
|
@@ -52414,7 +52463,7 @@
|
|
|
52414
52463
|
"indexKey": "",
|
|
52415
52464
|
"optional": false,
|
|
52416
52465
|
"description": "",
|
|
52417
|
-
"line":
|
|
52466
|
+
"line": 44,
|
|
52418
52467
|
"rawdescription": "\n"
|
|
52419
52468
|
}
|
|
52420
52469
|
],
|
|
@@ -52426,7 +52475,7 @@
|
|
|
52426
52475
|
"optional": false,
|
|
52427
52476
|
"returnType": "void",
|
|
52428
52477
|
"typeParameters": [],
|
|
52429
|
-
"line":
|
|
52478
|
+
"line": 61,
|
|
52430
52479
|
"deprecated": false,
|
|
52431
52480
|
"deprecationMessage": "",
|
|
52432
52481
|
"rawdescription": "\n",
|
|
@@ -52439,7 +52488,7 @@
|
|
|
52439
52488
|
"optional": false,
|
|
52440
52489
|
"returnType": "void",
|
|
52441
52490
|
"typeParameters": [],
|
|
52442
|
-
"line":
|
|
52491
|
+
"line": 55,
|
|
52443
52492
|
"deprecated": false,
|
|
52444
52493
|
"deprecationMessage": "",
|
|
52445
52494
|
"rawdescription": "\n",
|
|
@@ -52467,7 +52516,7 @@
|
|
|
52467
52516
|
"argsDecorator": [],
|
|
52468
52517
|
"deprecated": false,
|
|
52469
52518
|
"deprecationMessage": "",
|
|
52470
|
-
"line":
|
|
52519
|
+
"line": 55
|
|
52471
52520
|
}
|
|
52472
52521
|
],
|
|
52473
52522
|
"standalone": false,
|
|
@@ -52480,12 +52529,12 @@
|
|
|
52480
52529
|
"description": "",
|
|
52481
52530
|
"rawdescription": "\n",
|
|
52482
52531
|
"type": "component",
|
|
52483
|
-
"sourceCode": "import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n selector: 'eds-overlay',\n templateUrl: './eds-overlay.html',\n styleUrl: './eds-overlay.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [A11yModule],\n host: {\n '[class]': 'hostClasses()',\n role: 'dialog',\n '[attr.aria-hidden]': '!isActive()',\n '[attr.inert]': '!isActive() ? true : null',\n },\n})\nexport class EdsOverlay {\n /** Controls the visibility and active state of the overlay. */\n isActive = input(false, { transform: booleanAttribute });\n\n /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n position = input<EdsOverlayPosition>('right');\n\n /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n width = input<string>('');\n\n /** Fixed width value (overrides responsive width). */\n fixedWidth = input<string>('');\n\n /** Enables automatic closing when clicking outside the overlay. */\n hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n /** Applies highlighted visual styling. */\n isHighlighted = input(false, { transform: booleanAttribute });\n\n /** Emitted when the overlay's active state changes (typically false for close requests). */\n activeState = output<boolean>();\n\n hostClasses = computed(() => {\n return [\n 'eds-overlay',\n `eds-overlay--${this.position()}`,\n this.isActive() ? 'eds-overlay--active' : '',\n this.width() ? `eds-overlay--width-${this.width()}` : '',\n this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n ].join(' ').trim();\n });\n\n @HostListener('document:keydown.escape')\n onEscape(): void {\n if (this.isActive()) {\n this.activeState.emit(false);\n }\n }\n\n onBackdropClick(): void {\n if (this.hasClosedOnClickOutside()) {\n this.activeState.emit(false);\n }\n }\n}\n",
|
|
52532
|
+
"sourceCode": "import { Component, ChangeDetectionStrategy, input, output, computed, booleanAttribute, HostListener } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\n\nexport type EdsOverlayPosition = 'right' | 'left' | 'top' | 'bottom';\n\n@Component({\n selector: 'eds-overlay',\n templateUrl: './eds-overlay.html',\n styleUrl: './eds-overlay.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [A11yModule],\n host: {\n '[class]': 'hostClasses()',\n role: 'dialog',\n '[attr.aria-hidden]': '!isActive()',\n '[attr.inert]': '!isActive() ? true : null',\n },\n})\nexport class EdsOverlay {\n /** Controls the visibility and active state of the overlay. */\n isActive = input(false, { transform: booleanAttribute });\n\n /** Screen position where the overlay appears ('right', 'left', 'top', 'bottom'). */\n position = input<EdsOverlayPosition>('right');\n\n /** Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large'). */\n width = input<string>('');\n\n /** Fixed width value (overrides responsive width). */\n fixedWidth = input<string>('');\n\n /** Enables automatic closing when clicking outside the overlay. */\n hasClosedOnClickOutside = input(false, { transform: booleanAttribute });\n\n /** Shows a dimmed backdrop behind the overlay panel. Off by default. */\n hasBackdrop = input(false, { transform: booleanAttribute });\n\n /** Applies highlighted visual styling. */\n isHighlighted = input(false, { transform: booleanAttribute });\n\n /** Emitted when the overlay's active state changes (typically false for close requests). */\n activeState = output<boolean>();\n\n hostClasses = computed(() => {\n return [\n 'eds-overlay',\n `eds-overlay--${this.position()}`,\n this.isActive() ? 'eds-overlay--active' : '',\n this.width() ? `eds-overlay--width-${this.width()}` : '',\n this.isHighlighted() ? 'eds-overlay--highlighted' : '',\n ].join(' ').trim();\n });\n\n @HostListener('document:keydown.escape')\n onEscape(): void {\n if (this.isActive()) {\n this.activeState.emit(false);\n }\n }\n\n onBackdropClick(): void {\n if (this.hasClosedOnClickOutside()) {\n this.activeState.emit(false);\n }\n }\n}\n",
|
|
52484
52533
|
"styleUrl": "./eds-overlay.scss",
|
|
52485
52534
|
"assetsDirs": [],
|
|
52486
52535
|
"styleUrlsData": [
|
|
52487
52536
|
{
|
|
52488
|
-
"data": "@use '../base' as base;\n\n.eui-21 {\n :host {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1000;\n pointer-events: none;\n display: flex;\n\n &.eds-overlay--active {\n pointer-events: auto;\n }\n\n &.eds-overlay--right {\n justify-content: flex-end;\n }\n\n &.eds-overlay--left {\n justify-content: flex-start;\n }\n\n &.eds-overlay--top {\n align-items: flex-start;\n\n .eds-overlay-panel {\n width: 100%;\n max-height: 80vh;\n transform: translateY(-100%);\n }\n\n &.eds-overlay--active .eds-overlay-panel {\n transform: translateY(0);\n }\n }\n\n &.eds-overlay--bottom {\n align-items: flex-end;\n\n .eds-overlay-panel {\n width: 100%;\n max-height: 80vh;\n transform: translateY(100%);\n }\n\n &.eds-overlay--active .eds-overlay-panel {\n transform: translateY(0);\n }\n }\n\n &:not(.eds-overlay--active) {\n visibility: hidden;\n\n .eds-overlay-panel {\n transform: translateX(100%);\n }\n\n &.eds-overlay--left .eds-overlay-panel {\n transform: translateX(-100%);\n }\n }\n\n &.eds-overlay--highlighted .eds-overlay-panel {\n border-left: 3px solid var(--eds-c-border-primary);\n }\n\n .eds-overlay-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--eds-c-alpha-backdrop);\n }\n\n .eds-overlay-panel {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--eds-c-surface-elevation-overlay);\n box-shadow: var(--eds-sh-4);\n overflow: hidden;\n transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n width: 400px;\n max-width: 100vw;\n }\n }\n\n // Width variants\n :host.eds-overlay--width-small .eds-overlay-panel {\n width: 320px;\n }\n\n :host.eds-overlay--width-medium .eds-overlay-panel {\n width: 480px;\n }\n\n :host.eds-overlay--width-large .eds-overlay-panel {\n width: 640px;\n }\n\n :host.eds-overlay--width-xlarge .eds-overlay-panel {\n width: 800px;\n }\n}\n",
|
|
52537
|
+
"data": "@use '../base' as base;\n\n.eui-21 {\n :host {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1000;\n pointer-events: none;\n display: flex;\n\n &.eds-overlay--active {\n pointer-events: auto;\n }\n\n &.eds-overlay--right {\n justify-content: flex-end;\n }\n\n &.eds-overlay--left {\n justify-content: flex-start;\n }\n\n &.eds-overlay--top {\n align-items: flex-start;\n\n .eds-overlay-panel {\n width: 100%;\n max-height: 80vh;\n transform: translateY(-100%);\n }\n\n &.eds-overlay--active .eds-overlay-panel {\n transform: translateY(0);\n }\n }\n\n &.eds-overlay--bottom {\n align-items: flex-end;\n\n .eds-overlay-panel {\n width: 100%;\n max-height: 80vh;\n transform: translateY(100%);\n }\n\n &.eds-overlay--active .eds-overlay-panel {\n transform: translateY(0);\n }\n }\n\n &:not(.eds-overlay--active) {\n visibility: hidden;\n\n .eds-overlay-panel {\n transform: translateX(100%);\n }\n\n &.eds-overlay--left .eds-overlay-panel {\n transform: translateX(-100%);\n }\n }\n\n &.eds-overlay--highlighted .eds-overlay-panel {\n border-left: 3px solid var(--eds-c-border-primary);\n }\n\n .eds-overlay-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Transparent by default (used only as a click-catcher for hasClosedOnClickOutside);\n // dimmed only when the backdrop is explicitly requested via hasBackdrop.\n background: transparent;\n\n &.eds-overlay-backdrop--visible {\n background: var(--eds-c-alpha-backdrop);\n }\n }\n\n .eds-overlay-panel {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--eds-c-surface-elevation-overlay);\n box-shadow: var(--eds-sh-4);\n overflow: hidden;\n transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n width: 400px;\n max-width: 100vw;\n }\n }\n\n // Width variants\n :host.eds-overlay--width-small .eds-overlay-panel {\n width: 320px;\n }\n\n :host.eds-overlay--width-medium .eds-overlay-panel {\n width: 480px;\n }\n\n :host.eds-overlay--width-large .eds-overlay-panel {\n width: 640px;\n }\n\n :host.eds-overlay--width-xlarge .eds-overlay-panel {\n width: 800px;\n }\n}\n",
|
|
52489
52538
|
"styleUrl": "./eds-overlay.scss"
|
|
52490
52539
|
}
|
|
52491
52540
|
],
|
|
@@ -52500,7 +52549,7 @@
|
|
|
52500
52549
|
}
|
|
52501
52550
|
]
|
|
52502
52551
|
},
|
|
52503
|
-
"templateData": "@if (isActive()) {\n <div
|
|
52552
|
+
"templateData": "@if (isActive() && (hasBackdrop() || hasClosedOnClickOutside())) {\n <div\n class=\"eds-overlay-backdrop\"\n [class.eds-overlay-backdrop--visible]=\"hasBackdrop()\"\n (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n class=\"eds-overlay-panel\"\n [style.width]=\"fixedWidth() || null\"\n [cdkTrapFocus]=\"isActive()\"\n [cdkTrapFocusAutoCapture]=\"true\">\n <ng-content select=\"eds-overlay-header\"></ng-content>\n <ng-content select=\"eds-overlay-content\"></ng-content>\n <ng-content select=\"eds-overlay-footer\"></ng-content>\n <ng-content></ng-content>\n</div>\n"
|
|
52504
52553
|
},
|
|
52505
52554
|
{
|
|
52506
52555
|
"name": "EdsOverlayContent",
|
|
@@ -77073,7 +77122,7 @@
|
|
|
77073
77122
|
"ctype": "miscellaneous",
|
|
77074
77123
|
"subtype": "typealias",
|
|
77075
77124
|
"coverageIgnore": false,
|
|
77076
|
-
"rawtype": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
|
|
77125
|
+
"rawtype": "\"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
|
|
77077
77126
|
"file": "packages/eds/eds-chip/eds-chip.ts",
|
|
77078
77127
|
"deprecated": false,
|
|
77079
77128
|
"deprecationMessage": "",
|
|
@@ -80668,7 +80717,7 @@
|
|
|
80668
80717
|
"ctype": "miscellaneous",
|
|
80669
80718
|
"subtype": "typealias",
|
|
80670
80719
|
"coverageIgnore": false,
|
|
80671
|
-
"rawtype": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
|
|
80720
|
+
"rawtype": "\"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"critical\"",
|
|
80672
80721
|
"file": "packages/eds/eds-chip/eds-chip.ts",
|
|
80673
80722
|
"deprecated": false,
|
|
80674
80723
|
"deprecationMessage": "",
|