igniteui-webcomponents 6.1.1 → 6.1.2

package/components/textarea/themes/shared/textarea.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.material.css.js","sourceRoot":"","sources":["../../../../../src/components/textarea/themes/shared/textarea.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,84WAA84W,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);--component-size: var(--ig-size, var(--default-size))}:host ::part(helper-text){font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);color:var(--helper-text-color);grid-auto-rows:minmax(1.125rem, auto);margin-block-start:.25rem;padding-inline:max(var(--is-large, 1)*max(1.125rem, -1 * 1.125rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}textarea{border:none;padding:0;overflow:auto;margin-block-start:1.25rem;grid-area:1/2/span 1/span 2;flex-grow:1;position:relative;max-width:inherit;padding-inline:.25rem}[part=label]{position:absolute;transform-origin:top left;inset-block-start:calc(1.25rem - 0.125rem);padding-inline-end:.25rem;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);will-change:transform,translate}:host(:focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);translate:0;inset-block-start:calc(1.25rem/4)}:host([outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-block-end:0;display:inline-block;position:relative;inset-block:0;translate:0 calc(var(--textarea-label-position)*-1);padding-inline-end:0}:host(:not([outlined])) [part~=container]{overflow:hidden;border-start-start-radius:var(--box-border-radius);border-start-end-radius:var(--box-border-radius);background:var(--box-background);padding-inline-end:.0625rem}:host(:not([outlined])) [part~=container]::after{content:\"\";position:absolute;bottom:0%;width:100%;border-block-end:.0625rem solid var(--idle-bottom-line-color);transition:all .25s cubic-bezier(0.215, 0.61, 0.355, 1)}:host(:not([outlined])) [part~=container]:not([part~=suffixed]) textarea{margin-block-end:.125rem;grid-area:1/2/span 1/span 3}:host(:not([outlined]):hover) [part~=container]{background:var(--box-background-hover)}:host(:not([outlined]):hover) [part~=container]::after{border-block-end-width:.0625rem;border-block-end-color:var(--hover-bottom-line-color)}:host(:disabled:not([outlined])) [part~=container],:host([disabled]:not([outlined])) [part~=container]{background:var(--box-disabled-background)}:host(:disabled:not([outlined])) [part~=container]::after,:host([disabled]:not([outlined])) [part~=container]::after{border-block-end-color:var(--disabled-bottom-line-color);border-block-end-style:dashed}:host([invalid]:not(:disabled)) [part~=container]::after,:host([invalid]:not([disabled])) [part~=container]::after{border-block-end-color:var(--error-secondary-color)}:host([invalid]:not(:disabled)) [part~=label],:host([invalid]:not([disabled])) [part~=label]{color:var(--error-secondary-color)}:host([invalid]:not(:disabled)) ::part(helper-text),:host([invalid]:not([disabled])) ::part(helper-text){color:var(--error-secondary-color)}:host(:focus-within) [part~=label]{color:var(--focused-secondary-color)}:host(:not([outlined]):focus-within){color:var(--input-prefix-color--focused)}:host(:not([outlined]):focus-within) [part~=container]{background:var(--box-background-focus)}:host(:not([outlined]):focus-within) [part~=container]::after{border-block-end-width:.125rem;border-block-end-color:var(--focused-bottom-line-color)}:host(:not([outlined]):focus-within) [part~=prefix]{color:var(--input-prefix-color--focused);background:var(--input-prefix-background--focused)}:host(:not([outlined]):focus-within) [part~=suffix]{color:var(--input-suffix-color--focused);background:var(--input-suffix-background--focused)}:host([invalid]:not([outlined]):focus-within) [part~=container]::after{border-block-end-color:var(--error-secondary-color)}[part=start],[part=end]{display:flex;align-items:center;min-width:max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));min-height:100%;overflow:hidden}[part=start]{grid-area:1/1}[part=notch]{display:flex;align-items:flex-start;width:auto;min-width:0;height:100%;position:relative;grid-area:1/2;padding-inline:.25rem}[part=filler]{grid-area:1/3}[part=end]{grid-area:1/4}[part~=prefixed] [part~=prefix]{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part~=suffixed] [part~=suffix]{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part~=filled]{color:var(--input-prefix-color--filled)}:host([outlined]){--textarea-label-position: calc(50% + (0.0625rem));align-items:initial;padding:0;box-shadow:none;border-radius:var(--border-border-radius);background:var(--border-background);overflow:initial}:host([outlined]) [part~=container]{grid-template-columns:auto auto 1fr auto;display:grid}:host([outlined]) [part~=container]:not([part~=suffixed]) textarea{grid-column:2/-1;max-width:calc(100% - 0.125rem)}:host([outlined]) [part~=container][part~=filled] [part=notch],:host([outlined]) [part~=container][part~=placeholder] [part=notch]{border-block-start:.125rem solid rgba(0,0,0,0)}:host([outlined]) [part=start]{width:auto;border-color:var(--border-color);border-style:solid;border-inline-start-width:.0625rem;border-inline-end-width:0;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-start-radius:var(--border-border-radius);border-end-start-radius:var(--border-border-radius)}:host([outlined]) [part=filler]{border-width:.0625rem;border-style:solid;border-color:var(--border-color);border-left:none;border-right:none}:host([outlined]) [part=notch]{border-block:.0625rem solid var(--border-color);padding:0 .25rem}:host([outlined]) [part=notch]:empty{display:none}:host([outlined]) [part=end]{display:flex;justify-content:flex-end;flex-grow:1;height:100%;grid-area:1/4;border-color:var(--border-color);border-style:solid;border-inline-start-width:0;border-inline-end-width:.0625rem;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-end-radius:var(--border-border-radius);border-end-end-radius:var(--border-border-radius)}:host([outlined]) textarea{bottom:.125rem}:host([outlined]:hover) [part=notch],:host([outlined]:hover) [part=start],:host([outlined]:hover) [part=end],:host([outlined]:hover) [part=filler]{border-color:var(--hover-border-color)}:host([outlined]:hover) [part~=container][part~=filled] [part=notch],:host([outlined]:hover) [part~=container][part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host([outlined]:focus-within) [part=filler],:host([outlined]:focus-within) [part=notch]{border-block-width:.125rem}:host([outlined]:focus-within) [part=filler]{border-block-color:var(--focused-border-color)}:host([outlined]:focus-within) [part=notch]{border-block-start-color:rgba(0,0,0,0);border-block-end-color:var(--focused-border-color)}:host([outlined]:focus-within) [part=start]{border-color:var(--focused-border-color);border-inline-start-width:.125rem;border-inline-end-width:0;border-block-start-width:.125rem;border-block-end-width:.125rem}:host([outlined]:focus-within) [part=end]{border-color:var(--focused-border-color);border-inline-start-width:0;border-inline-end-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host([outlined]:focus-within) [part~=prefix]{margin-inline-start:-0.0625rem}:host([outlined]:focus-within) [part~=suffix]{margin-inline-end:-0.0625rem}:host([invalid][outlined]:not(:disabled)) [part=start],:host([invalid][outlined]:not(:disabled)) [part=filler],:host([invalid][outlined]:not(:disabled)) [part=end],:host([invalid][outlined]:not(:disabled)) [part=notch],:host([invalid][outlined]:not(:disabled):focus-within) [part=start],:host([invalid][outlined]:not(:disabled):focus-within) [part=filler],:host([invalid][outlined]:not(:disabled):focus-within) [part=end],:host([invalid][outlined]:not(:disabled):focus-within) [part=notch],:host([invalid][outlined]:not([disabled])) [part=start],:host([invalid][outlined]:not([disabled])) [part=filler],:host([invalid][outlined]:not([disabled])) [part=end],:host([invalid][outlined]:not([disabled])) [part=notch],:host([invalid][outlined]:not([disabled]):focus-within) [part=start],:host([invalid][outlined]:not([disabled]):focus-within) [part=filler],:host([invalid][outlined]:not([disabled]):focus-within) [part=end],:host([invalid][outlined]:not([disabled]):focus-within) [part=notch]{border-color:var(--error-secondary-color)}:host([invalid][outlined]:not([disabled]):focus-within) [part=notch],:host([invalid][outlined]:not([disabled])) [part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host(:disabled[outlined]) [part~=container],:host([disabled][outlined]) [part~=container]{background:var(--border-disabled-background)}:host(:disabled[outlined]) [part=start],:host(:disabled[outlined]) [part=filler],:host(:disabled[outlined]) [part=notch],:host(:disabled[outlined]) [part=end],:host([disabled][outlined]) [part=start],:host([disabled][outlined]) [part=filler],:host([disabled][outlined]) [part=notch],:host([disabled][outlined]) [part=end]{border-color:var(--disabled-border-color)}`;\n"]}
+{"version":3,"file":"textarea.material.css.js","sourceRoot":"","sources":["../../../../../src/components/textarea/themes/shared/textarea.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ghaAAgha,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);--component-size: var(--ig-size, var(--default-size))}:host ::part(helper-text){font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);color:var(--helper-text-color);grid-auto-rows:minmax(1.125rem, auto);margin-block-start:.25rem;padding-inline:max(var(--is-large, 1)*max(1.125rem, -1 * 1.125rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}textarea{border:none;padding:0;overflow:auto;margin-block-start:1.25rem;grid-area:1/2/span 1/span 2;flex-grow:1;position:relative;max-width:inherit;padding-inline:.25rem}[part=label]{position:absolute;transform-origin:top left;inset-block-start:calc(1.25rem - 0.125rem);padding-inline-end:.25rem;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1),font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);will-change:transform,translate}:host(:not([readonly]):focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);translate:0;inset-block-start:calc(1.25rem/4)}:host([readonly][outlined]) [part~=container][part~=filled] [part=label],:host([readonly][outlined]) [part~=container][part~=placeholder] [part=label],:host(:not([readonly])[outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-block-end:0;display:inline-block;position:relative;inset-block:0;translate:0 calc(var(--textarea-label-position)*-1);padding-inline-end:0}:host(:not([outlined])) [part~=container]{overflow:hidden;border-start-start-radius:var(--box-border-radius);border-start-end-radius:var(--box-border-radius);background:var(--box-background);padding-inline-end:.0625rem}:host(:not([outlined])) [part~=container]::after{content:\"\";position:absolute;bottom:0%;width:100%;border-block-end:.0625rem solid var(--idle-bottom-line-color);transition:all .25s cubic-bezier(0.215, 0.61, 0.355, 1)}:host(:not([outlined])) [part~=container]:not([part~=suffixed]) textarea{margin-block-end:.125rem;grid-area:1/2/span 1/span 3}:host(:not([outlined],[readonly]):hover) [part~=container]{background:var(--box-background-hover)}:host(:not([outlined],[readonly]):hover) [part~=container]::after{border-block-end-width:.0625rem;border-block-end-color:var(--hover-bottom-line-color)}:host(:disabled:not([outlined])) [part~=container],:host([disabled]:not([outlined])) [part~=container]{background:var(--box-disabled-background)}:host(:disabled:not([outlined])) [part~=container]::after,:host([disabled]:not([outlined])) [part~=container]::after{border-block-end-color:var(--disabled-bottom-line-color);border-block-end-style:dashed}:host([invalid]:not(:disabled)) [part~=container]::after,:host([invalid]:not([disabled])) [part~=container]::after{border-block-end-color:var(--error-secondary-color)}:host([invalid]:not(:disabled)) [part~=label],:host([invalid]:not([disabled])) [part~=label]{color:var(--error-secondary-color)}:host([invalid]:not(:disabled)) ::part(helper-text),:host([invalid]:not([disabled])) ::part(helper-text){color:var(--error-secondary-color)}:host(:focus-within) [part~=label]{color:var(--focused-secondary-color)}:host(:not([outlined]):focus-within){color:var(--input-prefix-color--focused)}:host(:not([outlined]):focus-within) [part~=container]{background:var(--box-background-focus)}:host(:not([outlined]):focus-within) [part~=container]::after{border-block-end-width:.125rem;border-block-end-color:var(--focused-bottom-line-color)}:host(:not([outlined],[readonly]):focus-within) [part~=prefix]{color:var(--input-prefix-color--focused);background:var(--input-prefix-background--focused)}:host(:not([outlined],[readonly]):focus-within) [part~=suffix]{color:var(--input-suffix-color--focused);background:var(--input-suffix-background--focused)}:host(:not([outlined],[disabled])[readonly]) [part~=container]{background:var(--box-background-focus)}:host([invalid]:not([outlined]):focus-within) [part~=container]::after{border-block-end-color:var(--error-secondary-color)}[part=start],[part=end]{display:flex;align-items:center;min-width:max(var(--is-large, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(0.625rem, -1 * 0.625rem)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));min-height:100%;overflow:hidden}[part=start]{grid-area:1/1}[part=notch]{display:flex;align-items:flex-start;width:auto;min-width:0;height:100%;position:relative;grid-area:1/2;padding-inline:.25rem}[part=filler]{grid-area:1/3}[part=end]{grid-area:1/4}[part~=prefixed] [part~=prefix]{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part~=suffixed] [part~=suffix]{padding-inline:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.875rem, -1 * 0.875rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part~=filled]{color:var(--input-prefix-color--filled)}:host([outlined]){--textarea-label-position: calc(50% + (0.0625rem));align-items:initial;padding:0;box-shadow:none;border-radius:var(--border-border-radius);background:var(--border-background);overflow:initial}:host([outlined]) [part~=container]{grid-template-columns:auto auto 1fr auto;display:grid}:host([outlined]) [part~=container]:not([part~=suffixed]) textarea{grid-column:2/-1;max-width:calc(100% - 0.125rem)}:host([outlined]) [part~=container][part~=filled] [part=notch],:host([outlined]) [part~=container][part~=placeholder] [part=notch]{border-block-start:.125rem solid rgba(0,0,0,0)}:host([outlined]) [part=start]{width:auto;border-color:var(--border-color);border-style:solid;border-inline-start-width:.0625rem;border-inline-end-width:0;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-start-radius:var(--border-border-radius);border-end-start-radius:var(--border-border-radius)}:host([outlined]) [part=filler]{border-width:.0625rem;border-style:solid;border-color:var(--border-color);border-left:none;border-right:none}:host([outlined]) [part=notch]{border-block:.0625rem solid var(--border-color);padding:0 .25rem}:host([outlined]) [part=notch]:empty{display:none}:host([outlined]) [part=end]{display:flex;justify-content:flex-end;flex-grow:1;height:100%;grid-area:1/4;border-color:var(--border-color);border-style:solid;border-inline-start-width:0;border-inline-end-width:.0625rem;border-block-start-width:.0625rem;border-block-end-width:.0625rem;border-start-end-radius:var(--border-border-radius);border-end-end-radius:var(--border-border-radius)}:host([outlined]) textarea{bottom:.125rem}:host(:not([readonly],:focus-within)[outlined]:hover) [part=notch],:host(:not([readonly],:focus-within)[outlined]:hover) [part=start],:host(:not([readonly],:focus-within)[outlined]:hover) [part=end],:host(:not([readonly],:focus-within)[outlined]:hover) [part=filler]{border-color:var(--hover-border-color)}:host(:not([readonly],:focus-within)[outlined]:hover) [part~=container][part~=filled] [part=notch],:host(:not([readonly],:focus-within)[outlined]:hover) [part~=container][part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host(:not([readonly])[outlined]:focus-within) [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host([readonly][outlined]) [part~=container][part~=filled] [part=notch],:host([readonly][outlined]) [part~=container][part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host([readonly][outlined]:focus-within) [part=label]{inset-block-start:calc(1.25rem - 0.1875rem)}:host([readonly][outlined]:focus-within) [part=notch]{border-block-start-color:var(--focused-border-color)}:host(:not(:disabled)[readonly][outlined][invalid]:focus-within) [part=notch],:host(:not([disabled])[readonly][outlined][invalid]:focus-within) [part=notch]{border-block-start-color:var(--error-secondary-color)}:host(:not(:disabled)[readonly][outlined][invalid]:focus-within) [part~=container][part~=filled] [part=notch],:host(:not(:disabled)[readonly][outlined][invalid]:focus-within) [part~=container][part~=placeholder] [part=notch],:host(:not([disabled])[readonly][outlined][invalid]:focus-within) [part~=container][part~=filled] [part=notch],:host(:not([disabled])[readonly][outlined][invalid]:focus-within) [part~=container][part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host([outlined]:focus-within) [part=filler],:host([outlined]:focus-within) [part=notch]{border-block-width:.125rem}:host([outlined]:focus-within) [part=filler]{border-block-color:var(--focused-border-color)}:host([outlined]:focus-within) [part=notch]{border-block-end-color:var(--focused-border-color)}:host([outlined]:focus-within) [part=start]{border-color:var(--focused-border-color);border-inline-start-width:.125rem;border-inline-end-width:0;border-block-start-width:.125rem;border-block-end-width:.125rem}:host([outlined]:focus-within) [part=end]{border-color:var(--focused-border-color);border-inline-start-width:0;border-inline-end-width:.125rem;border-block-start-width:.125rem;border-block-end-width:.125rem}:host([outlined]:focus-within) [part~=prefix]{margin-inline-start:-0.0625rem}:host([outlined]:focus-within) [part~=suffix]{margin-inline-end:-0.0625rem}:host([invalid][outlined]:not(:disabled)) [part=start],:host([invalid][outlined]:not(:disabled)) [part=filler],:host([invalid][outlined]:not(:disabled)) [part=end],:host([invalid][outlined]:not(:disabled)) [part=notch],:host([invalid][outlined]:not(:disabled):focus-within) [part=start],:host([invalid][outlined]:not(:disabled):focus-within) [part=filler],:host([invalid][outlined]:not(:disabled):focus-within) [part=end],:host([invalid][outlined]:not(:disabled):focus-within) [part=notch],:host([invalid][outlined]:not([disabled])) [part=start],:host([invalid][outlined]:not([disabled])) [part=filler],:host([invalid][outlined]:not([disabled])) [part=end],:host([invalid][outlined]:not([disabled])) [part=notch],:host([invalid][outlined]:not([disabled]):focus-within) [part=start],:host([invalid][outlined]:not([disabled]):focus-within) [part=filler],:host([invalid][outlined]:not([disabled]):focus-within) [part=end],:host([invalid][outlined]:not([disabled]):focus-within) [part=notch]{border-color:var(--error-secondary-color)}:host([invalid][outlined]:not([disabled]):focus-within) [part=notch],:host([invalid][outlined]:not([disabled])) [part~=placeholder] [part=notch]{border-block-start-color:rgba(0,0,0,0)}:host(:disabled[outlined]) [part~=container],:host([disabled][outlined]) [part~=container]{background:var(--border-disabled-background)}:host(:disabled[outlined]) [part=start],:host(:disabled[outlined]) [part=filler],:host(:disabled[outlined]) [part=notch],:host(:disabled[outlined]) [part=end],:host([disabled][outlined]) [part=start],:host([disabled][outlined]) [part=filler],:host([disabled][outlined]) [part=notch],:host([disabled][outlined]) [part=end]{border-color:var(--disabled-border-color)}`;\n"]}

package/components/toast/toast.d.ts

@@ -1,4 +1,3 @@
-import { addAnimationController } from '../../animations/player.js';
 import { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';
 /**
  * A toast component is used to show a notification
@@ -10,7 +9,7 @@ import { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';
 export default class IgcToastComponent extends IgcBaseAlertLikeComponent {
     static readonly tagName = "igc-toast";
     static styles: import("lit").CSSResult[];
-    protected _animationPlayer: ReturnType<typeof addAnimationController>;
+    protected readonly _player: import("../../animations/player.js").AnimationController;
     static register(): void;
     constructor();
     protected render(): import("lit-html").TemplateResult<1>;

package/components/toast/toast.js

@@ -12,7 +12,7 @@ class IgcToastComponent extends IgcBaseAlertLikeComponent {
     }
     constructor() {
         super();
-        this._animationPlayer = addAnimationController(this);
+        this._player = addAnimationController(this);
         addThemingController(this, all);
     }
     render() {

package/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AASpD,MAAqB,iBAAkB,SAAQ,yBAAyB;IAS/D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAVS,qBAAgB,GAE/B,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAS/B,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC;IAClD,CAAC;;AAnBsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,iBAAiB","sourcesContent":["import { html } from 'lit';\n\nimport { addAnimationController } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';\nimport { styles as shared } from './themes/shared/toast.common.css.js';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/toast.base.css.js';\n\n/**\n * A toast component is used to show a notification\n *\n * @element igc-toast\n *\n * @csspart base - The base wrapper of the toast.\n */\nexport default class IgcToastComponent extends IgcBaseAlertLikeComponent {\n  public static readonly tagName = 'igc-toast';\n  public static override styles = [styles, shared];\n\n  protected override _animationPlayer: ReturnType<\n    typeof addAnimationController\n  > = addAnimationController(this);\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcToastComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot .inert=${!this.open}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toast': IgcToastComponent;\n  }\n}\n"]}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AASpD,MAAqB,iBAAkB,SAAQ,yBAAyB;IAO/D,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QARkB,YAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;QASjE,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC;IAClD,CAAC;;AAjBsB,yBAAO,GAAG,WAAW,AAAd,CAAe;AACtB,wBAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;eAF9B,iBAAiB","sourcesContent":["import { html } from 'lit';\nimport { addAnimationController } from '../../animations/player.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';\nimport { styles as shared } from './themes/shared/toast.common.css.js';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/toast.base.css.js';\n\n/**\n * A toast component is used to show a notification\n *\n * @element igc-toast\n *\n * @csspart base - The base wrapper of the toast.\n */\nexport default class IgcToastComponent extends IgcBaseAlertLikeComponent {\n  public static readonly tagName = 'igc-toast';\n  public static override styles = [styles, shared];\n\n  protected override readonly _player = addAnimationController(this);\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcToastComponent);\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override render() {\n    return html`<slot .inert=${!this.open}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toast': IgcToastComponent;\n  }\n}\n"]}

package/components/validation-container/validation-container.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, nothing, type TemplateResult } from 'lit';
 import type { IgcFormControl } from '../common/mixins/forms/types.js';
+/** Configuration for the validation container. */
 interface ValidationContainerConfig {
     /** The id attribute for the validation container. */
     id?: string;
@@ -29,11 +30,12 @@ export default class IgcValidationContainerComponent extends LitElement {
     get target(): IgcFormControl;
     constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
-    handleEvent({ type }: Event): void;
-    protected renderValidationMessage(slotName: string): TemplateResult<1>;
-    protected renderValidationSlots(validity: ValidityState, projected?: boolean): Generator<TemplateResult<1>, void, unknown>;
-    protected renderHelper(): TemplateResult<1> | typeof nothing;
-    protected render(): TemplateResult<1>;
+    /** @internal */
+    handleEvent(event: Event): void;
+    protected _renderValidationMessage(slotName: string): TemplateResult;
+    protected _renderValidationSlots(validity: ValidityState, projected?: boolean): Generator<TemplateResult>;
+    protected _renderHelper(): TemplateResult | typeof nothing;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/validation-container/validation-container.js

@@ -15,20 +15,24 @@ import IgcIconComponent from '../icon/icon.js';
 import { styles as shared } from './themes/shared/validator.common.css.js';
 import { all } from './themes/themes.js';
 import { styles } from './themes/validator.base.css.js';
+const VALIDATION_SLOTS_SELECTOR = 'slot:not([name="helper-text"])';
+const ALL_SLOTS_SELECTOR = 'slot';
 function getValidationSlots(element) {
-    return element.renderRoot.querySelectorAll("slot:not([name='helper-text'])");
+    return element.renderRoot.querySelectorAll(VALIDATION_SLOTS_SELECTOR);
 }
 function hasProjection(element) {
-    return Array.from(element.renderRoot.querySelectorAll('slot')).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));
+    const allSlots = element.renderRoot.querySelectorAll(ALL_SLOTS_SELECTOR);
+    return Array.from(allSlots).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));
 }
 function hasProjectedValidation(element, slotName) {
-    const config = { flatten: true };
     const slots = Array.from(getValidationSlots(element));
-    return slotName
-        ? slots
+    const config = { flatten: true };
+    if (slotName) {
+        return slots
             .filter((slot) => slot.name === slotName)
-            .some((slot) => slot.assignedElements(config).length > 0)
-        : slots.some((slot) => slot.assignedElements(config).length > 0);
+            .some((slot) => !isEmpty(slot.assignedElements(config)));
+    }
+    return slots.some((slot) => !isEmpty(slot.assignedElements(config)));
 }
 class IgcValidationContainerComponent extends LitElement {
     static register() {
@@ -38,20 +42,20 @@ class IgcValidationContainerComponent extends LitElement {
         id: 'helper-text',
         hasHelperText: true,
     }) {
-        const { renderValidationSlots } = IgcValidationContainerComponent.prototype;
         const helperText = config.hasHelperText
             ? html `<slot name="helper-text" slot="helper-text"></slot>`
-            : null;
+            : nothing;
+        const validationSlots = IgcValidationContainerComponent.prototype._renderValidationSlots(host.validity, true);
         return html `
       <igc-validator
         id=${ifDefined(config.id)}
         part=${ifDefined(config.part)}
         slot=${ifDefined(config.slot)}
-        .target=${host}
         ?invalid=${host.invalid}
+        .target=${host}
         exportparts="helper-text validation-message validation-icon"
       >
-        ${helperText}${renderValidationSlots(host.validity, true)}
+        ${helperText}${validationSlots}
       </igc-validator>
     `;
     }
@@ -77,60 +81,69 @@ class IgcValidationContainerComponent extends LitElement {
         root.addEventListener('slotchange', this);
         return root;
     }
-    handleEvent({ type }) {
-        const isInvalid = type === 'invalid';
-        const isSlotChange = type === 'slotchange';
-        if (isInvalid || isSlotChange) {
-            this.invalid = isInvalid ? true : this.invalid;
-            this._hasSlottedContent = hasProjectedValidation(this);
+    handleEvent(event) {
+        switch (event.type) {
+            case 'invalid':
+                if (!this.invalid) {
+                    this.invalid = true;
+                }
+                break;
+            case 'slotchange': {
+                const newHasSlottedContent = hasProjectedValidation(this);
+                if (this._hasSlottedContent !== newHasSlottedContent) {
+                    this._hasSlottedContent = newHasSlottedContent;
+                }
+                break;
+            }
         }
         this.requestUpdate();
     }
-    renderValidationMessage(slotName) {
-        const icon = hasProjectedValidation(this, slotName)
+    _renderValidationMessage(slotName) {
+        const hasProjectedIcon = hasProjectedValidation(this, slotName);
+        const parts = { 'validation-message': true, empty: !hasProjectedIcon };
+        const icon = hasProjectedIcon
             ? html `
           <igc-icon
             aria-hidden="true"
             name="error"
-            collection="default"
             part="validation-icon"
           ></igc-icon>
         `
-            : null;
+            : nothing;
         return html `
-      <div part=${partMap({ 'validation-message': true, empty: !icon })}>
+      <div part=${partMap(parts)}>
         ${icon}
         <slot name=${slotName}></slot>
       </div>
     `;
     }
-    *renderValidationSlots(validity, projected = false) {
+    *_renderValidationSlots(validity, projected = false) {
+        if (!validity.valid) {
+            yield projected
+                ? html `<slot name="invalid" slot="invalid"></slot>`
+                : this._renderValidationMessage('invalid');
+        }
         for (const key in validity) {
-            if (key === 'valid' && !validity[key]) {
-                yield projected
-                    ? html `<slot name="invalid" slot="invalid"></slot>`
-                    : this.renderValidationMessage('invalid');
-            }
-            else if (validity[key]) {
+            if (key !== 'valid' && validity[key]) {
                 const name = toKebabCase(key);
                 yield projected
                     ? html `<slot name=${name} slot=${name}></slot>`
-                    : this.renderValidationMessage(name);
+                    : this._renderValidationMessage(name);
             }
         }
     }
-    renderHelper() {
+    _renderHelper() {
         return this.invalid && this._hasSlottedContent
             ? nothing
             : html `<slot name="helper-text"></slot>`;
     }
     render() {
+        const slots = this.invalid
+            ? this._renderValidationSlots(this.target.validity)
+            : nothing;
         return html `
       <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>
-        ${this.invalid
-            ? this.renderValidationSlots(this.target.validity)
-            : nothing}
-        ${this.renderHelper()}
+        ${slots}${this._renderHelper()}
       </div>
     `;
     }

package/components/validation-container/validation-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-container.js","sourceRoot":"","sources":["../../../src/components/validation-container/validation-container.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { IgcFormControl } from '../common/mixins/forms/types.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, toKebabCase } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { styles as shared } from './themes/shared/validator.common.css.js';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/validator.base.css.js';\n\ninterface ValidationContainerConfig {\n  /** The id attribute for the validation container. */\n  id?: string;\n  /** Project the validation container to the given slot inside the host shadow DOM. */\n  slot?: string;\n  /** Additional part(s) that should be bound to the validation container. */\n  part?: string;\n  /** Whether the validation container should expose a helper-text slot. */\n  hasHelperText?: boolean;\n}\n\nfunction getValidationSlots(element: IgcValidationContainerComponent) {\n  return element.renderRoot.querySelectorAll<HTMLSlotElement>(\n    \"slot:not([name='helper-text'])\"\n  );\n}\n\nfunction hasProjection(element: IgcValidationContainerComponent) {\n  return Array.from(\n    element.renderRoot.querySelectorAll<HTMLSlotElement>('slot')\n  ).every((slot) => isEmpty(slot.assignedElements({ flatten: true })));\n}\n\nfunction hasProjectedValidation(\n  element: IgcValidationContainerComponent,\n  slotName?: string\n) {\n  const config: AssignedNodesOptions = { flatten: true };\n  const slots = Array.from(getValidationSlots(element));\n  return slotName\n    ? slots\n        .filter((slot) => slot.name === slotName)\n        .some((slot) => slot.assignedElements(config).length > 0)\n    : slots.some((slot) => slot.assignedElements(config).length > 0);\n}\n\n/* blazorSuppress */\n/**\n * @element igc-validator\n *\n * @csspart helper-text - The base wrapper\n * @csspart validation-message - The validation error message container\n * @csspart validation-icon - The validation error icon\n */\nexport default class IgcValidationContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-validator';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcValidationContainerComponent, IgcIconComponent);\n  }\n\n  public static create(\n    host: IgcFormControl,\n    config: ValidationContainerConfig = {\n      id: 'helper-text',\n      hasHelperText: true,\n    }\n  ): TemplateResult {\n    const { renderValidationSlots } = IgcValidationContainerComponent.prototype;\n    const helperText = config.hasHelperText\n      ? html`<slot name=\"helper-text\" slot=\"helper-text\"></slot>`\n      : null;\n\n    return html`\n      <igc-validator\n        id=${ifDefined(config.id)}\n        part=${ifDefined(config.part)}\n        slot=${ifDefined(config.slot)}\n        .target=${host}\n        ?invalid=${host.invalid}\n        exportparts=\"helper-text validation-message validation-icon\"\n      >\n        ${helperText}${renderValidationSlots(host.validity, true)}\n      </igc-validator>\n    `;\n  }\n\n  private _target!: IgcFormControl;\n\n  @state()\n  private _hasSlottedContent = false;\n\n  @property({ type: Boolean })\n  public invalid = false;\n\n  @property({ attribute: false })\n  public set target(value: IgcFormControl) {\n    if (this._target === value) {\n      return;\n    }\n\n    this._target?.removeEventListener('invalid', this);\n    this._target = value;\n    this._target.addEventListener('invalid', this);\n  }\n\n  public get target() {\n    return this._target;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override createRenderRoot() {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this);\n    return root;\n  }\n\n  public handleEvent({ type }: Event) {\n    const isInvalid = type === 'invalid';\n    const isSlotChange = type === 'slotchange';\n\n    if (isInvalid || isSlotChange) {\n      this.invalid = isInvalid ? true : this.invalid;\n      this._hasSlottedContent = hasProjectedValidation(this);\n    }\n\n    this.requestUpdate();\n  }\n\n  protected renderValidationMessage(slotName: string) {\n    const icon = hasProjectedValidation(this, slotName)\n      ? html`\n          <igc-icon\n            aria-hidden=\"true\"\n            name=\"error\"\n            collection=\"default\"\n            part=\"validation-icon\"\n          ></igc-icon>\n        `\n      : null;\n\n    return html`\n      <div part=${partMap({ 'validation-message': true, empty: !icon })}>\n        ${icon}\n        <slot name=${slotName}></slot>\n      </div>\n    `;\n  }\n\n  protected *renderValidationSlots(validity: ValidityState, projected = false) {\n    for (const key in validity) {\n      if (key === 'valid' && !validity[key]) {\n        yield projected\n          ? html`<slot name=\"invalid\" slot=\"invalid\"></slot>`\n          : this.renderValidationMessage('invalid');\n      } else if (validity[key as keyof ValidityState]) {\n        const name = toKebabCase(key);\n\n        yield projected\n          ? html`<slot name=${name} slot=${name}></slot>`\n          : this.renderValidationMessage(name);\n      }\n    }\n  }\n\n  protected renderHelper() {\n    return this.invalid && this._hasSlottedContent\n      ? nothing\n      : html`<slot name=\"helper-text\"></slot>`;\n  }\n\n  protected override render() {\n    return html`\n      <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>\n        ${this.invalid\n          ? this.renderValidationSlots(this.target.validity)\n          : nothing}\n        ${this.renderHelper()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-validator': IgcValidationContainerComponent;\n  }\n}\n"]}
+{"version":3,"file":"validation-container.js","sourceRoot":"","sources":["../../../src/components/validation-container/validation-container.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { IgcFormControl } from '../common/mixins/forms/types.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, toKebabCase } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { styles as shared } from './themes/shared/validator.common.css.js';\nimport { all } from './themes/themes.js';\nimport { styles } from './themes/validator.base.css.js';\n\n/** Configuration for the validation container. */\ninterface ValidationContainerConfig {\n  /** The id attribute for the validation container. */\n  id?: string;\n  /** Project the validation container to the given slot inside the host shadow DOM. */\n  slot?: string;\n  /** Additional part(s) that should be bound to the validation container. */\n  part?: string;\n  /** Whether the validation container should expose a helper-text slot. */\n  hasHelperText?: boolean;\n}\n\nconst VALIDATION_SLOTS_SELECTOR = 'slot:not([name=\"helper-text\"])';\nconst ALL_SLOTS_SELECTOR = 'slot';\n\nfunction getValidationSlots(\n  element: IgcValidationContainerComponent\n): NodeListOf<HTMLSlotElement> {\n  return element.renderRoot.querySelectorAll<HTMLSlotElement>(\n    VALIDATION_SLOTS_SELECTOR\n  );\n}\n\nfunction hasProjection(element: IgcValidationContainerComponent): boolean {\n  const allSlots =\n    element.renderRoot.querySelectorAll<HTMLSlotElement>(ALL_SLOTS_SELECTOR);\n  return Array.from(allSlots).every((slot) =>\n    isEmpty(slot.assignedElements({ flatten: true }))\n  );\n}\n\nfunction hasProjectedValidation(\n  element: IgcValidationContainerComponent,\n  slotName?: string\n): boolean {\n  const slots = Array.from(getValidationSlots(element));\n  const config: AssignedNodesOptions = { flatten: true };\n\n  if (slotName) {\n    return slots\n      .filter((slot) => slot.name === slotName)\n      .some((slot) => !isEmpty(slot.assignedElements(config)));\n  }\n\n  return slots.some((slot) => !isEmpty(slot.assignedElements(config)));\n}\n\n/* blazorSuppress */\n/**\n * @element igc-validator\n *\n * @csspart helper-text - The base wrapper\n * @csspart validation-message - The validation error message container\n * @csspart validation-icon - The validation error icon\n */\nexport default class IgcValidationContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-validator';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcValidationContainerComponent, IgcIconComponent);\n  }\n\n  public static create(\n    host: IgcFormControl,\n    config: ValidationContainerConfig = {\n      id: 'helper-text',\n      hasHelperText: true,\n    }\n  ): TemplateResult {\n    const helperText = config.hasHelperText\n      ? html`<slot name=\"helper-text\" slot=\"helper-text\"></slot>`\n      : nothing;\n\n    const validationSlots =\n      IgcValidationContainerComponent.prototype._renderValidationSlots(\n        host.validity,\n        true\n      );\n\n    return html`\n      <igc-validator\n        id=${ifDefined(config.id)}\n        part=${ifDefined(config.part)}\n        slot=${ifDefined(config.slot)}\n        ?invalid=${host.invalid}\n        .target=${host}\n        exportparts=\"helper-text validation-message validation-icon\"\n      >\n        ${helperText}${validationSlots}\n      </igc-validator>\n    `;\n  }\n\n  private _target!: IgcFormControl;\n\n  @state()\n  private _hasSlottedContent = false;\n\n  @property({ type: Boolean })\n  public invalid = false;\n\n  @property({ attribute: false })\n  public set target(value: IgcFormControl) {\n    if (this._target === value) {\n      return;\n    }\n\n    this._target?.removeEventListener('invalid', this);\n    this._target = value;\n    this._target.addEventListener('invalid', this);\n  }\n\n  public get target(): IgcFormControl {\n    return this._target;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this);\n    return root;\n  }\n\n  /** @internal */\n  public handleEvent(event: Event): void {\n    switch (event.type) {\n      case 'invalid':\n        if (!this.invalid) {\n          this.invalid = true;\n        }\n        break;\n      case 'slotchange': {\n        const newHasSlottedContent = hasProjectedValidation(this);\n        if (this._hasSlottedContent !== newHasSlottedContent) {\n          this._hasSlottedContent = newHasSlottedContent;\n        }\n        break;\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  protected _renderValidationMessage(slotName: string): TemplateResult {\n    const hasProjectedIcon = hasProjectedValidation(this, slotName);\n    const parts = { 'validation-message': true, empty: !hasProjectedIcon };\n    const icon = hasProjectedIcon\n      ? html`\n          <igc-icon\n            aria-hidden=\"true\"\n            name=\"error\"\n            part=\"validation-icon\"\n          ></igc-icon>\n        `\n      : nothing;\n\n    return html`\n      <div part=${partMap(parts)}>\n        ${icon}\n        <slot name=${slotName}></slot>\n      </div>\n    `;\n  }\n\n  protected *_renderValidationSlots(\n    validity: ValidityState,\n    projected = false\n  ): Generator<TemplateResult> {\n    if (!validity.valid) {\n      yield projected\n        ? html`<slot name=\"invalid\" slot=\"invalid\"></slot>`\n        : this._renderValidationMessage('invalid');\n    }\n\n    for (const key in validity) {\n      if (key !== 'valid' && validity[key as keyof ValidityState]) {\n        const name = toKebabCase(key);\n        yield projected\n          ? html`<slot name=${name} slot=${name}></slot>`\n          : this._renderValidationMessage(name);\n      }\n    }\n  }\n\n  protected _renderHelper(): TemplateResult | typeof nothing {\n    return this.invalid && this._hasSlottedContent\n      ? nothing\n      : html`<slot name=\"helper-text\"></slot>`;\n  }\n\n  protected override render(): TemplateResult {\n    const slots = this.invalid\n      ? this._renderValidationSlots(this.target.validity)\n      : nothing;\n\n    return html`\n      <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>\n        ${slots}${this._renderHelper()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-validator': IgcValidationContainerComponent;\n  }\n}\n"]}