npm - @pine-ds/core - Versions diffs - 3.5.0 → 3.5.2 - Mend

@pine-ds/core 3.5.0 → 3.5.2

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 (170) hide show

package/dist/cjs/pds-box.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-box.entry.cjs.js","mappings":"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","names":["normalizeColorValue","h","Host"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as ;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n\n// Align Self helpers\n.pds-align-self-start {\n align-self: start;\n}\n\n.pds-align-self-center {\n align-self: center;\n}\n\n.pds-align-self-end {\n align-self: end;\n}\n\n.pds-align-self-baseline {\n align-self: baseline;\n}\n\n.pds-align-self-stretch {\n align-self: stretch;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /*\n Defines how items within the box are aligned.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue start\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n /\n @Prop() wrap?: boolean;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink` \| string;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-box.entry.cjs.js","mappings":"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","names":["normalizeColorValue","h","Host"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as ;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n\n &[min-height] {\n min-height: var(--sizing-min-height-box);\n }\n\n &[min-width] {\n min-width: var(--sizing-min-width-box);\n }\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-row > .pds-box[class='pds-box-'] {\n flex-basis: auto;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Maps for flex properties\n$justify-content-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'space-between': space-between,\n 'space-around': space-around,\n 'space-evenly': space-evenly\n);\n\n$align-items-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$align-self-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$breakpoints: (\n 'xs': '(max-width: 575px)',\n 'sm': '(min-width: 576px)',\n 'md': '(min-width: 768px)',\n 'lg': '(min-width: 992px)',\n 'xl': '(min-width: 1200px)'\n);\n\n// Justify Content helpers\n@each $name, $value in $justify-content-values {\n .pds-justify-content-#{$name} {\n justify-content: $value;\n }\n}\n\n// Responsive Justify Content helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $justify-content-values {\n .pds-justify-content-#{$breakpoint-name}-#{$name} {\n justify-content: $value;\n }\n }\n }\n}\n\n// Align Items helpers\n@each $name, $value in $align-items-values {\n .pds-align-items-#{$name} {\n align-items: $value;\n }\n}\n\n// Responsive Align Items helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-items-values {\n .pds-align-items-#{$breakpoint-name}-#{$name} {\n align-items: $value;\n }\n }\n }\n}\n\n// Align Self helpers\n@each $name, $value in $align-self-values {\n .pds-align-self-#{$name} {\n align-self: $value;\n }\n}\n\n// Responsive Align Self helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-self-values {\n .pds-align-self-#{$breakpoint-name}-#{$name} {\n align-self: $value;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /\n Defines how items within the box are aligned.\n * @defaultValue stretch\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch` ;\n\n /\n Defines how items within the box are aligned at the XS breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsXs?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the SM breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsSm?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the MD breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsMd?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the LG breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsLg?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the XL breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsXl?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue stretch\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container at the XS breakpoint.\n \n /\n @Prop() alignSelfXs?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the SM breakpoint.\n \n /\n @Prop() alignSelfSm?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the MD breakpoint.\n \n /\n @Prop() alignSelfMd?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the LG breakpoint.\n \n /\n @Prop() alignSelfLg?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the XL breakpoint.\n \n /\n @Prop() alignSelfXl?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n /\n @Prop() wrap?: boolean;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink` \| string;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the XS breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentXs?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the SM breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentSm?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the MD breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentMd?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the LG breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentLg?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the XL breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentXl?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop({ reflect: true }) minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop({ reflect: true }) minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}\n ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}\n ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}\n ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}\n ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}\n ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}\n ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}\n ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}\n ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}\n ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}\n ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}\n ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}\n ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/pds-box.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-box.entry.cjs.js","sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as ;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n\n// Align Self helpers\n.pds-align-self-start {\n align-self: start;\n}\n\n.pds-align-self-center {\n align-self: center;\n}\n\n.pds-align-self-end {\n align-self: end;\n}\n\n.pds-align-self-baseline {\n align-self: baseline;\n}\n\n.pds-align-self-stretch {\n align-self: stretch;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /*\n Defines how items within the box are aligned.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue start\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n /\n @Prop() wrap?: boolean;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink` \| string;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"names":["normalizeColorValue","h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"pds-box.entry.cjs.js","sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@use './pds-box.mixins' as ;\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n\n &[min-height] {\n min-height: var(--sizing-min-height-box);\n }\n\n &[min-width] {\n min-width: var(--sizing-min-width-box);\n }\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-row > .pds-box[class='pds-box-'] {\n flex-basis: auto;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-125);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Margin helpers\n.pds-margin-block-start-xxs {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-start-xs {\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-start-sm {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-start-md {\n margin-block-start: var(--pine-dimension-md);\n}\n\n.pds-margin-block-start-lg {\n margin-block-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-start-xl {\n margin-block-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-start-xxl {\n margin-block-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-start-none {\n margin-inline-start: 0;\n}\n\n.pds-margin-inline-start-xxs {\n margin-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-start-xs {\n margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-start-sm {\n margin-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-start-md {\n margin-inline-start: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-start-lg {\n margin-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-start-xl {\n margin-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-start-xxl {\n margin-inline-start: var(--pine-dimension-2xl);\n}\n\n.pds-margin-inline-end-none {\n margin-inline-end: 0;\n}\n\n.pds-margin-inline-end-xxs {\n margin-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-inline-end-xs {\n margin-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-inline-end-sm {\n margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-inline-end-md {\n margin-inline-end: var(--pine-dimension-md);\n}\n\n.pds-margin-inline-end-lg {\n margin-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-inline-end-xl {\n margin-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-inline-end-xxl {\n margin-inline-end: var(--pine-dimension-2xl);\n}\n\n.pds-margin-block-end-none {\n margin-block-end: 0;\n}\n\n.pds-margin-block-end-xxs {\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-margin-block-end-xs {\n margin-block-end: var(--pine-dimension-xs);\n}\n\n.pds-margin-block-end-sm {\n margin-block-end: var(--pine-dimension-sm);\n}\n\n.pds-margin-block-end-md {\n margin-block-end: var(--pine-dimension-md);\n}\n\n.pds-margin-block-end-lg {\n margin-block-end: var(--pine-dimension-lg);\n}\n\n.pds-margin-block-end-xl {\n margin-block-end: var(--pine-dimension-xl);\n}\n\n.pds-margin-block-end-xxl {\n margin-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Padding block start helpers\n.pds-padding-block-start-none {\n padding-block-start: var(--pine-dimension-none);\n}\n\n.pds-padding-block-start-xxs {\n padding-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-start-xs {\n padding-block-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-start-sm {\n padding-block-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-start-md {\n padding-block-start: var(--pine-dimension-md);\n}\n\n.pds-padding-block-start-lg {\n padding-block-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-start-xl {\n padding-block-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-start-xxl {\n padding-block-start: var(--pine-dimension-2xl);\n}\n\n// Padding block end helpers\n.pds-padding-block-end-none {\n padding-block-end: var(--pine-dimension-none);\n}\n\n.pds-padding-block-end-xxs {\n padding-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-end-xs {\n padding-block-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-end-sm {\n padding-block-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-end-md {\n padding-block-end: var(--pine-dimension-md);\n}\n\n.pds-padding-block-end-lg {\n padding-block-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-end-xl {\n padding-block-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-end-xxl {\n padding-block-end: var(--pine-dimension-2xl);\n}\n\n// Padding inline start helpers\n.pds-padding-inline-start-none {\n padding-inline-start: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-start-xxs {\n padding-inline-start: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-start-xs {\n padding-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-start-sm {\n padding-inline-start: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-start-md {\n padding-inline-start: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-start-lg {\n padding-inline-start: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-start-xl {\n padding-inline-start: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-start-xxl {\n padding-inline-start: var(--pine-dimension-2xl);\n}\n\n// Padding inline end helpers\n.pds-padding-inline-end-none {\n padding-inline-end: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-end-xxs {\n padding-inline-end: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-end-xs {\n padding-inline-end: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-end-sm {\n padding-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-end-md {\n padding-inline-end: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-end-lg {\n padding-inline-end: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-end-xl {\n padding-inline-end: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-end-xxl {\n padding-inline-end: var(--pine-dimension-2xl);\n}\n\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Flex Wrap helpers\n.pds-box--wrap {\n flex-wrap: wrap;\n}\n\n// Maps for flex properties\n$justify-content-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'space-between': space-between,\n 'space-around': space-around,\n 'space-evenly': space-evenly\n);\n\n$align-items-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$align-self-values: (\n 'start': start,\n 'center': center,\n 'end': end,\n 'baseline': baseline,\n 'stretch': stretch\n);\n\n$breakpoints: (\n 'xs': '(max-width: 575px)',\n 'sm': '(min-width: 576px)',\n 'md': '(min-width: 768px)',\n 'lg': '(min-width: 992px)',\n 'xl': '(min-width: 1200px)'\n);\n\n// Justify Content helpers\n@each $name, $value in $justify-content-values {\n .pds-justify-content-#{$name} {\n justify-content: $value;\n }\n}\n\n// Responsive Justify Content helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $justify-content-values {\n .pds-justify-content-#{$breakpoint-name}-#{$name} {\n justify-content: $value;\n }\n }\n }\n}\n\n// Align Items helpers\n@each $name, $value in $align-items-values {\n .pds-align-items-#{$name} {\n align-items: $value;\n }\n}\n\n// Responsive Align Items helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-items-values {\n .pds-align-items-#{$breakpoint-name}-#{$name} {\n align-items: $value;\n }\n }\n }\n}\n\n// Align Self helpers\n@each $name, $value in $align-self-values {\n .pds-align-self-#{$name} {\n align-self: $value;\n }\n}\n\n// Responsive Align Self helpers\n@each $breakpoint-name, $breakpoint-value in $breakpoints {\n @media #{$breakpoint-value} {\n @each $name, $value in $align-self-values {\n .pds-align-self-#{$breakpoint-name}-#{$name} {\n align-self: $value;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\nimport { normalizeColorValue } from '../../utils/utils';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /\n Defines how items within the box are aligned.\n * @defaultValue stretch\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch` ;\n\n /\n Defines how items within the box are aligned at the XS breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsXs?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the SM breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsSm?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the MD breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsMd?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the LG breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsLg?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how items within the box are aligned at the XL breakpoint.\n * @defaultValue stretch\n /\n @Prop() alignItemsXl?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue stretch\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container at the XS breakpoint.\n \n /\n @Prop() alignSelfXs?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the SM breakpoint.\n \n /\n @Prop() alignSelfSm?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the MD breakpoint.\n \n /\n @Prop() alignSelfMd?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the LG breakpoint.\n \n /\n @Prop() alignSelfLg?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n Defines how the box is aligned within its container at the XL breakpoint.\n \n /\n @Prop() alignSelfXl?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /*\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines whether flex items are forced onto one line or can wrap onto multiple lines.\n * @defaultValue false\n /\n @Prop() wrap?: boolean;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink` \| string;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the XS breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentXs?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the SM breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentSm?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the MD breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentMd?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the LG breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentLg?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the horizontal alignment of the box items at the XL breakpoint.\n * @defaultValue start\n /\n @Prop() justifyContentXl?: `start` \| `center` \| `end` \| `space-between` \| `space-around` \| `space-evenly`;\n\n /\n Defines the box's outer top spacing.\n * @defaultValue none\n /\n @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer left spacing.\n * @defaultValue none\n /\n @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the box's outer right spacing.\n * @defaultValue none\n /\n @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box's outer bottom spacing.\n * @defaultValue none\n /\n @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop({ reflect: true }) minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop({ reflect: true }) minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n\n /\n Defines the top spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n /\n Defines the bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n /\n Defines the left spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n /\n Defines the right spacing.\n * @defaultValue none\n /\n @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignItemsXs !== undefined && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}\n ${this.alignItemsSm !== undefined && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}\n ${this.alignItemsMd !== undefined && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}\n ${this.alignItemsLg !== undefined && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}\n ${this.alignItemsXl !== undefined && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.alignSelfXs !== undefined && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}\n ${this.alignSelfSm !== undefined && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}\n ${this.alignSelfMd !== undefined && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}\n ${this.alignSelfLg !== undefined && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}\n ${this.alignSelfXl !== undefined && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.wrap ? 'pds-box--wrap' : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.justifyContentXs !== undefined && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}\n ${this.justifyContentSm !== undefined && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}\n ${this.justifyContentMd !== undefined && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}\n ${this.justifyContentLg !== undefined && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}\n ${this.justifyContentXl !== undefined && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}\n ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)\n const normalizedBackground = normalizeColorValue(this.backgroundColor);\n const normalizedBorder = normalizeColorValue(this.borderColor);\n\n const boxInlineStyles = {\n ...(normalizedBackground && { '--color-background-box': normalizedBackground }),\n ...(normalizedBorder && { '--color-border-box': normalizedBorder }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n ...(this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"names":["normalizeColorValue","h","Host"],"mappings":"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"}

package/dist/cjs/pds-row.cjs.entry.js CHANGED Viewed

@@ -33,13 +33,17 @@ const PdsRow = class {
     ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.noWrap ? 'pds-row--no-wrap' : ''}
   `;
-        const rowInlineStyles = Object.assign(Object.assign({}, (this.colGap && {
+        const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
             '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
             '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        })), (this.colGapBlock && {
+            '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
+        })), (this.colGapInline && {
+            '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return index.h(index.Host, { key: '9564a3a3a4bb78c947c79f803ddcec988a2ef6d3', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return index.h(index.Host, { key: '5cfdc14486ad24d42751624d37ff6ef38f611b12', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
 };
 PdsRow.style = pdsRowCss;

package/dist/cjs/pds-row.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-row.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;~~AAuBvB~~;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,GAA2C;AAC1D,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;SACZ;~~AAsBF~~;~~IApBC~~,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;~~AAEC~~,~~QAAA,~~MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;","names":["h","Host"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxTShirtSizeType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"version":3}
1	+ {"file":"pds-row.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;AAiCvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,GAA2C;AAC1D,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;SACZ;AA4BF;IA1BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;QAEC,MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,WAAW,IAAI;AACtB,YAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE;AACxH,SAAA,EACE,GAAC,IAAI,CAAC,YAAY,IAAI;AACvB,YAAA,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;AAC3H,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;","names":["h","Host"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxTShirtSizeType \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: BoxTShirtSizeType \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: BoxTShirtSizeType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"version":3}

package/dist/cjs/pds-row.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-row.entry.cjs.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxTShirtSizeType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;~~AAuBvB~~;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,GAA2C;AAC1D,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;SACZ;~~AAsBF~~;~~IApBC~~,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;~~AAEC~~,~~QAAA,~~MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;"}
1	+ {"version":3,"file":"pds-row.entry.cjs.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxTShirtSizeType \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: BoxTShirtSizeType \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: BoxTShirtSizeType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;AAiCvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,GAA2C;AAC1D,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;SACZ;AA4BF;IA1BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;QAEC,MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,WAAW,IAAI;AACtB,YAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE;AACxH,SAAA,EACE,GAAC,IAAI,CAAC,YAAY,IAAI;AACvB,YAAA,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;AAC3H,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;"}

package/dist/cjs/pds-table-body.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const PdsTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ec495e4227d7fb7defc4b4abf0afb8010f7ea984', role: "rowgroup" }, index.h("slot", { key: 'f9c42d628c86ed6098a42cc864122028711e3f15' })));
+        return (index.h(index.Host, { key: '7aa581f9cd4c798a5699664ca9639ec7e412a891', role: "rowgroup", part: "body" }, index.h("slot", { key: 'c06f2431044e64d934ee302e5c6fffbdaf0051c7' })));
     }
 };
 PdsTableBody.style = pdsTableBodyCss;

package/dist/cjs/pds-table-body.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-table-body.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2EAA2E;;MCOtF,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;~~QACJ~~,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,~~EACnBD~~,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-table-body.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2EAA2E;;MCOtF,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/BD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\" part=\"body\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/pds-table-body.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-table-body.entry.cjs.js","sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,2EAA2E;;MCOtF,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;~~QACJ~~,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,~~EACnBD~~,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
1	+ {"version":3,"file":"pds-table-body.entry.cjs.js","sources":["src/components/pds-table/pds-table-body/pds-table-body.scss?tag=pds-table-body&encapsulation=shadow","src/components/pds-table/pds-table-body/pds-table-body.tsx"],"sourcesContent":[":host {\n border-color: inherit;\n display: table-row-group;\n vertical-align: middle;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-body',\n styleUrls: ['pds-table-body.scss'],\n shadow: true,\n})\nexport class PdsTableBody {\n\n render() {\n return (\n <Host role=\"rowgroup\" part=\"body\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,2EAA2E;;MCOtF,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/BD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/cjs/pds-table-cell.cjs.entry.js CHANGED Viewed

@@ -100,11 +100,11 @@ const PdsTableCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: 'cc149f3d36c253ddd9c37ff435056be14ab8012d', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (index.h(index.Host, { key: 'eb6a58e7e294593a35b77f00d787fee3b2b03661', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '5095b0541afada3a73422adcd8992f26b4e59235' })));
+                : {} }, index.h("slot", { key: 'c83fc4dda70196bf1032544353af058bc1a0decf' })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/pds-table-cell.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-table-cell.entry.cjs.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2iCAA2iC;;MCOtjC,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQU,QAAA,IAAe,CAAA,eAAA,GAAuB,IAAI;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAW,CAAC;AAoEhC;;;AAGG;AACc,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAwBhD;;;;AAIG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACzB;;AAGF,YAAA,IAAI;gBACF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,CAAC;;YACzD,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC;;AAEhD,SAAC;~~AAmBF~~;~~IAhIC~~,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;;IAG9E,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;;;YAG1E,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,oBAAoB,GAAA;QAClB,IAAI,CAAC,qBAAqB,EAAE;;IAGtB,mBAAmB,GAAA;;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;AAGpB,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,iCAAiC,CAAgB;QAE3G,IAAI,SAAS,EAAE;;AAEb,YAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,YAAA,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACrF,YAAA,IAAI,CAAC,YAAY,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;;aACjB;;YAEL,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACvC,IAAI,IAAI,CAAC,eAAe;AAAE,oBAAA,OAAO;AACjC,gBAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AAChD,gBAAA,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE;oBAC3B,IAAI,CAAC,mBAAmB,EAAE;;qBACrB;AACL,oBAAA,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC;;aAExE,EAAE,GAAG,CAAC;;;IAIH,qBAAqB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AACrE,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;AAG7B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;AACjC,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAG7B,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;;IAmBhB,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;QAErB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AAC1C,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG/B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,CAAC;;AAG5D,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;AAGjC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;AACrE,YAAA,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;AAGjC,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAoB7B,MAAM,GAAA;~~QACJ~~,QACEA,~~OAAC~~,~~CAAAC,~~UAAI,~~qDACH~~,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC;AACZ,kBAAE,EAAE,uBAAuB,EAAE,MAAM;AACnC,kBAAE,EAAE,EAAA,EAGRD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;","names":["h","Host"],"sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n inset-inline-start: var(--pine-dimension-none);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: 0;\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n }\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /*\n Sets the text alignment within the cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Truncates content to a max width of 100px and adds an ellipsis.\n /\n @Prop() truncate: boolean;\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-table-cell.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n inset-inline-start: var(--pine-dimension-none);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: 0;\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n }\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /*\n Sets the text alignment within the cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Truncates content to a max width of 100px and adds an ellipsis.\n /\n @Prop() truncate: boolean;\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n part=\"cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/pds-table-cell.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-table-cell.entry.cjs.js","sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n inset-inline-start: var(--pine-dimension-none);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: 0;\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n }\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /*\n Sets the text alignment within the cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Truncates content to a max width of 100px and adds an ellipsis.\n /\n @Prop() truncate: boolean;\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,2iCAA2iC;;MCOtjC,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQU,QAAA,IAAe,CAAA,eAAA,GAAuB,IAAI;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAW,CAAC;AAoEhC;;;AAGG;AACc,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAwBhD;;;;AAIG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACzB;;AAGF,YAAA,IAAI;gBACF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,CAAC;;YACzD,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC;;AAEhD,SAAC;~~AAmBF~~;~~IAhIC~~,mBAAmB,GAAA;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB;;IAG9E,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;;;YAG1E,IAAI,CAAC,mBAAmB,EAAE;;;IAI9B,oBAAoB,GAAA;QAClB,IAAI,CAAC,qBAAqB,EAAE;;IAGtB,mBAAmB,GAAA;;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;AAGpB,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,iCAAiC,CAAgB;QAE3G,IAAI,SAAS,EAAE;;AAEb,YAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,YAAA,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACrF,YAAA,IAAI,CAAC,YAAY,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;;aACjB;;YAEL,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBACvC,IAAI,IAAI,CAAC,eAAe;AAAE,oBAAA,OAAO;AACjC,gBAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AAChD,gBAAA,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE;oBAC3B,IAAI,CAAC,mBAAmB,EAAE;;qBACrB;AACL,oBAAA,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC;;aAExE,EAAE,GAAG,CAAC;;;IAIH,qBAAqB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AACrE,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;AAG7B,QAAA,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;AACjC,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAG7B,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;;IAmBhB,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;QAErB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AAC1C,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG/B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,CAAC;;AAG5D,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;AAGjC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;AACrE,YAAA,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;AAGjC,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAoB7B,MAAM,GAAA;~~QACJ~~,QACEA,~~OAAC~~,~~CAAAC,~~UAAI,~~qDACH~~,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC;AACZ,kBAAE,EAAE,uBAAuB,EAAE,MAAM;AACnC,kBAAE,EAAE,EAAA,EAGRD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}
1	+ {"version":3,"file":"pds-table-cell.entry.cjs.js","sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n color: var(--pine-color-text);\n display: table-cell;\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size);\n font-weight: var(--pine-font-weight-regular);\n inset-inline-start: var(--pine-dimension-none);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding: var(--pine-dimension-sm);\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n background: var(--pine-color-background-container);\n left: 0;\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n max-width: 100px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n vertical-align: middle;\n width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'pds-table-cell',\n styleUrls: ['pds-table-cell.scss'],\n shadow: true,\n})\nexport class PdsTableCell {\n @Element() hostElement: HTMLPdsTableCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n }\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /*\n Sets the text alignment within the cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Truncates content to a max width of 100px and adds an ellipsis.\n /\n @Prop() truncate: boolean;\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n }\n\n if (this.truncate) {\n classNames.push('is-truncated');\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"gridcell\"\n part=\"cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/pds-table-head-cell.cjs.entry.js CHANGED Viewed

@@ -125,11 +125,11 @@ const PdsTableHeadCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: '037d0c1d3cf8122132bee6887bcaceb29ac33cc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (index.h(index.Host, { key: 'f3b04da28997f6f471f6945e0cfac098dc1a6428', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: 'ccfc2ea9a8301783834bda8c627afd652c22405e' }), this.sortable && (index.h("pds-icon", { key: 'de8a980b54bde4994f0339af5d7f3165ed35123b', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall }))));
+                : {} }, index.h("slot", { key: '832373d831d5f250f7427bf0a1f2756e0ce56ea9' }), this.sortable && (index.h("pds-icon", { key: '1886880fa50da3415b80a0abd8d571ca7350ca23', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return index.getElement(this); }
 };