@patternfly/elements 2.0.5 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +436 -21
- package/package.json +5 -4
- package/pf-accordion/BaseAccordion.js +2 -1
- package/pf-accordion/BaseAccordion.js.map +1 -1
- package/pf-accordion/BaseAccordionHeader.js +2 -1
- package/pf-accordion/BaseAccordionHeader.js.map +1 -1
- package/pf-accordion/BaseAccordionPanel.js +2 -1
- package/pf-accordion/BaseAccordionPanel.js.map +1 -1
- package/pf-accordion/pf-accordion-header.js.map +1 -1
- package/pf-accordion/pf-accordion-panel.js.map +1 -1
- package/pf-accordion/pf-accordion.d.ts +1 -1
- package/pf-accordion/pf-accordion.js +1 -1
- package/pf-accordion/pf-accordion.js.map +1 -1
- package/pf-avatar/BaseAvatar.js +2 -1
- package/pf-avatar/BaseAvatar.js.map +1 -1
- package/pf-avatar/pf-avatar.d.ts +1 -1
- package/pf-avatar/pf-avatar.js +1 -1
- package/pf-avatar/pf-avatar.js.map +1 -1
- package/pf-badge/BaseBadge.js +2 -1
- package/pf-badge/BaseBadge.js.map +1 -1
- package/pf-badge/pf-badge.d.ts +1 -1
- package/pf-badge/pf-badge.js +1 -1
- package/pf-badge/pf-badge.js.map +1 -1
- package/pf-button/BaseButton.d.ts +1 -1
- package/pf-button/BaseButton.js +6 -4
- package/pf-button/BaseButton.js.map +1 -1
- package/pf-button/pf-button.d.ts +1 -1
- package/pf-button/pf-button.js +1 -1
- package/pf-button/pf-button.js.map +1 -1
- package/pf-card/BaseCard.js +2 -1
- package/pf-card/BaseCard.js.map +1 -1
- package/pf-card/pf-card.d.ts +1 -1
- package/pf-card/pf-card.js +1 -1
- package/pf-card/pf-card.js.map +1 -1
- package/pf-clipboard-copy/BaseClipboardCopy.js +2 -1
- package/pf-clipboard-copy/BaseClipboardCopy.js.map +1 -1
- package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -1
- package/pf-clipboard-copy/pf-clipboard-copy.js +11 -5
- package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
- package/pf-code-block/BaseCodeBlock.js +2 -1
- package/pf-code-block/BaseCodeBlock.js.map +1 -1
- package/pf-code-block/pf-code-block.d.ts +1 -1
- package/pf-code-block/pf-code-block.js +5 -3
- package/pf-code-block/pf-code-block.js.map +1 -1
- package/pf-icon/BaseIcon.js +2 -1
- package/pf-icon/BaseIcon.js.map +1 -1
- package/pf-icon/icons/fab/teamspeak.js +1 -1
- package/pf-icon/icons/fab/ussunnah.js +1 -1
- package/pf-icon/icons/far/bell-slash.js +1 -1
- package/pf-icon/icons/far/calendar-minus.js +1 -1
- package/pf-icon/icons/far/calendar-plus.js +1 -1
- package/pf-icon/icons/far/calendar-xmark.js +1 -1
- package/pf-icon/icons/far/chess-knight.js +1 -1
- package/pf-icon/icons/far/chess-rook.js +1 -1
- package/pf-icon/icons/far/circle-check.js +1 -1
- package/pf-icon/icons/far/circle-dot.js +1 -1
- package/pf-icon/icons/far/circle-xmark.js +1 -1
- package/pf-icon/icons/far/circle.js +1 -1
- package/pf-icon/icons/far/clone.js +1 -1
- package/pf-icon/icons/far/copy.js +1 -1
- package/pf-icon/icons/far/file-pdf.js +1 -1
- package/pf-icon/icons/far/file-zipper.js +1 -1
- package/pf-icon/icons/far/folder-closed.js +1 -1
- package/pf-icon/icons/far/font-awesome.js +1 -1
- package/pf-icon/icons/far/futbol.js +1 -1
- package/pf-icon/icons/far/gem.js +1 -1
- package/pf-icon/icons/far/hand-back-fist.js +1 -1
- package/pf-icon/icons/far/hand-peace.js +1 -1
- package/pf-icon/icons/far/hand-pointer.js +1 -1
- package/pf-icon/icons/far/hand-scissors.js +1 -1
- package/pf-icon/icons/far/hand-spock.js +1 -1
- package/pf-icon/icons/far/heart.js +1 -1
- package/pf-icon/icons/far/lightbulb.js +1 -1
- package/pf-icon/icons/far/map.js +1 -1
- package/pf-icon/icons/far/newspaper.js +1 -1
- package/pf-icon/icons/far/object-group.js +1 -1
- package/pf-icon/icons/far/paste.js +1 -1
- package/pf-icon/icons/far/rectangle-xmark.js +1 -1
- package/pf-icon/icons/far/snowflake.js +1 -1
- package/pf-icon/icons/far/square-check.js +1 -1
- package/pf-icon/icons/far/square-full.js +1 -1
- package/pf-icon/icons/far/square-minus.js +1 -1
- package/pf-icon/icons/far/square-plus.js +1 -1
- package/pf-icon/icons/far/square.js +1 -1
- package/pf-icon/icons/far/star-half-stroke.js +1 -1
- package/pf-icon/icons/far/star-half.js +1 -1
- package/pf-icon/icons/far/star.js +1 -1
- package/pf-icon/icons/far/thumbs-up.js +1 -1
- package/pf-icon/icons/fas/1.js +1 -1
- package/pf-icon/icons/fas/angle-down.js +1 -1
- package/pf-icon/icons/fas/angle-left.js +1 -1
- package/pf-icon/icons/fas/angle-right.js +1 -1
- package/pf-icon/icons/fas/angle-up.js +1 -1
- package/pf-icon/icons/fas/angles-down.js +1 -1
- package/pf-icon/icons/fas/angles-left.js +1 -1
- package/pf-icon/icons/fas/angles-right.js +1 -1
- package/pf-icon/icons/fas/angles-up.js +1 -1
- package/pf-icon/icons/fas/arrow-down-1-9.js +1 -1
- package/pf-icon/icons/fas/arrow-down-9-1.js +1 -1
- package/pf-icon/icons/fas/arrow-down-a-z.js +1 -1
- package/pf-icon/icons/fas/arrow-down-long.js +1 -1
- package/pf-icon/icons/fas/arrow-down-z-a.js +1 -1
- package/pf-icon/icons/fas/arrow-rotate-left.js +1 -1
- package/pf-icon/icons/fas/arrow-rotate-right.js +1 -1
- package/pf-icon/icons/fas/arrow-up-1-9.js +1 -1
- package/pf-icon/icons/fas/arrow-up-9-1.js +1 -1
- package/pf-icon/icons/fas/arrow-up-a-z.js +1 -1
- package/pf-icon/icons/fas/arrow-up-from-ground-water.js +1 -1
- package/pf-icon/icons/fas/arrow-up-from-water-pump.js +1 -1
- package/pf-icon/icons/fas/arrow-up-long.js +1 -1
- package/pf-icon/icons/fas/arrow-up-z-a.js +1 -1
- package/pf-icon/icons/fas/arrows-down-to-people.js +1 -1
- package/pf-icon/icons/fas/arrows-rotate.js +1 -1
- package/pf-icon/icons/fas/arrows-spin.js +1 -1
- package/pf-icon/icons/fas/arrows-to-eye.js +1 -1
- package/pf-icon/icons/fas/arrows-up-down.js +1 -1
- package/pf-icon/icons/fas/atom.js +1 -1
- package/pf-icon/icons/fas/baby.js +1 -1
- package/pf-icon/icons/fas/bacteria.js +1 -1
- package/pf-icon/icons/fas/bahai.js +1 -1
- package/pf-icon/icons/fas/basketball.js +1 -1
- package/pf-icon/icons/fas/bath.js +1 -1
- package/pf-icon/icons/fas/biohazard.js +1 -1
- package/pf-icon/icons/fas/bolt.js +1 -1
- package/pf-icon/icons/fas/book-journal-whills.js +1 -1
- package/pf-icon/icons/fas/border-none.js +1 -1
- package/pf-icon/icons/fas/bottle-droplet.js +1 -1
- package/pf-icon/icons/fas/bottle-water.js +1 -1
- package/pf-icon/icons/fas/bowling-ball.js +1 -1
- package/pf-icon/icons/fas/box-open.js +1 -1
- package/pf-icon/icons/fas/braille.js +1 -1
- package/pf-icon/icons/fas/brush.js +1 -1
- package/pf-icon/icons/fas/building-columns.js +1 -1
- package/pf-icon/icons/fas/burger.js +1 -1
- package/pf-icon/icons/fas/bus.js +1 -1
- package/pf-icon/icons/fas/calendar-minus.js +1 -1
- package/pf-icon/icons/fas/calendar-plus.js +1 -1
- package/pf-icon/icons/fas/calendar-xmark.js +1 -1
- package/pf-icon/icons/fas/camera-rotate.js +1 -1
- package/pf-icon/icons/fas/cannabis.js +1 -1
- package/pf-icon/icons/fas/car-burst.js +1 -1
- package/pf-icon/icons/fas/car-on.js +1 -1
- package/pf-icon/icons/fas/car-tunnel.js +1 -1
- package/pf-icon/icons/fas/cat.js +1 -1
- package/pf-icon/icons/fas/cedi-sign.js +1 -1
- package/pf-icon/icons/fas/cent-sign.js +1 -1
- package/pf-icon/icons/fas/chart-pie.js +1 -1
- package/pf-icon/icons/fas/check-double.js +1 -1
- package/pf-icon/icons/fas/check.js +1 -1
- package/pf-icon/icons/fas/chess-knight.js +1 -1
- package/pf-icon/icons/fas/chess-pawn.js +1 -1
- package/pf-icon/icons/fas/chess-queen.js +1 -1
- package/pf-icon/icons/fas/chess-rook.js +1 -1
- package/pf-icon/icons/fas/chevron-down.js +1 -1
- package/pf-icon/icons/fas/chevron-up.js +1 -1
- package/pf-icon/icons/fas/child-combatant.js +1 -1
- package/pf-icon/icons/fas/child-reaching.js +1 -1
- package/pf-icon/icons/fas/circle-check.js +1 -1
- package/pf-icon/icons/fas/circle-dollar-to-slot.js +1 -1
- package/pf-icon/icons/fas/circle-dot.js +1 -1
- package/pf-icon/icons/fas/circle-half-stroke.js +1 -1
- package/pf-icon/icons/fas/circle-minus.js +1 -1
- package/pf-icon/icons/fas/circle-plus.js +1 -1
- package/pf-icon/icons/fas/circle-xmark.js +1 -1
- package/pf-icon/icons/fas/circle.js +1 -1
- package/pf-icon/icons/fas/clone.js +1 -1
- package/pf-icon/icons/fas/cloud-moon-rain.js +1 -1
- package/pf-icon/icons/fas/code-branch.js +1 -1
- package/pf-icon/icons/fas/code-commit.js +1 -1
- package/pf-icon/icons/fas/code-compare.js +1 -1
- package/pf-icon/icons/fas/code-fork.js +1 -1
- package/pf-icon/icons/fas/code-merge.js +1 -1
- package/pf-icon/icons/fas/code-pull-request.js +1 -1
- package/pf-icon/icons/fas/colon-sign.js +1 -1
- package/pf-icon/icons/fas/cookie-bite.js +1 -1
- package/pf-icon/icons/fas/cookie.js +1 -1
- package/pf-icon/icons/fas/copy.js +1 -1
- package/pf-icon/icons/fas/cruzeiro-sign.js +1 -1
- package/pf-icon/icons/fas/cubes.js +1 -1
- package/pf-icon/icons/fas/dharmachakra.js +1 -1
- package/pf-icon/icons/fas/dice-d20.js +1 -1
- package/pf-icon/icons/fas/dice-d6.js +1 -1
- package/pf-icon/icons/fas/dice-five.js +1 -1
- package/pf-icon/icons/fas/dice-four.js +1 -1
- package/pf-icon/icons/fas/dice-one.js +1 -1
- package/pf-icon/icons/fas/dice-six.js +1 -1
- package/pf-icon/icons/fas/dice-three.js +1 -1
- package/pf-icon/icons/fas/dice-two.js +1 -1
- package/pf-icon/icons/fas/dice.js +1 -1
- package/pf-icon/icons/fas/disease.js +1 -1
- package/pf-icon/icons/fas/divide.js +1 -1
- package/pf-icon/icons/fas/dollar-sign.js +1 -1
- package/pf-icon/icons/fas/dumbbell.js +1 -1
- package/pf-icon/icons/fas/earth-africa.js +1 -1
- package/pf-icon/icons/fas/earth-europe.js +1 -1
- package/pf-icon/icons/fas/ellipsis-vertical.js +1 -1
- package/pf-icon/icons/fas/ellipsis.js +1 -1
- package/pf-icon/icons/fas/envelopes-bulk.js +1 -1
- package/pf-icon/icons/fas/equals.js +1 -1
- package/pf-icon/icons/fas/eraser.js +1 -1
- package/pf-icon/icons/fas/exclamation.js +1 -1
- package/pf-icon/icons/fas/face-grin-squint-tears.js +1 -1
- package/pf-icon/icons/fas/file-csv.js +1 -1
- package/pf-icon/icons/fas/file-pdf.js +1 -1
- package/pf-icon/icons/fas/file-waveform.js +1 -1
- package/pf-icon/icons/fas/file-word.js +1 -1
- package/pf-icon/icons/fas/fill.js +1 -1
- package/pf-icon/icons/fas/filter-circle-dollar.js +1 -1
- package/pf-icon/icons/fas/filter-circle-xmark.js +1 -1
- package/pf-icon/icons/fas/fingerprint.js +1 -1
- package/pf-icon/icons/fas/flag-checkered.js +1 -1
- package/pf-icon/icons/fas/flag-usa.js +1 -1
- package/pf-icon/icons/fas/futbol.js +1 -1
- package/pf-icon/icons/fas/gamepad.js +1 -1
- package/pf-icon/icons/fas/gear.js +1 -1
- package/pf-icon/icons/fas/gears.js +1 -1
- package/pf-icon/icons/fas/gem.js +1 -1
- package/pf-icon/icons/fas/genderless.js +1 -1
- package/pf-icon/icons/fas/globe.js +1 -1
- package/pf-icon/icons/fas/golf-ball-tee.js +1 -1
- package/pf-icon/icons/fas/grip-vertical.js +1 -1
- package/pf-icon/icons/fas/grip.js +1 -1
- package/pf-icon/icons/fas/group-arrows-rotate.js +1 -1
- package/pf-icon/icons/fas/hand-back-fist.js +1 -1
- package/pf-icon/icons/fas/hand-fist.js +1 -1
- package/pf-icon/icons/fas/hand-middle-finger.js +1 -1
- package/pf-icon/icons/fas/hand-peace.js +1 -1
- package/pf-icon/icons/fas/hand-pointer.js +1 -1
- package/pf-icon/icons/fas/hand-spock.js +1 -1
- package/pf-icon/icons/fas/hands-bound.js +1 -1
- package/pf-icon/icons/fas/hands-bubbles.js +1 -1
- package/pf-icon/icons/fas/hands-praying.js +1 -1
- package/pf-icon/icons/fas/hands.js +1 -1
- package/pf-icon/icons/fas/handshake-angle.js +1 -1
- package/pf-icon/icons/fas/handshake-simple-slash.js +1 -1
- package/pf-icon/icons/fas/handshake-slash.js +1 -1
- package/pf-icon/icons/fas/head-side-cough-slash.js +1 -1
- package/pf-icon/icons/fas/head-side-cough.js +1 -1
- package/pf-icon/icons/fas/head-side-mask.js +1 -1
- package/pf-icon/icons/fas/head-side-virus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-bolt.js +1 -1
- package/pf-icon/icons/fas/heart-circle-check.js +1 -1
- package/pf-icon/icons/fas/heart-circle-exclamation.js +1 -1
- package/pf-icon/icons/fas/heart-circle-minus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-plus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-xmark.js +1 -1
- package/pf-icon/icons/fas/helicopter-symbol.js +1 -1
- package/pf-icon/icons/fas/hill-avalanche.js +1 -1
- package/pf-icon/icons/fas/holly-berry.js +1 -1
- package/pf-icon/icons/fas/horse-head.js +1 -1
- package/pf-icon/icons/fas/hourglass-half.js +1 -1
- package/pf-icon/icons/fas/house-flood-water.js +1 -1
- package/pf-icon/icons/fas/house-tsunami.js +1 -1
- package/pf-icon/icons/fas/ice-cream.js +1 -1
- package/pf-icon/icons/fas/industry.js +1 -1
- package/pf-icon/icons/fas/jedi.js +1 -1
- package/pf-icon/icons/fas/khanda.js +1 -1
- package/pf-icon/icons/fas/land-mine-on.js +1 -1
- package/pf-icon/icons/fas/laptop-file.js +1 -1
- package/pf-icon/icons/fas/leaf.js +1 -1
- package/pf-icon/icons/fas/lightbulb.js +1 -1
- package/pf-icon/icons/fas/link.js +1 -1
- package/pf-icon/icons/fas/location-arrow.js +1 -1
- package/pf-icon/icons/fas/map-pin.js +1 -1
- package/pf-icon/icons/fas/mars-and-venus.js +1 -1
- package/pf-icon/icons/fas/mars-stroke-right.js +1 -1
- package/pf-icon/icons/fas/maximize.js +1 -1
- package/pf-icon/icons/fas/mercury.js +1 -1
- package/pf-icon/icons/fas/microphone-lines.js +1 -1
- package/pf-icon/icons/fas/microphone.js +1 -1
- package/pf-icon/icons/fas/minus.js +1 -1
- package/pf-icon/icons/fas/mobile-button.js +1 -1
- package/pf-icon/icons/fas/mobile-screen-button.js +1 -1
- package/pf-icon/icons/fas/mobile-screen.js +1 -1
- package/pf-icon/icons/fas/mobile.js +1 -1
- package/pf-icon/icons/fas/mound.js +1 -1
- package/pf-icon/icons/fas/mountain.js +1 -1
- package/pf-icon/icons/fas/neuter.js +1 -1
- package/pf-icon/icons/fas/newspaper.js +1 -1
- package/pf-icon/icons/fas/not-equal.js +1 -1
- package/pf-icon/icons/fas/outdent.js +1 -1
- package/pf-icon/icons/fas/paperclip.js +1 -1
- package/pf-icon/icons/fas/parachute-box.js +1 -1
- package/pf-icon/icons/fas/paste.js +1 -1
- package/pf-icon/icons/fas/pen-nib.js +1 -1
- package/pf-icon/icons/fas/pen-to-square.js +1 -1
- package/pf-icon/icons/fas/people-arrows.js +1 -1
- package/pf-icon/icons/fas/people-robbery.js +1 -1
- package/pf-icon/icons/fas/person-breastfeeding.js +1 -1
- package/pf-icon/icons/fas/person-cane.js +1 -1
- package/pf-icon/icons/fas/person-drowning.js +1 -1
- package/pf-icon/icons/fas/person-falling.js +1 -1
- package/pf-icon/icons/fas/person-military-pointing.js +1 -1
- package/pf-icon/icons/fas/person-military-rifle.js +1 -1
- package/pf-icon/icons/fas/person-military-to-person.js +1 -1
- package/pf-icon/icons/fas/person-praying.js +1 -1
- package/pf-icon/icons/fas/person-pregnant.js +1 -1
- package/pf-icon/icons/fas/person-rifle.js +1 -1
- package/pf-icon/icons/fas/person-snowboarding.js +1 -1
- package/pf-icon/icons/fas/person-walking-luggage.js +1 -1
- package/pf-icon/icons/fas/person-walking-with-cane.js +1 -1
- package/pf-icon/icons/fas/piggy-bank.js +1 -1
- package/pf-icon/icons/fas/plug-circle-minus.js +1 -1
- package/pf-icon/icons/fas/plus.js +1 -1
- package/pf-icon/icons/fas/poo-storm.js +1 -1
- package/pf-icon/icons/fas/pump-medical.js +1 -1
- package/pf-icon/icons/fas/pump-soap.js +1 -1
- package/pf-icon/icons/fas/puzzle-piece.js +1 -1
- package/pf-icon/icons/fas/question.js +1 -1
- package/pf-icon/icons/fas/radiation.js +1 -1
- package/pf-icon/icons/fas/receipt.js +1 -1
- package/pf-icon/icons/fas/ribbon.js +1 -1
- package/pf-icon/icons/fas/rotate-left.js +1 -1
- package/pf-icon/icons/fas/rotate-right.js +1 -1
- package/pf-icon/icons/fas/rotate.js +1 -1
- package/pf-icon/icons/fas/ruler.js +1 -1
- package/pf-icon/icons/fas/rupee-sign.js +1 -1
- package/pf-icon/icons/fas/s.js +1 -1
- package/pf-icon/icons/fas/sailboat.js +1 -1
- package/pf-icon/icons/fas/scale-unbalanced-flip.js +1 -1
- package/pf-icon/icons/fas/scale-unbalanced.js +1 -1
- package/pf-icon/icons/fas/shield-cat.js +1 -1
- package/pf-icon/icons/fas/shield-dog.js +1 -1
- package/pf-icon/icons/fas/shield-halved.js +1 -1
- package/pf-icon/icons/fas/shield-heart.js +1 -1
- package/pf-icon/icons/fas/shield-virus.js +1 -1
- package/pf-icon/icons/fas/shield.js +1 -1
- package/pf-icon/icons/fas/shower.js +1 -1
- package/pf-icon/icons/fas/signal.js +1 -1
- package/pf-icon/icons/fas/signs-post.js +1 -1
- package/pf-icon/icons/fas/sliders.js +1 -1
- package/pf-icon/icons/fas/solar-panel.js +1 -1
- package/pf-icon/icons/fas/spinner.js +1 -1
- package/pf-icon/icons/fas/splotch.js +1 -1
- package/pf-icon/icons/fas/staff-snake.js +1 -1
- package/pf-icon/icons/fas/star-half-stroke.js +1 -1
- package/pf-icon/icons/fas/star-of-david.js +1 -1
- package/pf-icon/icons/fas/star-of-life.js +1 -1
- package/pf-icon/icons/fas/stethoscope.js +1 -1
- package/pf-icon/icons/fas/stopwatch-20.js +1 -1
- package/pf-icon/icons/fas/stopwatch.js +1 -1
- package/pf-icon/icons/fas/store.js +1 -1
- package/pf-icon/icons/fas/table-tennis-paddle-ball.js +1 -1
- package/pf-icon/icons/fas/temperature-arrow-down.js +1 -1
- package/pf-icon/icons/fas/temperature-arrow-up.js +1 -1
- package/pf-icon/icons/fas/temperature-empty.js +1 -1
- package/pf-icon/icons/fas/temperature-full.js +1 -1
- package/pf-icon/icons/fas/temperature-half.js +1 -1
- package/pf-icon/icons/fas/temperature-high.js +1 -1
- package/pf-icon/icons/fas/temperature-quarter.js +1 -1
- package/pf-icon/icons/fas/temperature-three-quarters.js +1 -1
- package/pf-icon/icons/fas/tent-arrows-down.js +1 -1
- package/pf-icon/icons/fas/terminal.js +1 -1
- package/pf-icon/icons/fas/toilet-paper-slash.js +1 -1
- package/pf-icon/icons/fas/toilet-paper.js +1 -1
- package/pf-icon/icons/fas/tooth.js +1 -1
- package/pf-icon/icons/fas/train-tram.js +1 -1
- package/pf-icon/icons/fas/tty.js +1 -1
- package/pf-icon/icons/fas/umbrella.js +1 -1
- package/pf-icon/icons/fas/user-large-slash.js +1 -1
- package/pf-icon/icons/fas/user-secret.js +1 -1
- package/pf-icon/icons/fas/venus-double.js +1 -1
- package/pf-icon/icons/fas/venus.js +1 -1
- package/pf-icon/icons/fas/video-slash.js +1 -1
- package/pf-icon/icons/fas/virus-slash.js +1 -1
- package/pf-icon/icons/fas/volcano.js +1 -1
- package/pf-icon/icons/fas/wine-glass-empty.js +1 -1
- package/pf-icon/icons/fas/wine-glass.js +1 -1
- package/pf-icon/icons/fas/worm.js +1 -1
- package/pf-icon/icons/fas/xmark.js +1 -1
- package/pf-icon/icons/fas/yen-sign.js +1 -1
- package/pf-icon/pf-icon.d.ts +1 -1
- package/pf-icon/pf-icon.js +1 -1
- package/pf-icon/pf-icon.js.map +1 -1
- package/pf-jump-links/pf-jump-links-item.js +5 -2
- package/pf-jump-links/pf-jump-links-item.js.map +1 -1
- package/pf-jump-links/pf-jump-links-list.js.map +1 -1
- package/pf-jump-links/pf-jump-links.d.ts +1 -1
- package/pf-jump-links/pf-jump-links.js +10 -4
- package/pf-jump-links/pf-jump-links.js.map +1 -1
- package/pf-label/BaseLabel.js +2 -1
- package/pf-label/BaseLabel.js.map +1 -1
- package/pf-label/pf-label.d.ts +1 -1
- package/pf-label/pf-label.js +1 -1
- package/pf-label/pf-label.js.map +1 -1
- package/pf-modal/pf-modal.d.ts +1 -1
- package/pf-modal/pf-modal.js +8 -2
- package/pf-modal/pf-modal.js.map +1 -1
- package/pf-panel/pf-panel.d.ts +1 -1
- package/pf-panel/pf-panel.js +1 -1
- package/pf-panel/pf-panel.js.map +1 -1
- package/pf-popover/README.md +48 -0
- package/pf-popover/pf-popover.css +191 -0
- package/pf-popover/pf-popover.d.ts +266 -0
- package/pf-popover/pf-popover.js +447 -0
- package/pf-popover/pf-popover.js.map +1 -0
- package/pf-progress-stepper/pf-progress-step.js +2 -1
- package/pf-progress-stepper/pf-progress-step.js.map +1 -1
- package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -1
- package/pf-progress-stepper/pf-progress-stepper.js +5 -2
- package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
- package/pf-spinner/BaseSpinner.js +2 -1
- package/pf-spinner/BaseSpinner.js.map +1 -1
- package/pf-spinner/pf-spinner.d.ts +1 -1
- package/pf-spinner/pf-spinner.js +1 -1
- package/pf-spinner/pf-spinner.js.map +1 -1
- package/pf-switch/BaseSwitch.js +2 -1
- package/pf-switch/BaseSwitch.js.map +1 -1
- package/pf-switch/pf-switch.d.ts +1 -1
- package/pf-switch/pf-switch.js +1 -1
- package/pf-switch/pf-switch.js.map +1 -1
- package/pf-tabs/BaseTab.d.ts +1 -0
- package/pf-tabs/BaseTab.js +8 -1
- package/pf-tabs/BaseTab.js.map +1 -1
- package/pf-tabs/BaseTabPanel.js +4 -1
- package/pf-tabs/BaseTabPanel.js.map +1 -1
- package/pf-tabs/BaseTabs.js +5 -2
- package/pf-tabs/BaseTabs.js.map +1 -1
- package/pf-tabs/pf-tab-panel.d.ts +0 -1
- package/pf-tabs/pf-tab-panel.js +0 -5
- package/pf-tabs/pf-tab-panel.js.map +1 -1
- package/pf-tabs/pf-tab.d.ts +0 -1
- package/pf-tabs/pf-tab.js +0 -5
- package/pf-tabs/pf-tab.js.map +1 -1
- package/pf-tabs/pf-tabs.d.ts +1 -1
- package/pf-tabs/pf-tabs.js +1 -1
- package/pf-tabs/pf-tabs.js.map +1 -1
- package/pf-tile/pf-tile.d.ts +1 -1
- package/pf-tile/pf-tile.js +1 -1
- package/pf-tile/pf-tile.js.map +1 -1
- package/pf-timestamp/pf-timestamp.d.ts +1 -1
- package/pf-timestamp/pf-timestamp.js +5 -2
- package/pf-timestamp/pf-timestamp.js.map +1 -1
- package/pf-tooltip/BaseTooltip.js +2 -2
- package/pf-tooltip/BaseTooltip.js.map +1 -1
- package/pf-tooltip/pf-tooltip.d.ts +1 -1
- package/pf-tooltip/pf-tooltip.js +1 -1
- package/pf-tooltip/pf-tooltip.js.map +1 -1
- package/pfe.min.js +156 -100
- package/pfe.min.js.map +4 -4
|
@@ -0,0 +1,447 @@
|
|
|
1
|
+
var _PfPopover_instances, _PfPopover_referenceTrigger, _PfPopover_float, _PfPopover_slots, _PfPopover_outsideClick;
|
|
2
|
+
var PfPopover_1;
|
|
3
|
+
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
|
|
4
|
+
import { LitElement, nothing, html } from 'lit';
|
|
5
|
+
import { customElement } from 'lit/decorators/custom-element.js';
|
|
6
|
+
import { property } from 'lit/decorators/property.js';
|
|
7
|
+
import { query } from 'lit/decorators/query.js';
|
|
8
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
|
|
12
|
+
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
|
|
13
|
+
import { bound } from '@patternfly/pfe-core/decorators/bound.js';
|
|
14
|
+
import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
|
|
15
|
+
import { observed } from '@patternfly/pfe-core/decorators/observed.js';
|
|
16
|
+
import '@patternfly/elements/pf-button/pf-button.js';
|
|
17
|
+
import { css } from "lit";
|
|
18
|
+
const styles = css `:host{display:inline;--_floating-arrow-size:var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));--_header-text-color:var(--pf-c-popover__title-text--Color, inherit);--_header-icon-color:var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));--_animation-speed:var(--pf-popover--animation-speed, 300ms);--_z-index:var(--pf-popover--z-index, 9999)}.visually-hidden{position:fixed;top:0;left:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#container{display:inline-flex;position:relative}#trigger{display:inline-block;position:relative}#arrow{display:block;position:absolute;background-color:var(--pf-c-popover__arrow--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-popover__arrow--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));content:'';height:var(--pf-c-popover__arrow--Height,var(--pf-global--arrow--width-lg,1.5625rem));width:var(--pf-c-popover__arrow--Width,var(--pf-global--arrow--width-lg,1.5625rem));rotate:45deg;z-index:-1;pointer-events:none}#popover{display:block;position:absolute;opacity:0;z-index:-1;transition:visibility 0s,opacity var(--_animation-speed) cubic-bezier(.54, 1.5, .38, 1.11) 0s;left:0;top:0;translate:var(--_floating-content-translate);box-shadow:var(--pf-c-popover--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));border:0;padding:0;visibility:hidden}#popover[open]{opacity:1;z-index:var(--_z-index);visibility:visible}[part=content]{position:relative;padding:var(--pf-c-popover__content--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingLeft,var(--pf-global--spacer--md,1rem));word-break:break-word;line-height:var(--pf-c-popover--line-height, 1.5);font-size:var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-popover__content--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-popover__content--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));max-width:var(--pf-c-popover--MaxWidth,calc(var(--pf-c-popover__content--PaddingLeft,1rem) + var(--pf-c-popover__content--PaddingRight,1rem) + 18.75rem));min-width:var(--pf-c-popover--MinWidth,calc(var(--pf-c-popover__content--PaddingLeft,1rem) + var(--pf-c-popover__content--PaddingRight,1rem) + 18.75rem));width:max-content}[part=close-button]{cursor:pointer;position:absolute;right:var(--pf-c-popover--c-button--Right,calc(var(--pf-c-popover__content--PaddingRight,1rem) - var(--pf-global--spacer--md,1rem)));top:var(--pf-c-popover--c-button--Top,calc(var(--pf-c-popover__content--PaddingTop,1rem) - var(--pf-global--spacer--form-element,.375rem)))}[part=content]>[part=close-button]:not([hidden])~:not([hidden]){padding-right:var(--pf-c-popover--c-button--sibling--PaddingRight,var(--pf-global--spacer--2xl,3rem))}[part=header]{display:flex;align-items:baseline}[part=icon]{color:var(--_header-icon-color);margin-right:var(--pf-c-popover__title-icon--MarginRight,var(--pf-global--spacer--sm,.5rem))}[part=icon] *,[part=icon] ::slotted(*){vertical-align:-.125em}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)),[part=icon]{font-size:var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-global--FontWeight--normal,400);--pf-icon--size:var(\n --pf-c-popover__title--FontSize,\n var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))\n )}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)){color:var(--_header-text-color);margin-top:0;margin-bottom:var(--pf-c-popover__title--MarginBottom,var(--pf-global--spacer--sm,.5rem));line-height:var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));font-family:var(\n --pf-c-popover__title--FontFamily,\n var(\n --pf-global--FontFamily--heading--sans-serif,\n 'RedHatDisplay',\n 'Overpass',\n overpass,\n helvetica,\n arial,\n sans-serif\n )\n )}[part=body]{display:block;word-wrap:break-word}[part=footer]{margin-top:var(--pf-c-popover__footer--MarginTop,var(--pf-global--spacer--md,1rem))}:host([alert-severity=default]){--_header-text-color:var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));--_header-icon-color:var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596))}:host([alert-severity=info]){--_header-text-color:var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));--_header-icon-color:var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3))}:host([alert-severity=warning]){--_header-icon-color:var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));--_header-text-color:var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600))}:host([alert-severity=success]){--_header-icon-color:var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));--_header-text-color:var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18))}:host([alert-severity=danger]){--_header-icon-color:var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));--_header-text-color:var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000))}`;
|
|
19
|
+
const headingLevels = [2, 3, 4, 5, 6];
|
|
20
|
+
export class PopoverHideEvent extends ComposedEvent {
|
|
21
|
+
constructor() {
|
|
22
|
+
super('hide');
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
export class PopoverHiddenEvent extends ComposedEvent {
|
|
26
|
+
constructor() {
|
|
27
|
+
super('hidden');
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export class PopoverShowEvent extends ComposedEvent {
|
|
31
|
+
constructor() {
|
|
32
|
+
super('show');
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
export class PopoverShownEvent extends ComposedEvent {
|
|
36
|
+
constructor() {
|
|
37
|
+
super('shown');
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
|
|
42
|
+
*
|
|
43
|
+
* @summary Toggle the visibility of helpful or contextual information.
|
|
44
|
+
*
|
|
45
|
+
* @slot -
|
|
46
|
+
* The default slot holds invoking element.
|
|
47
|
+
* Typically this would be an icon, button, or other small sized element.
|
|
48
|
+
* @slot heading
|
|
49
|
+
* This slot renders the content that will be displayed inside of the header of the popover.
|
|
50
|
+
* Typically this would be a heading element.
|
|
51
|
+
* @slot icon
|
|
52
|
+
* This slot renders the icon that will be displayed inside the header of the popover,
|
|
53
|
+
* before the heading.
|
|
54
|
+
* @slot body
|
|
55
|
+
* This slot renders the content that will be displayed inside of the body of the popover.
|
|
56
|
+
* @slot footer
|
|
57
|
+
* This slot renders the content that will be displayed inside of the footer of the popover.
|
|
58
|
+
*
|
|
59
|
+
* @csspart container - The component wrapper
|
|
60
|
+
* @csspart content - The content wrapper
|
|
61
|
+
* @csspart header - The header element; only visible if both an icon annd heading are provided.
|
|
62
|
+
* @csspart heading - The heading element
|
|
63
|
+
* @csspart icon - The header icon
|
|
64
|
+
* @csspart close-button - The close button
|
|
65
|
+
* @csspart body - The container for the body content
|
|
66
|
+
* @csspart footer - The container for the footer content
|
|
67
|
+
*
|
|
68
|
+
* @cssprop {<length>} --pf-c-popover__arrow--Height
|
|
69
|
+
* Height of the arrow
|
|
70
|
+
* {@default `1.5625rem`}
|
|
71
|
+
* @cssprop {<length>} --pf-c-popover__arrow--Width
|
|
72
|
+
* Width of the arrow
|
|
73
|
+
* {@default `1.5625rem`}
|
|
74
|
+
* @cssprop {<color>} --pf-c-popover__title-text--Color
|
|
75
|
+
* Heading font color
|
|
76
|
+
* {@default `inherit`}
|
|
77
|
+
* @cssprop {<color>} --pf-c-popover__title-icon--Color
|
|
78
|
+
* Heading icon font color
|
|
79
|
+
* {@default `#151515`}
|
|
80
|
+
* @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor
|
|
81
|
+
* Arrow background color
|
|
82
|
+
* {@default `#fff`}
|
|
83
|
+
* @cssprop --pf-c-popover__arrow--BoxShadow
|
|
84
|
+
* Arrow box shadow
|
|
85
|
+
* {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
|
|
86
|
+
* @cssprop --pf-c-popover--BoxShadow
|
|
87
|
+
* Popover box shadow
|
|
88
|
+
* {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
|
|
89
|
+
* @cssprop {<length>} --pf-c-tooltip__content--PaddingTop
|
|
90
|
+
* Popover top padding
|
|
91
|
+
* {@default `1rem`}
|
|
92
|
+
* @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
|
|
93
|
+
* Popover right padding
|
|
94
|
+
* {@default `1rem`}
|
|
95
|
+
* @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom
|
|
96
|
+
* Popover bottom padding
|
|
97
|
+
* {@default `1rem`}
|
|
98
|
+
* @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft
|
|
99
|
+
* Popover left padding
|
|
100
|
+
* {@default `1rem`}
|
|
101
|
+
* @cssprop {<number>} --pf-c-popover--line-height
|
|
102
|
+
* Popover line height
|
|
103
|
+
* {@default `1.5`}
|
|
104
|
+
* @cssprop {<length>} --pf-c-popover__content--FontSize
|
|
105
|
+
* Popover font-size
|
|
106
|
+
* {@default `0.875rem`}
|
|
107
|
+
* @cssprop {<color>} --pf-c-popover__content--BackgroundColor
|
|
108
|
+
* Popover background color
|
|
109
|
+
* {@default `#fff`}
|
|
110
|
+
* @cssprop {<length>} --pf-c-popover--MaxWidth
|
|
111
|
+
* Popover max-width
|
|
112
|
+
* {@default `20.75rem`}
|
|
113
|
+
* @cssprop {<length>} --pf-c-popover--MinWidth
|
|
114
|
+
* Popover min-width
|
|
115
|
+
* {@default `20.75rem`}
|
|
116
|
+
* @cssprop {<number>} --pf-c-popover--c-button--Right
|
|
117
|
+
* Close button right position
|
|
118
|
+
* {@default `0}
|
|
119
|
+
* @cssprop {<number>} --pf-c-popover--c-button--Top
|
|
120
|
+
* Close button top position
|
|
121
|
+
* {@default `0`}
|
|
122
|
+
* @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight
|
|
123
|
+
* Padding between close button and its immediate sibling
|
|
124
|
+
* {@default `3rem`}
|
|
125
|
+
* @cssprop {<length>} --pf-c-popover__title-icon--MarginRight
|
|
126
|
+
* Heading icon right margin
|
|
127
|
+
* {@default `0.5rem`}
|
|
128
|
+
* @cssprop {<length>} --pf-c-popover__title--FontSize
|
|
129
|
+
* Header font-size
|
|
130
|
+
* {@default `1rem`}
|
|
131
|
+
* @cssprop {<length>} --pf-c-popover__title--MarginBottom
|
|
132
|
+
* Header bottom margin
|
|
133
|
+
* {@default `0.5rem`}
|
|
134
|
+
* @cssprop {<number>} --pf-c-popover__title--LineHeight
|
|
135
|
+
* Header line height
|
|
136
|
+
* {@default `1.5`}
|
|
137
|
+
* @cssprop {<string>} --pf-c-popover__title--FontFamily
|
|
138
|
+
* Header font-family
|
|
139
|
+
* {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}
|
|
140
|
+
* @cssprop {<length>} --pf-c-popover__footer--MarginTop
|
|
141
|
+
* Footer top margin
|
|
142
|
+
* {@default `1rem`}
|
|
143
|
+
* @cssprop {<color>} --pf-c-popover--m-default__title-text--Color
|
|
144
|
+
* Default alert heading color
|
|
145
|
+
* {@default `#003737`}
|
|
146
|
+
* @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color
|
|
147
|
+
* Default alert icon color
|
|
148
|
+
* {@default `#009596`}
|
|
149
|
+
* @cssprop {<color>} --pf-c-popover--m-info__title-text--Color
|
|
150
|
+
* Default alert heading color
|
|
151
|
+
* {@default `#002952`}
|
|
152
|
+
* @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color
|
|
153
|
+
* Default alert icon color
|
|
154
|
+
* {@default `#2b9af3`}
|
|
155
|
+
* @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color
|
|
156
|
+
* Default alert heading color
|
|
157
|
+
* {@default `#795600`}
|
|
158
|
+
* @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color
|
|
159
|
+
* Default alert icon color
|
|
160
|
+
* {@default `#f0ab00`}
|
|
161
|
+
* @cssprop {<color>} --pf-c-popover--m-success__title-text--Color
|
|
162
|
+
* Default alert heading color
|
|
163
|
+
* {@default `#1e4f18`}
|
|
164
|
+
* @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color
|
|
165
|
+
* Default alert icon color
|
|
166
|
+
* {@default `#3e8635`}
|
|
167
|
+
* @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color
|
|
168
|
+
* Default alert heading color
|
|
169
|
+
* {@default `#a30000`}
|
|
170
|
+
* @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color
|
|
171
|
+
* Default alert icon color
|
|
172
|
+
* {@default `#c9190b`}
|
|
173
|
+
*/
|
|
174
|
+
let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
|
|
175
|
+
constructor() {
|
|
176
|
+
super(...arguments);
|
|
177
|
+
_PfPopover_instances.add(this);
|
|
178
|
+
/**
|
|
179
|
+
* Indicates the initial popover position.
|
|
180
|
+
* There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,
|
|
181
|
+
* `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.
|
|
182
|
+
* The default is `top`.
|
|
183
|
+
*/
|
|
184
|
+
this.position = 'top';
|
|
185
|
+
/**
|
|
186
|
+
* Disable the flip behavior. The default is `false`.
|
|
187
|
+
*/
|
|
188
|
+
this.noFlip = false;
|
|
189
|
+
_PfPopover_referenceTrigger.set(this, null);
|
|
190
|
+
_PfPopover_float.set(this, new FloatingDOMController(this, {
|
|
191
|
+
content: () => this._popover,
|
|
192
|
+
arrow: () => this._arrow,
|
|
193
|
+
invoker: () => __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || this._slottedTrigger,
|
|
194
|
+
}));
|
|
195
|
+
_PfPopover_slots.set(this, new SlotController(this, null, 'icon', 'heading', 'body', 'footer'));
|
|
196
|
+
}
|
|
197
|
+
connectedCallback() {
|
|
198
|
+
super.connectedCallback();
|
|
199
|
+
this.addEventListener('keydown', this.onKeydown);
|
|
200
|
+
PfPopover_1.instances.add(this);
|
|
201
|
+
}
|
|
202
|
+
render() {
|
|
203
|
+
const { alignment, anchor, styles } = __classPrivateFieldGet(this, _PfPopover_float, "f");
|
|
204
|
+
const hasFooter = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('footer') || !!this.footer;
|
|
205
|
+
const hasHeading = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('heading') || !!this.heading;
|
|
206
|
+
const hasIcon = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('icon') || !!this.icon || !!this.alertSeverity;
|
|
207
|
+
// https://github.com/asyncLiz/minify-html-literals/issues/37
|
|
208
|
+
let headingContent = html `<h6>${this.heading ?? ''}</h6>`;
|
|
209
|
+
switch (this.headingLevel) {
|
|
210
|
+
case 2:
|
|
211
|
+
headingContent = html `<h2>${this.heading ?? ''}</h2>`;
|
|
212
|
+
break;
|
|
213
|
+
case 3:
|
|
214
|
+
headingContent = html `<h3>${this.heading ?? ''}</h3>`;
|
|
215
|
+
break;
|
|
216
|
+
case 4:
|
|
217
|
+
headingContent = html `<h4>${this.heading ?? ''}</h4>`;
|
|
218
|
+
break;
|
|
219
|
+
case 5:
|
|
220
|
+
headingContent = html `<h5>${this.heading ?? ''}</h5>`;
|
|
221
|
+
break;
|
|
222
|
+
}
|
|
223
|
+
const headingSlotWithFallback = html `
|
|
224
|
+
<slot id="heading" name="heading" part="heading" ?hidden=${!hasHeading}>${headingContent}</slot>
|
|
225
|
+
`;
|
|
226
|
+
const header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html `
|
|
227
|
+
<header part="header">
|
|
228
|
+
<span part="icon">
|
|
229
|
+
<slot name="icon">
|
|
230
|
+
<pf-icon icon="${this.icon ?? PfPopover_1.alertIcons.get(this.alertSeverity) ?? ''}"
|
|
231
|
+
set="${ifDefined(this.iconSet)}"
|
|
232
|
+
size="md"></pf-icon>
|
|
233
|
+
</slot>
|
|
234
|
+
</span>${!this.alertSeverity ? nothing : html `
|
|
235
|
+
<span class="visually-hidden">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}
|
|
236
|
+
${headingSlotWithFallback}
|
|
237
|
+
</header>
|
|
238
|
+
`;
|
|
239
|
+
return html `
|
|
240
|
+
<div id="container"
|
|
241
|
+
style="${styleMap(styles)}"
|
|
242
|
+
class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
|
|
243
|
+
<slot id="trigger" @keydown=${this.onKeydown} @click=${this.toggle}></slot>
|
|
244
|
+
<dialog id="popover" aria-labelledby="heading" aria-describedby="body" aria-label=${ifDefined(this.label)}>
|
|
245
|
+
<div id="arrow"></div>
|
|
246
|
+
<div id="content" part="content">
|
|
247
|
+
<pf-button id="close-button"
|
|
248
|
+
part="close-button"
|
|
249
|
+
plain
|
|
250
|
+
label="${this.closeButtonLabel ?? 'Close popover'}"
|
|
251
|
+
@click="${this.hide}"
|
|
252
|
+
@keydown="${this.onKeydown}"
|
|
253
|
+
?hidden="${this.hideClose}">
|
|
254
|
+
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
|
|
255
|
+
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
|
|
256
|
+
</svg>
|
|
257
|
+
</pf-button>
|
|
258
|
+
${header}
|
|
259
|
+
<slot id="body" part="body" name="body">${this.body ?? ''}</slot>
|
|
260
|
+
<footer part="footer" ?hidden=${!hasFooter}>
|
|
261
|
+
<slot name="footer">${this.footer}</slot>
|
|
262
|
+
</footer>
|
|
263
|
+
</div>
|
|
264
|
+
</dialog>
|
|
265
|
+
</div>
|
|
266
|
+
`;
|
|
267
|
+
}
|
|
268
|
+
disconnectedCallback() {
|
|
269
|
+
super.disconnectedCallback();
|
|
270
|
+
PfPopover_1.instances.delete(this);
|
|
271
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('click', this.show);
|
|
272
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', this.onKeydown);
|
|
273
|
+
}
|
|
274
|
+
onKeydown(event) {
|
|
275
|
+
switch (event.key) {
|
|
276
|
+
case 'Escape':
|
|
277
|
+
case 'Esc':
|
|
278
|
+
event.preventDefault();
|
|
279
|
+
this.hide();
|
|
280
|
+
return;
|
|
281
|
+
case 'Enter':
|
|
282
|
+
if (event.target === __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || event.target === this._slottedTrigger) {
|
|
283
|
+
event.preventDefault();
|
|
284
|
+
this.show();
|
|
285
|
+
}
|
|
286
|
+
return;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
/**
|
|
290
|
+
* Removes event listeners from the old trigger element and attaches
|
|
291
|
+
* them to the new trigger element.
|
|
292
|
+
*/
|
|
293
|
+
triggerChanged(oldValue, newValue) {
|
|
294
|
+
if (oldValue) {
|
|
295
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('click', this.show);
|
|
296
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', this.onKeydown);
|
|
297
|
+
}
|
|
298
|
+
if (newValue) {
|
|
299
|
+
__classPrivateFieldSet(this, _PfPopover_referenceTrigger, this.getRootNode().getElementById(newValue), "f");
|
|
300
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('click', this.show);
|
|
301
|
+
__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('keydown', this.onKeydown);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
/**
|
|
305
|
+
* Toggle the popover
|
|
306
|
+
*/
|
|
307
|
+
async toggle() {
|
|
308
|
+
__classPrivateFieldGet(this, _PfPopover_float, "f").open ? this.hide() : this.show();
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* Opens the popover
|
|
312
|
+
*/
|
|
313
|
+
async show() {
|
|
314
|
+
this.dispatchEvent(new PopoverShowEvent());
|
|
315
|
+
await this.updateComplete;
|
|
316
|
+
await __classPrivateFieldGet(this, _PfPopover_float, "f").show({
|
|
317
|
+
offset: this.distance ?? 25,
|
|
318
|
+
placement: this.position,
|
|
319
|
+
flip: !this.noFlip,
|
|
320
|
+
fallbackPlacements: this.flipBehavior,
|
|
321
|
+
});
|
|
322
|
+
this._popover?.show();
|
|
323
|
+
this.dispatchEvent(new PopoverShownEvent());
|
|
324
|
+
}
|
|
325
|
+
/**
|
|
326
|
+
* Closes the popover
|
|
327
|
+
*/
|
|
328
|
+
async hide() {
|
|
329
|
+
this.dispatchEvent(new PopoverHideEvent());
|
|
330
|
+
await __classPrivateFieldGet(this, _PfPopover_float, "f").hide();
|
|
331
|
+
this._popover?.close();
|
|
332
|
+
this.dispatchEvent(new PopoverHiddenEvent());
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
_PfPopover_referenceTrigger = new WeakMap();
|
|
336
|
+
_PfPopover_float = new WeakMap();
|
|
337
|
+
_PfPopover_slots = new WeakMap();
|
|
338
|
+
_PfPopover_instances = new WeakSet();
|
|
339
|
+
_PfPopover_outsideClick = function _PfPopover_outsideClick(event) {
|
|
340
|
+
const path = event.composedPath();
|
|
341
|
+
if (!path.includes(this) && !path.includes(__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f"))) {
|
|
342
|
+
this.hide();
|
|
343
|
+
}
|
|
344
|
+
};
|
|
345
|
+
PfPopover.styles = [styles];
|
|
346
|
+
PfPopover.instances = new Set();
|
|
347
|
+
PfPopover.alertIcons = new Map(Object.entries({
|
|
348
|
+
default: 'bell',
|
|
349
|
+
info: 'circle-info',
|
|
350
|
+
success: 'circle-check',
|
|
351
|
+
warning: 'triangle-exclamation',
|
|
352
|
+
danger: 'circle-exclamation',
|
|
353
|
+
}));
|
|
354
|
+
(() => {
|
|
355
|
+
document.addEventListener('click', function (event) {
|
|
356
|
+
for (const instance of PfPopover_1.instances) {
|
|
357
|
+
if (!instance.noOutsideClick) {
|
|
358
|
+
__classPrivateFieldGet(instance, _PfPopover_instances, "m", _PfPopover_outsideClick).call(instance, event);
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
});
|
|
362
|
+
})();
|
|
363
|
+
__decorate([
|
|
364
|
+
property({ reflect: true })
|
|
365
|
+
], PfPopover.prototype, "position", void 0);
|
|
366
|
+
__decorate([
|
|
367
|
+
property({ reflect: true })
|
|
368
|
+
], PfPopover.prototype, "heading", void 0);
|
|
369
|
+
__decorate([
|
|
370
|
+
property({ reflect: true })
|
|
371
|
+
], PfPopover.prototype, "body", void 0);
|
|
372
|
+
__decorate([
|
|
373
|
+
property({ reflect: true })
|
|
374
|
+
], PfPopover.prototype, "footer", void 0);
|
|
375
|
+
__decorate([
|
|
376
|
+
property({ reflect: true })
|
|
377
|
+
], PfPopover.prototype, "icon", void 0);
|
|
378
|
+
__decorate([
|
|
379
|
+
property({ reflect: true })
|
|
380
|
+
], PfPopover.prototype, "label", void 0);
|
|
381
|
+
__decorate([
|
|
382
|
+
property({ type: Number, reflect: true })
|
|
383
|
+
], PfPopover.prototype, "distance", void 0);
|
|
384
|
+
__decorate([
|
|
385
|
+
property({
|
|
386
|
+
attribute: 'flip-behavior',
|
|
387
|
+
converter: StringListConverter,
|
|
388
|
+
})
|
|
389
|
+
], PfPopover.prototype, "flipBehavior", void 0);
|
|
390
|
+
__decorate([
|
|
391
|
+
property({ type: Boolean, reflect: true, attribute: 'no-flip' })
|
|
392
|
+
], PfPopover.prototype, "noFlip", void 0);
|
|
393
|
+
__decorate([
|
|
394
|
+
property({ type: Number, reflect: true, attribute: 'heading-level' })
|
|
395
|
+
], PfPopover.prototype, "headingLevel", void 0);
|
|
396
|
+
__decorate([
|
|
397
|
+
property({ reflect: true, attribute: 'icon-set' })
|
|
398
|
+
], PfPopover.prototype, "iconSet", void 0);
|
|
399
|
+
__decorate([
|
|
400
|
+
property({ type: Boolean, reflect: true, attribute: 'hide-close' })
|
|
401
|
+
], PfPopover.prototype, "hideClose", void 0);
|
|
402
|
+
__decorate([
|
|
403
|
+
property({ reflect: true, attribute: 'alert-severity' })
|
|
404
|
+
], PfPopover.prototype, "alertSeverity", void 0);
|
|
405
|
+
__decorate([
|
|
406
|
+
property({ reflect: true, attribute: 'close-label' })
|
|
407
|
+
], PfPopover.prototype, "closeButtonLabel", void 0);
|
|
408
|
+
__decorate([
|
|
409
|
+
property({ reflect: true, attribute: 'alert-severity-text' })
|
|
410
|
+
], PfPopover.prototype, "alertSeverityText", void 0);
|
|
411
|
+
__decorate([
|
|
412
|
+
property({
|
|
413
|
+
type: Boolean,
|
|
414
|
+
reflect: true,
|
|
415
|
+
attribute: 'no-outside-click',
|
|
416
|
+
})
|
|
417
|
+
], PfPopover.prototype, "noOutsideClick", void 0);
|
|
418
|
+
__decorate([
|
|
419
|
+
observed('triggerChanged'),
|
|
420
|
+
property({ reflect: true })
|
|
421
|
+
], PfPopover.prototype, "trigger", void 0);
|
|
422
|
+
__decorate([
|
|
423
|
+
query('#popover')
|
|
424
|
+
], PfPopover.prototype, "_popover", void 0);
|
|
425
|
+
__decorate([
|
|
426
|
+
query('#trigger')
|
|
427
|
+
], PfPopover.prototype, "_slottedTrigger", void 0);
|
|
428
|
+
__decorate([
|
|
429
|
+
query('#arrow')
|
|
430
|
+
], PfPopover.prototype, "_arrow", void 0);
|
|
431
|
+
__decorate([
|
|
432
|
+
bound
|
|
433
|
+
], PfPopover.prototype, "onKeydown", null);
|
|
434
|
+
__decorate([
|
|
435
|
+
bound
|
|
436
|
+
], PfPopover.prototype, "toggle", null);
|
|
437
|
+
__decorate([
|
|
438
|
+
bound
|
|
439
|
+
], PfPopover.prototype, "show", null);
|
|
440
|
+
__decorate([
|
|
441
|
+
bound
|
|
442
|
+
], PfPopover.prototype, "hide", null);
|
|
443
|
+
PfPopover = PfPopover_1 = __decorate([
|
|
444
|
+
customElement('pf-popover')
|
|
445
|
+
], PfPopover);
|
|
446
|
+
export { PfPopover };
|
|
447
|
+
//# sourceMappingURL=pf-popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, nothing, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\nimport type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport styles from './pf-popover.css';\n\nconst headingLevels = [2, 3, 4, 5, 6] as const;\n\ntype HeadingLevel = (typeof headingLevels)[number];\n\ntype AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';\n\nexport class PopoverHideEvent extends ComposedEvent {\n constructor() {\n super('hide');\n }\n}\n\nexport class PopoverHiddenEvent extends ComposedEvent {\n constructor() {\n super('hidden');\n }\n}\n\nexport class PopoverShowEvent extends ComposedEvent {\n constructor() {\n super('show');\n }\n}\n\nexport class PopoverShownEvent extends ComposedEvent {\n constructor() {\n super('shown');\n }\n}\n\n/**\n * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.\n *\n * @summary Toggle the visibility of helpful or contextual information.\n *\n * @slot -\n * The default slot holds invoking element.\n * Typically this would be an icon, button, or other small sized element.\n * @slot heading\n * This slot renders the content that will be displayed inside of the header of the popover.\n * Typically this would be a heading element.\n * @slot icon\n * This slot renders the icon that will be displayed inside the header of the popover,\n * before the heading.\n * @slot body\n * This slot renders the content that will be displayed inside of the body of the popover.\n * @slot footer\n * This slot renders the content that will be displayed inside of the footer of the popover.\n *\n * @csspart container - The component wrapper\n * @csspart content - The content wrapper\n * @csspart header - The header element; only visible if both an icon annd heading are provided.\n * @csspart heading - The heading element\n * @csspart icon - The header icon\n * @csspart close-button - The close button\n * @csspart body - The container for the body content\n * @csspart footer - The container for the footer content\n *\n * @cssprop {<length>} --pf-c-popover__arrow--Height\n * Height of the arrow\n * {@default `1.5625rem`}\n * @cssprop {<length>} --pf-c-popover__arrow--Width\n * Width of the arrow\n * {@default `1.5625rem`}\n * @cssprop {<color>} --pf-c-popover__title-text--Color\n * Heading font color\n * {@default `inherit`}\n * @cssprop {<color>} --pf-c-popover__title-icon--Color\n * Heading icon font color\n * {@default `#151515`}\n * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor\n * Arrow background color\n * {@default `#fff`}\n * @cssprop --pf-c-popover__arrow--BoxShadow\n * Arrow box shadow\n * {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop --pf-c-popover--BoxShadow\n * Popover box shadow\n * {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop\n * Popover top padding\n * {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n * Popover right padding\n * {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom\n * Popover bottom padding\n * {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft\n * Popover left padding\n * {@default `1rem`}\n * @cssprop {<number>} --pf-c-popover--line-height\n * Popover line height\n * {@default `1.5`}\n * @cssprop {<length>} --pf-c-popover__content--FontSize\n * Popover font-size\n * {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-popover__content--BackgroundColor\n * Popover background color\n * {@default `#fff`}\n * @cssprop {<length>} --pf-c-popover--MaxWidth\n * Popover max-width\n * {@default `20.75rem`}\n * @cssprop {<length>} --pf-c-popover--MinWidth\n * Popover min-width\n * {@default `20.75rem`}\n * @cssprop {<number>} --pf-c-popover--c-button--Right\n * Close button right position\n * {@default `0}\n * @cssprop {<number>} --pf-c-popover--c-button--Top\n * Close button top position\n * {@default `0`}\n * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight\n * Padding between close button and its immediate sibling\n * {@default `3rem`}\n * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight\n * Heading icon right margin\n * {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-popover__title--FontSize\n * Header font-size\n * {@default `1rem`}\n * @cssprop {<length>} --pf-c-popover__title--MarginBottom\n * Header bottom margin\n * {@default `0.5rem`}\n * @cssprop {<number>} --pf-c-popover__title--LineHeight\n * Header line height\n * {@default `1.5`}\n * @cssprop {<string>} --pf-c-popover__title--FontFamily\n * Header font-family\n * {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}\n * @cssprop {<length>} --pf-c-popover__footer--MarginTop\n * Footer top margin\n * {@default `1rem`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color\n * Default alert heading color\n * {@default `#003737`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color\n * Default alert icon color\n * {@default `#009596`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color\n * Default alert heading color\n * {@default `#002952`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color\n * Default alert icon color\n * {@default `#2b9af3`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color\n * Default alert heading color\n * {@default `#795600`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color\n * Default alert icon color\n * {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color\n * Default alert heading color\n * {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color\n * Default alert icon color\n * {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color\n * Default alert heading color\n * {@default `#a30000`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color\n * Default alert icon color\n * {@default `#c9190b`}\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n static readonly styles = [styles];\n\n private static instances = new Set<PfPopover>();\n\n private static alertIcons = new Map(Object.entries({\n default: 'bell',\n info: 'circle-info',\n success: 'circle-check',\n warning: 'triangle-exclamation',\n danger: 'circle-exclamation',\n } satisfies Record<AlertSeverity, string>) as [AlertSeverity, string][]);\n\n static {\n document.addEventListener('click', function(event) {\n for (const instance of PfPopover.instances) {\n if (!instance.noOutsideClick) {\n instance.#outsideClick(event);\n }\n }\n });\n }\n\n /**\n * Indicates the initial popover position.\n * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n * The default is `top`.\n */\n @property({ reflect: true }) position: Placement = 'top';\n\n /**\n * The content rendered in the popover's heading.\n */\n @property({ reflect: true }) heading?: string;\n\n /**\n * The content rendered in the popover's body.\n */\n @property({ reflect: true }) body?: string;\n\n /**\n * The content rendered in the popover's footer.\n */\n @property({ reflect: true }) footer?: string;\n\n /**\n * The icon placed before the popover's heading.\n */\n @property({ reflect: true }) icon?: string;\n\n /**\n * The accessible label for the popover. This is required if the no heading is set.\n */\n @property({ reflect: true }) label?: string;\n\n /**\n * The distance to set between the popover and its trigger element.\n */\n @property({ type: Number, reflect: true }) distance?: number;\n\n /**\n * The flip order when flip is enabled and the initial position is not possible.\n * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n * The default is [oppositePlacement], where only the opposite placement is tried.\n */\n @property({\n attribute: 'flip-behavior',\n converter: StringListConverter,\n }) flipBehavior?: Placement[];\n\n /**\n * Disable the flip behavior. The default is `false`.\n */\n @property({ type: Boolean, reflect: true, attribute: 'no-flip' }) noFlip = false;\n\n /**\n * The heading level to use for the popover's header. The default is `h6`.\n */\n @property({ type: Number, reflect: true, attribute: 'heading-level' }) headingLevel?: HeadingLevel;\n\n /**\n * Indicates which icon set to use for the header's icon.\n * The default is `fas` (Font Awesome Free Solid).\n */\n @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n /**\n * Hide the close button. The default is `false`.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' }) hideClose?: boolean;\n\n /**\n * Indicates the severity variant to use for the alert popover.\n * There are five options: `default`, `info`, `warning`, `success`, and `danger`.\n */\n @property({ reflect: true, attribute: 'alert-severity' }) alertSeverity?: AlertSeverity;\n\n /**\n * The accessible label for the popover's close button. The default is `Close popover`.\n */\n @property({ reflect: true, attribute: 'close-label' }) closeButtonLabel?: string;\n\n /**\n * The text announced by the screen reader to indicate the popover's severity.\n * The default is `${alertSeverity} alert:`.\n */\n @property({ reflect: true, attribute: 'alert-severity-text' }) alertSeverityText?: string;\n\n /**\n * Don't hide the popover when clicking ouside of it.\n */\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'no-outside-click',\n }) noOutsideClick?: boolean;\n\n /**\n * The ID of the element to attach the popover to.\n */\n @observed('triggerChanged')\n @property({ reflect: true }) trigger?: string;\n\n @query('#popover') private _popover!: HTMLDialogElement;\n @query('#trigger') private _slottedTrigger?: HTMLElement | null;\n @query('#arrow') private _arrow!: HTMLDivElement;\n\n #referenceTrigger?: HTMLElement | null = null;\n\n #float = new FloatingDOMController(this, {\n content: () => this._popover,\n arrow: () => this._arrow,\n invoker: () => this.#referenceTrigger || this._slottedTrigger,\n });\n\n #slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.onKeydown);\n PfPopover.instances.add(this);\n }\n\n render() {\n const { alignment, anchor, styles } = this.#float;\n const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;\n const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;\n const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;\n\n // https://github.com/asyncLiz/minify-html-literals/issues/37\n let headingContent = html`<h6>${this.heading ?? ''}</h6>`;\n switch (this.headingLevel) {\n case 2: headingContent = html`<h2>${this.heading ?? ''}</h2>`; break;\n case 3: headingContent = html`<h3>${this.heading ?? ''}</h3>`; break;\n case 4: headingContent = html`<h4>${this.heading ?? ''}</h4>`; break;\n case 5: headingContent = html`<h5>${this.heading ?? ''}</h5>`; break;\n }\n\n const headingSlotWithFallback = html`\n <slot id=\"heading\" name=\"heading\" part=\"heading\" ?hidden=${!hasHeading}>${headingContent}</slot>\n `;\n\n const header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n <header part=\"header\">\n <span part=\"icon\">\n <slot name=\"icon\">\n <pf-icon icon=\"${this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''}\"\n set=\"${ifDefined(this.iconSet)}\"\n size=\"md\"></pf-icon>\n </slot>\n </span>${!this.alertSeverity ? nothing : html`\n <span class=\"visually-hidden\">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}\n ${headingSlotWithFallback}\n </header>\n `;\n\n return html`\n <div id=\"container\"\n style=\"${styleMap(styles)}\"\n class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\">\n <slot id=\"trigger\" @keydown=${this.onKeydown} @click=${this.toggle}></slot>\n <dialog id=\"popover\" aria-labelledby=\"heading\" aria-describedby=\"body\" aria-label=${ifDefined(this.label)}>\n <div id=\"arrow\"></div>\n <div id=\"content\" part=\"content\">\n <pf-button id=\"close-button\"\n part=\"close-button\"\n plain\n label=\"${this.closeButtonLabel ?? 'Close popover'}\"\n @click=\"${this.hide}\"\n @keydown=\"${this.onKeydown}\"\n ?hidden=\"${this.hideClose}\">\n <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 352 512\">\n <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n </svg>\n </pf-button>\n ${header}\n <slot id=\"body\" part=\"body\" name=\"body\">${this.body ?? ''}</slot>\n <footer part=\"footer\" ?hidden=${!hasFooter}>\n <slot name=\"footer\">${this.footer}</slot>\n </footer>\n </div>\n </dialog>\n </div>\n `;\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n PfPopover.instances.delete(this);\n this.#referenceTrigger?.removeEventListener('click', this.show);\n this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);\n }\n\n @bound private onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n case 'Esc':\n event.preventDefault();\n this.hide();\n return;\n case 'Enter':\n if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {\n event.preventDefault();\n this.show();\n }\n return;\n }\n }\n\n #outsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {\n this.hide();\n }\n }\n\n /**\n * Removes event listeners from the old trigger element and attaches\n * them to the new trigger element.\n */\n triggerChanged(oldValue?: string, newValue?: string) {\n if (oldValue) {\n this.#referenceTrigger?.removeEventListener('click', this.show);\n this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);\n }\n if (newValue) {\n this.#referenceTrigger = (this.getRootNode() as Document | ShadowRoot).getElementById(newValue);\n this.#referenceTrigger?.addEventListener('click', this.show);\n this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);\n }\n }\n\n /**\n * Toggle the popover\n */\n @bound async toggle() {\n this.#float.open ? this.hide() : this.show();\n }\n\n /**\n * Opens the popover\n */\n @bound async show() {\n this.dispatchEvent(new PopoverShowEvent());\n await this.updateComplete;\n await this.#float.show({\n offset: this.distance ?? 25,\n placement: this.position,\n flip: !this.noFlip,\n fallbackPlacements: this.flipBehavior,\n });\n this._popover?.show();\n this.dispatchEvent(new PopoverShownEvent());\n }\n\n /**\n * Closes the popover\n */\n @bound async hide() {\n this.dispatchEvent(new PopoverHideEvent());\n await this.#float.hide();\n this._popover?.close();\n this.dispatchEvent(new PopoverHiddenEvent());\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-popover': PfPopover;\n }\n}\n"]}
|
|
@@ -62,7 +62,8 @@ let PfProgressStep = PfProgressStep_1 = class PfProgressStep extends LitElement
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
|
-
_PfProgressStep_slots = new WeakMap()
|
|
65
|
+
_PfProgressStep_slots = new WeakMap();
|
|
66
|
+
_PfProgressStep_internals = new WeakMap();
|
|
66
67
|
PfProgressStep.parentTagName = 'pf-progress-stepper';
|
|
67
68
|
PfProgressStep.styles = [style];
|
|
68
69
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":";;;AAGA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACnC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;IACjC,MAAM,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;IACtC,OAAO,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACzC,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,YAAY,EAAE;CACpD,CAAC,CAAC,CAAC;AAEJ;;;;;;;;GAQG;
|
|
1
|
+
{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n success: { icon: 'circle-check' },\n danger: { icon: 'circle-exclamation' },\n warning: { icon: 'triangle-exclamation' },\n info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n * Short description of the current step.\n * @slot description\n * Longer description of the current step.\n * @slot icon\n * Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n protected static parentTagName = 'pf-progress-stepper';\n\n static readonly styles = [style];\n\n /** Optional extended description of the step */\n @property() description?: string;\n\n /** Step Icon */\n @property() icon?: string;\n\n /** Step icon set */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n /** Describes the state of the current item */\n @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n /** Indicates if this item is the current active item. */\n @property({ type: Boolean, reflect: true }) current = false;\n\n #slots = new SlotController(this, 'title', 'description');\n\n #internals = new InternalsController(this, {\n role: 'listitem',\n });\n\n render() {\n const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n const { parentTagName } = (this.constructor as typeof PfProgressStep);\n const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n return html`\n <div id=\"connector\" class=\"${classMap({ compact })}\">\n <slot id=\"icon\" name=\"icon\">\n <pf-icon ?hidden=\"${!icon}\"\n icon=\"${ifDefined(icon)}\"\n set=\"${ifDefined(set)}\"></pf-icon>\n </slot>\n </div>\n <div id=\"main\" class=\"${classMap({ compact })}\">\n <slot id=\"title\"></slot>\n <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n </div>\n `;\n }\n\n updated(changed: PropertyValues<this>) {\n super.updated?.(changed);\n if (changed.has('current')) {\n this.#internals.ariaCurrent = String(!!this.current);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-progress-step': PfProgressStep;\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import '@patternfly/elements/pf-icon/pf-icon.js';
|
|
3
3
|
/**
|
|
4
|
-
* A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
|
|
4
|
+
* A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
|
|
5
5
|
*/
|
|
6
6
|
export declare class PfProgressStepper extends LitElement {
|
|
7
7
|
#private;
|
|
@@ -11,7 +11,7 @@ import { PfProgressStep } from './pf-progress-step.js';
|
|
|
11
11
|
import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
|
|
12
12
|
import '@patternfly/elements/pf-icon/pf-icon.js';
|
|
13
13
|
/**
|
|
14
|
-
* A progress stepper displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
|
|
14
|
+
* A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.
|
|
15
15
|
*/
|
|
16
16
|
let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends LitElement {
|
|
17
17
|
get value() {
|
|
@@ -43,7 +43,10 @@ let PfProgressStepper = PfProgressStepper_1 = class PfProgressStepper extends Li
|
|
|
43
43
|
`;
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
_PfProgressStepper_internals = new WeakMap()
|
|
46
|
+
_PfProgressStepper_internals = new WeakMap();
|
|
47
|
+
_PfProgressStepper_mo = new WeakMap();
|
|
48
|
+
_PfProgressStepper_instances = new WeakSet();
|
|
49
|
+
_PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
|
|
47
50
|
__classPrivateFieldGet(this, _PfProgressStepper_internals, "f").ariaValueNow = this.value.toString();
|
|
48
51
|
};
|
|
49
52
|
PfProgressStepper.childTagName = 'pf-progress-step';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;
|
|
1
|
+
{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;;;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAEjD;;GAEG;AAEH,IAAa,iBAAiB,yBAA9B,MAAa,iBAAkB,SAAQ,UAAU;IA2B/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QA7BV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QAKI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;;;;;IAPC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AAzCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAE1B,gCAAc,GAAG,IAAI,AAAP,CAAQ;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAOf;IAJ3C,QAAQ,CAAC;QACR,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAiB,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IACD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAlBjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAiD7B;SAjDY,iBAAiB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { observed } from '@patternfly/pfe-core/decorators/observed.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n protected static childTagName = 'pf-progress-step';\n\n static readonly styles = [style];\n\n static formAssociated = true;\n\n /** Whether to use the vertical layout */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /** Whether to use the center alignment */\n @property({ type: Boolean, reflect: true }) center = false;\n\n /** Whether to use the compact layout */\n @observed(function(this: PfProgressStepper) {\n const { childTagName } = (this.constructor as typeof PfProgressStepper);\n this.querySelectorAll<PfProgressStep>(childTagName).forEach(step => step.requestUpdate());\n })\n @property({ type: Boolean, reflect: true }) compact = false;\n\n #internals = new InternalsController(this, {\n role: 'progressbar',\n ariaValueNow: this.value.toString(),\n });\n\n #mo = new MutationObserver(() => this.#onMutation());\n\n get value() {\n const { childTagName } = (this.constructor as typeof PfProgressStepper);\n const steps = this.querySelectorAll<PfProgressStep>(childTagName);\n const current = this.querySelector(`${childTagName}[current]`);\n const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n return (n / steps.length) * 100;\n }\n\n constructor() {\n super();\n this.#mo.observe(this, { childList: true });\n }\n\n #onMutation() {\n this.#internals.ariaValueNow = this.value.toString();\n }\n\n render() {\n return html`\n <slot role=\"listbox\"></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-progress-stepper': PfProgressStepper;\n }\n}\n"]}
|
|
@@ -21,7 +21,7 @@ const styles = css `:host{display:inline-block;width:min-content;min-height:0;as
|
|
|
21
21
|
* @cssprop {<number>} --pf-c-spinner__path--StrokeWidth {@default `10`}
|
|
22
22
|
* @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
class BaseSpinner extends LitElement {
|
|
25
25
|
constructor() {
|
|
26
26
|
super(...arguments);
|
|
27
27
|
/** Preset sizes for the spinner */
|
|
@@ -42,4 +42,5 @@ __decorate([
|
|
|
42
42
|
__decorate([
|
|
43
43
|
property({ reflect: true })
|
|
44
44
|
], BaseSpinner.prototype, "diameter", void 0);
|
|
45
|
+
export { BaseSpinner };
|
|
45
46
|
//# sourceMappingURL=BaseSpinner.js.map
|