@eui/eds 22.0.0-alpha.51 → 22.0.0-alpha.52
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 +15 -0
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/documentation.json +1 -1
- package/docs/llms.txt +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-feedback-message.mjs +2 -2
- package/fesm2022/eui-eds-eds-feedback-message.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -51205,7 +51205,7 @@
|
|
|
51205
51205
|
"assetsDirs": [],
|
|
51206
51206
|
"styleUrlsData": [
|
|
51207
51207
|
{
|
|
51208
|
-
"data": "@use '../base' as base;\n\n:host {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n align-items: center;\n display: flex;\n gap: var(--eds-sp-3xs);\n position: relative;\n\n .content {\n color: var(--_eds-feedback-message-color);\n display: block;\n position: relative;\n font: var(--eds-f-microcopy-m); //EDS aligned\n font-weight: var(--eds-f-w-regular);\n }\n}\n\n:host([color=\"primary\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground);\n}\n\n:host([color=\"info\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n\n:host([color=\"disabled\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-disabled);\n}\n",
|
|
51208
|
+
"data": "@use '../base' as base;\n\n:host {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n align-items: center;\n display: flex;\n gap: var(--eds-sp-3xs);\n position: relative;\n\n .content {\n color: var(--_eds-feedback-message-color);\n display: block;\n position: relative;\n font: var(--eds-f-microcopy-m); //EDS aligned\n font-weight: var(--eds-f-w-regular);\n }\n}\n\n:host([color=\"primary\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-subtle);\n}\n\n:host([color=\"info\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n\n:host([color=\"disabled\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-disabled);\n}\n",
|
|
51209
51209
|
"styleUrl": "./eds-feedback-message.scss"
|
|
51210
51210
|
}
|
|
51211
51211
|
],
|
package/docs/llms.txt
CHANGED
package/docs/properties.html
CHANGED
|
@@ -35,7 +35,7 @@ class EdsFeedbackMessage {
|
|
|
35
35
|
...(ngDevMode ? [{ debugName: "iconVariant" }] : /* istanbul ignore next */ []));
|
|
36
36
|
}
|
|
37
37
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFeedbackMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFeedbackMessage, isStandalone: true, selector: "eds-feedback-message", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMuted: { classPropertyName: "isMuted", publicName: "isMuted", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.color": "color()", "attr.muted": "isMuted() || null", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-microcopy-m);font-weight:var(--eds-f-w-regular)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}:host([color=disabled]){--_eds-feedback-message-color: var(--eds-c-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
38
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsFeedbackMessage, isStandalone: true, selector: "eds-feedback-message", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMuted: { classPropertyName: "isMuted", publicName: "isMuted", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "attr.color": "color()", "attr.muted": "isMuted() || null", "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-microcopy-m);font-weight:var(--eds-f-w-regular)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground-subtle)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}:host([color=disabled]){--_eds-feedback-message-color: var(--eds-c-foreground-disabled)}\n"], dependencies: [{ kind: "component", type: i1.EdsIconState, selector: "eds-icon-state", inputs: ["color", "size", "ariaLabel", "e2eAttr"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
39
39
|
}
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsFeedbackMessage, decorators: [{
|
|
41
41
|
type: Component,
|
|
@@ -45,7 +45,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
45
45
|
role: 'status',
|
|
46
46
|
'aria-live': 'polite',
|
|
47
47
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
48
|
-
}, template: "@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-microcopy-m);font-weight:var(--eds-f-w-regular)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}:host([color=disabled]){--_eds-feedback-message-color: var(--eds-c-foreground-disabled)}\n"] }]
|
|
48
|
+
}, template: "@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n", styles: [":host{--_eds-feedback-message-color: var(--eds-c-foreground-info);align-items:center;display:flex;gap:var(--eds-sp-3xs);position:relative}:host .content{color:var(--_eds-feedback-message-color);display:block;position:relative;font:var(--eds-f-microcopy-m);font-weight:var(--eds-f-w-regular)}:host([color=primary]){--_eds-feedback-message-color: var(--eds-c-foreground-primary)}:host([color=neutral]){--_eds-feedback-message-color: var(--eds-c-foreground-subtle)}:host([color=info]){--_eds-feedback-message-color: var(--eds-c-foreground-info)}:host([color=success]){--_eds-feedback-message-color: var(--eds-c-foreground-success)}:host([color=warning]){--_eds-feedback-message-color: var(--eds-c-foreground-warning)}:host([color=critical]){--_eds-feedback-message-color: var(--eds-c-foreground-critical)}:host([color=disabled]){--_eds-feedback-message-color: var(--eds-c-foreground-disabled)}\n"] }]
|
|
49
49
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMuted", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }] } });
|
|
50
50
|
|
|
51
51
|
/** Convenience array for importing all eds-feedback-message components. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-feedback-message.mjs","sources":["../../eds-feedback-message/eds-feedback-message.ts","../../eds-feedback-message/eds-feedback-message.html","../../eds-feedback-message/index.ts","../../eds-feedback-message/eui-eds-eds-feedback-message.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { EDS_ICON_STATE, EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the feedback message's variant contract. No shared-token import.\n */\nexport type EdsFeedbackMessageColor = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'disabled';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode.\n */\n@Component({\n selector: 'eds-feedback-message',\n templateUrl: './eds-feedback-message.html',\n styleUrl: './eds-feedback-message.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON_STATE],\n host: {\n '[attr.color]': 'color()',\n '[attr.muted]': 'isMuted() || null',\n role: 'status',\n 'aria-live': 'polite',\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsFeedbackMessage {\n /**\n * Semantic color of the feedback message.\n * @default 'info'\n */\n readonly color = input<EdsFeedbackMessageColor>('info');\n\n /**\n * Controls whether the feedback message is displayed in a muted state.\n * When true, the status icon is hidden and the message has reduced visual prominence.\n * @default false\n */\n readonly isMuted = input(false, { transform: booleanAttribute });\n\n /** Data attribute value for end-to-end testing identification. */\n readonly e2eAttr = input('eds-feedback-message');\n\n /**\n * Resolved color variant passed to eds-icon-state. The icon set only supports\n * info / success / warning / critical, so primary, neutral, and disabled fall back to info.\n */\n protected readonly iconVariant = computed<EdsIconStateColor>(() => {\n const color = this.color();\n return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';\n });\n}\n","@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n","import { EdsFeedbackMessage, EdsFeedbackMessageColor } from './eds-feedback-message';\n\nexport { EdsFeedbackMessage, EdsFeedbackMessageColor };\n\n/** Convenience array for importing all eds-feedback-message components. */\nexport const EDS_FEEDBACK_MESSAGE = [\n EdsFeedbackMessage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;;AAGG;MAeU,kBAAkB,CAAA;AAd/B,IAAA,WAAA,GAAA;AAeI;;;AAGG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAA0B,MAAM;kFAAC;AAEvD;;;;AAIG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAGvD,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,sBAAsB;oFAAC;AAEhD;;;AAGG;AACgB,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAoB,MAAK;AAC9D,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,YAAA,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM;QAC9F,CAAC;wFAAC;AACL,IAAA;8GAzBY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,6nBC1B/B,yKAMA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-feedback-message.mjs","sources":["../../eds-feedback-message/eds-feedback-message.ts","../../eds-feedback-message/eds-feedback-message.html","../../eds-feedback-message/index.ts","../../eds-feedback-message/eui-eds-eds-feedback-message.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from '@angular/core';\nimport { EDS_ICON_STATE, EdsIconStateColor } from '@eui/eds/eds-icon-state';\n\n/**\n * Local narrowed color union — the feedback message's variant contract. No shared-token import.\n */\nexport type EdsFeedbackMessageColor = 'primary' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'disabled';\n\n/**\n * A feedback message component that displays contextual feedback to users.\n * Supports different color variants (primary, neutral, info, success, warning, critical, disabled) and a muted mode.\n */\n@Component({\n selector: 'eds-feedback-message',\n templateUrl: './eds-feedback-message.html',\n styleUrl: './eds-feedback-message.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [...EDS_ICON_STATE],\n host: {\n '[attr.color]': 'color()',\n '[attr.muted]': 'isMuted() || null',\n role: 'status',\n 'aria-live': 'polite',\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsFeedbackMessage {\n /**\n * Semantic color of the feedback message.\n * @default 'info'\n */\n readonly color = input<EdsFeedbackMessageColor>('info');\n\n /**\n * Controls whether the feedback message is displayed in a muted state.\n * When true, the status icon is hidden and the message has reduced visual prominence.\n * @default false\n */\n readonly isMuted = input(false, { transform: booleanAttribute });\n\n /** Data attribute value for end-to-end testing identification. */\n readonly e2eAttr = input('eds-feedback-message');\n\n /**\n * Resolved color variant passed to eds-icon-state. The icon set only supports\n * info / success / warning / critical, so primary, neutral, and disabled fall back to info.\n */\n protected readonly iconVariant = computed<EdsIconStateColor>(() => {\n const color = this.color();\n return color === 'success' || color === 'warning' || color === 'critical' ? color : 'info';\n });\n}\n","@if (!isMuted()) {\n <eds-icon-state [color]=\"iconVariant()\" size=\"xs\" [ariaLabel]=\"iconVariant()\"/>\n}\n<div class=\"content\">\n <ng-content />\n</div>\n","import { EdsFeedbackMessage, EdsFeedbackMessageColor } from './eds-feedback-message';\n\nexport { EdsFeedbackMessage, EdsFeedbackMessageColor };\n\n/** Convenience array for importing all eds-feedback-message components. */\nexport const EDS_FEEDBACK_MESSAGE = [\n EdsFeedbackMessage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;;AAGG;MAeU,kBAAkB,CAAA;AAd/B,IAAA,WAAA,GAAA;AAeI;;;AAGG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAA0B,MAAM;kFAAC;AAEvD;;;;AAIG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;QAGvD,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,sBAAsB;oFAAC;AAEhD;;;AAGG;AACgB,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAoB,MAAK;AAC9D,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,YAAA,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM;QAC9F,CAAC;wFAAC;AACL,IAAA;8GAzBY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,6nBC1B/B,yKAMA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDoBa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAd9B,SAAS;+BACI,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,WACtC,CAAC,GAAG,cAAc,CAAC,EAAA,IAAA,EACtB;AACF,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,cAAc,EAAE,mBAAmB;AACnC,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,iBAAiB,EAAE,WAAW;AACjC,qBAAA,EAAA,QAAA,EAAA,yKAAA,EAAA,MAAA,EAAA,CAAA,83BAAA,CAAA,EAAA;;;AEpBL;AACO,MAAM,oBAAoB,GAAG;IAChC,kBAAkB;;;ACNtB;;AAEG;;"}
|