npm - igniteui-webcomponents - Versions diffs - 5.3.0-beta.2 → 5.3.0 - Mend

igniteui-webcomponents 5.3.0-beta.2 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

package/components/textarea/themes/shared/textarea.material.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export 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}:host(:focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{transform:translateY(0);inset-block-start:calc(1.25rem/4);font-size:.75rem}:host([outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{display:inline-block;position:relative;inset-block:0;transform:translateY(-50%);margin-block-end:auto;padding-inline-end:0;font-size:.75rem}: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:center;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]){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]: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)}`;
+export 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}:host(:focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{transform:translateY(0);inset-block-start:calc(1.25rem/4);font-size:.75rem}:host([outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{display:inline-block;position:relative;inset-block:0;transform:translateY(-50%);margin-block-end:auto;padding-inline-end:0;font-size:.75rem}: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:center;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]){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)}`;
 //# sourceMappingURL=textarea.material.css.js.map

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

	@@ -1 +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,msUAAmsU,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}:host(:focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{transform:translateY(0);inset-block-start:calc(1.25rem/4);font-size:.75rem}:host([outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{display:inline-block;position:relative;inset-block:0;transform:translateY(-50%);margin-block-end:auto;padding-inline-end:0;font-size:.75rem}: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:center;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]){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]: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"]}
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,mjVAAmjV,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}:host(:focus-within) [part~=label],:host(:not([outlined])) [part~=placeholder] [part=label],:host(:not([outlined])) [part~=filled] [part=label]{transform:translateY(0);inset-block-start:calc(1.25rem/4);font-size:.75rem}:host([outlined]:focus-within) [part=label],:host([outlined]) [part~=placeholder] [part=label],:host([outlined]) [part~=filled] [part=label]{display:inline-block;position:relative;inset-block:0;transform:translateY(-50%);margin-block-end:auto;padding-inline-end:0;font-size:.75rem}: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:center;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]){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"]}

package/components/tile-manager/position.d.ts CHANGED Viewed

@@ -13,6 +13,10 @@ declare class TilesState {
     /** Updates the default (manual) slot of the tile manager with the current tiles. */
     assignTiles(): void;
     add(tile: IgcTileComponent): void;
+    /**
+     * Checks and adjusts tile spans based on the column count of the tile manager.
+     */
+    adjustTileGridPosition(): void;
     remove(tile: IgcTileComponent): void;
 }
 type TileDragStackEntry = {

package/components/tile-manager/position.js CHANGED Viewed

@@ -46,6 +46,24 @@ class TilesState {
                     : this._nextEmptyPosition++;
         }
     }
+    adjustTileGridPosition() {
+        const columnCount = this.manager.columnCount;
+        if (columnCount > 0) {
+            for (const tile of this.tiles) {
+                let colStart = tile.colStart || 0;
+                let colStartDelta = colStart > 0 ? 1 : 0;
+                const colSpan = tile.colSpan || 0;
+                if (colStart > columnCount) {
+                    colStart = 0;
+                    colStartDelta = 0;
+                    tile.colStart = 0;
+                }
+                if (colStart + colSpan > columnCount) {
+                    tile.colSpan = columnCount - colStart + colStartDelta;
+                }
+            }
+        }
+    }
     remove(tile) {
         for (const each of this.tiles) {
             if (each.position >= tile.position) {

package/components/tile-manager/position.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"position.js","sourceRoot":"","sources":["../../../src/components/tile-manager/position.ts"],"names":[],"mappings":"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","sourcesContent":["import { last, partition } from '../common/util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\nimport type IgcTileComponent from './tile.js';\n\nclass TilesState {\n private _nextEmptyPosition = 0;\n\n public manager: IgcTileManagerComponent;\n\n private get _tiles(): IgcTileComponent[] {\n return Array.from(\n this.manager.querySelectorAll<IgcTileComponent>(':scope > igc-tile')\n );\n }\n\n /*\n Returns the current tiles of the tile manager sorted by their position.\n /\n public get tiles(): IgcTileComponent[] {\n return this._tiles.toSorted((a, b) => a.position - b.position);\n }\n\n constructor(manager: IgcTileManagerComponent) {\n this.manager = manager;\n }\n\n public assignPositions(): void {\n let nextPosition = 0;\n const [positionedTiles, nonPositionedTiles] = partition(\n this._tiles,\n (tile) => tile.position !== -1\n );\n\n positionedTiles.sort((a, b) => a.position - b.position);\n\n for (const tile of positionedTiles) {\n // Fill any unassigned slots before the next assigned tile's position\n while (nextPosition < tile.position && nonPositionedTiles.length > 0) {\n const nonPositionedTile = nonPositionedTiles.shift()!;\n nonPositionedTile.position = nextPosition++;\n }\n\n tile.position = nextPosition;\n nextPosition = tile.position + 1;\n }\n\n for (const tile of nonPositionedTiles) {\n tile.position = nextPosition++;\n }\n }\n\n /* Updates the default (manual) slot of the tile manager with the current tiles. */\n public assignTiles(): void {\n this.manager.renderRoot.querySelector('slot')!.assign(...this._tiles);\n }\n\n public add(tile: IgcTileComponent): void {\n const tiles = this.tiles;\n\n if (tile.position > -1) {\n for (const each of tiles) {\n if (each !== tile && each.position >= tile.position) {\n each.position++;\n }\n }\n } else {\n const positionedTiles = this._tiles.filter((tile) => tile.position > -1);\n tile.position =\n positionedTiles.length > 1\n ? Math.max(...positionedTiles.map((tile) => tile.position)) + 1\n : this._nextEmptyPosition++;\n }\n }\n\n public remove(tile: IgcTileComponent): void {\n for (const each of this.tiles) {\n if (each.position >= tile.position) {\n each.position--;\n }\n }\n }\n}\n\ntype TileDragStackEntry = {\n tile: IgcTileComponent;\n position: number;\n column?: number \| null;\n row?: number \| null;\n};\n\nclass TileDragStack {\n private _stack: TileDragStackEntry[] = [];\n\n public peek(): IgcTileComponent {\n return last(this._stack).tile;\n }\n\n public pop(): TileDragStackEntry \| undefined {\n return this._stack.pop();\n }\n\n public push(tile: IgcTileComponent): void {\n this._stack.push({\n tile,\n position: tile.position,\n column: tile.colStart,\n row: tile.rowStart,\n });\n }\n\n public restore(): void {\n for (const {\n tile,\n position,\n column: colStart,\n row: rowStart,\n } of this._stack.toReversed()) {\n Object.assign(tile, {\n position,\n colStart,\n rowStart,\n });\n }\n }\n\n public reset(): void {\n this._stack = [];\n }\n}\n\nexport function createTilesState(manager: IgcTileManagerComponent) {\n return new TilesState(manager);\n}\n\nexport function createTileDragStack(): TileDragStack {\n return new TileDragStack();\n}\n\nexport function swapTiles(a: IgcTileComponent, b: IgcTileComponent): void {\n [a.colStart, b.colStart] = [b.colStart, a.colStart];\n [a.rowStart, b.rowStart] = [b.rowStart, a.colStart];\n [a.position, b.position] = [b.position, a.position];\n}\n"]}
1	+ {"version":3,"file":"position.js","sourceRoot":"","sources":["../../../src/components/tile-manager/position.ts"],"names":[],"mappings":"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","sourcesContent":["import { last, partition } from '../common/util.js';\nimport type IgcTileManagerComponent from './tile-manager.js';\nimport type IgcTileComponent from './tile.js';\n\nclass TilesState {\n private _nextEmptyPosition = 0;\n\n public manager: IgcTileManagerComponent;\n\n private get _tiles(): IgcTileComponent[] {\n return Array.from(\n this.manager.querySelectorAll<IgcTileComponent>(':scope > igc-tile')\n );\n }\n\n /*\n Returns the current tiles of the tile manager sorted by their position.\n /\n public get tiles(): IgcTileComponent[] {\n return this._tiles.toSorted((a, b) => a.position - b.position);\n }\n\n constructor(manager: IgcTileManagerComponent) {\n this.manager = manager;\n }\n\n public assignPositions(): void {\n let nextPosition = 0;\n const [positionedTiles, nonPositionedTiles] = partition(\n this._tiles,\n (tile) => tile.position !== -1\n );\n\n positionedTiles.sort((a, b) => a.position - b.position);\n\n for (const tile of positionedTiles) {\n // Fill any unassigned slots before the next assigned tile's position\n while (nextPosition < tile.position && nonPositionedTiles.length > 0) {\n const nonPositionedTile = nonPositionedTiles.shift()!;\n nonPositionedTile.position = nextPosition++;\n }\n\n tile.position = nextPosition;\n nextPosition = tile.position + 1;\n }\n\n for (const tile of nonPositionedTiles) {\n tile.position = nextPosition++;\n }\n }\n\n /* Updates the default (manual) slot of the tile manager with the current tiles. /\n public assignTiles(): void {\n this.manager.renderRoot.querySelector('slot')!.assign(...this._tiles);\n }\n\n public add(tile: IgcTileComponent): void {\n const tiles = this.tiles;\n\n if (tile.position > -1) {\n for (const each of tiles) {\n if (each !== tile && each.position >= tile.position) {\n each.position++;\n }\n }\n } else {\n const positionedTiles = this._tiles.filter((tile) => tile.position > -1);\n tile.position =\n positionedTiles.length > 1\n ? Math.max(...positionedTiles.map((tile) => tile.position)) + 1\n : this._nextEmptyPosition++;\n }\n }\n\n /\n Checks and adjusts tile spans based on the column count of the tile manager.\n */\n public adjustTileGridPosition(): void {\n const columnCount = this.manager.columnCount;\n\n if (columnCount > 0) {\n for (const tile of this.tiles) {\n let colStart = tile.colStart \|\| 0;\n let colStartDelta = colStart > 0 ? 1 : 0;\n const colSpan = tile.colSpan \|\| 0;\n\n if (colStart > columnCount) {\n colStart = 0;\n colStartDelta = 0;\n tile.colStart = 0;\n }\n\n if (colStart + colSpan > columnCount) {\n tile.colSpan = columnCount - colStart + colStartDelta;\n }\n }\n }\n }\n\n public remove(tile: IgcTileComponent): void {\n for (const each of this.tiles) {\n if (each.position >= tile.position) {\n each.position--;\n }\n }\n }\n}\n\ntype TileDragStackEntry = {\n tile: IgcTileComponent;\n position: number;\n column?: number \| null;\n row?: number \| null;\n};\n\nclass TileDragStack {\n private _stack: TileDragStackEntry[] = [];\n\n public peek(): IgcTileComponent {\n return last(this._stack).tile;\n }\n\n public pop(): TileDragStackEntry \| undefined {\n return this._stack.pop();\n }\n\n public push(tile: IgcTileComponent): void {\n this._stack.push({\n tile,\n position: tile.position,\n column: tile.colStart,\n row: tile.rowStart,\n });\n }\n\n public restore(): void {\n for (const {\n tile,\n position,\n column: colStart,\n row: rowStart,\n } of this._stack.toReversed()) {\n Object.assign(tile, {\n position,\n colStart,\n rowStart,\n });\n }\n }\n\n public reset(): void {\n this._stack = [];\n }\n}\n\nexport function createTilesState(manager: IgcTileManagerComponent) {\n return new TilesState(manager);\n}\n\nexport function createTileDragStack(): TileDragStack {\n return new TileDragStack();\n}\n\nexport function swapTiles(a: IgcTileComponent, b: IgcTileComponent): void {\n [a.colStart, b.colStart] = [b.colStart, a.colStart];\n [a.rowStart, b.rowStart] = [b.rowStart, a.colStart];\n [a.position, b.position] = [b.position, a.position];\n}\n"]}

package/components/tile-manager/{tile-util.d.ts → resize-state.d.ts} RENAMED Viewed

@@ -1,25 +1,9 @@
 import type { ResizeState } from '../resize-container/types.js';
 import type IgcTileComponent from './tile.js';
-type TilePosition = {
-    start: number;
-    span: number;
-};
-type TileGridPosition = {
-    column: TilePosition;
-    row: TilePosition;
-};
-type TileResizeDimensions = {
-    width: number | null;
-    height: number | null;
-};
-export declare const DraggedTileAttribute = "data-drag-ghost-tile";
-type TileGridDimension = {
-    count: number;
-    entries: number[];
-    minSize: number;
-};
+import type { TileGridDimension, TileGridPosition, TileResizeDimensions } from './types.js';
 declare class TileResizeState {
     private _initialPosition;
+    private _resizeUtil;
     protected _gap: number;
     protected _prevDeltaX: number;
     protected _prevDeltaY: number;
@@ -29,7 +13,6 @@ declare class TileResizeState {
     protected _columns: TileGridDimension;
     protected _rows: TileGridDimension;
     resizedDimensions: TileResizeDimensions;
-    get emptyResizeDimensions(): TileResizeDimensions;
     get gap(): number;
     get position(): TileGridPosition;
     get columns(): TileGridDimension;
@@ -41,28 +24,15 @@ declare class TileResizeState {
      * Calculates and returns the CSS column and row properties of a tile after resizing,
      * based on its new dimensions and starting position.
      */
-    getResizedPosition(rect: DOMRect): {
-        column: string;
-        row: string;
+    calculateResizedGridPosition(rect: DOMRect): {
+        colSpan: number;
+        rowSpan: number;
     };
-    calculateResizedSize(grid: HTMLElement): {
-        width: number;
-        height: number;
-    };
-    /**
-     * Checks and adjusts tile spans based on the column count of the tile manager.
-     */
-    adjustTileGridPosition(tiles: IgcTileComponent[]): void;
-    private calculateSnappedDimension;
-    private calculateResizedSpan;
     private initState;
     private calculateTileStartPosition;
-    private calculatePosition;
-    private calculateAdditionalSpan;
-    private calculateSizeFromEntries;
     private getGridOffset;
+    private getResizeProps;
+    private getResizeSpanProps;
 }
 export declare function createTileResizeState(): TileResizeState;
-export declare function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent;
-export declare function createTileGhost(): HTMLElement;
 export {};

package/components/tile-manager/resize-state.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { asNumber, first } from '../common/util.js';
+import { ResizeUtil } from './resize-util.js';
+const CssValues = new RegExp(/(?<start>\d+)?\s*\/?\s*span\s*(?<span>\d+)?/gi);
+function parseTileGridRect(tile) {
+    const computed = getComputedStyle(tile);
+    const { gridColumn, gridRow } = computed;
+    const [column, row] = [
+        first(Array.from(gridColumn.matchAll(CssValues))).groups,
+        first(Array.from(gridRow.matchAll(CssValues))).groups,
+    ];
+    return {
+        column: {
+            start: asNumber(column.start, -1),
+            span: asNumber(column.span, -1),
+        },
+        row: { start: asNumber(row.start, -1), span: asNumber(row.span, -1) },
+    };
+}
+function parseTileParentGrid(gridContainer) {
+    const computed = getComputedStyle(gridContainer);
+    const { gap, gridTemplateColumns, gridTemplateRows } = computed;
+    const columns = gridTemplateColumns.split(' ').map(asNumber);
+    const rows = gridTemplateRows.split(' ').map(asNumber);
+    return {
+        gap: asNumber(gap),
+        columns: {
+            count: columns.length,
+            entries: columns,
+            minSize: asNumber(computed.getPropertyValue('--min-col-width')),
+        },
+        rows: {
+            count: rows.length,
+            entries: rows,
+            minSize: asNumber(computed.getPropertyValue('--min-row-height')),
+        },
+    };
+}
+class TileResizeState {
+    constructor() {
+        this._gap = 0;
+        this._prevDeltaX = 0;
+        this._prevDeltaY = 0;
+        this._prevSnappedWidth = 0;
+        this._prevSnappedHeight = 0;
+        this._position = {
+            column: { start: 0, span: 0 },
+            row: { start: 0, span: 0 },
+        };
+        this._columns = {
+            count: 0,
+            entries: [],
+            minSize: 0,
+        };
+        this._rows = {
+            count: 0,
+            entries: [],
+            minSize: 0,
+        };
+        this.resizedDimensions = {
+            width: null,
+            height: null,
+        };
+    }
+    get gap() {
+        return this._gap;
+    }
+    get position() {
+        return structuredClone(this._position);
+    }
+    get columns() {
+        return structuredClone(this._columns);
+    }
+    get rows() {
+        return structuredClone(this._rows);
+    }
+    calculateSnappedWidth(state) {
+        const resizeProps = this.getResizeProps(state);
+        const snappedDimension = this._resizeUtil.calculateSnappedDimension(resizeProps);
+        this._prevDeltaX = snappedDimension.newDelta;
+        this._prevSnappedWidth = snappedDimension.snappedSize;
+        return snappedDimension.snappedSize;
+    }
+    calculateSnappedHeight(state) {
+        const resizeProps = this.getResizeProps(state, true);
+        const snappedDimension = this._resizeUtil.calculateSnappedDimension(resizeProps);
+        this._prevDeltaY = snappedDimension.newDelta;
+        this._prevSnappedHeight = snappedDimension.snappedSize;
+        return snappedDimension.snappedSize;
+    }
+    updateState(tileRect, tile, grid) {
+        this.initState(grid, tile);
+        this.calculateTileStartPosition(grid, tileRect);
+    }
+    calculateResizedGridPosition(rect) {
+        const colProps = this.getResizeSpanProps(rect);
+        const rowProps = this.getResizeSpanProps(rect, true);
+        this._position.column.span =
+            this._resizeUtil.calculateResizedSpan(colProps);
+        this._position.row.span = this._resizeUtil.calculateResizedSpan(rowProps);
+        return {
+            colSpan: this._position.column.span,
+            rowSpan: this._position.row.span,
+        };
+    }
+    initState(grid, tile) {
+        const { gap, columns, rows } = parseTileParentGrid(grid);
+        this._resizeUtil = new ResizeUtil(gap);
+        this._initialPosition = parseTileGridRect(tile);
+        this._position = structuredClone(this._initialPosition);
+        this._gap = gap;
+        this._columns = columns;
+        this._rows = rows;
+        this._prevDeltaX = 0;
+        this._prevDeltaY = 0;
+        this._prevSnappedWidth = 0;
+        this._prevSnappedHeight = 0;
+    }
+    calculateTileStartPosition(grid, tileRect) {
+        if (this._position.column.start < 0) {
+            const offsetX = this.getGridOffset(grid, 'horizontal');
+            this._position.column.start = this._resizeUtil.calculatePosition(tileRect.left + window.scrollX + grid.scrollLeft - offsetX, this._columns.entries);
+        }
+        if (this._position.row.start < 0) {
+            const offsetY = this.getGridOffset(grid, 'vertical');
+            this._position.row.start = this._resizeUtil.calculatePosition(tileRect.top + window.scrollY - offsetY, this._rows.entries);
+        }
+    }
+    getGridOffset(grid, axis) {
+        const gridRect = grid.getBoundingClientRect();
+        const computed = getComputedStyle(grid);
+        return axis === 'horizontal'
+            ? gridRect.left +
+                window.scrollX +
+                grid.scrollLeft +
+                Number.parseFloat(computed.paddingLeft)
+            : gridRect.top + window.scrollY + Number.parseFloat(computed.paddingTop);
+    }
+    getResizeProps(state, isRow = false) {
+        return isRow
+            ? {
+                currentDelta: state.deltaY,
+                currentSize: state.current.height,
+                prevDelta: this._prevDeltaY,
+                gridEntries: this._rows.entries,
+                startIndex: this._position.row.start,
+                prevSnapped: this._prevSnappedHeight,
+            }
+            : {
+                currentDelta: state.deltaX,
+                currentSize: state.current.width,
+                prevDelta: this._prevDeltaX,
+                gridEntries: this._columns.entries,
+                startIndex: this._position.column.start,
+                prevSnapped: this._prevSnappedWidth,
+            };
+    }
+    getResizeSpanProps(rect, isRow = false) {
+        return isRow
+            ? {
+                targetSize: rect.height,
+                tilePosition: this.position.row,
+                tileGridDimension: this.rows,
+                gap: this.gap,
+                isRow,
+            }
+            : {
+                targetSize: rect.width,
+                tilePosition: this.position.column,
+                tileGridDimension: this.columns,
+                gap: this.gap,
+                isRow,
+            };
+    }
+}
+export function createTileResizeState() {
+    return new TileResizeState();
+}
+//# sourceMappingURL=resize-state.js.map

package/components/tile-manager/resize-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"resize-state.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { asNumber, first } from '../common/util.js';\nimport type { ResizeState } from '../resize-container/types.js';\nimport { ResizeUtil } from './resize-util.js';\nimport type IgcTileComponent from './tile.js';\nimport type {\n ResizeProps,\n ResizeSpanProps,\n TileGridDimension,\n TileGridPosition,\n TileResizeDimensions,\n} from './types.js';\n\nconst CssValues = new RegExp(/(?<start>\\d+)?\\s*\\/?\\s*span\\s*(?<span>\\d+)?/gi);\n\nfunction parseTileGridRect(tile: IgcTileComponent): TileGridPosition {\n const computed = getComputedStyle(tile);\n const { gridColumn, gridRow } = computed;\n\n const [column, row] = [\n first(Array.from(gridColumn.matchAll(CssValues))).groups!,\n first(Array.from(gridRow.matchAll(CssValues))).groups!,\n ];\n\n return {\n column: {\n start: asNumber(column.start, -1),\n span: asNumber(column.span, -1),\n },\n row: { start: asNumber(row.start, -1), span: asNumber(row.span, -1) },\n };\n}\n\nfunction parseTileParentGrid(gridContainer: HTMLElement) {\n const computed = getComputedStyle(gridContainer);\n const { gap, gridTemplateColumns, gridTemplateRows } = computed;\n\n const columns = gridTemplateColumns.split(' ').map(asNumber);\n const rows = gridTemplateRows.split(' ').map(asNumber);\n\n return {\n gap: asNumber(gap),\n columns: {\n count: columns.length,\n entries: columns,\n minSize: asNumber(computed.getPropertyValue('--min-col-width')),\n },\n rows: {\n count: rows.length,\n entries: rows,\n minSize: asNumber(computed.getPropertyValue('--min-row-height')),\n },\n };\n}\n\nclass TileResizeState {\n private _initialPosition!: TileGridPosition;\n private _resizeUtil!: ResizeUtil;\n\n protected _gap = 0;\n protected _prevDeltaX = 0;\n protected _prevDeltaY = 0;\n\n protected _prevSnappedWidth = 0;\n protected _prevSnappedHeight = 0;\n\n protected _position: TileGridPosition = {\n column: { start: 0, span: 0 },\n row: { start: 0, span: 0 },\n };\n\n protected _columns: TileGridDimension = {\n count: 0,\n entries: [],\n minSize: 0,\n };\n\n protected _rows: TileGridDimension = {\n count: 0,\n entries: [],\n minSize: 0,\n };\n\n public resizedDimensions: TileResizeDimensions = {\n width: null,\n height: null,\n };\n\n public get gap(): number {\n return this._gap;\n }\n\n public get position(): TileGridPosition {\n return structuredClone(this._position);\n }\n\n public get columns(): TileGridDimension {\n return structuredClone(this._columns);\n }\n\n public get rows(): TileGridDimension {\n return structuredClone(this._rows);\n }\n\n public calculateSnappedWidth(state: ResizeState): number {\n const resizeProps = this.getResizeProps(state);\n const snappedDimension =\n this._resizeUtil.calculateSnappedDimension(resizeProps);\n\n this._prevDeltaX = snappedDimension.newDelta;\n this._prevSnappedWidth = snappedDimension.snappedSize;\n return snappedDimension.snappedSize;\n }\n\n public calculateSnappedHeight(state: ResizeState): number {\n const resizeProps = this.getResizeProps(state, true);\n const snappedDimension =\n this._resizeUtil.calculateSnappedDimension(resizeProps);\n\n this._prevDeltaY = snappedDimension.newDelta;\n this._prevSnappedHeight = snappedDimension.snappedSize;\n return snappedDimension.snappedSize;\n }\n\n public updateState(\n tileRect: DOMRect,\n tile: IgcTileComponent,\n grid: HTMLElement\n ): void {\n this.initState(grid, tile);\n this.calculateTileStartPosition(grid, tileRect);\n }\n\n /**\n * Calculates and returns the CSS column and row properties of a tile after resizing,\n * based on its new dimensions and starting position.\n */\n public calculateResizedGridPosition(rect: DOMRect) {\n const colProps = this.getResizeSpanProps(rect);\n const rowProps = this.getResizeSpanProps(rect, true);\n\n // REVIEW pass col minSize and allowOverflow?\n this._position.column.span =\n this._resizeUtil.calculateResizedSpan(colProps);\n this._position.row.span = this._resizeUtil.calculateResizedSpan(rowProps);\n\n return {\n colSpan: this._position.column.span,\n rowSpan: this._position.row.span,\n };\n }\n\n private initState(grid: HTMLElement, tile: IgcTileComponent): void {\n const { gap, columns, rows } = parseTileParentGrid(grid);\n\n this._resizeUtil = new ResizeUtil(gap);\n this._initialPosition = parseTileGridRect(tile);\n this._position = structuredClone(this._initialPosition);\n\n this._gap = gap;\n this._columns = columns;\n this._rows = rows;\n this._prevDeltaX = 0;\n this._prevDeltaY = 0;\n this._prevSnappedWidth = 0;\n this._prevSnappedHeight = 0;\n }\n\n private calculateTileStartPosition(\n grid: HTMLElement,\n tileRect: DOMRect\n ): void {\n if (this._position.column.start < 0) {\n const offsetX = this.getGridOffset(grid, 'horizontal');\n\n this._position.column.start = this._resizeUtil.calculatePosition(\n tileRect.left + window.scrollX + grid.scrollLeft - offsetX,\n this._columns.entries\n );\n }\n\n if (this._position.row.start < 0) {\n const offsetY = this.getGridOffset(grid, 'vertical');\n\n this._position.row.start = this._resizeUtil.calculatePosition(\n tileRect.top + window.scrollY - offsetY,\n this._rows.entries\n );\n }\n }\n\n private getGridOffset(\n grid: HTMLElement,\n axis: 'horizontal' | 'vertical'\n ): number {\n const gridRect = grid.getBoundingClientRect();\n const computed = getComputedStyle(grid);\n\n return axis === 'horizontal'\n ? gridRect.left +\n window.scrollX +\n grid.scrollLeft +\n Number.parseFloat(computed.paddingLeft)\n : gridRect.top + window.scrollY + Number.parseFloat(computed.paddingTop);\n }\n\n private getResizeProps(state: ResizeState, isRow = false): ResizeProps {\n return isRow\n ? {\n currentDelta: state.deltaY,\n currentSize: state.current.height,\n prevDelta: this._prevDeltaY,\n gridEntries: this._rows.entries,\n startIndex: this._position.row.start,\n prevSnapped: this._prevSnappedHeight,\n }\n : {\n currentDelta: state.deltaX,\n currentSize: state.current.width,\n prevDelta: this._prevDeltaX,\n gridEntries: this._columns.entries,\n startIndex: this._position.column.start,\n prevSnapped: this._prevSnappedWidth,\n };\n }\n\n private getResizeSpanProps(rect: DOMRect, isRow = false): ResizeSpanProps {\n return isRow\n ? {\n targetSize: rect.height,\n tilePosition: this.position.row,\n tileGridDimension: this.rows,\n gap: this.gap,\n isRow,\n }\n : {\n targetSize: rect.width,\n tilePosition: this.position.column,\n tileGridDimension: this.columns,\n gap: this.gap,\n isRow,\n };\n }\n}\n\nexport function createTileResizeState(): TileResizeState {\n return new TileResizeState();\n}\n"]}

package/components/tile-manager/resize-util.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { ResizeProps, ResizeSpanProps, SnappedDimension } from './types.js';
+export declare class ResizeUtil {
+    private gap;
+    constructor(gap: number);
+    calculateSnappedDimension(resizeProps: ResizeProps): SnappedDimension;
+    calculateResizedSpan(props: ResizeSpanProps): number;
+    calculatePosition(targetPosition: number, sizes: number[]): number;
+}

package/components/tile-manager/resize-util.js ADDED Viewed

@@ -0,0 +1,84 @@
+export class ResizeUtil {
+    constructor(gap) {
+        this.gap = gap;
+    }
+    calculateSnappedDimension(resizeProps) {
+        const { currentDelta, prevDelta, currentSize, gridEntries, startIndex, prevSnapped, } = resizeProps;
+        const effectiveDelta = currentDelta - prevDelta;
+        let snappedSize = currentSize;
+        if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {
+            return {
+                snappedSize: gridEntries[startIndex - 1],
+                newDelta: currentDelta,
+            };
+        }
+        if (effectiveDelta === 0 && prevSnapped) {
+            return { snappedSize: prevSnapped, newDelta: currentDelta };
+        }
+        let accumulated = 0;
+        for (let i = startIndex - 1; i < gridEntries.length; i++) {
+            const currentEntry = gridEntries[i];
+            const nextEntry = gridEntries[i + 1] ?? currentEntry;
+            const prevEntry = i > 0 ? gridEntries[i - 1] : currentEntry;
+            const halfwayExpand = accumulated + currentEntry + this.gap + nextEntry / 2;
+            const halfwayShrink = accumulated + prevEntry / 2;
+            const entryEnd = accumulated + currentEntry + this.gap;
+            if (effectiveDelta > 0) {
+                if (currentSize >= halfwayExpand &&
+                    currentSize <= entryEnd + nextEntry) {
+                    snappedSize = entryEnd + nextEntry;
+                }
+            }
+            else if (effectiveDelta < 0) {
+                if (currentSize <= halfwayShrink &&
+                    currentSize > accumulated - this.gap) {
+                    snappedSize = accumulated - this.gap;
+                }
+            }
+            accumulated += currentEntry + this.gap;
+        }
+        return { snappedSize, newDelta: currentDelta };
+    }
+    calculateResizedSpan(props) {
+        const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;
+        const { entries, minSize } = tileGridDimension;
+        let accumulatedSize = 0;
+        let newSpan = tilePosition.span;
+        const sizesAfterStart = entries.slice(tilePosition.start - 1);
+        const availableSize = sizesAfterStart.reduce((sum, s) => sum + s, 0) +
+            (sizesAfterStart.length - 1) * gap;
+        if (targetSize <= sizesAfterStart[0] + gap) {
+            return 1;
+        }
+        if (Math.trunc(targetSize) > Math.trunc(availableSize)) {
+            const remainingSize = targetSize - availableSize;
+            const additionalSpan = Math.ceil(remainingSize / (minSize + gap));
+            newSpan = sizesAfterStart.length + additionalSpan;
+            return isRow ? newSpan : Math.min(entries.length, newSpan);
+        }
+        for (let i = tilePosition.start - 1; i < entries.length; i++) {
+            const currentSize = entries[i];
+            const nextSize = entries[i + 1] ?? currentSize;
+            const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;
+            if (targetSize > halfwayPoint) {
+                newSpan = i + 3 - tilePosition.start;
+            }
+            else {
+                break;
+            }
+            accumulatedSize += currentSize + gap;
+        }
+        return newSpan;
+    }
+    calculatePosition(targetPosition, sizes) {
+        let accumulatedSize = 0;
+        for (const [i, size] of sizes.entries()) {
+            accumulatedSize += size + this.gap;
+            if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - this.gap)) {
+                return i + 1;
+            }
+        }
+        return 1;
+    }
+}
+//# sourceMappingURL=resize-util.js.map

package/components/tile-manager/resize-util.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"resize-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-util.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n ResizeProps,\n ResizeSpanProps,\n SnappedDimension,\n} from './types.js';\n\nexport class ResizeUtil {\n private gap: number;\n\n constructor(gap: number) {\n this.gap = gap;\n }\n\n public calculateSnappedDimension(resizeProps: ResizeProps): SnappedDimension {\n const {\n currentDelta,\n prevDelta,\n currentSize,\n gridEntries,\n startIndex,\n prevSnapped,\n } = resizeProps;\n\n const effectiveDelta = currentDelta - prevDelta;\n let snappedSize = currentSize;\n\n // If current size is below minimum, force to the size of the starting cell.\n if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {\n return {\n snappedSize: gridEntries[startIndex - 1],\n newDelta: currentDelta,\n };\n }\n\n // If no change in delta and we have a snapped value, reuse it.\n if (effectiveDelta === 0 && prevSnapped) {\n return { snappedSize: prevSnapped, newDelta: currentDelta };\n }\n\n let accumulated = 0;\n for (let i = startIndex - 1; i < gridEntries.length; i++) {\n const currentEntry = gridEntries[i];\n const nextEntry = gridEntries[i + 1] ?? currentEntry;\n const prevEntry = i > 0 ? gridEntries[i - 1] : currentEntry;\n\n // Thresholds for snapping to the next or previous tile boundary.\n const halfwayExpand =\n accumulated + currentEntry + this.gap + nextEntry / 2;\n const halfwayShrink = accumulated + prevEntry / 2;\n const entryEnd = accumulated + currentEntry + this.gap;\n\n if (effectiveDelta > 0) {\n // Expanding: snap when passing the halfway threshold.\n if (\n currentSize >= halfwayExpand &&\n currentSize <= entryEnd + nextEntry\n ) {\n snappedSize = entryEnd + nextEntry;\n }\n } else if (effectiveDelta < 0) {\n // Shrinking: snap when falling below the halfway threshold.\n if (\n currentSize <= halfwayShrink &&\n currentSize > accumulated - this.gap\n ) {\n snappedSize = accumulated - this.gap;\n }\n }\n\n accumulated += currentEntry + this.gap;\n }\n\n return { snappedSize, newDelta: currentDelta };\n }\n\n public calculateResizedSpan(props: ResizeSpanProps): number {\n const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;\n const { entries, minSize } = tileGridDimension;\n\n let accumulatedSize = 0;\n let newSpan = tilePosition.span;\n\n const sizesAfterStart = entries.slice(tilePosition.start - 1);\n const availableSize =\n sizesAfterStart.reduce((sum, s) => sum + s, 0) +\n (sizesAfterStart.length - 1) * gap;\n\n if (targetSize <= sizesAfterStart[0] + gap) {\n return 1;\n }\n\n if (Math.trunc(targetSize) > Math.trunc(availableSize)) {\n const remainingSize = targetSize - availableSize;\n\n const additionalSpan = Math.ceil(remainingSize / (minSize + gap));\n newSpan = sizesAfterStart.length + additionalSpan;\n return isRow ? newSpan : Math.min(entries.length, newSpan);\n }\n\n for (let i = tilePosition.start - 1; i < entries.length; i++) {\n const currentSize = entries[i];\n const nextSize = entries[i + 1] ?? currentSize;\n\n const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;\n\n if (targetSize > halfwayPoint) {\n newSpan = i + 3 - tilePosition.start;\n } else {\n break;\n }\n\n accumulatedSize += currentSize + gap;\n }\n\n return newSpan;\n }\n\n public calculatePosition(targetPosition: number, sizes: number[]): number {\n let accumulatedSize = 0;\n\n for (const [i, size] of sizes.entries()) {\n accumulatedSize += size + this.gap;\n\n if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - this.gap)) {\n return i + 1;\n }\n }\n\n return 1;\n }\n}\n"]}

package/components/tile-manager/serializer.d.ts CHANGED Viewed

@@ -5,20 +5,15 @@ export interface SerializedTile {
     disableFullscreen: boolean;
     disableMaximize: boolean;
     disableResize: boolean;
-    gridColumn: string;
-    gridRow: string;
     maximized: boolean;
     position: number;
     rowSpan: number;
     rowStart: number | null;
-    tileId: string | null;
-    width: number | null;
-    height: number | null;
+    id: string | null;
 }
 declare class TileManagerSerializer {
     tileManager: IgcTileManagerComponent;
     constructor(tileManager: IgcTileManagerComponent);
-    private _getResizeContainer;
     save(): SerializedTile[];
     saveAsJSON(): string;
     load(tiles: SerializedTile[]): void;