@eui/eds 22.0.0-alpha.25 → 22.0.0-alpha.26
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 +10 -0
- package/docs/components/EdsLabel.html +51 -94
- package/docs/directives/EdsColorDirective.html +0 -3
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/EdsLabel.md +12 -3
- package/docs/json/documentation.json +88 -63
- package/docs/llms.txt +5 -4
- package/docs/miscellaneous/typealiases.html +29 -0
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-icon.mjs +2 -2
- package/fesm2022/eui-eds-eds-icon.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-label.mjs +26 -32
- package/fesm2022/eui-eds-eds-label.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tree.mjs +1 -1
- package/fesm2022/eui-eds-eds-tree.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eui-eds-eds-label.d.ts +24 -8
- package/types/eui-eds-eds-label.d.ts.map +1 -1
package/docs/json/EdsLabel.md
CHANGED
|
@@ -4,11 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.
|
|
8
|
+
Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host
|
|
9
|
+
attribute, plus a required marker.
|
|
10
|
+
|
|
11
|
+
Usage:
|
|
12
|
+
```html
|
|
13
|
+
<label edsLabel for="name">Name</label>
|
|
14
|
+
<label edsLabel edsRequired for="email">Email</label>
|
|
15
|
+
<span edsLabel color="critical">This field is required</span>
|
|
16
|
+
```
|
|
17
|
+
|
|
7
18
|
|
|
8
19
|
**Selector:** `label[edsLabel], span[edsLabel], div[edsLabel]`
|
|
9
20
|
|
|
10
21
|
## Inputs
|
|
22
|
+
- **color**: `EdsLabelColor` - Semantic color of the label. 'neutral'
|
|
11
23
|
- **edsRequired**: `boolean` - Marks the label as required (appends a red asterisk). false
|
|
12
|
-
- **edsNeutral**: `any` - From host directive: #[[file:EdsColorDirective.md]]
|
|
13
|
-
- **edsCritical**: `any` - From host directive: #[[file:EdsColorDirective.md]]
|
|
14
|
-
- **edsColorVariant**: `any` - From host directive: #[[file:EdsColorDirective.md]]
|
|
@@ -11832,10 +11832,6 @@
|
|
|
11832
11832
|
"type": "component",
|
|
11833
11833
|
"description": "Floating Action Button with optional speed dial menu. Follows the WAI-ARIA APG Menu Button pattern: - Trigger button: role=\"button\", aria..."
|
|
11834
11834
|
},
|
|
11835
|
-
{
|
|
11836
|
-
"name": "EdsLabel",
|
|
11837
|
-
"type": "component"
|
|
11838
|
-
},
|
|
11839
11835
|
{
|
|
11840
11836
|
"name": "EdsLanguageSelector",
|
|
11841
11837
|
"type": "component"
|
|
@@ -40909,7 +40905,7 @@
|
|
|
40909
40905
|
"assetsDirs": [],
|
|
40910
40906
|
"styleUrlsData": [
|
|
40911
40907
|
{
|
|
40912
|
-
"data": "@use '../base' as base;\n\n:host {\n --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); // inherited from parent\n // --_eds-icon-on-surface lets a parent (e.g. eds-badge) override the icon color;\n // when unset, each color variant supplies its own token below.\n --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground))); // inherited from parent\n\n display: inline-flex;\n position: relative;\n\n .eds-icon-svg {\n height: var(--_eds-icon-size);\n width: var(--_eds-icon-size);\n fill: var(--_eds-icon-color);\n color: var(--_eds-icon-color);\n }\n\n // Multi-color sprites (flags) — disable fill inheritance so path fill attributes render\n .eds-icon-svg.eds-icon-set-flags-1x1,\n .eds-icon-svg.eds-icon-set-flags-4x3 {\n fill: none;\n }\n}\n\n// SIZE VARIANTS\n// -------------\n\n// An inherited `--_icon-size` (set by a composing parent such as eds-avatar)
|
|
40908
|
+
"data": "@use '../base' as base;\n\n:host {\n --_eds-icon-size: var(--_icon-size, var(--eds-is-m)); // inherited from parent\n // --_eds-icon-on-surface lets a parent (e.g. eds-badge) override the icon color;\n // when unset, each color variant supplies its own token below.\n --_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground))); // inherited from parent\n\n display: inline-flex;\n position: relative;\n\n .eds-icon-svg {\n height: var(--_eds-icon-size);\n width: var(--_eds-icon-size);\n fill: var(--_eds-icon-color);\n color: var(--_eds-icon-color);\n }\n\n // Multi-color sprites (flags) — disable fill inheritance so path fill attributes render\n .eds-icon-svg.eds-icon-set-flags-1x1,\n .eds-icon-svg.eds-icon-set-flags-4x3 {\n fill: none;\n }\n}\n\n// SIZE VARIANTS\n// -------------\n\n// An explicit `size` attribute on the icon is authoritative and resolves directly to\n// its icon-size token. The inherited `--_icon-size` hint (set by a composing parent\n// such as eds-avatar) only drives the base `:host` default above — it must NOT override\n// an explicit `size`, otherwise a parent's inherited value would silently win over the\n// size a consumer passes (e.g. eds-loading-indicator's spinner).\n:host([size=\"2xs\"]) { --_eds-icon-size: var(--eds-is-2xs); }\n:host([size=\"xs\"]) { --_eds-icon-size: var(--eds-is-xs); }\n:host([size=\"s\"]) { --_eds-icon-size: var(--eds-is-s); }\n:host([size=\"m\"]) { --_eds-icon-size: var(--eds-is-m); }\n:host([size=\"l\"]) { --_eds-icon-size: var(--eds-is-l); }\n:host([size=\"xl\"]) { --_eds-icon-size: var(--eds-is-xl); }\n:host([size=\"2xl\"]) { --_eds-icon-size: var(--eds-is-2xl); }\n:host([size=\"3xl\"]) { --_eds-icon-size: var(--eds-is-3xl); }\n:host([size=\"4xl\"]) { --_eds-icon-size: var(--eds-is-4xl); }\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground)); }\n:host([color=\"neutral-subtle\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle)); }\n:host([color=\"neutral-subtler\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler)); }\n:host([color=\"primary\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary)); }\n:host([color=\"highlight\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight)); }\n:host([color=\"info\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info)); }\n:host([color=\"success\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success)); }\n:host([color=\"warning\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning)); }\n:host([color=\"critical\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical)); }\n:host([color=\"brand\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand)); }\n:host([color=\"disabled\"]) { --_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled)); }\n\n// ROUNDED\n// -------\n\n:host([rounded]) {\n border-radius: 50%;\n overflow: hidden;\n\n .eds-icon-svg {\n border-radius: 50%;\n }\n}\n\n// LOADING SPINNER — inherits icon size and color\n// ----------------------------------------------\n\n:host([loading]) {\n // Spinner ring thickness scales with the icon size so every size reads correctly\n // (a fixed border would nearly fill the smallest sizes and look too thin on large ones).\n --_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * 0.125));\n\n .eds-icon-spinner {\n display: inline-block;\n box-sizing: border-box;\n width: var(--_eds-icon-size);\n height: var(--_eds-icon-size);\n border: var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);\n border-top-color: var(--_eds-icon-color);\n border-radius: 50%;\n animation: eds-icon-spin 0.6s linear infinite;\n }\n}\n\n@keyframes eds-icon-spin {\n to {\n transform: rotate(360deg);\n }\n}\n",
|
|
40913
40909
|
"styleUrl": "./eds-icon.scss"
|
|
40914
40910
|
}
|
|
40915
40911
|
],
|
|
@@ -47122,7 +47118,7 @@
|
|
|
47122
47118
|
},
|
|
47123
47119
|
{
|
|
47124
47120
|
"name": "EdsLabel",
|
|
47125
|
-
"id": "component-EdsLabel-
|
|
47121
|
+
"id": "component-EdsLabel-6a7892f50e0f744d2ac74c39cc66fcd29647088f763f2fc971778ecfee99441b09bba46f0d098031acd473b9f8d7c6ca501b7c3817903e6f657a38d12e15542a",
|
|
47126
47122
|
"file": "packages/eds/eds-label/eds-label.ts",
|
|
47127
47123
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
47128
47124
|
"encapsulation": [],
|
|
@@ -47140,18 +47136,43 @@
|
|
|
47140
47136
|
"templateUrl": [],
|
|
47141
47137
|
"templateVariables": [],
|
|
47142
47138
|
"viewProviders": [],
|
|
47143
|
-
"hostDirectives": [
|
|
47139
|
+
"hostDirectives": [],
|
|
47140
|
+
"inputsClass": [
|
|
47144
47141
|
{
|
|
47145
|
-
"name": "
|
|
47146
|
-
"
|
|
47147
|
-
|
|
47148
|
-
|
|
47149
|
-
|
|
47142
|
+
"name": "color",
|
|
47143
|
+
"coverageIgnore": false,
|
|
47144
|
+
"defaultValue": "'neutral'",
|
|
47145
|
+
"deprecated": false,
|
|
47146
|
+
"deprecationMessage": "",
|
|
47147
|
+
"type": "EdsLabelColor",
|
|
47148
|
+
"indexKey": "",
|
|
47149
|
+
"optional": false,
|
|
47150
|
+
"description": "<p>Semantic color of the label.\n'neutral'</p>\n",
|
|
47151
|
+
"line": 43,
|
|
47152
|
+
"rawdescription": "\n\nSemantic color of the label.\n'neutral'\n",
|
|
47153
|
+
"jsdoctags": [
|
|
47154
|
+
{
|
|
47155
|
+
"pos": 1208,
|
|
47156
|
+
"end": 1232,
|
|
47157
|
+
"kind": 328,
|
|
47158
|
+
"id": 0,
|
|
47159
|
+
"flags": 16842752,
|
|
47160
|
+
"modifierFlagsCache": 0,
|
|
47161
|
+
"transformFlags": 0,
|
|
47162
|
+
"tagName": {
|
|
47163
|
+
"pos": 1209,
|
|
47164
|
+
"end": 1216,
|
|
47165
|
+
"kind": 80,
|
|
47166
|
+
"id": 0,
|
|
47167
|
+
"flags": 16842752,
|
|
47168
|
+
"transformFlags": 0,
|
|
47169
|
+
"escapedText": "default"
|
|
47170
|
+
},
|
|
47171
|
+
"comment": "<p>'neutral'</p>\n"
|
|
47172
|
+
}
|
|
47150
47173
|
],
|
|
47151
|
-
"
|
|
47152
|
-
}
|
|
47153
|
-
],
|
|
47154
|
-
"inputsClass": [
|
|
47174
|
+
"required": false
|
|
47175
|
+
},
|
|
47155
47176
|
{
|
|
47156
47177
|
"name": "edsRequired",
|
|
47157
47178
|
"coverageIgnore": false,
|
|
@@ -47162,20 +47183,20 @@
|
|
|
47162
47183
|
"indexKey": "",
|
|
47163
47184
|
"optional": false,
|
|
47164
47185
|
"description": "<p>Marks the label as required (appends a red asterisk).\nfalse</p>\n",
|
|
47165
|
-
"line":
|
|
47186
|
+
"line": 49,
|
|
47166
47187
|
"rawdescription": "\n\nMarks the label as required (appends a red asterisk).\nfalse\n",
|
|
47167
47188
|
"jsdoctags": [
|
|
47168
47189
|
{
|
|
47169
|
-
"pos":
|
|
47170
|
-
"end":
|
|
47190
|
+
"pos": 1357,
|
|
47191
|
+
"end": 1377,
|
|
47171
47192
|
"kind": 328,
|
|
47172
47193
|
"id": 0,
|
|
47173
47194
|
"flags": 16842752,
|
|
47174
47195
|
"modifierFlagsCache": 0,
|
|
47175
47196
|
"transformFlags": 0,
|
|
47176
47197
|
"tagName": {
|
|
47177
|
-
"pos":
|
|
47178
|
-
"end":
|
|
47198
|
+
"pos": 1358,
|
|
47199
|
+
"end": 1365,
|
|
47179
47200
|
"kind": 80,
|
|
47180
47201
|
"id": 0,
|
|
47181
47202
|
"flags": 16842752,
|
|
@@ -47189,37 +47210,7 @@
|
|
|
47189
47210
|
}
|
|
47190
47211
|
],
|
|
47191
47212
|
"outputsClass": [],
|
|
47192
|
-
"propertiesClass": [
|
|
47193
|
-
{
|
|
47194
|
-
"name": "colorDirective",
|
|
47195
|
-
"coverageIgnore": false,
|
|
47196
|
-
"defaultValue": "inject(EdsColorDirective)",
|
|
47197
|
-
"deprecated": false,
|
|
47198
|
-
"deprecationMessage": "",
|
|
47199
|
-
"type": "unknown",
|
|
47200
|
-
"indexKey": "",
|
|
47201
|
-
"optional": false,
|
|
47202
|
-
"description": "",
|
|
47203
|
-
"line": 39,
|
|
47204
|
-
"rawdescription": "\n",
|
|
47205
|
-
"modifierKind": [
|
|
47206
|
-
124
|
|
47207
|
-
]
|
|
47208
|
-
},
|
|
47209
|
-
{
|
|
47210
|
-
"name": "hostClasses",
|
|
47211
|
-
"coverageIgnore": false,
|
|
47212
|
-
"defaultValue": "computed(() => {\n const colorClass = this.colorDirective.getCssClass('eds-label');\n return [\n 'eds-label',\n colorClass || 'eds-label--neutral',\n this.edsRequired() ? 'eds-label--required' : '',\n ]\n .join(' ')\n .trim();\n })",
|
|
47213
|
-
"deprecated": false,
|
|
47214
|
-
"deprecationMessage": "",
|
|
47215
|
-
"type": "unknown",
|
|
47216
|
-
"indexKey": "",
|
|
47217
|
-
"optional": false,
|
|
47218
|
-
"description": "<p>Computed host CSS classes based on current state.</p>\n",
|
|
47219
|
-
"line": 44,
|
|
47220
|
-
"rawdescription": "\n\nComputed host CSS classes based on current state.\n"
|
|
47221
|
-
}
|
|
47222
|
-
],
|
|
47213
|
+
"propertiesClass": [],
|
|
47223
47214
|
"methodsClass": [],
|
|
47224
47215
|
"coverageIgnore": false,
|
|
47225
47216
|
"deprecated": false,
|
|
@@ -47228,29 +47219,35 @@
|
|
|
47228
47219
|
"hostListeners": [],
|
|
47229
47220
|
"standalone": false,
|
|
47230
47221
|
"imports": [],
|
|
47231
|
-
"description": "",
|
|
47232
|
-
"rawdescription": "\n",
|
|
47222
|
+
"description": "<p>A form label applied to <code>label</code>, <code>span</code>, or <code>div</code> elements via the <code>edsLabel</code> attribute.\nSupports a semantic color (<code>neutral</code> default, <code>critical</code> for errors) reflected as a host\nattribute, plus a required marker.</p>\n<p>Usage:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><label edsLabel for="name">Name</label>\n<label edsLabel edsRequired for="email">Email</label>\n<span edsLabel color="critical">This field is required</span></code></pre></div>",
|
|
47223
|
+
"rawdescription": "\n\nA form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\nSupports a semantic color (`neutral` default, `critical` for errors) reflected as a host\nattribute, plus a required marker.\n\nUsage:\n```html\n<label edsLabel for=\"name\">Name</label>\n<label edsLabel edsRequired for=\"email\">Email</label>\n<span edsLabel color=\"critical\">This field is required</span>\n```\n",
|
|
47233
47224
|
"type": "component",
|
|
47234
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n
|
|
47225
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n input,\n booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n template: '<ng-content/>',\n styleUrl: './eds-label.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-label',\n '[attr.color]': 'color()',\n '[attr.required]': 'edsRequired() || null',\n },\n})\nexport class EdsLabel {\n /**\n * Semantic color of the label.\n * @default 'neutral'\n */\n color = input<EdsLabelColor>('neutral');\n\n /**\n * Marks the label as required (appends a red asterisk).\n * @default false\n */\n edsRequired = input(false, { transform: booleanAttribute });\n}\n",
|
|
47235
47226
|
"styleUrl": "./eds-label.scss",
|
|
47236
47227
|
"assetsDirs": [],
|
|
47237
47228
|
"styleUrlsData": [
|
|
47238
47229
|
{
|
|
47239
|
-
"data": "@use '../base' as base;\n\n
|
|
47230
|
+
"data": "@use '../base' as base;\n\n:host {\n display: inline-block;\n font: var(--eds-f-label-m-semibold);\n color: var(--eds-c-foreground);\n}\n\n// COLOR VARIANTS\n// --------------\n\n:host([color=\"neutral\"]) { color: var(--eds-c-foreground); }\n:host([color=\"critical\"]) { color: var(--eds-c-foreground-critical); }\n\n// REQUIRED MARKER\n// ---------------\n\n:host([required])::after {\n color: var(--eds-c-foreground-critical);\n content: ' *';\n font: var(--eds-f-label-m-semibold);\n}\n",
|
|
47240
47231
|
"styleUrl": "./eds-label.scss"
|
|
47241
47232
|
}
|
|
47242
47233
|
],
|
|
47243
47234
|
"stylesData": "",
|
|
47235
|
+
"jsdoctags": [
|
|
47236
|
+
{
|
|
47237
|
+
"pos": 308,
|
|
47238
|
+
"end": 733,
|
|
47239
|
+
"kind": 321,
|
|
47240
|
+
"id": 0,
|
|
47241
|
+
"flags": 16777216,
|
|
47242
|
+
"modifierFlagsCache": 0,
|
|
47243
|
+
"transformFlags": 0,
|
|
47244
|
+
"comment": "A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\nSupports a semantic color (`neutral` default, `critical` for errors) reflected as a host\nattribute, plus a required marker.\n\nUsage:\n```html\n<label edsLabel for=\"name\">Name</label>\n<label edsLabel edsRequired for=\"email\">Email</label>\n<span edsLabel color=\"critical\">This field is required</span>\n```"
|
|
47245
|
+
}
|
|
47246
|
+
],
|
|
47244
47247
|
"extends": [],
|
|
47245
47248
|
"relationships": {
|
|
47246
47249
|
"incoming": [],
|
|
47247
|
-
"outgoing": [
|
|
47248
|
-
{
|
|
47249
|
-
"name": "EdsColorDirective",
|
|
47250
|
-
"type": "directive",
|
|
47251
|
-
"description": "Signal-based color variant directive. Provides both a string-based `edsColorVariant` input and boolean shorthand inputs (`edsNeutral`, `e..."
|
|
47252
|
-
}
|
|
47253
|
-
]
|
|
47250
|
+
"outgoing": []
|
|
47254
47251
|
}
|
|
47255
47252
|
},
|
|
47256
47253
|
{
|
|
@@ -77435,6 +77432,19 @@
|
|
|
77435
77432
|
"description": "<p>Local narrowed size union — the prompt input's size contract.</p>\n",
|
|
77436
77433
|
"kind": 193
|
|
77437
77434
|
},
|
|
77435
|
+
{
|
|
77436
|
+
"name": "EdsLabelColor",
|
|
77437
|
+
"ctype": "miscellaneous",
|
|
77438
|
+
"subtype": "typealias",
|
|
77439
|
+
"coverageIgnore": false,
|
|
77440
|
+
"rawtype": "\"neutral\" | \"critical\"",
|
|
77441
|
+
"file": "packages/eds/eds-label/eds-label.ts",
|
|
77442
|
+
"deprecated": false,
|
|
77443
|
+
"deprecationMessage": "",
|
|
77444
|
+
"rawdescription": "Local narrowed color union — the label's color contract.\n`neutral` is the default; `critical` colors the label for error context.",
|
|
77445
|
+
"description": "<p>Local narrowed color union — the label's color contract.\n<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>\n",
|
|
77446
|
+
"kind": 193
|
|
77447
|
+
},
|
|
77438
77448
|
{
|
|
77439
77449
|
"name": "EdsListRole",
|
|
77440
77450
|
"ctype": "miscellaneous",
|
|
@@ -81048,6 +81058,21 @@
|
|
|
81048
81058
|
"kind": 193
|
|
81049
81059
|
}
|
|
81050
81060
|
],
|
|
81061
|
+
"packages/eds/eds-label/eds-label.ts": [
|
|
81062
|
+
{
|
|
81063
|
+
"name": "EdsLabelColor",
|
|
81064
|
+
"ctype": "miscellaneous",
|
|
81065
|
+
"subtype": "typealias",
|
|
81066
|
+
"coverageIgnore": false,
|
|
81067
|
+
"rawtype": "\"neutral\" | \"critical\"",
|
|
81068
|
+
"file": "packages/eds/eds-label/eds-label.ts",
|
|
81069
|
+
"deprecated": false,
|
|
81070
|
+
"deprecationMessage": "",
|
|
81071
|
+
"rawdescription": "Local narrowed color union — the label's color contract.\n`neutral` is the default; `critical` colors the label for error context.",
|
|
81072
|
+
"description": "<p>Local narrowed color union — the label's color contract.\n<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>\n",
|
|
81073
|
+
"kind": 193
|
|
81074
|
+
}
|
|
81075
|
+
],
|
|
81051
81076
|
"packages/eds/eds-list/eds-list.ts": [
|
|
81052
81077
|
{
|
|
81053
81078
|
"name": "EdsListRole",
|
package/docs/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eui documentation
|
|
2
2
|
|
|
3
|
-
> Generated by compodoc 2.0.0 at 2026-09-
|
|
3
|
+
> Generated by compodoc 2.0.0 at 2026-09-26T11:20:02.308Z, llm-md export.
|
|
4
4
|
|
|
5
5
|
## Components
|
|
6
6
|
|
|
@@ -1937,12 +1937,12 @@ File: `packages/eds/eds-label/eds-label.ts`
|
|
|
1937
1937
|
Selector: `label[edsLabel], span[edsLabel], div[edsLabel]`
|
|
1938
1938
|
Change detection: `ChangeDetectionStrategy.OnPush`
|
|
1939
1939
|
|
|
1940
|
+
Description: A form label applied to label , span , or div elements via the edsLabel attribute. Supports a semantic color ( neutral default, critical for errors) reflected as a host attribute, plus a required marker. Usage: Example : \<label edsLabel for="name"\>Name\</label\> \<label edsLabel edsRequired for="email"\>Email\</label\> \<span edsLabel color="critical"\>This field is required\</span\>
|
|
1941
|
+
|
|
1940
1942
|
Inputs:
|
|
1943
|
+
- `color: EdsLabelColor = 'neutral'` — Semantic color of the label. 'neutral'
|
|
1941
1944
|
- `edsRequired: boolean = false` — Marks the label as required (appends a red asterisk). false
|
|
1942
1945
|
|
|
1943
|
-
Properties:
|
|
1944
|
-
- `hostClasses: unknown = computed(() => { const colorClass = this.colorDirective.getCssClass('eds-label'); return [ 'eds-label', colorClass || 'eds-label--neutral', this.edsRequired() ?…` — Computed host CSS classes based on current state.
|
|
1945
|
-
|
|
1946
1946
|
### EdsLanguageSelector
|
|
1947
1947
|
|
|
1948
1948
|
File: `packages/eds/eds-language-selector/eds-language-selector.ts`
|
|
@@ -5034,6 +5034,7 @@ Properties:
|
|
|
5034
5034
|
- `type EdsIconStateSize = "2xs" | "xs" | "s" | "m" | "l" | "xl"` — Local narrowed size union — the icon-state's size contract.
|
|
5035
5035
|
- `type EdsInputPromptSendPosition = "toolbar" | "top"` — Placement options for the built-in send button.
|
|
5036
5036
|
- `type EdsInputPromptSize = "s" | "m" | "l"` — Local narrowed size union — the prompt input's size contract.
|
|
5037
|
+
- `type EdsLabelColor = "neutral" | "critical"` — Local narrowed color union — the label's color contract. neutral is the default; critical colors the label for error context.
|
|
5037
5038
|
- `type EdsListRole = "listbox" | "menu" | "list"` — Supported ARIA roles for interactive list mode.
|
|
5038
5039
|
- `type EdsLoadingIndicatorSize = "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl"` — Local narrowed size union — the loading indicator's size contract.
|
|
5039
5040
|
- `type EdsOverlayPosition = "right" | "left" | "top" | "bottom"`
|
|
@@ -272,6 +272,9 @@
|
|
|
272
272
|
<li>
|
|
273
273
|
<a href="#EdsInputPromptSize" title="packages/eds/eds-input-prompt/eds-input-prompt.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsInputPromptSize</b> (packages/.../eds-input-prompt.ts)</span></a>
|
|
274
274
|
</li>
|
|
275
|
+
<li>
|
|
276
|
+
<a href="#EdsLabelColor" title="packages/eds/eds-label/eds-label.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsLabelColor</b> (packages/.../eds-label.ts)</span></a>
|
|
277
|
+
</li>
|
|
275
278
|
<li>
|
|
276
279
|
<a href="#EdsListRole" title="packages/eds/eds-list/eds-list.ts" class="reference-link "><span class="reference-badge reference-badge--typealias" aria-hidden="true">T</span><span class="reference-link-label"><b>EdsListRole</b> (packages/.../eds-list.ts)</span></a>
|
|
277
280
|
</li>
|
|
@@ -1548,6 +1551,32 @@ Each value maps to a specific status icon.</p>
|
|
|
1548
1551
|
</tr>
|
|
1549
1552
|
</tbody>
|
|
1550
1553
|
</table>
|
|
1554
|
+
</section>
|
|
1555
|
+
<h3>packages/eds/eds-label/eds-label.ts</h3>
|
|
1556
|
+
<section data-compodoc="block-typealias">
|
|
1557
|
+
<table class="table table-sm table-bordered">
|
|
1558
|
+
<tbody>
|
|
1559
|
+
<tr>
|
|
1560
|
+
<td class="col-md-4">
|
|
1561
|
+
<a name="EdsLabelColor"></a>
|
|
1562
|
+
<span class="name "><b>EdsLabelColor</b><a href="#EdsLabelColor"><span class="icon ion-ios-link"></span></a></span>
|
|
1563
|
+
</td>
|
|
1564
|
+
</tr>
|
|
1565
|
+
<tr>
|
|
1566
|
+
<td class="col-md-4">
|
|
1567
|
+
<div class="io-description"><p>Local narrowed color union — the label's color contract.
|
|
1568
|
+
<code>neutral</code> is the default; <code>critical</code> colors the label for error context.</p>
|
|
1569
|
+
</div>
|
|
1570
|
+
</td>
|
|
1571
|
+
</tr>
|
|
1572
|
+
<tr>
|
|
1573
|
+
<td class="col-md-4">
|
|
1574
|
+
<code> <code>"neutral" | "critical"</code>
|
|
1575
|
+
</code>
|
|
1576
|
+
</td>
|
|
1577
|
+
</tr>
|
|
1578
|
+
</tbody>
|
|
1579
|
+
</table>
|
|
1551
1580
|
</section>
|
|
1552
1581
|
<h3>packages/eds/eds-list/eds-list.ts</h3>
|
|
1553
1582
|
<section data-compodoc="block-typealias">
|
package/docs/properties.html
CHANGED
|
@@ -90,7 +90,7 @@ class EdsIcon {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
93
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--
|
|
93
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
94
94
|
}
|
|
95
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, decorators: [{
|
|
96
96
|
type: Component,
|
|
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
103
103
|
'[attr.role]': 'ariaHidden() ? null : "img"',
|
|
104
104
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
105
105
|
'[attr.aria-hidden]': 'ariaHidden() || null',
|
|
106
|
-
}, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--
|
|
106
|
+
}, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
107
107
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], set: [{ type: i0.Input, args: [{ isSignal: true, alias: "set", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }] } });
|
|
108
108
|
|
|
109
109
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n | 'neutral'\n | 'neutral-subtle'\n | 'neutral-subtler'\n | 'primary'\n | 'highlight'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'brand'\n | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n | '2xs'\n | 'xs'\n | 's'\n | 'm'\n | 'l'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n selector: 'eds-icon, span[edsIcon]',\n templateUrl: './eds-icon.html',\n styleUrls: ['./eds-icon.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-icon',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'rounded() || null',\n '[attr.loading]': 'isLoading() || null',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIcon implements OnInit {\n /**\n * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n * When format includes colon separator, automatically splits into icon and set properties.\n */\n icon = input<string>('');\n\n /**\n * Icon set library to load the icon from.\n * @default 'regular'\n */\n set = input('regular');\n\n /**\n * Semantic color of the icon.\n * @default 'neutral'\n */\n color = input<EdsIconColor>('neutral');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /**\n * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n * @default false\n */\n rounded = input(false, { transform: booleanAttribute });\n\n /**\n * When true, replaces the icon with a spinning loading indicator.\n * The spinner inherits the icon's size and color.\n * @default false\n */\n isLoading = input(false, { transform: booleanAttribute });\n\n /** Resolved icon name (parsed from 'icon:set' format). */\n iconName = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[0];\n }\n return raw;\n });\n\n /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n resolvedSet = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[1] || 'regular';\n }\n return this.set() || 'regular';\n });\n\n public assetsBaseUrl = 'assets';\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n ngOnInit(): void {\n const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n if (assetsBaseUrl) {\n this.assetsBaseUrl = assetsBaseUrl;\n }\n }\n}\n","@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n","import {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n inject,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n selector: 'eds-icon-image, span[edsIconImage]',\n templateUrl: './eds-icon-image.html',\n styleUrls: ['./eds-icon-image.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.size]': 'size()',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIconImage implements OnInit {\n /**\n * Direct URL to an SVG icon file, bypassing the icon set resolution.\n * Useful for loading custom or external icons not in configured icon sets.\n */\n iconUrl = input<string>('');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n public assetsBaseUrl = 'assets';\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n ngOnInit(): void {\n const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n if (assetsBaseUrl) {\n this.assetsBaseUrl = assetsBaseUrl;\n }\n }\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n EdsIcon,\n EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n | 'neutral'\n | 'neutral-subtle'\n | 'neutral-subtler'\n | 'primary'\n | 'highlight'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'brand'\n | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n | '2xs'\n | 'xs'\n | 's'\n | 'm'\n | 'l'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n selector: 'eds-icon, span[edsIcon]',\n templateUrl: './eds-icon.html',\n styleUrls: ['./eds-icon.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-icon',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'rounded() || null',\n '[attr.loading]': 'isLoading() || null',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIcon implements OnInit {\n /**\n * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n * When format includes colon separator, automatically splits into icon and set properties.\n */\n icon = input<string>('');\n\n /**\n * Icon set library to load the icon from.\n * @default 'regular'\n */\n set = input('regular');\n\n /**\n * Semantic color of the icon.\n * @default 'neutral'\n */\n color = input<EdsIconColor>('neutral');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /**\n * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n * @default false\n */\n rounded = input(false, { transform: booleanAttribute });\n\n /**\n * When true, replaces the icon with a spinning loading indicator.\n * The spinner inherits the icon's size and color.\n * @default false\n */\n isLoading = input(false, { transform: booleanAttribute });\n\n /** Resolved icon name (parsed from 'icon:set' format). */\n iconName = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[0];\n }\n return raw;\n });\n\n /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n resolvedSet = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[1] || 'regular';\n }\n return this.set() || 'regular';\n });\n\n public assetsBaseUrl = 'assets';\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n ngOnInit(): void {\n const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n if (assetsBaseUrl) {\n this.assetsBaseUrl = assetsBaseUrl;\n }\n }\n}\n","@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n","import {\n ChangeDetectionStrategy,\n Component,\n OnInit,\n inject,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n selector: 'eds-icon-image, span[edsIconImage]',\n templateUrl: './eds-icon-image.html',\n styleUrls: ['./eds-icon-image.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.size]': 'size()',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIconImage implements OnInit {\n /**\n * Direct URL to an SVG icon file, bypassing the icon set resolution.\n * Useful for loading custom or external icons not in configured icon sets.\n */\n iconUrl = input<string>('');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n public assetsBaseUrl = 'assets';\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n\n ngOnInit(): void {\n const assetsBaseUrl = this.config?.appConfig?.global?.eui?.assetsBaseUrl;\n if (assetsBaseUrl) {\n this.assetsBaseUrl = assetsBaseUrl;\n }\n }\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n EdsIcon,\n EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +1,43 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute,
|
|
3
|
-
import * as i1 from '@eui/eds/shared';
|
|
4
|
-
import { EdsColorDirective } from '@eui/eds/shared';
|
|
2
|
+
import { input, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
3
|
|
|
4
|
+
/**
|
|
5
|
+
* A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.
|
|
6
|
+
* Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host
|
|
7
|
+
* attribute, plus a required marker.
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* ```html
|
|
11
|
+
* <label edsLabel for="name">Name</label>
|
|
12
|
+
* <label edsLabel edsRequired for="email">Email</label>
|
|
13
|
+
* <span edsLabel color="critical">This field is required</span>
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
6
16
|
class EdsLabel {
|
|
7
17
|
constructor() {
|
|
18
|
+
/**
|
|
19
|
+
* Semantic color of the label.
|
|
20
|
+
* @default 'neutral'
|
|
21
|
+
*/
|
|
22
|
+
this.color = input('neutral', /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
8
24
|
/**
|
|
9
25
|
* Marks the label as required (appends a red asterisk).
|
|
10
26
|
* @default false
|
|
11
27
|
*/
|
|
12
28
|
this.edsRequired = input(false, { ...(ngDevMode ? { debugName: "edsRequired" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13
|
-
this.colorDirective = inject(EdsColorDirective);
|
|
14
|
-
/**
|
|
15
|
-
* Computed host CSS classes based on current state.
|
|
16
|
-
*/
|
|
17
|
-
this.hostClasses = computed(() => {
|
|
18
|
-
const colorClass = this.colorDirective.getCssClass('eds-label');
|
|
19
|
-
return [
|
|
20
|
-
'eds-label',
|
|
21
|
-
colorClass || 'eds-label--neutral',
|
|
22
|
-
this.edsRequired() ? 'eds-label--required' : '',
|
|
23
|
-
]
|
|
24
|
-
.join(' ')
|
|
25
|
-
.trim();
|
|
26
|
-
}, /* @ts-ignore */
|
|
27
|
-
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
28
29
|
}
|
|
29
30
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsLabel, isStandalone: true, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: {
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsLabel, isStandalone: true, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, edsRequired: { classPropertyName: "edsRequired", publicName: "edsRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.required": "edsRequired() || null" }, classAttribute: "eds-label" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}:host([color=neutral]){color:var(--eds-c-foreground)}:host([color=critical]){color:var(--eds-c-foreground-critical)}:host([required]):after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
31
32
|
}
|
|
32
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsLabel, decorators: [{
|
|
33
34
|
type: Component,
|
|
34
|
-
args: [{ selector: 'label[edsLabel], span[edsLabel], div[edsLabel]', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
'edsColorVariant',
|
|
41
|
-
],
|
|
42
|
-
},
|
|
43
|
-
], host: {
|
|
44
|
-
'[class]': 'hostClasses()',
|
|
45
|
-
}, styles: [".eui-21 :host.eds-label{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}.eui-21 :host.eds-label--required:after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}.eui-21 :host.eds-label--neutral{color:var(--eds-c-foreground)}.eui-21 :host.eds-label--critical{color:var(--eds-c-foreground-critical)}\n"] }]
|
|
46
|
-
}], propDecorators: { edsRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsRequired", required: false }] }] } });
|
|
35
|
+
args: [{ selector: 'label[edsLabel], span[edsLabel], div[edsLabel]', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
36
|
+
class: 'eds-label',
|
|
37
|
+
'[attr.color]': 'color()',
|
|
38
|
+
'[attr.required]': 'edsRequired() || null',
|
|
39
|
+
}, styles: [":host{display:inline-block;font:var(--eds-f-label-m-semibold);color:var(--eds-c-foreground)}:host([color=neutral]){color:var(--eds-c-foreground)}:host([color=critical]){color:var(--eds-c-foreground-critical)}:host([required]):after{color:var(--eds-c-foreground-critical);content:\" *\";font:var(--eds-f-label-m-semibold)}\n"] }]
|
|
40
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], edsRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "edsRequired", required: false }] }] } });
|
|
47
41
|
|
|
48
42
|
/** Convenience array for importing eds-label. */
|
|
49
43
|
const EDS_LABEL = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-label.mjs","sources":["../../eds-label/eds-label.ts","../../eds-label/index.ts","../../eds-label/eui-eds-eds-label.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-label.mjs","sources":["../../eds-label/eds-label.ts","../../eds-label/index.ts","../../eds-label/eui-eds-eds-label.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n input,\n booleanAttribute,\n} from '@angular/core';\n\n/**\n * Local narrowed color union — the label's color contract.\n * `neutral` is the default; `critical` colors the label for error context.\n */\nexport type EdsLabelColor = 'neutral' | 'critical';\n\n/**\n * A form label applied to `label`, `span`, or `div` elements via the `edsLabel` attribute.\n * Supports a semantic color (`neutral` default, `critical` for errors) reflected as a host\n * attribute, plus a required marker.\n *\n * Usage:\n * ```html\n * <label edsLabel for=\"name\">Name</label>\n * <label edsLabel edsRequired for=\"email\">Email</label>\n * <span edsLabel color=\"critical\">This field is required</span>\n * ```\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'label[edsLabel], span[edsLabel], div[edsLabel]',\n template: '<ng-content/>',\n styleUrl: './eds-label.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-label',\n '[attr.color]': 'color()',\n '[attr.required]': 'edsRequired() || null',\n },\n})\nexport class EdsLabel {\n /**\n * Semantic color of the label.\n * @default 'neutral'\n */\n color = input<EdsLabelColor>('neutral');\n\n /**\n * Marks the label as required (appends a red asterisk).\n * @default false\n */\n edsRequired = input(false, { transform: booleanAttribute });\n}\n","import { EdsLabel } from './eds-label';\n\nexport { EdsLabel };\nexport type { EdsLabelColor } from './eds-label';\n\n/** Convenience array for importing eds-label. */\nexport const EDS_LABEL = [\n EdsLabel,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAaA;;;;;;;;;;;AAWG;MAaU,QAAQ,CAAA;AAZrB,IAAA,WAAA,GAAA;AAaI;;;AAGG;QACH,IAAA,CAAA,KAAK,GAAG,KAAK,CAAgB,SAAS;kFAAC;AAEvC;;;AAGG;QACH,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,mFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC9D,IAAA;8GAZY,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,kfATP,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAShB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAZpB,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gDAAgD,YAChD,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACF,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,iBAAiB,EAAE,uBAAuB;AAC7C,qBAAA,EAAA,MAAA,EAAA,CAAA,qUAAA,CAAA,EAAA;;;AC9BL;AACO,MAAM,SAAS,GAAG;IACrB,QAAQ;;;ACPZ;;AAEG;;;;"}
|