@pine-ds/core 4.7.0 → 4.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/pds-box2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +96 -96
- package/dist/cjs/pds-checkbox.cjs.entry.js +16 -4
- package/dist/cjs/pds-chip.cjs.entry.js +34 -9
- package/dist/cjs/pds-combobox.cjs.entry.js +16 -3
- package/dist/cjs/pds-copytext.cjs.entry.js +7 -2
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal.cjs.entry.js +62 -21
- package/dist/cjs/pds-multiselect.cjs.entry.js +37 -7
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +7 -7
- package/dist/cjs/pds-switch.cjs.entry.js +15 -3
- package/dist/cjs/pds-table-cell.cjs.entry.js +24 -4
- package/dist/cjs/pds-text.cjs.entry.js +17 -9
- package/dist/cjs/{truncation-tooltip-CYgQfBLt.js → truncation-tooltip-DO9xli2e.js} +7 -7
- package/dist/collection/components/pds-box/pds-box.js +96 -96
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +4 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +15 -3
- package/dist/collection/components/pds-chip/pds-chip.js +33 -8
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +17 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +17 -4
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +6 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +2 -2
- package/dist/collection/components/pds-modal/pds-modal.js +66 -21
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +4 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +37 -7
- package/dist/collection/components/pds-radio/pds-radio.css +6 -0
- package/dist/collection/components/pds-row/pds-row.js +7 -7
- package/dist/collection/components/pds-switch/pds-switch.js +15 -3
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +23 -3
- package/dist/collection/components/pds-text/pds-text.js +16 -8
- package/dist/collection/utils/truncation-tooltip.js +7 -7
- package/dist/docs.json +7 -3
- package/dist/esm/pds-box.entry.js +96 -96
- package/dist/esm/pds-checkbox.entry.js +16 -4
- package/dist/esm/pds-chip.entry.js +34 -9
- package/dist/esm/pds-combobox.entry.js +16 -3
- package/dist/esm/pds-copytext.entry.js +7 -2
- package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
- package/dist/esm/pds-modal.entry.js +62 -21
- package/dist/esm/pds-multiselect.entry.js +37 -7
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-row.entry.js +7 -7
- package/dist/esm/pds-switch.entry.js +15 -3
- package/dist/esm/pds-table-cell.entry.js +24 -4
- package/dist/esm/pds-text.entry.js +17 -9
- package/dist/esm/{truncation-tooltip-_902ENWC.js → truncation-tooltip-DRXsdKk1.js} +7 -7
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +1 -0
- package/dist/pine-core/{p-9af131d6.system.entry.js → p-11d98408.system.entry.js} +1 -1
- package/dist/pine-core/p-355e4cf9.entry.js +1 -0
- package/dist/pine-core/p-4435fff6.system.entry.js +1 -0
- package/dist/pine-core/p-576cf904.system.entry.js +1 -0
- package/dist/pine-core/{p-4f94b4f1.system.entry.js → p-645a482b.system.entry.js} +1 -1
- package/dist/pine-core/{p-4fa63723.system.entry.js → p-6d603d16.system.entry.js} +1 -1
- package/dist/pine-core/p-7fa66cad.entry.js +1 -0
- package/dist/pine-core/p-80a698ae.entry.js +1 -0
- package/dist/pine-core/{p-bf7ee3b7.system.entry.js → p-80e6f3a0.system.entry.js} +1 -1
- package/dist/pine-core/p-88ff1604.entry.js +1 -0
- package/dist/pine-core/{p-6eec23a7.system.entry.js → p-97d0b89e.system.entry.js} +1 -1
- package/dist/pine-core/p-993d1043.entry.js +1 -0
- package/dist/pine-core/p-CuSNnuFu.system.js +1 -1
- package/dist/pine-core/p-JtdHT_W5.js +1 -0
- package/dist/pine-core/p-a939b471.entry.js +1 -0
- package/dist/pine-core/p-aa032a5e.system.entry.js +1 -0
- package/dist/pine-core/p-bb73ad66.entry.js +2 -0
- package/dist/pine-core/p-bd26a5e8.entry.js +1 -0
- package/dist/pine-core/p-c36b490e.entry.js +1 -0
- package/dist/pine-core/p-c81d8ac8.entry.js +1 -0
- package/dist/pine-core/p-ca0a8f5c.entry.js +1 -0
- package/dist/pine-core/p-ca0d48e8.entry.js +1 -0
- package/dist/pine-core/p-cfc52b95.system.entry.js +1 -0
- package/dist/pine-core/{p-ba1f65c2.system.entry.js → p-d8570b4b.system.entry.js} +1 -1
- package/dist/pine-core/{p-9e0f920a.system.entry.js → p-e7a95a49.system.entry.js} +1 -1
- package/dist/pine-core/p-e803f629.system.entry.js +1 -0
- package/dist/pine-core/{p-5a10784e.system.entry.js → p-e836f3ec.system.entry.js} +2 -2
- package/dist/pine-core/{p-b8e8a4ce.entry.js → p-f474d7de.entry.js} +1 -1
- package/dist/pine-core/{p-CBu9UrXr.system.js → p-qhdoK1Jp.system.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +4 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +6 -1
- package/dist/types/components/pds-modal/pds-modal.d.ts +6 -0
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +8 -2
- package/dist/types/components/pds-switch/pds-switch.d.ts +4 -0
- package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts +3 -0
- package/dist/types/components/pds-text/pds-text.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/dist/types/utils/truncation-tooltip.d.ts +15 -2
- package/hydrate/index.js +337 -171
- package/hydrate/index.mjs +337 -171
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-_902ENWC.js +0 -1
- package/dist/pine-core/p-21fe6ee1.system.entry.js +0 -1
- package/dist/pine-core/p-24fbbb74.system.entry.js +0 -1
- package/dist/pine-core/p-258d5e83.entry.js +0 -1
- package/dist/pine-core/p-4849fda7.entry.js +0 -1
- package/dist/pine-core/p-4de8f333.entry.js +0 -1
- package/dist/pine-core/p-550c2fd3.entry.js +0 -1
- package/dist/pine-core/p-6bf853c9.entry.js +0 -1
- package/dist/pine-core/p-6d3610f9.entry.js +0 -1
- package/dist/pine-core/p-84e9b7da.entry.js +0 -1
- package/dist/pine-core/p-945fb0b1.entry.js +0 -1
- package/dist/pine-core/p-CnM3cCof.js +0 -1
- package/dist/pine-core/p-a0344e30.entry.js +0 -2
- package/dist/pine-core/p-a85a6ab9.system.entry.js +0 -1
- package/dist/pine-core/p-cf08a6dd.system.entry.js +0 -1
- package/dist/pine-core/p-e21ff692.entry.js +0 -1
- package/dist/pine-core/p-e800a2b1.entry.js +0 -1
- package/dist/pine-core/p-eb5465ce.entry.js +0 -1
- package/dist/pine-core/p-f25e4731.system.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -6449,18 +6449,18 @@ class PdsBox {
|
|
|
6449
6449
|
}
|
|
6450
6450
|
render() {
|
|
6451
6451
|
const boxClasses = `
|
|
6452
|
-
${this.alignItems
|
|
6453
|
-
${this.alignItemsXs
|
|
6454
|
-
${this.alignItemsSm
|
|
6455
|
-
${this.alignItemsMd
|
|
6456
|
-
${this.alignItemsLg
|
|
6457
|
-
${this.alignItemsXl
|
|
6458
|
-
${this.alignSelf
|
|
6459
|
-
${this.alignSelfXs
|
|
6460
|
-
${this.alignSelfSm
|
|
6461
|
-
${this.alignSelfMd
|
|
6462
|
-
${this.alignSelfLg
|
|
6463
|
-
${this.alignSelfXl
|
|
6452
|
+
${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
|
|
6453
|
+
${this.alignItemsXs != null && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
|
|
6454
|
+
${this.alignItemsSm != null && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
|
|
6455
|
+
${this.alignItemsMd != null && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
|
|
6456
|
+
${this.alignItemsLg != null && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
|
|
6457
|
+
${this.alignItemsXl != null && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
|
|
6458
|
+
${this.alignSelf != null && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
|
|
6459
|
+
${this.alignSelfXs != null && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
|
|
6460
|
+
${this.alignSelfSm != null && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
|
|
6461
|
+
${this.alignSelfMd != null && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
|
|
6462
|
+
${this.alignSelfLg != null && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
|
|
6463
|
+
${this.alignSelfXl != null && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
|
|
6464
6464
|
${this.auto ? 'pds-box--auto' : ''}
|
|
6465
6465
|
${this.autoXs ? 'pds-box--auto-xs' : ''}
|
|
6466
6466
|
${this.autoSm ? 'pds-box--auto-sm' : ''}
|
|
@@ -6476,101 +6476,101 @@ class PdsBox {
|
|
|
6476
6476
|
${this.borderInlineStart === false ? 'pds-box--border-inline-start-none' : ''}
|
|
6477
6477
|
${this.borderInlineEnd === true ? 'pds-box--border-inline-end' : ''}
|
|
6478
6478
|
${this.borderInlineEnd === false ? 'pds-box--border-inline-end-none' : ''}
|
|
6479
|
-
${this.borderRadius
|
|
6480
|
-
${this.direction
|
|
6481
|
-
${this.display
|
|
6479
|
+
${this.borderRadius != null && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
|
|
6480
|
+
${this.direction != null && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
|
|
6481
|
+
${this.display != null && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
|
|
6482
6482
|
${this.fit ? 'pds-box--fit' : ''}
|
|
6483
6483
|
${this.fitXs ? 'pds-box--fit-xs' : ''}
|
|
6484
6484
|
${this.fitSm ? 'pds-box--fit-sm' : ''}
|
|
6485
6485
|
${this.fitMd ? 'pds-box--fit-md' : ''}
|
|
6486
6486
|
${this.fitLg ? 'pds-box--fit-lg' : ''}
|
|
6487
6487
|
${this.fitXl ? 'pds-box--fit-xl' : ''}
|
|
6488
|
-
${this.gap
|
|
6489
|
-
${this.gapXs
|
|
6490
|
-
${this.gapSm
|
|
6491
|
-
${this.gapMd
|
|
6492
|
-
${this.gapLg
|
|
6493
|
-
${this.gapXl
|
|
6488
|
+
${this.gap != null && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
|
|
6489
|
+
${this.gapXs != null && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
|
|
6490
|
+
${this.gapSm != null && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
|
|
6491
|
+
${this.gapMd != null && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
|
|
6492
|
+
${this.gapLg != null && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
|
|
6493
|
+
${this.gapXl != null && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
|
|
6494
6494
|
${this.wrap ? 'pds-box--wrap' : ''}
|
|
6495
6495
|
${this.wrapXs ? 'pds-box--wrap-xs' : ''}
|
|
6496
6496
|
${this.wrapSm ? 'pds-box--wrap-sm' : ''}
|
|
6497
6497
|
${this.wrapMd ? 'pds-box--wrap-md' : ''}
|
|
6498
6498
|
${this.wrapLg ? 'pds-box--wrap-lg' : ''}
|
|
6499
6499
|
${this.wrapXl ? 'pds-box--wrap-xl' : ''}
|
|
6500
|
-
${this.flex
|
|
6501
|
-
${this.justifyContent
|
|
6502
|
-
${this.justifyContentXs
|
|
6503
|
-
${this.justifyContentSm
|
|
6504
|
-
${this.justifyContentMd
|
|
6505
|
-
${this.justifyContentLg
|
|
6506
|
-
${this.justifyContentXl
|
|
6507
|
-
${this.marginBlockStart
|
|
6508
|
-
${this.marginBlockStartXs
|
|
6509
|
-
${this.marginBlockStartSm
|
|
6510
|
-
${this.marginBlockStartMd
|
|
6511
|
-
${this.marginBlockStartLg
|
|
6512
|
-
${this.marginBlockStartXl
|
|
6513
|
-
${this.marginInlineStart
|
|
6514
|
-
${this.marginInlineStartXs
|
|
6515
|
-
${this.marginInlineStartSm
|
|
6516
|
-
${this.marginInlineStartMd
|
|
6517
|
-
${this.marginInlineStartLg
|
|
6518
|
-
${this.marginInlineStartXl
|
|
6519
|
-
${this.marginInlineEnd
|
|
6520
|
-
${this.marginInlineEndXs
|
|
6521
|
-
${this.marginInlineEndSm
|
|
6522
|
-
${this.marginInlineEndMd
|
|
6523
|
-
${this.marginInlineEndLg
|
|
6524
|
-
${this.marginInlineEndXl
|
|
6525
|
-
${this.marginBlockEnd
|
|
6526
|
-
${this.marginBlockEndXs
|
|
6527
|
-
${this.marginBlockEndSm
|
|
6528
|
-
${this.marginBlockEndMd
|
|
6529
|
-
${this.marginBlockEndLg
|
|
6530
|
-
${this.marginBlockEndXl
|
|
6531
|
-
${this.offset
|
|
6532
|
-
${this.offsetXs
|
|
6533
|
-
${this.offsetSm
|
|
6534
|
-
${this.offsetMd
|
|
6535
|
-
${this.offsetLg
|
|
6536
|
-
${this.offsetXl
|
|
6537
|
-
${this.padding
|
|
6538
|
-
${this.paddingXs
|
|
6539
|
-
${this.paddingSm
|
|
6540
|
-
${this.paddingMd
|
|
6541
|
-
${this.paddingLg
|
|
6542
|
-
${this.paddingXl
|
|
6543
|
-
${this.paddingBlockStart
|
|
6544
|
-
${this.paddingBlockStartXs
|
|
6545
|
-
${this.paddingBlockStartSm
|
|
6546
|
-
${this.paddingBlockStartMd
|
|
6547
|
-
${this.paddingBlockStartLg
|
|
6548
|
-
${this.paddingBlockStartXl
|
|
6549
|
-
${this.paddingBlockEnd
|
|
6550
|
-
${this.paddingBlockEndXs
|
|
6551
|
-
${this.paddingBlockEndSm
|
|
6552
|
-
${this.paddingBlockEndMd
|
|
6553
|
-
${this.paddingBlockEndLg
|
|
6554
|
-
${this.paddingBlockEndXl
|
|
6555
|
-
${this.paddingInlineStart
|
|
6556
|
-
${this.paddingInlineStartXs
|
|
6557
|
-
${this.paddingInlineStartSm
|
|
6558
|
-
${this.paddingInlineStartMd
|
|
6559
|
-
${this.paddingInlineStartLg
|
|
6560
|
-
${this.paddingInlineStartXl
|
|
6561
|
-
${this.paddingInlineEnd
|
|
6562
|
-
${this.paddingInlineEndXs
|
|
6563
|
-
${this.paddingInlineEndSm
|
|
6564
|
-
${this.paddingInlineEndMd
|
|
6565
|
-
${this.paddingInlineEndLg
|
|
6566
|
-
${this.paddingInlineEndXl
|
|
6567
|
-
${this.shadow
|
|
6568
|
-
${this.size
|
|
6569
|
-
${this.sizeXs
|
|
6570
|
-
${this.sizeSm
|
|
6571
|
-
${this.sizeMd
|
|
6572
|
-
${this.sizeLg
|
|
6573
|
-
${this.sizeXl
|
|
6500
|
+
${this.flex != null && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
|
|
6501
|
+
${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
6502
|
+
${this.justifyContentXs != null && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
|
|
6503
|
+
${this.justifyContentSm != null && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
|
|
6504
|
+
${this.justifyContentMd != null && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
|
|
6505
|
+
${this.justifyContentLg != null && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
|
|
6506
|
+
${this.justifyContentXl != null && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
|
|
6507
|
+
${this.marginBlockStart != null && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
|
|
6508
|
+
${this.marginBlockStartXs != null && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
|
|
6509
|
+
${this.marginBlockStartSm != null && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
|
|
6510
|
+
${this.marginBlockStartMd != null && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
|
|
6511
|
+
${this.marginBlockStartLg != null && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
|
|
6512
|
+
${this.marginBlockStartXl != null && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
|
|
6513
|
+
${this.marginInlineStart != null && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
|
|
6514
|
+
${this.marginInlineStartXs != null && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
|
|
6515
|
+
${this.marginInlineStartSm != null && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
|
|
6516
|
+
${this.marginInlineStartMd != null && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
|
|
6517
|
+
${this.marginInlineStartLg != null && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
|
|
6518
|
+
${this.marginInlineStartXl != null && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
|
|
6519
|
+
${this.marginInlineEnd != null && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
|
|
6520
|
+
${this.marginInlineEndXs != null && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
|
|
6521
|
+
${this.marginInlineEndSm != null && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
|
|
6522
|
+
${this.marginInlineEndMd != null && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
|
|
6523
|
+
${this.marginInlineEndLg != null && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
|
|
6524
|
+
${this.marginInlineEndXl != null && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
|
|
6525
|
+
${this.marginBlockEnd != null && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
|
|
6526
|
+
${this.marginBlockEndXs != null && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
|
|
6527
|
+
${this.marginBlockEndSm != null && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
|
|
6528
|
+
${this.marginBlockEndMd != null && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
|
|
6529
|
+
${this.marginBlockEndLg != null && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
|
|
6530
|
+
${this.marginBlockEndXl != null && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
|
|
6531
|
+
${this.offset != null && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
|
|
6532
|
+
${this.offsetXs != null && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
|
|
6533
|
+
${this.offsetSm != null && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
|
|
6534
|
+
${this.offsetMd != null && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
|
|
6535
|
+
${this.offsetLg != null && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
|
|
6536
|
+
${this.offsetXl != null && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
|
|
6537
|
+
${this.padding != null && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
|
|
6538
|
+
${this.paddingXs != null && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
|
|
6539
|
+
${this.paddingSm != null && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
|
|
6540
|
+
${this.paddingMd != null && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
|
|
6541
|
+
${this.paddingLg != null && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
|
|
6542
|
+
${this.paddingXl != null && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
|
|
6543
|
+
${this.paddingBlockStart != null && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
|
|
6544
|
+
${this.paddingBlockStartXs != null && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
|
|
6545
|
+
${this.paddingBlockStartSm != null && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
|
|
6546
|
+
${this.paddingBlockStartMd != null && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
|
|
6547
|
+
${this.paddingBlockStartLg != null && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
|
|
6548
|
+
${this.paddingBlockStartXl != null && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
|
|
6549
|
+
${this.paddingBlockEnd != null && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
|
|
6550
|
+
${this.paddingBlockEndXs != null && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
|
|
6551
|
+
${this.paddingBlockEndSm != null && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
|
|
6552
|
+
${this.paddingBlockEndMd != null && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
|
|
6553
|
+
${this.paddingBlockEndLg != null && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
|
|
6554
|
+
${this.paddingBlockEndXl != null && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
|
|
6555
|
+
${this.paddingInlineStart != null && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
|
|
6556
|
+
${this.paddingInlineStartXs != null && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
|
|
6557
|
+
${this.paddingInlineStartSm != null && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
|
|
6558
|
+
${this.paddingInlineStartMd != null && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
|
|
6559
|
+
${this.paddingInlineStartLg != null && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
|
|
6560
|
+
${this.paddingInlineStartXl != null && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
|
|
6561
|
+
${this.paddingInlineEnd != null && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
|
|
6562
|
+
${this.paddingInlineEndXs != null && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
|
|
6563
|
+
${this.paddingInlineEndSm != null && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
|
|
6564
|
+
${this.paddingInlineEndMd != null && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
|
|
6565
|
+
${this.paddingInlineEndLg != null && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
|
|
6566
|
+
${this.paddingInlineEndXl != null && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
|
|
6567
|
+
${this.shadow != null && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
|
|
6568
|
+
${this.size != null && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
|
|
6569
|
+
${this.sizeXs != null && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
|
|
6570
|
+
${this.sizeSm != null && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
|
|
6571
|
+
${this.sizeMd != null && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
|
|
6572
|
+
${this.sizeLg != null && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
|
|
6573
|
+
${this.sizeXl != null && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
|
|
6574
6574
|
${this.size == undefined &&
|
|
6575
6575
|
this.sizeSm == undefined &&
|
|
6576
6576
|
this.sizeMd == undefined &&
|
|
@@ -6582,7 +6582,7 @@ class PdsBox {
|
|
|
6582
6582
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6583
6583
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
6584
6584
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6585
|
-
return (hAsync(Host, { key: '
|
|
6585
|
+
return (hAsync(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
|
|
6586
6586
|
}
|
|
6587
6587
|
get el() { return getElement(this); }
|
|
6588
6588
|
static get style() { return pdsBoxCss(); }
|
|
@@ -7066,7 +7066,7 @@ const isSpecTest = () => {
|
|
|
7066
7066
|
|
|
7067
7067
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7068
7068
|
|
|
7069
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7069
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7070
7070
|
|
|
7071
7071
|
/**
|
|
7072
7072
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7166,6 +7166,18 @@ class PdsCheckbox {
|
|
|
7166
7166
|
this.checked = state === (this.value || 'on');
|
|
7167
7167
|
}
|
|
7168
7168
|
}
|
|
7169
|
+
/**
|
|
7170
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
7171
|
+
*/
|
|
7172
|
+
formDisabledCallback(disabled) {
|
|
7173
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
7174
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
7175
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
7176
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
7177
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
7178
|
+
return;
|
|
7179
|
+
this.disabled = disabled;
|
|
7180
|
+
}
|
|
7169
7181
|
componentWillLoad() {
|
|
7170
7182
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
7171
7183
|
this.updateHasLabelSlot();
|
|
@@ -7173,9 +7185,9 @@ class PdsCheckbox {
|
|
|
7173
7185
|
render() {
|
|
7174
7186
|
const hostClass = this.classNames();
|
|
7175
7187
|
this.hostKeeper.record(hostClass);
|
|
7176
|
-
return (hAsync(Host, { key: '
|
|
7177
|
-
hAsync("div", { key: '
|
|
7178
|
-
hAsync("div", { key: '
|
|
7188
|
+
return (hAsync(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, hAsync("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
7189
|
+
hAsync("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7190
|
+
hAsync("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
|
|
7179
7191
|
}
|
|
7180
7192
|
static get formAssociated() { return true; }
|
|
7181
7193
|
get el() { return getElement(this); }
|
|
@@ -8986,7 +8998,7 @@ function isOverflowing(el) {
|
|
|
8986
8998
|
* @returns A cleanup function that removes all listeners, observers, and DOM elements.
|
|
8987
8999
|
*/
|
|
8988
9000
|
function setupTruncationTooltip(options) {
|
|
8989
|
-
const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
|
|
9001
|
+
const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
|
|
8990
9002
|
injectStyles();
|
|
8991
9003
|
let portalEl = null;
|
|
8992
9004
|
let isHovering = false;
|
|
@@ -9081,7 +9093,7 @@ function setupTruncationTooltip(options) {
|
|
|
9081
9093
|
if (!portalEl)
|
|
9082
9094
|
return;
|
|
9083
9095
|
try {
|
|
9084
|
-
const { x, y } = await computePosition(
|
|
9096
|
+
const { x, y } = await computePosition(reference, portalEl, {
|
|
9085
9097
|
placement,
|
|
9086
9098
|
strategy: 'fixed',
|
|
9087
9099
|
middleware: [offset(4), flip(), shift({ padding: 5 })],
|
|
@@ -9094,7 +9106,7 @@ function setupTruncationTooltip(options) {
|
|
|
9094
9106
|
catch (_a) {
|
|
9095
9107
|
// Fallback: position above the element with bounds checking
|
|
9096
9108
|
if (portalEl) {
|
|
9097
|
-
const rect =
|
|
9109
|
+
const rect = reference.getBoundingClientRect();
|
|
9098
9110
|
const portalRect = portalEl.getBoundingClientRect();
|
|
9099
9111
|
const padding = 5;
|
|
9100
9112
|
// Ensure tooltip stays within viewport bounds
|
|
@@ -9180,8 +9192,8 @@ function setupTruncationTooltip(options) {
|
|
|
9180
9192
|
}
|
|
9181
9193
|
hostEl.addEventListener('mouseenter', handleMouseEnter);
|
|
9182
9194
|
hostEl.addEventListener('mouseleave', handleMouseLeave);
|
|
9183
|
-
|
|
9184
|
-
|
|
9195
|
+
focusEl.addEventListener('focusin', handleFocusIn);
|
|
9196
|
+
focusEl.addEventListener('focusout', handleFocusOut);
|
|
9185
9197
|
// Return cleanup function
|
|
9186
9198
|
return () => {
|
|
9187
9199
|
disposed = true;
|
|
@@ -9201,8 +9213,8 @@ function setupTruncationTooltip(options) {
|
|
|
9201
9213
|
}
|
|
9202
9214
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
9203
9215
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
9204
|
-
|
|
9205
|
-
|
|
9216
|
+
focusEl.removeEventListener('focusin', handleFocusIn);
|
|
9217
|
+
focusEl.removeEventListener('focusout', handleFocusOut);
|
|
9206
9218
|
removePortal();
|
|
9207
9219
|
};
|
|
9208
9220
|
}
|
|
@@ -9221,6 +9233,26 @@ const SENTIMENT_DOT_COLORS = {
|
|
|
9221
9233
|
success: 'var(--pine-chip-color-success-dot)',
|
|
9222
9234
|
warning: 'var(--pine-chip-color-warning-dot)',
|
|
9223
9235
|
};
|
|
9236
|
+
// Controls a chip can sit inside that already take focus, so a clipped label adds no tab stop of its own.
|
|
9237
|
+
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9238
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9239
|
+
// Beside the listbox and level with the option, so the tooltip never covers the other options.
|
|
9240
|
+
function besideListbox(wrapper) {
|
|
9241
|
+
const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
|
|
9242
|
+
const listbox = option === null || option === void 0 ? void 0 : option.closest('[role="listbox"]');
|
|
9243
|
+
if (!option || !listbox)
|
|
9244
|
+
return {};
|
|
9245
|
+
return {
|
|
9246
|
+
placement: 'right',
|
|
9247
|
+
reference: {
|
|
9248
|
+
getBoundingClientRect: () => {
|
|
9249
|
+
const { top, bottom, height } = option.getBoundingClientRect();
|
|
9250
|
+
const { left, right, width } = listbox.getBoundingClientRect();
|
|
9251
|
+
return { x: left, y: top, top, left, bottom, right, width, height };
|
|
9252
|
+
},
|
|
9253
|
+
},
|
|
9254
|
+
};
|
|
9255
|
+
}
|
|
9224
9256
|
/**
|
|
9225
9257
|
* @slot (default) - The chip's label text.
|
|
9226
9258
|
* @part button
|
|
@@ -9261,6 +9293,11 @@ class PdsChip {
|
|
|
9261
9293
|
}
|
|
9262
9294
|
connectedCallback() {
|
|
9263
9295
|
this.hostKeeper.connect(this.el);
|
|
9296
|
+
// A moved chip reconnects without re-rendering, so componentDidRender won't re-bind what
|
|
9297
|
+
// disconnectedCallback tore down. Before the first render there's no label, and it binds there.
|
|
9298
|
+
if (this.maxWidth && this.labelTextEl) {
|
|
9299
|
+
this.initTruncationTooltip();
|
|
9300
|
+
}
|
|
9264
9301
|
}
|
|
9265
9302
|
// Bind (and re-bind) here, not just on load: changing variant/size remounts
|
|
9266
9303
|
// the label span, so the tooltip has to re-attach to the current node or it
|
|
@@ -9285,16 +9322,15 @@ class PdsChip {
|
|
|
9285
9322
|
initTruncationTooltip() {
|
|
9286
9323
|
this.destroyTruncationTooltip();
|
|
9287
9324
|
if (this.labelTextEl) {
|
|
9288
|
-
|
|
9289
|
-
|
|
9290
|
-
contentEl: this.labelTextEl,
|
|
9291
|
-
getTooltipText: () => this.el.textContent || '',
|
|
9325
|
+
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9326
|
+
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9292
9327
|
// The dropdown variant's label span already sits inside
|
|
9293
9328
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9294
9329
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9295
9330
|
// a second tab stop inside the button.
|
|
9296
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown',
|
|
9297
|
-
|
|
9331
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9332
|
+
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9333
|
+
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9298
9334
|
this.tooltipBoundEl = this.labelTextEl;
|
|
9299
9335
|
}
|
|
9300
9336
|
}
|
|
@@ -9351,7 +9387,8 @@ class PdsChip {
|
|
|
9351
9387
|
// label span already sits inside `<button class="pds-chip__button">`,
|
|
9352
9388
|
// which is already focusable and bubbles focusin to the host, so
|
|
9353
9389
|
// initTruncationTooltip passes `manageTabIndex: false` there to avoid
|
|
9354
|
-
// nesting a second tab stop inside the button.
|
|
9390
|
+
// nesting a second tab stop inside the button. The same goes for a chip
|
|
9391
|
+
// inside a consumer's own focusable control (FOCUSABLE_WRAPPER).
|
|
9355
9392
|
const chipContent = isDropdown ? (hAsync("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null)), hAsync("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-chip__label" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null))));
|
|
9356
9393
|
return chipContent;
|
|
9357
9394
|
}
|
|
@@ -9425,7 +9462,7 @@ class PdsChip {
|
|
|
9425
9462
|
const hostClass = this.classNames();
|
|
9426
9463
|
const hostStyles = this.hostStyles;
|
|
9427
9464
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9428
|
-
return (hAsync(Host, { key: '
|
|
9465
|
+
return (hAsync(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9429
9466
|
}
|
|
9430
9467
|
get el() { return getElement(this); }
|
|
9431
9468
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11785,6 +11822,18 @@ class PdsCombobox {
|
|
|
11785
11822
|
this.internals = this.el.attachInternals();
|
|
11786
11823
|
}
|
|
11787
11824
|
}
|
|
11825
|
+
/**
|
|
11826
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
11827
|
+
*/
|
|
11828
|
+
formDisabledCallback(disabled) {
|
|
11829
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
11830
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
11831
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
11832
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
11833
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
11834
|
+
return;
|
|
11835
|
+
this.disabled = disabled;
|
|
11836
|
+
}
|
|
11788
11837
|
componentWillLoad() {
|
|
11789
11838
|
this.originalSearchEmitter = this.pdsComboboxSearch;
|
|
11790
11839
|
this.updateOptions();
|
|
@@ -13072,7 +13121,8 @@ class PdsCombobox {
|
|
|
13072
13121
|
return this.selectedOption ? this.selectedOption.value : null;
|
|
13073
13122
|
}
|
|
13074
13123
|
/**
|
|
13075
|
-
* Clears the selected value and resets the component.
|
|
13124
|
+
* Clears the selected value and resets the component. Works while disabled too, as setting a
|
|
13125
|
+
* native control's value from script does.
|
|
13076
13126
|
*/
|
|
13077
13127
|
async clear() {
|
|
13078
13128
|
const hadValue = this.value !== '' || this.displayText !== '';
|
|
@@ -13649,13 +13699,13 @@ class PdsCombobox {
|
|
|
13649
13699
|
]
|
|
13650
13700
|
.filter(Boolean)
|
|
13651
13701
|
.join(' ');
|
|
13652
|
-
return (hAsync(Host, { key: '
|
|
13702
|
+
return (hAsync(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13653
13703
|
this.inputEl = el;
|
|
13654
13704
|
this.triggerEl = el;
|
|
13655
13705
|
}, class: {
|
|
13656
13706
|
'pds-combobox__input': true,
|
|
13657
13707
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13658
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
13708
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, hAsync("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13659
13709
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13660
13710
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13661
13711
|
// same, and opening the group would go unannounced.
|
|
@@ -13853,6 +13903,11 @@ class PdsCopytext {
|
|
|
13853
13903
|
}
|
|
13854
13904
|
connectedCallback() {
|
|
13855
13905
|
this.hostKeeper.connect(this.el);
|
|
13906
|
+
// componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
|
|
13907
|
+
// down. Before the first render there's no valueSpanEl yet, and componentDidLoad binds it.
|
|
13908
|
+
if (this.truncate && this.valueSpanEl) {
|
|
13909
|
+
this.initTruncationTooltip();
|
|
13910
|
+
}
|
|
13856
13911
|
}
|
|
13857
13912
|
restoreBorderDefault(newValue) {
|
|
13858
13913
|
this.border = restoreReflectedDefault(this.el, 'border', newValue, true);
|
|
@@ -13915,7 +13970,7 @@ class PdsCopytext {
|
|
|
13915
13970
|
render() {
|
|
13916
13971
|
const hostClass = this.classNames();
|
|
13917
13972
|
this.hostKeeper.record(hostClass);
|
|
13918
|
-
return (hAsync(Host, { key: '
|
|
13973
|
+
return (hAsync(Host, { key: 'a3517b135fc3e3677e30b6ad5811c1170a819b65', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '02f56bed02ed3963a3d80a92148d6619a845224a', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '95fd1284e3d227b74dab613eb71f5385c3a0be29', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '21af67a8c9165e56d2d2b0cf19df7c7e3f290c72', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
13919
13974
|
}
|
|
13920
13975
|
get el() { return getElement(this); }
|
|
13921
13976
|
static get watchers() { return {
|
|
@@ -16819,7 +16874,7 @@ class PdsDropdownMenuItem {
|
|
|
16819
16874
|
});
|
|
16820
16875
|
}
|
|
16821
16876
|
renderElement() {
|
|
16822
|
-
if (this.href
|
|
16877
|
+
if (this.href != null) {
|
|
16823
16878
|
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
16824
16879
|
'pds-dropdown-menu-item__content': true,
|
|
16825
16880
|
'has-focus': this.hasFocus
|
|
@@ -16831,7 +16886,7 @@ class PdsDropdownMenuItem {
|
|
|
16831
16886
|
}, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
16832
16887
|
}
|
|
16833
16888
|
render() {
|
|
16834
|
-
return (hAsync(Host, { key: '
|
|
16889
|
+
return (hAsync(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
|
|
16835
16890
|
}
|
|
16836
16891
|
get host() { return getElement(this); }
|
|
16837
16892
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -18609,6 +18664,20 @@ function oneRadioPerGroup(elements) {
|
|
|
18609
18664
|
const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
|
|
18610
18665
|
return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
|
|
18611
18666
|
}
|
|
18667
|
+
/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
|
|
18668
|
+
function tabbableIn(root) {
|
|
18669
|
+
const found = [];
|
|
18670
|
+
collectTabbable(root, found);
|
|
18671
|
+
// checkVisibility() also drops an element inside a hidden ancestor, whose own computed
|
|
18672
|
+
// display isn't none; such an element can't take focus.
|
|
18673
|
+
const visible = found.filter(el => {
|
|
18674
|
+
if (typeof el.checkVisibility === 'function')
|
|
18675
|
+
return el.checkVisibility({ checkVisibilityCSS: true });
|
|
18676
|
+
const style = window.getComputedStyle(el);
|
|
18677
|
+
return style.display !== 'none' && style.visibility !== 'hidden';
|
|
18678
|
+
});
|
|
18679
|
+
return oneRadioPerGroup(visible);
|
|
18680
|
+
}
|
|
18612
18681
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18613
18682
|
function containsComposed(ancestor, node) {
|
|
18614
18683
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -18895,17 +18964,7 @@ class PdsModal {
|
|
|
18895
18964
|
updateFocusableElements() {
|
|
18896
18965
|
if (!this.modalRef)
|
|
18897
18966
|
return;
|
|
18898
|
-
this.focusableElements =
|
|
18899
|
-
collectTabbable(this.modalRef, this.focusableElements);
|
|
18900
|
-
// checkVisibility() also drops an element inside a hidden ancestor, whose own computed
|
|
18901
|
-
// display isn't none; such an element can't take focus, so it can't anchor the trap.
|
|
18902
|
-
this.focusableElements = this.focusableElements.filter(el => {
|
|
18903
|
-
if (typeof el.checkVisibility === 'function')
|
|
18904
|
-
return el.checkVisibility({ checkVisibilityCSS: true });
|
|
18905
|
-
const style = window.getComputedStyle(el);
|
|
18906
|
-
return style.display !== 'none' && style.visibility !== 'hidden';
|
|
18907
|
-
});
|
|
18908
|
-
this.focusableElements = oneRadioPerGroup(this.focusableElements);
|
|
18967
|
+
this.focusableElements = tabbableIn(this.modalRef);
|
|
18909
18968
|
}
|
|
18910
18969
|
/**
|
|
18911
18970
|
* Sets focus to the first focusable element in the modal
|
|
@@ -18929,10 +18988,13 @@ class PdsModal {
|
|
|
18929
18988
|
* Opens the modal
|
|
18930
18989
|
*/
|
|
18931
18990
|
async showModal() {
|
|
18991
|
+
var _a;
|
|
18932
18992
|
if (this.modalRef) {
|
|
18933
18993
|
try {
|
|
18934
|
-
// Store the currently focused element to restore focus when modal closes
|
|
18935
|
-
|
|
18994
|
+
// Store the currently focused element to restore focus when modal closes. Showing an open
|
|
18995
|
+
// modal again (the open watcher does) would record a control inside it instead.
|
|
18996
|
+
if (!this.modalRef.open)
|
|
18997
|
+
this.previousActiveElement = document.activeElement;
|
|
18936
18998
|
// showModal() promotes the dialog to the browser top layer (and makes the
|
|
18937
18999
|
// rest of the page inert), which prevents any overlay outside the dialog
|
|
18938
19000
|
// from ever painting above it. show() opens a non-modal dialog that stays
|
|
@@ -18949,9 +19011,20 @@ class PdsModal {
|
|
|
18949
19011
|
openModals.set(this.el, ++openSequence);
|
|
18950
19012
|
// Update focusable elements and set initial focus
|
|
18951
19013
|
// Using a longer timeout to ensure all components are fully rendered
|
|
19014
|
+
const openedAs = (_a = openModals.get(this.el)) !== null && _a !== void 0 ? _a : 0;
|
|
18952
19015
|
setTimeout(() => {
|
|
18953
19016
|
var _a, _b;
|
|
18954
19017
|
this.updateFocusableElements();
|
|
19018
|
+
// A modal opened above this one in the meantime has focus; don't take it back. Not this
|
|
19019
|
+
// modal itself (moving it gives it a new place), and not a disableTopLayer modal outside
|
|
19020
|
+
// it while this one is in the top layer, which sits below it.
|
|
19021
|
+
const openedAbove = Array.from(openModals).some(([modal, sequence]) => sequence > openedAs &&
|
|
19022
|
+
modal !== this.el &&
|
|
19023
|
+
(containsComposed(this.el, modal) || !modal.disableTopLayer || this.disableTopLayer));
|
|
19024
|
+
if (openedAbove) {
|
|
19025
|
+
this.pdsModalOpen.emit();
|
|
19026
|
+
return;
|
|
19027
|
+
}
|
|
18955
19028
|
if (this.disableInitialFocus) {
|
|
18956
19029
|
// show()/showModal() also move focus into the dialog natively (the
|
|
18957
19030
|
// HTML spec's "dialog focusing steps") — that native step isn't
|
|
@@ -18995,6 +19068,7 @@ class PdsModal {
|
|
|
18995
19068
|
* Closes the modal
|
|
18996
19069
|
*/
|
|
18997
19070
|
async hideModal() {
|
|
19071
|
+
var _a;
|
|
18998
19072
|
if (this.modalRef) {
|
|
18999
19073
|
try {
|
|
19000
19074
|
// Capture before close(): with the async task queue, a prop change
|
|
@@ -19010,11 +19084,18 @@ class PdsModal {
|
|
|
19010
19084
|
this.modalRef.close();
|
|
19011
19085
|
this.open = false;
|
|
19012
19086
|
openModals.delete(this.el);
|
|
19013
|
-
// Restore focus to the element that was focused before the modal was opened
|
|
19014
|
-
|
|
19015
|
-
|
|
19016
|
-
|
|
19017
|
-
this.previousActiveElement
|
|
19087
|
+
// Restore focus to the element that was focused before the modal was opened. If that's
|
|
19088
|
+
// gone or can't take focus (disabled, hidden, or nothing), fall back to the open modal now
|
|
19089
|
+
// on top, so focus doesn't land on an inert page behind it.
|
|
19090
|
+
if (!focusAlreadyMovedElsewhere) {
|
|
19091
|
+
const previous = this.previousActiveElement;
|
|
19092
|
+
if (previous && previous !== document.body && previous.isConnected)
|
|
19093
|
+
(_a = previous.focus) === null || _a === void 0 ? void 0 : _a.call(previous);
|
|
19094
|
+
const active = deepActiveElement$1();
|
|
19095
|
+
// document.body isn't a real restore target — it's just where focus lands when nothing
|
|
19096
|
+
// was focused before opening, so landing back there never counts as a successful restore.
|
|
19097
|
+
if (!previous || previous === document.body || !containsComposed(previous, active) || containsComposed(this.el, active))
|
|
19098
|
+
this.focusTopModal();
|
|
19018
19099
|
}
|
|
19019
19100
|
this.pdsModalClose.emit();
|
|
19020
19101
|
}
|
|
@@ -19023,6 +19104,21 @@ class PdsModal {
|
|
|
19023
19104
|
}
|
|
19024
19105
|
}
|
|
19025
19106
|
}
|
|
19107
|
+
/**
|
|
19108
|
+
* Focuses the first control of the open modal now on top, when the page behind it is inert: that
|
|
19109
|
+
* modal is in the top layer (or paints there inside a top-layer one), or it wraps this one. A
|
|
19110
|
+
* non-modal one over an interactive page, like a drawer, is left alone.
|
|
19111
|
+
*/
|
|
19112
|
+
focusTopModal() {
|
|
19113
|
+
var _a;
|
|
19114
|
+
const top = this.innermostOpenModal();
|
|
19115
|
+
const dialog = top === null || top === void 0 ? void 0 : top.querySelector('.pds-modal__backdrop');
|
|
19116
|
+
if (!dialog)
|
|
19117
|
+
return;
|
|
19118
|
+
if (!closest$1('dialog:modal', dialog) && !containsComposed(top, this.el))
|
|
19119
|
+
return;
|
|
19120
|
+
(_a = tabbableIn(dialog).find(el => !containsComposed(this.el, el))) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19121
|
+
}
|
|
19026
19122
|
/**
|
|
19027
19123
|
* Gets the z-index of a modal's backdrop element
|
|
19028
19124
|
*/
|
|
@@ -19144,14 +19240,14 @@ class PdsModal {
|
|
|
19144
19240
|
}
|
|
19145
19241
|
render() {
|
|
19146
19242
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19147
|
-
return (hAsync("dialog", { key: '
|
|
19243
|
+
return (hAsync("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
|
|
19148
19244
|
'pds-modal__backdrop': true,
|
|
19149
19245
|
'open': this.open
|
|
19150
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19246
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
|
|
19151
19247
|
'pds-modal': true,
|
|
19152
19248
|
[`pds-modal--${sizeClass}`]: true,
|
|
19153
19249
|
'pds-modal--scrollable': this.scrollable
|
|
19154
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19250
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
|
|
19155
19251
|
}
|
|
19156
19252
|
get el() { return getElement(this); }
|
|
19157
19253
|
static get watchers() { return {
|
|
@@ -19444,7 +19540,7 @@ class PdsModalHeader {
|
|
|
19444
19540
|
}; }
|
|
19445
19541
|
}
|
|
19446
19542
|
|
|
19447
|
-
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
19543
|
+
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
19448
19544
|
|
|
19449
19545
|
// Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
|
|
19450
19546
|
const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
|
|
@@ -19794,6 +19890,11 @@ class PdsMultiselect {
|
|
|
19794
19890
|
e.preventDefault(); // Prevent focus change
|
|
19795
19891
|
this.toggleOption(option);
|
|
19796
19892
|
};
|
|
19893
|
+
// mousedown already toggled the option. Without this, a click on the chip reaches the
|
|
19894
|
+
// checkbox through its label and toggles it a second time.
|
|
19895
|
+
this.handleOptionClick = (e) => {
|
|
19896
|
+
e.preventDefault();
|
|
19897
|
+
};
|
|
19797
19898
|
this.handleOptionMouseEnter = (index, option) => () => {
|
|
19798
19899
|
if (option.disabled)
|
|
19799
19900
|
return;
|
|
@@ -19852,6 +19953,18 @@ class PdsMultiselect {
|
|
|
19852
19953
|
this.internals = this.el.attachInternals();
|
|
19853
19954
|
}
|
|
19854
19955
|
}
|
|
19956
|
+
/**
|
|
19957
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
19958
|
+
*/
|
|
19959
|
+
formDisabledCallback(disabled) {
|
|
19960
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
19961
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
19962
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
19963
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
19964
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
19965
|
+
return;
|
|
19966
|
+
this.disabled = disabled;
|
|
19967
|
+
}
|
|
19855
19968
|
componentWillLoad() {
|
|
19856
19969
|
this.originalSearchEmitter = this.pdsMultiselectSearch;
|
|
19857
19970
|
this.syncSelectedItems();
|
|
@@ -19950,8 +20063,20 @@ class PdsMultiselect {
|
|
|
19950
20063
|
var _a;
|
|
19951
20064
|
(_a = this.slottedTriggerEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', String(this.isOpen));
|
|
19952
20065
|
}
|
|
19953
|
-
disabledChanged() {
|
|
20066
|
+
disabledChanged(disabled) {
|
|
20067
|
+
var _a, _b;
|
|
19954
20068
|
this.syncSlottedTrigger();
|
|
20069
|
+
// A disabled control can't stay open, or its options could still be toggled.
|
|
20070
|
+
if (!disabled || !this.isOpen)
|
|
20071
|
+
return;
|
|
20072
|
+
const activeElement = document.activeElement;
|
|
20073
|
+
const focusInside = !!(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || this.el.contains(activeElement));
|
|
20074
|
+
this.closeDropdown();
|
|
20075
|
+
// A disabled built-in trigger can't take focus back (falls to <body>, as natively); a slotted
|
|
20076
|
+
// trigger without its own disabled property only gets aria-disabled and stays focusable, so
|
|
20077
|
+
// focus would otherwise stay stranded on the closed panel's former content.
|
|
20078
|
+
if (focusInside)
|
|
20079
|
+
(_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
|
|
19955
20080
|
}
|
|
19956
20081
|
/**
|
|
19957
20082
|
* Sets focus on the trigger button.
|
|
@@ -19961,7 +20086,8 @@ class PdsMultiselect {
|
|
|
19961
20086
|
(_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19962
20087
|
}
|
|
19963
20088
|
/**
|
|
19964
|
-
* Clears all selected values and resets the component.
|
|
20089
|
+
* Clears all selected values and resets the component. Works while disabled too, as setting a
|
|
20090
|
+
* native control's value from script does.
|
|
19965
20091
|
*/
|
|
19966
20092
|
async clear() {
|
|
19967
20093
|
const hadValues = this.value.length > 0 || this.searchQuery !== '';
|
|
@@ -20597,7 +20723,7 @@ class PdsMultiselect {
|
|
|
20597
20723
|
'pds-multiselect__option--selected': isSelected,
|
|
20598
20724
|
'pds-multiselect__option--create': isCreateOption,
|
|
20599
20725
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
20600
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20726
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20601
20727
|
}
|
|
20602
20728
|
renderOptionAction(option, optionId, isHighlighted) {
|
|
20603
20729
|
var _a;
|
|
@@ -20679,10 +20805,10 @@ class PdsMultiselect {
|
|
|
20679
20805
|
}
|
|
20680
20806
|
render() {
|
|
20681
20807
|
const hasSelections = this.selectedItems.length > 0;
|
|
20682
|
-
return (hAsync(Host, { key: '
|
|
20808
|
+
return (hAsync(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20683
20809
|
'pds-multiselect__label': true,
|
|
20684
20810
|
'visually-hidden': this.hideLabel,
|
|
20685
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20811
|
+
} }, this.label)), hAsync("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20686
20812
|
'pds-multiselect__trigger': true,
|
|
20687
20813
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20688
20814
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20698,7 +20824,7 @@ class PdsMultiselect {
|
|
|
20698
20824
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
20699
20825
|
'pds-multiselect__trigger-text': true,
|
|
20700
20826
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20701
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
20827
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, hAsync("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
|
|
20702
20828
|
}
|
|
20703
20829
|
static get formAssociated() { return true; }
|
|
20704
20830
|
get el() { return getElement(this); }
|
|
@@ -21740,7 +21866,7 @@ class PdsProperty {
|
|
|
21740
21866
|
|
|
21741
21867
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
21742
21868
|
|
|
21743
|
-
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
21869
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
21744
21870
|
|
|
21745
21871
|
/**
|
|
21746
21872
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -22138,23 +22264,23 @@ class PdsRow {
|
|
|
22138
22264
|
}
|
|
22139
22265
|
render() {
|
|
22140
22266
|
const rowClasses = `
|
|
22141
|
-
${this.alignItems
|
|
22267
|
+
${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
|
|
22142
22268
|
${this.border ? 'pds-row--border' : ''}
|
|
22143
|
-
${this.justifyContent
|
|
22269
|
+
${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
22144
22270
|
${this.noWrap ? 'pds-row--no-wrap' : ''}
|
|
22145
22271
|
`;
|
|
22146
22272
|
const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
|
|
22147
|
-
'--row-gap-x': this.colGap
|
|
22148
|
-
'--row-gap-y': this.colGap
|
|
22273
|
+
'--row-gap-x': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
|
|
22274
|
+
'--row-gap-y': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
|
|
22149
22275
|
})), (this.colGapBlock && {
|
|
22150
|
-
'--row-gap-y': this.colGapBlock
|
|
22276
|
+
'--row-gap-y': this.colGapBlock != null && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
|
|
22151
22277
|
})), (this.colGapInline && {
|
|
22152
|
-
'--row-gap-x': this.colGapInline
|
|
22278
|
+
'--row-gap-x': this.colGapInline != null && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
|
|
22153
22279
|
})), (this.minHeight && {
|
|
22154
22280
|
'min-height': this.minHeight,
|
|
22155
22281
|
}));
|
|
22156
22282
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22157
|
-
return hAsync(Host, { key: '
|
|
22283
|
+
return hAsync(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22158
22284
|
}
|
|
22159
22285
|
get el() { return getElement(this); }
|
|
22160
22286
|
static get style() { return pdsRowCss(); }
|
|
@@ -25375,6 +25501,18 @@ class PdsSwitch {
|
|
|
25375
25501
|
this.checked = state === (this.value || 'on');
|
|
25376
25502
|
}
|
|
25377
25503
|
}
|
|
25504
|
+
/**
|
|
25505
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
25506
|
+
*/
|
|
25507
|
+
formDisabledCallback(disabled) {
|
|
25508
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
25509
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
25510
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
25511
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
25512
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
25513
|
+
return;
|
|
25514
|
+
this.disabled = disabled;
|
|
25515
|
+
}
|
|
25378
25516
|
componentWillLoad() {
|
|
25379
25517
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
25380
25518
|
this.updateHasLabelSlot();
|
|
@@ -25383,9 +25521,9 @@ class PdsSwitch {
|
|
|
25383
25521
|
const hostClass = this.switchClassNames();
|
|
25384
25522
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25385
25523
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25386
|
-
return (hAsync(Host, { key: '
|
|
25387
|
-
hAsync("div", { key: '
|
|
25388
|
-
hAsync("div", { key: '
|
|
25524
|
+
return (hAsync(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
25525
|
+
hAsync("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
25526
|
+
hAsync("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
|
|
25389
25527
|
}
|
|
25390
25528
|
static get formAssociated() { return true; }
|
|
25391
25529
|
get el() { return getElement(this); }
|
|
@@ -25830,6 +25968,7 @@ class PdsTableCell {
|
|
|
25830
25968
|
this.scrollContainer = null;
|
|
25831
25969
|
this.setupRetries = 0;
|
|
25832
25970
|
this.truncationCleanup = null;
|
|
25971
|
+
this.hasLoaded = false;
|
|
25833
25972
|
/**
|
|
25834
25973
|
* Determines if the table is currently scrolling.
|
|
25835
25974
|
* @defaultValue false
|
|
@@ -25855,8 +25994,23 @@ class PdsTableCell {
|
|
|
25855
25994
|
componentWillRender() {
|
|
25856
25995
|
this.tableRef = this.hostElement.closest('pds-table');
|
|
25857
25996
|
}
|
|
25997
|
+
// Fires again each time the cell is moved (a sort re-appends every row), unlike componentDidLoad,
|
|
25998
|
+
// so it re-binds what disconnectedCallback tore down. The tooltip binds to the host, which exists before load.
|
|
25999
|
+
connectedCallback() {
|
|
26000
|
+
if (!this.hasLoaded)
|
|
26001
|
+
return;
|
|
26002
|
+
this.tableRef = this.hostElement.closest('pds-table');
|
|
26003
|
+
this.cleanupScrollListener();
|
|
26004
|
+
if (this.needsScrollShadow) {
|
|
26005
|
+
this.setupScrollListener();
|
|
26006
|
+
}
|
|
26007
|
+
if (this.truncate) {
|
|
26008
|
+
this.initTruncationTooltip();
|
|
26009
|
+
}
|
|
26010
|
+
}
|
|
25858
26011
|
componentDidLoad() {
|
|
25859
|
-
|
|
26012
|
+
this.hasLoaded = true;
|
|
26013
|
+
if (this.needsScrollShadow) {
|
|
25860
26014
|
// For responsive tables with fixed columns, set up scroll detection
|
|
25861
26015
|
// This enables the first column to show a shadow when the table is scrolled horizontally
|
|
25862
26016
|
this.setupScrollListener();
|
|
@@ -25869,6 +26023,10 @@ class PdsTableCell {
|
|
|
25869
26023
|
this.cleanupScrollListener();
|
|
25870
26024
|
this.destroyTruncationTooltip();
|
|
25871
26025
|
}
|
|
26026
|
+
get needsScrollShadow() {
|
|
26027
|
+
var _a;
|
|
26028
|
+
return Boolean(((_a = this.tableRef) === null || _a === void 0 ? void 0 : _a.responsive) && this.tableRef.fixedColumn);
|
|
26029
|
+
}
|
|
25872
26030
|
setupScrollListener() {
|
|
25873
26031
|
var _a;
|
|
25874
26032
|
if (!this.tableRef)
|
|
@@ -25947,11 +26105,11 @@ class PdsTableCell {
|
|
|
25947
26105
|
return classNames.join(' ');
|
|
25948
26106
|
}
|
|
25949
26107
|
render() {
|
|
25950
|
-
return (hAsync(Host, { key: '
|
|
26108
|
+
return (hAsync(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
25951
26109
|
this.tableRef.fixedColumn &&
|
|
25952
26110
|
this.tableRef.selectable
|
|
25953
26111
|
? { '--fixed-cell-position': '40px' }
|
|
25954
|
-
: {} }, hAsync("slot", { key: '
|
|
26112
|
+
: {} }, hAsync("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
|
|
25955
26113
|
}
|
|
25956
26114
|
get hostElement() { return getElement(this); }
|
|
25957
26115
|
static get watchers() { return {
|
|
@@ -26830,9 +26988,10 @@ class PdsText {
|
|
|
26830
26988
|
}
|
|
26831
26989
|
validateSize(newValue) {
|
|
26832
26990
|
// Skip when the prop is omitted or explicitly cleared (an empty string is a
|
|
26833
|
-
// common "unset" sentinel)
|
|
26991
|
+
// common "unset" sentinel), or its attribute was removed (Stencil sets the
|
|
26992
|
+
// prop to `null`). Any other unsupported value — including a
|
|
26834
26993
|
// whitespace-only string — is a developer mistake worth warning about.
|
|
26835
|
-
if (newValue
|
|
26994
|
+
if (newValue == null || newValue === '') {
|
|
26836
26995
|
return;
|
|
26837
26996
|
}
|
|
26838
26997
|
if (!TEXT_SIZES.includes(newValue)) {
|
|
@@ -26845,6 +27004,13 @@ class PdsText {
|
|
|
26845
27004
|
// any attempt to apply an unknown size class. @Watch covers later changes.
|
|
26846
27005
|
this.validateSize(this.size);
|
|
26847
27006
|
}
|
|
27007
|
+
// componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
|
|
27008
|
+
// down. Before the first render there's no contentEl yet, and componentDidLoad binds it.
|
|
27009
|
+
connectedCallback() {
|
|
27010
|
+
if (this.truncate && this.contentEl) {
|
|
27011
|
+
this.initTruncationTooltip();
|
|
27012
|
+
}
|
|
27013
|
+
}
|
|
26848
27014
|
componentDidLoad() {
|
|
26849
27015
|
if (this.truncate) {
|
|
26850
27016
|
this.initTruncationTooltip();
|
|
@@ -26874,23 +27040,23 @@ class PdsText {
|
|
|
26874
27040
|
const Tag = this.tag;
|
|
26875
27041
|
const typeClasses = `
|
|
26876
27042
|
pds-text
|
|
26877
|
-
${this.align
|
|
27043
|
+
${this.align != null && this.align.trim() !== ''
|
|
26878
27044
|
? `pds-text--align-${this.align}`
|
|
26879
27045
|
: ''}
|
|
26880
|
-
${this.gutter
|
|
27046
|
+
${this.gutter != null && this.gutter.trim() !== ''
|
|
26881
27047
|
? `pds-text--gutter-${this.gutter}`
|
|
26882
27048
|
: ''}
|
|
26883
|
-
${this.size
|
|
27049
|
+
${this.size != null && this.size.trim() !== ''
|
|
26884
27050
|
? `pds-text--size-${this.size}`
|
|
26885
27051
|
: ''}
|
|
26886
|
-
${this.weight
|
|
27052
|
+
${this.weight != null && this.weight.trim() !== ''
|
|
26887
27053
|
? `pds-text--weight-${this.weight}`
|
|
26888
27054
|
: ''}
|
|
26889
|
-
${this.decoration
|
|
27055
|
+
${this.decoration != null && this.decoration.trim() !== ''
|
|
26890
27056
|
? `pds-text--decoration-${this.decoration}`
|
|
26891
27057
|
: ''}
|
|
26892
27058
|
`;
|
|
26893
|
-
return (hAsync(Tag, { key: '
|
|
27059
|
+
return (hAsync(Tag, { key: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
|
|
26894
27060
|
}
|
|
26895
27061
|
get el() { return getElement(this); }
|
|
26896
27062
|
static get watchers() { return {
|