igniteui-webcomponents 4.1.1 → 4.2.0

package/CHANGELOG.md

@@ -1,10 +1,21 @@
-# IgniteUI Web Components Changelog
+# Ignite UI Web Components Changelog
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [4.2.0] - 2023-01-31
+
+### Added
+ - Combo - Single Selection mode via the `single-select` attribute [#626](https://github.com/IgniteUI/igniteui-webcomponents/issues/626)
+
+### Fixed
+ - Input - UI inconsistencies [#619](https://github.com/IgniteUI/igniteui-webcomponents/issues/619), [#620](https://github.com/IgniteUI/igniteui-webcomponents/issues/620), [#633](https://github.com/IgniteUI/igniteui-webcomponents/issues/633), [#638](https://github.com/IgniteUI/igniteui-webcomponents/issues/638)
+ - Badge - Doesn't correctly render `igc-icon` and font icons [#631](https://github.com/IgniteUI/igniteui-webcomponents/issues/631)
+ - Radio - UI inconsistencies [#621](https://github.com/IgniteUI/igniteui-webcomponents/issues/621), [#623](https://github.com/IgniteUI/igniteui-webcomponents/issues/623)
+ - Navigation Drawer - Can't override item margin [#614](https://github.com/IgniteUI/igniteui-webcomponents/issues/614)
+
 ## [4.1.1] - 2023-01-12
 
 ### Fixed
@@ -194,6 +205,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[4.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.1.1...4.2.0
 [4.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.1.0...4.1.1
 [4.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.0.0...4.1.0
 [4.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.2...4.0.0

package/animations/easings.d.ts

@@ -0,0 +1,31 @@
+declare enum EaseIn {
+    Quad = "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
+    Cubic = "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
+    Quart = "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
+    Quint = "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
+    Sine = "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
+    Expo = "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
+    Circ = "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
+    Back = "cubic-bezier(0.600, -0.280, 0.735, 0.045)"
+}
+declare enum EaseOut {
+    Quad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
+    Cubic = "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
+    Quart = "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
+    Quint = "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
+    Sine = "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
+    Expo = "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
+    Circ = "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
+    Back = "cubic-bezier(0.175, 0.885, 0.320, 1.275)"
+}
+declare enum EaseInOut {
+    Quad = "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
+    Cubic = "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
+    Quart = "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
+    Quint = "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
+    Sine = "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
+    Expo = "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
+    Circ = "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
+    Back = "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
+}
+export { EaseIn, EaseOut, EaseInOut };

package/animations/easings.js

@@ -0,0 +1,35 @@
+var EaseIn;
+(function (EaseIn) {
+    EaseIn["Quad"] = "cubic-bezier(0.550, 0.085, 0.680, 0.530)";
+    EaseIn["Cubic"] = "cubic-bezier(0.550, 0.055, 0.675, 0.190)";
+    EaseIn["Quart"] = "cubic-bezier(0.895, 0.030, 0.685, 0.220)";
+    EaseIn["Quint"] = "cubic-bezier(0.755, 0.050, 0.855, 0.060)";
+    EaseIn["Sine"] = "cubic-bezier(0.470, 0.000, 0.745, 0.715)";
+    EaseIn["Expo"] = "cubic-bezier(0.950, 0.050, 0.795, 0.035)";
+    EaseIn["Circ"] = "cubic-bezier(0.600, 0.040, 0.980, 0.335)";
+    EaseIn["Back"] = "cubic-bezier(0.600, -0.280, 0.735, 0.045)";
+})(EaseIn || (EaseIn = {}));
+var EaseOut;
+(function (EaseOut) {
+    EaseOut["Quad"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
+    EaseOut["Cubic"] = "cubic-bezier(0.215, 0.610, 0.355, 1.000)";
+    EaseOut["Quart"] = "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
+    EaseOut["Quint"] = "cubic-bezier(0.230, 1.000, 0.320, 1.000)";
+    EaseOut["Sine"] = "cubic-bezier(0.390, 0.575, 0.565, 1.000)";
+    EaseOut["Expo"] = "cubic-bezier(0.190, 1.000, 0.220, 1.000)";
+    EaseOut["Circ"] = "cubic-bezier(0.075, 0.820, 0.165, 1.000)";
+    EaseOut["Back"] = "cubic-bezier(0.175, 0.885, 0.320, 1.275)";
+})(EaseOut || (EaseOut = {}));
+var EaseInOut;
+(function (EaseInOut) {
+    EaseInOut["Quad"] = "cubic-bezier(0.455, 0.030, 0.515, 0.955)";
+    EaseInOut["Cubic"] = "cubic-bezier(0.645, 0.045, 0.355, 1.000)";
+    EaseInOut["Quart"] = "cubic-bezier(0.770, 0.000, 0.175, 1.000)";
+    EaseInOut["Quint"] = "cubic-bezier(0.860, 0.000, 0.070, 1.000)";
+    EaseInOut["Sine"] = "cubic-bezier(0.445, 0.050, 0.550, 0.950)";
+    EaseInOut["Expo"] = "cubic-bezier(1.000, 0.000, 0.000, 1.000)";
+    EaseInOut["Circ"] = "cubic-bezier(0.785, 0.135, 0.150, 0.860)";
+    EaseInOut["Back"] = "cubic-bezier(0.680, -0.550, 0.265, 1.550)";
+})(EaseInOut || (EaseInOut = {}));
+export { EaseIn, EaseOut, EaseInOut };
+//# sourceMappingURL=easings.js.map

package/animations/easings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"easings.js","sourceRoot":"","sources":["../../src/animations/easings.ts"],"names":[],"mappings":"AAAA,IAAK,MASJ;AATD,WAAK,MAAM;IACT,2DAAiD,CAAA;IACjD,4DAAkD,CAAA;IAClD,4DAAkD,CAAA;IAClD,4DAAkD,CAAA;IAClD,2DAAiD,CAAA;IACjD,2DAAiD,CAAA;IACjD,2DAAiD,CAAA;IACjD,4DAAkD,CAAA;AACpD,CAAC,EATI,MAAM,KAAN,MAAM,QASV;AAED,IAAK,OASJ;AATD,WAAK,OAAO;IACV,4DAAiD,CAAA;IACjD,6DAAkD,CAAA;IAClD,6DAAkD,CAAA;IAClD,6DAAkD,CAAA;IAClD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;IACjD,4DAAiD,CAAA;AACnD,CAAC,EATI,OAAO,KAAP,OAAO,QASX;AAED,IAAK,SASJ;AATD,WAAK,SAAS;IACZ,8DAAiD,CAAA;IACjD,+DAAkD,CAAA;IAClD,+DAAkD,CAAA;IAClD,+DAAkD,CAAA;IAClD,8DAAiD,CAAA;IACjD,8DAAiD,CAAA;IACjD,8DAAiD,CAAA;IACjD,+DAAkD,CAAA;AACpD,CAAC,EATI,SAAS,KAAT,SAAS,QASb;AAED,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC","sourcesContent":["enum EaseIn {\n  Quad = 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',\n  Cubic = 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',\n  Quart = 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',\n  Quint = 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',\n  Sine = 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',\n  Expo = 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',\n  Circ = 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',\n  Back = 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n}\n\nenum EaseOut {\n  Quad = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',\n  Cubic = 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n  Quart = 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',\n  Quint = 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',\n  Sine = 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n  Expo = 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',\n  Circ = 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n  Back = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',\n}\n\nenum EaseInOut {\n  Quad = 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',\n  Cubic = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',\n  Quart = 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',\n  Quint = 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',\n  Sine = 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n  Expo = 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',\n  Circ = 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',\n  Back = 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',\n}\n\nexport { EaseIn, EaseOut, EaseInOut };\n"]}

package/animations/index.d.ts

@@ -0,0 +1,3 @@
+export * from './presets/index.js';
+export * from './easings.js';
+export * from './player.js';

package/animations/index.js

@@ -0,0 +1,4 @@
+export * from './presets/index.js';
+export * from './easings.js';
+export * from './player.js';
+//# sourceMappingURL=index.js.map

package/animations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/animations/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC","sourcesContent":["export * from './presets/index.js';\nexport * from './easings.js';\nexport * from './player.js';\n"]}

package/animations/player.d.ts

@@ -0,0 +1,9 @@
+import { AnimationReferenceMetadata } from './types.js';
+export declare class AnimationPlayer {
+    private target;
+    constructor(target: HTMLElement);
+    private prefersReducedMotion;
+    private parseKeyframes;
+    play(animation: AnimationReferenceMetadata): Promise<AnimationPlaybackEvent>;
+    stopAll(): Promise<unknown[]>;
+}

package/animations/player.js

@@ -0,0 +1,47 @@
+export class AnimationPlayer {
+    constructor(target) {
+        this.target = target;
+    }
+    prefersReducedMotion() {
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        return query.matches;
+    }
+    parseKeyframes(keyframes) {
+        return keyframes.map((keyframe) => ({
+            ...keyframe,
+            height: keyframe.height === 'auto'
+                ? `${this.target.scrollHeight}px`
+                : keyframe.height,
+        }));
+    }
+    async play(animation) {
+        const { steps, options } = animation;
+        return new Promise((resolve) => {
+            if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
+                throw new Error('Promise-based animations must be finite.');
+            }
+            const parsedKeyframes = this.parseKeyframes(steps);
+            const animation = this.target.animate(parsedKeyframes, {
+                ...options,
+                duration: this.prefersReducedMotion() ? 0 : options.duration,
+            });
+            animation.addEventListener('cancel', resolve, { once: true });
+            animation.addEventListener('finish', resolve, { once: true });
+        });
+    }
+    stopAll() {
+        return Promise.all(this.target.getAnimations().map((animation) => {
+            return new Promise((resolve) => {
+                const handleAnimationEvent = () => requestAnimationFrame(resolve);
+                animation.addEventListener('cancel', handleAnimationEvent, {
+                    once: true,
+                });
+                animation.addEventListener('finish', handleAnimationEvent, {
+                    once: true,
+                });
+                animation.cancel();
+            });
+        }));
+    }
+}
+//# sourceMappingURL=player.js.map

package/animations/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/animations/player.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,eAAe;IAG1B,YAAY,MAAmB;QAC7B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACpE,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IAEO,cAAc,CAAC,SAAqB;QAC1C,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAClC,GAAG,QAAQ;YACX,MAAM,EACJ,QAAQ,CAAC,MAAM,KAAK,MAAM;gBACxB,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI;gBACjC,CAAC,CAAC,QAAQ,CAAC,MAAM;SACtB,CAAC,CAAC,CAAC;IACN,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,SAAqC;QACrD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QAErC,OAAO,IAAI,OAAO,CAAyB,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,MAAK,QAAQ,EAAE;gBAClC,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;aAC7D;YAED,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YACnD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE;gBACrD,GAAG,OAAO;gBACV,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAQ,CAAC,QAAQ;aAC9D,CAAC,CAAC;YAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,OAAO;QACZ,OAAO,OAAO,CAAC,GAAG,CAChB,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YAC5C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;gBAElE,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE;oBACzD,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,SAAS,CAAC,MAAM,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { AnimationReferenceMetadata } from './types.js';\n\nexport class AnimationPlayer {\n  private target!: HTMLElement;\n\n  constructor(target: HTMLElement) {\n    this.target = target;\n  }\n\n  private prefersReducedMotion() {\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)');\n    return query.matches;\n  }\n\n  private parseKeyframes(keyframes: Keyframe[]) {\n    return keyframes.map((keyframe) => ({\n      ...keyframe,\n      height:\n        keyframe.height === 'auto'\n          ? `${this.target.scrollHeight}px`\n          : keyframe.height,\n    }));\n  }\n\n  public async play(animation: AnimationReferenceMetadata) {\n    const { steps, options } = animation;\n\n    return new Promise<AnimationPlaybackEvent>((resolve) => {\n      if (options?.duration === Infinity) {\n        throw new Error('Promise-based animations must be finite.');\n      }\n\n      const parsedKeyframes = this.parseKeyframes(steps);\n      const animation = this.target.animate(parsedKeyframes, {\n        ...options,\n        duration: this.prefersReducedMotion() ? 0 : options!.duration,\n      });\n\n      animation.addEventListener('cancel', resolve, { once: true });\n      animation.addEventListener('finish', resolve, { once: true });\n    });\n  }\n\n  public stopAll() {\n    return Promise.all(\n      this.target.getAnimations().map((animation) => {\n        return new Promise((resolve) => {\n          const handleAnimationEvent = () => requestAnimationFrame(resolve);\n\n          animation.addEventListener('cancel', handleAnimationEvent, {\n            once: true,\n          });\n          animation.addEventListener('finish', handleAnimationEvent, {\n            once: true,\n          });\n          animation.cancel();\n        });\n      })\n    );\n  }\n}\n"]}

package/animations/presets/grow/index.d.ts

@@ -0,0 +1,3 @@
+declare const growVerIn: import("../../types.js").AnimationReferenceMetadata;
+declare const growVerOut: import("../../types.js").AnimationReferenceMetadata;
+export { growVerIn, growVerOut };

package/animations/presets/grow/index.js

@@ -0,0 +1,18 @@
+import { EaseOut } from '../../easings.js';
+import { animation } from '../../types.js';
+const growVerIn = animation([
+    { opacity: 0, height: 0 },
+    { opacity: 1, height: 'auto' },
+], {
+    duration: 350,
+    easing: EaseOut.Quad,
+});
+const growVerOut = animation([
+    { opacity: 1, height: 'auto' },
+    { opacity: 0, height: 0 },
+], {
+    duration: 350,
+    easing: EaseOut.Quad,
+});
+export { growVerIn, growVerOut };
+//# sourceMappingURL=index.js.map

package/animations/presets/grow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/grow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,SAAS,GAAG,SAAS,CACzB;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IACzB,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;CAC/B,EACD;IACE,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,SAAS,CAC1B;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;IAC9B,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;CAC1B,EACD;IACE,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CACF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { EaseOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst growVerIn = animation(\n  [\n    { opacity: 0, height: 0 },\n    { opacity: 1, height: 'auto' },\n  ],\n  {\n    duration: 350,\n    easing: EaseOut.Quad,\n  }\n);\n\nconst growVerOut = animation(\n  [\n    { opacity: 1, height: 'auto' },\n    { opacity: 0, height: 0 },\n  ],\n  {\n    duration: 350,\n    easing: EaseOut.Quad,\n  }\n);\n\nexport { growVerIn, growVerOut };\n"]}

package/animations/presets/index.d.ts

@@ -0,0 +1 @@
+export * from './grow/index.js';

package/animations/presets/index.js

@@ -0,0 +1,2 @@
+export * from './grow/index.js';
+//# sourceMappingURL=index.js.map

package/animations/presets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/animations/presets/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './grow/index.js';\n"]}

package/animations/types.d.ts

@@ -0,0 +1,5 @@
+export interface AnimationReferenceMetadata {
+    steps: Keyframe[];
+    options?: KeyframeAnimationOptions;
+}
+export declare function animation(steps: Keyframe[], options?: KeyframeAnimationOptions): AnimationReferenceMetadata;

package/animations/types.js

@@ -0,0 +1,7 @@
+export function animation(steps, options) {
+    return {
+        steps,
+        options,
+    };
+}
+//# sourceMappingURL=types.js.map

package/animations/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/animations/types.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,SAAS,CACvB,KAAiB,EACjB,OAAkC;IAElC,OAAO;QACL,KAAK;QACL,OAAO;KACR,CAAC;AACJ,CAAC","sourcesContent":["export interface AnimationReferenceMetadata {\n  steps: Keyframe[];\n  options?: KeyframeAnimationOptions;\n}\n\nexport function animation(\n  steps: Keyframe[],\n  options?: KeyframeAnimationOptions\n): AnimationReferenceMetadata {\n  return {\n    steps,\n    options,\n  };\n}\n"]}

package/components/accordion/accordion.js

@@ -92,7 +92,7 @@ export default class IgcAccordionComponent extends LitElement {
         if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {
             return;
         }
-        panel.open = false;
+        panel.hide();
         await panel.updateComplete;
         panel.emitEvent('igcClosed', { detail: panel });
     }
@@ -103,15 +103,15 @@ export default class IgcAccordionComponent extends LitElement {
         if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {
             return;
         }
-        panel.open = true;
+        panel.show();
         await panel.updateComplete;
         panel.emitEvent('igcOpened', { detail: panel });
     }
     hideAll() {
-        this.panels.forEach((p) => (p.open = false));
+        this.panels.forEach((p) => p.hide());
     }
     showAll() {
-        this.panels.forEach((p) => (p.open = true));
+        this.panels.forEach((p) => p.show());
     }
     render() {
         return html `<slot></slot>`;

package/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAExE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;AAU7C,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,UAAU;IAI3D,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAcD;QACE,KAAK,EAAE,CAAC;QARH,iBAAY,GAAG,KAAK,CAAC;QAyBpB,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IACG,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,EAAE;gBACjD,qBAAqB;gBACvB,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAoC,CAAC,EACzE;gBACA,OAAO;aACR;YACD,QAAQ,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE;gBAC/B,KAAK,MAAM;oBACT,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAE,CAAC,CAAC,KAAK,EAAE,CAAC;oBACxD,MAAM;gBACR,KAAK,KAAK;oBACR,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,KAAK,EAAE,CAAC;oBACzD,MAAM;gBACR,KAAK,SAAS,CAAC;gBACf,KAAK,IAAI;oBACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBACpC,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,MAAM;oBACT,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBACrC,MAAM;aACT;QACH,CAAC,CAAC;QAxCA,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAEO,kBAAkB,CAAC,KAAY;QACrC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAoC,CAAC;QACzD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YACtD,OAAO;SACR;QACD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YAChC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;gBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACpB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IA4BO,iBAAiB,CAAC,IAAa,EAAE,KAAoB;QAC3D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAoC,CAAC;QAChE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,IAAI,IAAI,KAAK,YAAY,EAAE;gBACzB,OAAO;aACR;YACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;SACnC;QACD,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE;YAClC,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE;gBAC9B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAChC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5D,CAAC;gBACF,OAAO;aACR;YAED,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;aACxD;iBAAM;gBACL,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;aACvD;SACF;IACH,CAAC;IAEO,YAAY,CAAC,KAAiC,EAAE,MAAc,CAAC;QACrE,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtD,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC;IACxD,CAAC;IAEO,cAAc,CAAC,KAAiC;;QACtD,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAgB,CAAC;IAC9E,CAAC;IAEO,KAAK,CAAC,UAAU,CAAC,KAAiC;QACxD,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACf,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;YACvE,OAAO;SACR;QACD,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;QACnB,MAAM,KAAK,CAAC,cAAc,CAAC;QAE3B,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,KAAK,CAAC,SAAS,CAAC,KAAiC;QACvD,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QACD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;YACvE,OAAO;SACR;QAED,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAClB,MAAM,KAAK,CAAC,cAAc,CAAC;QAE3B,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAGM,OAAO;QACZ,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;IAC/C,CAAC;IAGM,OAAO;QACZ,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAxIsB,6BAAO,GAAG,eAAe,CAAC;AAC1B,4BAAM,GAAG,MAAM,CAAC;AAWvC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAC3C;AAK5B;IAFC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAC1D,cAAc,EAAE;qDACiC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { styles } from './themes/accordion.base.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\n\ndefineComponents(IgcExpansionPanelComponent);\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  private get _enabledPanels(): Array<IgcExpansionPanelComponent> {\n    return this.panels.filter((p) => !p.disabled);\n  }\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: 'igc-expansion-panel' })\n  @blazorSuppress()\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown, { capture: true });\n    this.addEventListener('igcOpening', this.handlePanelOpening);\n  }\n\n  private handlePanelOpening(event: Event) {\n    const panel = event.target as IgcExpansionPanelComponent;\n    if (!this.singleExpand || !this.panels.includes(panel)) {\n      return;\n    }\n    this._enabledPanels.forEach((p) => {\n      if (p.open && p !== panel) {\n        this.closePanel(p);\n      }\n    });\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (\n      (event.target as HTMLElement).tagName.toLowerCase() !==\n        'igc-expansion-panel' ||\n      !this._enabledPanels.includes(event.target as IgcExpansionPanelComponent)\n    ) {\n      return;\n    }\n    switch (event.key.toLowerCase()) {\n      case 'home':\n        this.getPanelHeader(this._enabledPanels.at(0)!).focus();\n        break;\n      case 'end':\n        this.getPanelHeader(this._enabledPanels.at(-1)!).focus();\n        break;\n      case 'arrowup':\n      case 'up':\n        this.handleUpDownArrow(true, event);\n        break;\n      case 'arrowdown':\n      case 'down':\n        this.handleUpDownArrow(false, event);\n        break;\n    }\n  };\n\n  private handleUpDownArrow(isUp: boolean, event: KeyboardEvent) {\n    const focusedPanel = event.target as IgcExpansionPanelComponent;\n    if (!event.altKey) {\n      const next = this.getNextPanel(focusedPanel, isUp ? -1 : 1);\n      if (next === focusedPanel) {\n        return;\n      }\n      this.getPanelHeader(next).focus();\n    }\n    if (event.shiftKey && event.altKey) {\n      if (this.singleExpand && !isUp) {\n        this._enabledPanels.forEach((p) =>\n          p !== focusedPanel ? this.closePanel(p) : this.openPanel(p)\n        );\n        return;\n      }\n\n      if (isUp) {\n        this._enabledPanels.forEach((p) => this.closePanel(p));\n      } else {\n        this._enabledPanels.forEach((p) => this.openPanel(p));\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const panelIndex = this._enabledPanels.indexOf(panel);\n    return this._enabledPanels[panelIndex + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.shadowRoot?.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (!panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {\n      return;\n    }\n    panel.open = false;\n    await panel.updateComplete;\n\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {\n      return;\n    }\n\n    panel.open = true;\n    await panel.updateComplete;\n\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public hideAll() {\n    this.panels.forEach((p) => (p.open = false));\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public showAll() {\n    this.panels.forEach((p) => (p.open = true));\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { styles } from './themes/accordion.base.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport { blazorSuppress } from '../common/decorators/blazorSuppress.js';\n\ndefineComponents(IgcExpansionPanelComponent);\n\n/**\n * The Accordion is a container-based component that can house multiple expansion panels\n * and offers keyboard navigation.\n *\n * @element igc-accordion\n *\n * @slot - Renders the expansion panels inside default slot.\n */\nexport default class IgcAccordionComponent extends LitElement {\n  public static readonly tagName = 'igc-accordion';\n  public static override styles = styles;\n\n  private get _enabledPanels(): Array<IgcExpansionPanelComponent> {\n    return this.panels.filter((p) => !p.disabled);\n  }\n\n  /**\n   * Allows only one panel to be expanded at a time.\n   * @attr single-expand\n   */\n  @property({ attribute: 'single-expand', reflect: true, type: Boolean })\n  public singleExpand = false;\n\n  /** Returns all of the accordions's direct igc-expansion-panel children. */\n  @queryAssignedElements({ selector: 'igc-expansion-panel' })\n  @blazorSuppress()\n  public panels!: Array<IgcExpansionPanelComponent>;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown, { capture: true });\n    this.addEventListener('igcOpening', this.handlePanelOpening);\n  }\n\n  private handlePanelOpening(event: Event) {\n    const panel = event.target as IgcExpansionPanelComponent;\n    if (!this.singleExpand || !this.panels.includes(panel)) {\n      return;\n    }\n    this._enabledPanels.forEach((p) => {\n      if (p.open && p !== panel) {\n        this.closePanel(p);\n      }\n    });\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (\n      (event.target as HTMLElement).tagName.toLowerCase() !==\n        'igc-expansion-panel' ||\n      !this._enabledPanels.includes(event.target as IgcExpansionPanelComponent)\n    ) {\n      return;\n    }\n    switch (event.key.toLowerCase()) {\n      case 'home':\n        this.getPanelHeader(this._enabledPanels.at(0)!).focus();\n        break;\n      case 'end':\n        this.getPanelHeader(this._enabledPanels.at(-1)!).focus();\n        break;\n      case 'arrowup':\n      case 'up':\n        this.handleUpDownArrow(true, event);\n        break;\n      case 'arrowdown':\n      case 'down':\n        this.handleUpDownArrow(false, event);\n        break;\n    }\n  };\n\n  private handleUpDownArrow(isUp: boolean, event: KeyboardEvent) {\n    const focusedPanel = event.target as IgcExpansionPanelComponent;\n    if (!event.altKey) {\n      const next = this.getNextPanel(focusedPanel, isUp ? -1 : 1);\n      if (next === focusedPanel) {\n        return;\n      }\n      this.getPanelHeader(next).focus();\n    }\n    if (event.shiftKey && event.altKey) {\n      if (this.singleExpand && !isUp) {\n        this._enabledPanels.forEach((p) =>\n          p !== focusedPanel ? this.closePanel(p) : this.openPanel(p)\n        );\n        return;\n      }\n\n      if (isUp) {\n        this._enabledPanels.forEach((p) => this.closePanel(p));\n      } else {\n        this._enabledPanels.forEach((p) => this.openPanel(p));\n      }\n    }\n  }\n\n  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {\n    const panelIndex = this._enabledPanels.indexOf(panel);\n    return this._enabledPanels[panelIndex + dir] || panel;\n  }\n\n  private getPanelHeader(panel: IgcExpansionPanelComponent) {\n    return panel.shadowRoot?.querySelector('div[part=\"header\"]') as HTMLElement;\n  }\n\n  private async closePanel(panel: IgcExpansionPanelComponent) {\n    if (!panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcClosing', { cancelable: true, detail: panel })) {\n      return;\n    }\n    panel.hide();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcClosed', { detail: panel });\n  }\n\n  private async openPanel(panel: IgcExpansionPanelComponent) {\n    if (panel.open) {\n      return;\n    }\n    if (!panel.emitEvent('igcOpening', { cancelable: true, detail: panel })) {\n      return;\n    }\n\n    panel.show();\n    await panel.updateComplete;\n\n    panel.emitEvent('igcOpened', { detail: panel });\n  }\n\n  /** Hides all of the child expansion panels' contents. */\n  public hideAll() {\n    this.panels.forEach((p) => p.hide());\n  }\n\n  /** Shows all of the child expansion panels' contents. */\n  public showAll() {\n    this.panels.forEach((p) => p.show());\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-accordion': IgcAccordionComponent;\n  }\n}\n"]}

package/components/accordion/themes/accordion.base.css.js

@@ -2,6 +2,9 @@ import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host ::slotted(igc-expansion-panel) {
   --lines-clamped: 4;
+  -webkit-transition: margin 350ms ease-out;
+  -o-transition: margin 350ms ease-out;
+  transition: margin 350ms ease-out;
 }
 :host ::slotted(igc-expansion-panel[open]) {
   margin: 0.5rem 0;
@@ -11,5 +14,12 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 }
 :host ::slotted(igc-expansion-panel:last-of-type) {
   margin-bottom: 0;
+}
+@media (prefers-reduced-motion) {
+  :host ::slotted(igc-expansion-panel) {
+    -webkit-transition: none;
+    -o-transition: none;
+    transition: none;
+  }
 }`;
 //# sourceMappingURL=accordion.base.css.js.map

package/components/accordion/themes/accordion.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.base.css.js","sourceRoot":"","sources":["../../../../src/components/accordion/themes/accordion.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;EAYvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host ::slotted(igc-expansion-panel) {\n  --lines-clamped: 4;\n}\n:host ::slotted(igc-expansion-panel[open]) {\n  margin: 0.5rem 0;\n}\n:host ::slotted(igc-expansion-panel:first-of-type) {\n  margin-top: 0;\n}\n:host ::slotted(igc-expansion-panel:last-of-type) {\n  margin-bottom: 0;\n}`;\n"]}
+{"version":3,"file":"accordion.base.css.js","sourceRoot":"","sources":["../../../../src/components/accordion/themes/accordion.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;EAsBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host ::slotted(igc-expansion-panel) {\n  --lines-clamped: 4;\n  -webkit-transition: margin 350ms ease-out;\n  -o-transition: margin 350ms ease-out;\n  transition: margin 350ms ease-out;\n}\n:host ::slotted(igc-expansion-panel[open]) {\n  margin: 0.5rem 0;\n}\n:host ::slotted(igc-expansion-panel:first-of-type) {\n  margin-top: 0;\n}\n:host ::slotted(igc-expansion-panel:last-of-type) {\n  margin-bottom: 0;\n}\n@media (prefers-reduced-motion) {\n  :host ::slotted(igc-expansion-panel) {\n    -webkit-transition: none;\n    -o-transition: none;\n    transition: none;\n  }\n}`;\n"]}

package/components/badge/themes/light/badge.base.css.js

@@ -34,20 +34,21 @@ export const styles = css `:host {
 
 /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
-  --size: 0.75rem;
+  --size: 1.375rem;
+  --_badge-size: var(--size);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-weight: 500;
+  vertical-align: top;
 }
 
-span {
+[part=base] {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: var(--size);
   min-height: var(--size);
-  max-height: calc(var(--size) * 2);
   line-height: 1;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
@@ -58,13 +59,16 @@ span {
   overflow: hidden;
   white-space: nowrap;
   font-family: var(--ig-font-family);
-  font-size: var(--ig-subtitle-1-font-size);
   font-weight: inherit;
 }
 
-:host(:not(:empty)) span {
-  padding: 0.25rem 0.5rem;
-  min-width: calc(var(--size) * 2);
+::slotted(*) {
+  --size: calc(var(--_badge-size) / 2);
+  font-size: calc(var(--_badge-size) / 2) !important;
+}
+
+:host(:not(:empty)) [part=base] {
+  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);
 }
 
 :host([variant=primary]) {
@@ -93,16 +97,16 @@ span {
 }
 
 :host([shape=rounded]),
-:host([outlined][shape=rounded]) span {
-  border-radius: calc(var(--size) / 2);
+:host([outlined][shape=rounded]) [part=base] {
+  border-radius: calc(var(--size) * 2);
 }
 
 :host([shape=square]),
-:host([outlined][shape=square]) span {
+:host([outlined][shape=square]) [part=base] {
   border-radius: 0;
 }
 
-:host([outlined]) span {
+:host([outlined]) [part=base] {
   -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));
           box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));
 }`;

package/components/badge/themes/light/badge.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: 0.75rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n}\n\nspan {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: var(--size);\n  min-height: var(--size);\n  max-height: calc(var(--size) * 2);\n  line-height: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  font-family: var(--ig-font-family);\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: inherit;\n}\n\n:host(:not(:empty)) span {\n  padding: 0.25rem 0.5rem;\n  min-width: calc(var(--size) * 2);\n}\n\n:host([variant=primary]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n\n:host([variant=info]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n\n:host([variant=success]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n\n:host([variant=warning]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n\n:host([variant=danger]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n\n:host([shape=rounded]),\n:host([outlined][shape=rounded]) span {\n  border-radius: calc(var(--size) / 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) span {\n  border-radius: 0;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: 1.375rem;\n  --_badge-size: var(--size);\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n  vertical-align: top;\n}\n\n[part=base] {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: var(--size);\n  min-height: var(--size);\n  line-height: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  font-family: var(--ig-font-family);\n  font-weight: inherit;\n}\n\n::slotted(*) {\n  --size: calc(var(--_badge-size) / 2);\n  font-size: calc(var(--_badge-size) / 2) !important;\n}\n\n:host(:not(:empty)) [part=base] {\n  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);\n}\n\n:host([variant=primary]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n\n:host([variant=info]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n\n:host([variant=success]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n\n:host([variant=warning]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n\n:host([variant=danger]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n\n:host([shape=rounded]),\n:host([outlined][shape=rounded]) [part=base] {\n  border-radius: calc(var(--size) * 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) [part=base] {\n  border-radius: 0;\n}\n\n:host([outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/badge/themes/light/badge.bootstrap.css.js

@@ -1,12 +1,11 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-:host {
-  --size: 1.125rem;
-  --ig-subtitle-1-font-size: 0.75rem;
-  font-weight: 700;
+:host([shape=square]),
+:host([outlined][shape=square]) [part=base] {
+  border-radius: 0.25rem;
 }
 
-:host([outlined]) span {
+:host([outlined]) [part=base] {
   -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));
           box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));
 }`;

package/components/badge/themes/light/badge.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: 1.125rem;\n  --ig-subtitle-1-font-size: 0.75rem;\n  font-weight: 700;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;EASvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host([shape=square]),\n:host([outlined][shape=square]) [part=base] {\n  border-radius: 0.25rem;\n}\n\n:host([outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/combo/combo-item.d.ts

@@ -11,8 +11,10 @@ export default class IgcComboItemComponent extends LitElement {
      * Determines whether the item is active.
      */
     active: boolean;
+    hideCheckbox: boolean;
     protected selectedChange(): void;
     connectedCallback(): void;
+    private renderCheckbox;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/combo/combo-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles } from './themes/light/item/combo-item.base.css.js';
 import { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';
@@ -20,6 +20,7 @@ let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
         super(...arguments);
         this.selected = false;
         this.active = false;
+        this.hideCheckbox = false;
     }
     selectedChange() {
         this.selected
@@ -30,16 +31,19 @@ let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
         super.connectedCallback();
         this.setAttribute('role', 'option');
     }
+    renderCheckbox() {
+        return html `<section part="prefix">
+      <igc-checkbox
+        aria-hidden="true"
+        ?checked=${this.selected}
+        tabindex="-1"
+        exportparts="control: checkbox, indicator: checkbox-indicator, checked"
+      ></igc-checkbox>
+    </section>`;
+    }
     render() {
         return html `
-      <section part="prefix">
-        <igc-checkbox
-          aria-hidden="true"
-          ?checked=${this.selected}
-          tabindex="-1"
-          exportparts="control: checkbox, indicator: checkbox-indicator, checked"
-        ></igc-checkbox>
-      </section>
+      ${!this.hideCheckbox ? this.renderCheckbox() : nothing}
       <section id="content" part="content">
         <slot></slot>
       </section>
@@ -57,6 +61,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcComboItemComponent.prototype, "active", void 0);
+__decorate([
+    property({ attribute: 'hide-checkbox', type: Boolean, reflect: false })
+], IgcComboItemComponent.prototype, "hideCheckbox", void 0);
 __decorate([
     watch('selected')
 ], IgcComboItemComponent.prototype, "selectedChange", null);

package/components/combo/combo-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAGxB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAWN,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;IA6BxB,CAAC;IA1BW,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,QAAQ;;;;;;;;KAQ7B,CAAC;IACJ,CAAC;;AA5CsB,6BAAO,GAAW,gBAAgB,CAAC;AACnC,4BAAM,GAAG,MAAM,CAAC;AAGvC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAGtB;IADC,KAAK,CAAC,UAAU,CAAC;2DAKjB;AAxBkB,qBAAqB;IADzC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,qBAAqB,CA8CzC;eA9CoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/item/combo-item.base.css.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css.js';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcCheckboxComopnent from '../checkbox/checkbox.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\n\ndefineComponents(IgcCheckboxComopnent);\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcComboItemComponent extends LitElement {\n  public static readonly tagName: string = 'igc-combo-item';\n  public static override styles = styles;\n\n  @property({ attribute: false })\n  public index!: number;\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  protected override render() {\n    return html`\n      <section part=\"prefix\">\n        <igc-checkbox\n          aria-hidden=\"true\"\n          ?checked=${this.selected}\n          tabindex=\"-1\"\n          exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n        ></igc-checkbox>\n      </section>\n      <section id=\"content\" part=\"content\">\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-item': IgcComboItemComponent;\n  }\n}\n"]}
+{"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAGxB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAWN,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAG,KAAK,CAAC;IAiC9B,CAAC;IA9BW,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,QAAQ;;;;eAIjB,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,OAAO;;;;KAIvD,CAAC;IACJ,CAAC;;AAnDsB,6BAAO,GAAW,gBAAgB,CAAC;AACnC,4BAAM,GAAG,MAAM,CAAC;AAGvC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAGtB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;2DAC5C;AAG5B;IADC,KAAK,CAAC,UAAU,CAAC;2DAKjB;AA3BkB,qBAAqB;IADzC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,qBAAqB,CAqDzC;eArDoB,qBAAqB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/item/combo-item.base.css.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css.js';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcCheckboxComopnent from '../checkbox/checkbox.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\n\ndefineComponents(IgcCheckboxComopnent);\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcComboItemComponent extends LitElement {\n  public static readonly tagName: string = 'igc-combo-item';\n  public static override styles = styles;\n\n  @property({ attribute: false })\n  public index!: number;\n\n  /**\n   * Determines whether the item is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the item is active.\n   */\n  @property({ type: Boolean, reflect: true })\n  public active = false;\n\n  @property({ attribute: 'hide-checkbox', type: Boolean, reflect: false })\n  public hideCheckbox = false;\n\n  @watch('selected')\n  protected selectedChange() {\n    this.selected\n      ? this.setAttribute('aria-selected', 'true')\n      : this.removeAttribute('aria-selected');\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n  }\n\n  private renderCheckbox() {\n    return html`<section part=\"prefix\">\n      <igc-checkbox\n        aria-hidden=\"true\"\n        ?checked=${this.selected}\n        tabindex=\"-1\"\n        exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n      ></igc-checkbox>\n    </section>`;\n  }\n\n  protected override render() {\n    return html`\n      ${!this.hideCheckbox ? this.renderCheckbox() : nothing}\n      <section id=\"content\" part=\"content\">\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-combo-item': IgcComboItemComponent;\n  }\n}\n"]}