@universityofmaryland/web-components-library 1.14.10 → 1.14.11
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/README.md +1 -1
- package/dist/{_event-BzvNLqqf.js → _event-zkKU3M5w.js} +3 -3
- package/dist/{_event-BzvNLqqf.js.map → _event-zkKU3M5w.js.map} +1 -1
- package/dist/api/pathway/image.d.ts.map +1 -1
- package/dist/cdn.js +53 -53
- package/dist/cdn.js.map +1 -1
- package/dist/{chevron-scroll-OMtKW5S9.js → chevron-scroll-BZtdKUuJ.js} +3 -3
- package/dist/{chevron-scroll-OMtKW5S9.js.map → chevron-scroll-BZtdKUuJ.js.map} +1 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/actions.js +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/brand.js +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/carousel.js +1 -1
- package/dist/components/feed.js +1 -1
- package/dist/components/footer.js +1 -1
- package/dist/components/hero.js +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/media.js +1 -1
- package/dist/components/navigation.js +1 -1
- package/dist/components/pathway.js +1 -1
- package/dist/components/person.js +1 -1
- package/dist/components/quote.js +1 -1
- package/dist/components/slider.js +1 -1
- package/dist/components/social.js +1 -1
- package/dist/components/stat.js +1 -1
- package/dist/components/tab.js +1 -1
- package/dist/components/text.js +1 -1
- package/dist/content.js +1 -1
- package/dist/{display-wE0il7rr.js → display-BAWPSZWk.js} +3 -3
- package/dist/{display-wE0il7rr.js.map → display-BAWPSZWk.js.map} +1 -1
- package/dist/{display-DECqmVEZ.js → display-DvhD-oDO.js} +3 -3
- package/dist/{display-DECqmVEZ.js.map → display-DvhD-oDO.js.map} +1 -1
- package/dist/{display-D2GEPqCW.js → display-HZowWri1.js} +3 -3
- package/dist/{display-D2GEPqCW.js.map → display-HZowWri1.js.map} +1 -1
- package/dist/{display-BCa3axfI.js → display-yOrx8Qu7.js} +3 -3
- package/dist/{display-BCa3axfI.js.map → display-yOrx8Qu7.js.map} +1 -1
- package/dist/{event-lockup-DQgwp3gO.js → event-lockup-DJPiglgR.js} +3 -3
- package/dist/{event-lockup-DQgwp3gO.js.map → event-lockup-DJPiglgR.js.map} +1 -1
- package/dist/{feed-BSntlEBA.js → feed-D5nqCXw5.js} +3 -3
- package/dist/{feed-BSntlEBA.js.map → feed-D5nqCXw5.js.map} +1 -1
- package/dist/feed.js +1 -1
- package/dist/{gif-DFmy3K6d.js → gif-DcCErswK.js} +3 -3
- package/dist/{gif-DFmy3K6d.js.map → gif-DcCErswK.js.map} +1 -1
- package/dist/{hero-DJY4qxON.js → hero-Bn4rdy_N.js} +3 -3
- package/dist/{hero-DJY4qxON.js.map → hero-Bn4rdy_N.js.map} +1 -1
- package/dist/{highlight-DHa9w3Pn.js → highlight-C3vD7SBd.js} +44 -41
- package/dist/highlight-C3vD7SBd.js.map +1 -0
- package/dist/index.js +2 -2
- package/dist/interactive.js +1 -1
- package/dist/{item-CbhwHIpH.js → item-DwMV1mFy.js} +3 -3
- package/dist/{item-CbhwHIpH.js.map → item-DwMV1mFy.js.map} +1 -1
- package/dist/{list-CWGH3XBG.js → list-Dwa6U7aH.js} +3 -3
- package/dist/{list-CWGH3XBG.js.map → list-Dwa6U7aH.js.map} +1 -1
- package/dist/{loader-xwmpwCXk.js → loader-8wYd7fUZ.js} +23 -23
- package/dist/{loader-xwmpwCXk.js.map → loader-8wYd7fUZ.js.map} +1 -1
- package/dist/{minimal-DxGUDvv6.js → minimal-DPc0ZoRw.js} +3 -3
- package/dist/{minimal-DxGUDvv6.js.map → minimal-DPc0ZoRw.js.map} +1 -1
- package/dist/model/attributes/checks.d.ts.map +1 -1
- package/dist/{options-BvmHmwsE.js → options-CZuC7PDp.js} +3 -3
- package/dist/{options-BvmHmwsE.js.map → options-CZuC7PDp.js.map} +1 -1
- package/dist/shared/{model-4-WQm2Le.js → model-CHS3WnCo.js} +112 -118
- package/dist/shared/model-CHS3WnCo.js.map +1 -0
- package/dist/shared/{utilities-B_sPVa-m.js → utilities-CZHe-tKs.js} +2 -2
- package/dist/shared/{utilities-B_sPVa-m.js.map → utilities-CZHe-tKs.js.map} +1 -1
- package/dist/{sharing-jgM675YU.js → sharing--wGjj16l.js} +3 -3
- package/dist/{sharing-jgM675YU.js.map → sharing--wGjj16l.js.map} +1 -1
- package/dist/{site-DtjJCbAC.js → site-CpSb21QB.js} +3 -3
- package/dist/{site-DtjJCbAC.js.map → site-CpSb21QB.js.map} +1 -1
- package/dist/{sticky-OTUETMNA.js → sticky-CMFVqgPc.js} +3 -3
- package/dist/{sticky-OTUETMNA.js.map → sticky-CMFVqgPc.js.map} +1 -1
- package/dist/{sticky-columns-BZWi9zSi.js → sticky-columns-DlAAdaT4.js} +3 -3
- package/dist/{sticky-columns-BZWi9zSi.js.map → sticky-columns-DlAAdaT4.js.map} +1 -1
- package/dist/structural.js +1 -1
- package/dist/{video-n1zTWSI8.js → video-Cm_iBOTt.js} +4 -4
- package/dist/{video-n1zTWSI8.js.map → video-Cm_iBOTt.js.map} +1 -1
- package/dist/{wide-CoHOWBGB.js → wide-omTQQ6Wr.js} +3 -3
- package/dist/{wide-CoHOWBGB.js.map → wide-omTQQ6Wr.js.map} +1 -1
- package/package.json +1 -1
- package/dist/highlight-DHa9w3Pn.js.map +0 -1
- package/dist/shared/model-4-WQm2Le.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Atomic as o } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { k as s } from "./shared/model-
|
|
3
|
-
import { w as m, h as c } from "./shared/utilities-
|
|
2
|
+
import { k as s } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as m, h as c } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
import "@universityofmaryland/web-styles-library";
|
|
5
5
|
const r = "umd-element-brand-card-stack", l = (a) => {
|
|
6
6
|
const t = Array.from(
|
|
@@ -39,4 +39,4 @@ export {
|
|
|
39
39
|
C as c,
|
|
40
40
|
A as s
|
|
41
41
|
};
|
|
42
|
-
//# sourceMappingURL=chevron-scroll-
|
|
42
|
+
//# sourceMappingURL=chevron-scroll-BZtdKUuJ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chevron-scroll-
|
|
1
|
+
{"version":3,"file":"chevron-scroll-BZtdKUuJ.js","sources":["../source/api/brand/stack.ts","../source/api/brand/chevron-scroll.ts"],"sourcesContent":["import { Atomic } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Lifecycle, Register } from 'model';\nimport { CreateComponentFunction, ComponentRegistration } from '../../_types';\n\n/**\n * Tag name for the card stack component\n * @internal\n */ const tagName = 'umd-element-brand-card-stack';\n\n/**\n * Creates a card fireworks component with a featured element and accompanying images\n * @param element - The host HTML element\n * @returns Configured card fireworks component\n * @internal\n */\nconst createComponent: CreateComponentFunction = (element) => {\n const cards = Array.from(\n element.querySelectorAll(`[slot=\"cards\"] > *`),\n ) as Array<HTMLImageElement | HTMLVideoElement>;\n const featured = cards.find(\n (card) => card.getAttribute('data-featured') === 'true',\n );\n\n if (cards.length < 5) {\n console.log(`${tagName}: The minimum number of for the card stack is 5.`);\n return { element: document.createElement('div'), styles: '' };\n }\n\n if (cards.length > 9) {\n console.log(`${tagName}: The maximum number of for the card stack is 10.`);\n return { element: document.createElement('div'), styles: '' };\n }\n\n if (!featured) {\n console.log(\n `${tagName}: A featured element is required. Please add the attribute data-featured to one of the elements`,\n );\n return { element: document.createElement('div'), styles: '' };\n }\n\n const images = cards\n .filter((card) => card.getAttribute('data-featured') !== 'true')\n .map((card) => {\n if (card.tagName === 'IMG') {\n return card as HTMLImageElement;\n }\n const imgChild = card.querySelector('img');\n return imgChild as HTMLImageElement;\n })\n .filter((img) => img !== null) as HTMLImageElement[];\n\n return Atomic.animations.brand.cardStack({\n featured,\n images,\n isExpandFeature: Attributes.includesFeature.imageExpand({\n element,\n }),\n });\n};\n\n/**\n * Card Stack\n *\n * A dynamic component featuring a central \"featured\" image or video\n * and a supporting set of 5-9 assets that pops into a grid layout in a \"stack\" style.\n * By default, the featured element expands full screen.\n * Designed for brand storytelling and visual highlights.\n *\n * ## Custom Element\n * `<umd-element-brand-card-stack>`\n *\n * ## Slots\n * - `cards` - Container for 5 - 8 supporting elements (required, accepts: img, video, and element containing img)\n *\n * ## Attributes\n * - `data-featured` - Indicates the featured element (required, accepts: `\"true\"` or `\"false\"`)\n * - `data-image-expand` - Expands the Stack layout for interactive or animated display (optional, accepts: `\"true\"` or `\"false\"`)\n *\n * @example\n * ```html\n * <!-- 3 images, featured video -->\n * <umd-element-brand-card-stack>\n * <div slot=\"cards\">\n * <img src=\"/library.jpg\" alt=\"McKeldin Library Exterior\" />\n * <img src=\"/mall-spring.jpg\" alt=\"McKeldin Mall in Spring\" />\n * <img src=\"/student-center.jpg\" alt=\"Student Center Activities\" />\n * <video data-featured=\"true\" aria-label=\"UMD Campus Tour\">\n * <source src=\"/campus-tour.mp4\" />\n * </video>\n * </div>\n * </umd-element-brand-card-stack>\n * ```\n *\n * @example\n * ```html\n * <!-- 5 images, featured image, expand feature off -->\n * <umd-element-brand-card-stack data-image-expand=\"false\">\n * <div slot=\"cards\">\n * <img data-featured=\"true\" src=\"./media/testudo.jpg\" alt=\"Testudo the Mascot\" />\n * <img src=\"/engineering.jpg\" alt=\"Engineering Building\" />\n * <img src=\"/arts.jpg\" alt=\"Arts and Humanities Building\" />\n * <img src=\"/science-hall.jpg\" alt=\"Science Lecture Hall\" />\n * <img src=\"/athletics.jpg\" alt=\"Athletics Stadium\" />\n * <img src=\"/dorm.jpg\" alt=\"Student Dormitory\" />\n * </div>\n * </umd-element-brand-card-stack>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\n\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n createComponent,\n afterConnect: Lifecycle.hooks.loadAnimation,\n});\n\nexport default registration;\n","import { Atomic } from '@universityofmaryland/web-elements-library';\nimport { Register } from 'model';\nimport { CreateComponentFunction, ComponentRegistration } from '../../_types';\n\n/**\n * Tag name for the brand chevron animation component\n */\nconst tagName = 'umd-element-brand-logo-animation';\n\n/**\n * Creates the brand chevron animation component\n */\nconst createComponent: CreateComponentFunction = () =>\n Atomic.animations.brand.chevronScroll();\n\n/**\n * Brand Chevron Scroll Animation\n *\n * Creates an animated University of Maryland brand chevron logo.\n * The animation provides a dynamic visual element for brand presence.\n *\n * ## Custom Element\n * `<umd-element-brand-logo-animation>`\n *\n * ## Notes\n * - Uses the University of Maryland's atomic animations library\n * - Animation runs continuously\n * - Purely decorative element\n *\n * @example\n * ```html\n * <!-- Basic chevron animation -->\n * <umd-element-brand-logo-animation></umd-element-brand-logo-animation>\n * ```\n *\n * @example\n * ```html\n * <!-- In a hero section -->\n * <div class=\"hero-section\">\n * <h1>Welcome to UMD</h1>\n * <umd-element-brand-logo-animation></umd-element-brand-logo-animation>\n * </div>\n * ```\n *\n * @example\n * ```html\n * <!-- As a loading indicator -->\n * <div class=\"loading-container\" aria-busy=\"true\">\n * <umd-element-brand-logo-animation></umd-element-brand-logo-animation>\n * <p>Loading...</p>\n * </div>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n createComponent,\n});\n\nexport default registration;\n"],"names":["tagName","createComponent","element","cards","featured","card","images","img","Atomic","Attributes.includesFeature","registration","Register.webComponent","Lifecycle.hooks","stack_default","chevron_scroll_default"],"mappings":";;;;AAOI,MAAMA,IAAU,gCAQdC,IAA2C,CAACC,MAAY;AAC5D,QAAMC,IAAQ,MAAM;AAAA,IAClBD,EAAQ,iBAAiB,oBAAoB;AAAA,EAAA,GAEzCE,IAAWD,EAAM;AAAA,IACrB,CAACE,MAASA,EAAK,aAAa,eAAe,MAAM;AAAA,EAAA;AAGnD,MAAIF,EAAM,SAAS;AACjB,mBAAQ,IAAI,GAAGH,CAAO,kDAAkD,GACjE,EAAE,SAAS,SAAS,cAAc,KAAK,GAAG,QAAQ,GAAA;AAG3D,MAAIG,EAAM,SAAS;AACjB,mBAAQ,IAAI,GAAGH,CAAO,mDAAmD,GAClE,EAAE,SAAS,SAAS,cAAc,KAAK,GAAG,QAAQ,GAAA;AAG3D,MAAI,CAACI;AACH,mBAAQ;AAAA,MACN,GAAGJ,CAAO;AAAA,IAAA,GAEL,EAAE,SAAS,SAAS,cAAc,KAAK,GAAG,QAAQ,GAAA;AAG3D,QAAMM,IAASH,EACZ,OAAO,CAACE,MAASA,EAAK,aAAa,eAAe,MAAM,MAAM,EAC9D,IAAI,CAACA,MACAA,EAAK,YAAY,QACZA,IAEQA,EAAK,cAAc,KAAK,CAE1C,EACA,OAAO,CAACE,MAAQA,MAAQ,IAAI;AAE/B,SAAOC,EAAO,WAAW,MAAM,UAAU;AAAA,IACvC,UAAAJ;AAAA,IACA,QAAAE;AAAA,IACA,iBAAiBG,EAA2B,YAAY;AAAA,MACtD,SAAAP;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH,GAsDMQ,IAAsCC,EAAsB;AAAA,EAAA,SAChEX;AAAAA,EAAA,iBACAC;AAAAA,EACA,cAAcW,EAAgB;AAChC,CAAC;AAED,IAAOC,IAAQH;AC/Gf,MAAMV,IAAU,oCAKVC,IAA2C,MAC/CO,EAAO,WAAW,MAAM,cAAA,GA2CpBE,IAAsCC,EAAsB;AAAA,EAChE,SAAAX;AAAA,EACA,iBAAAC;AACF,CAAC;AAED,IAAOa,IAAQJ;"}
|
package/dist/components/alert.js
CHANGED
package/dist/components/brand.js
CHANGED
package/dist/components/card.js
CHANGED
package/dist/components/feed.js
CHANGED
package/dist/components/hero.js
CHANGED
package/dist/components/media.js
CHANGED
package/dist/components/quote.js
CHANGED
package/dist/components/stat.js
CHANGED
package/dist/components/tab.js
CHANGED
package/dist/components/text.js
CHANGED
package/dist/content.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as n, l as s } from "./loader-
|
|
1
|
+
import { c as n, l as s } from "./loader-8wYd7fUZ.js";
|
|
2
2
|
import { feedComponents as r } from "./feed.js";
|
|
3
3
|
import { interactiveComponents as m } from "./interactive.js";
|
|
4
4
|
import { structuralComponents as c } from "./structural.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Composite as i } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { i as u, b as d, a as e, s as a } from "./shared/model-
|
|
3
|
-
import { w as f, S as o } from "./shared/utilities-
|
|
2
|
+
import { i as u, b as d, a as e, s as a } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as f, S as o } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
import "@universityofmaryland/web-styles-library";
|
|
5
5
|
const p = "umd-element-quote", c = {
|
|
6
6
|
quote: {
|
|
@@ -48,4 +48,4 @@ var S = l;
|
|
|
48
48
|
export {
|
|
49
49
|
S as d
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=display-
|
|
51
|
+
//# sourceMappingURL=display-BAWPSZWk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-wE0il7rr.js","sources":["../source/api/quote/display.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots } from 'model';\nimport { Markup } from 'utilities';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-quote';\n\n/**\n * Quote Display\n *\n * A component for displaying quotes, testimonials, and pull quotes with attribution.\n * Supports both inline and featured layouts with optional imagery and call-to-action.\n * Perfect for highlighting testimonials, expert opinions, or memorable statements.\n *\n * ## Custom Element\n * `<umd-element-quote>`\n *\n * ## Slots\n * - `quote` - The quote text content (required, accepts: text elements)\n * - `attribution` - Person or source of the quote (optional, accepts: text elements)\n * - `attribution-sub-text` - Additional attribution info like title or affiliation (optional, accepts: text elements)\n * - `image` - Portrait or related image (optional, accepts: img)\n * - `actions` - Call-to-action links (optional, accepts: a, button)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `maryland` - University brand colors\n * - `data-visual` - Visual styling options:\n * - `transparent` - Transparent background\n * - `size-large` - Larger text size for emphasis\n * - `data-display` - Layout variant:\n * - `featured` - Featured quote with enhanced styling\n * - Default - Inline quote layout\n *\n * @example\n * ```html\n * <!-- Basic inline quote -->\n * <umd-element-quote>\n * <blockquote slot=\"quote\">\n * \"The University of Maryland has provided me with countless opportunities\n * to grow both academically and personally.\"\n * </blockquote>\n * <cite slot=\"attribution\">Sarah Johnson</cite>\n * <span slot=\"attribution-sub-text\">Class of 2024</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Featured quote with image -->\n * <umd-element-quote data-display=\"featured\" data-visual=\"size-large\">\n * <img slot=\"image\" src=\"alumnus.jpg\" alt=\"John Smith\" />\n * <blockquote slot=\"quote\">\n * \"My education at Maryland prepared me to tackle real-world challenges\n * and make a difference in my community.\"\n * </blockquote>\n * <cite slot=\"attribution\">John Smith</cite>\n * <span slot=\"attribution-sub-text\">CEO, Tech Innovations Inc.</span>\n * <a slot=\"actions\" href=\"/alumni-stories\">Read More Alumni Stories</a>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Large quote with dark theme -->\n * <umd-element-quote data-theme=\"dark\" data-visual=\"size-large\">\n * <blockquote slot=\"quote\">\n * \"Research at the University of Maryland is pushing the boundaries\n * of what's possible in quantum computing.\"\n * </blockquote>\n * <cite slot=\"attribution\">Dr. Michelle Lee</cite>\n * <span slot=\"attribution-sub-text\">Director, Quantum Research Lab</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Maryland theme testimonial -->\n * <umd-element-quote data-theme=\"maryland\" data-visual=\"transparent\">\n * <blockquote slot=\"quote\">\n * \"The diversity of perspectives and experiences at UMD enriches\n * every classroom discussion and research project.\"\n * </blockquote>\n * <cite slot=\"attribution\">Professor David Chen</cite>\n * <span slot=\"attribution-sub-text\">Department of Sociology</span>\n * <a slot=\"actions\" href=\"/diversity\">Learn About Our Community</a>\n * </umd-element-quote>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst slots: SlotConfiguration = {\n quote: {\n required: true,\n },\n};\n\nconst MakeData = ({ element }: { element: HTMLElement }) => {\n const isThemeDark = Attributes.isTheme.dark({ element });\n const isThemeMaryland = Attributes.isTheme.maryland({ element });\n const isTransparent = Attributes.isVisual.transparent({ element });\n\n return {\n quote: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.QUOTE,\n }),\n image: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.assets.image,\n }),\n attribution: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.ATTRIBUTION,\n }),\n attributionSubText: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.ATTRIBUTION_SUB_TEXT,\n }),\n action: Slots.actions.default({ element }),\n isTransparent,\n isThemeDark,\n isThemeMaryland,\n };\n};\n\nconst createComponent: CreateComponentFunction = (element) => {\n const isSizeLarge = Attributes.isVisual.sizeLarge({ element });\n const isTypeFeatured = Attributes.isDisplay.featured({ element });\n\n if (isTypeFeatured) {\n return Composite.quote.featured({\n ...MakeData({ element }),\n isSizeLarge,\n });\n }\n\n return Composite.quote.inline({\n ...MakeData({ element }),\n isSizeLarge,\n });\n};\n\n/**\n * Quote Display\n *\n * A component for displaying quotes, testimonials, and pull quotes with attribution.\n * Supports both inline and featured layouts with optional imagery and call-to-action.\n * Perfect for highlighting testimonials, expert opinions, or memorable statements.\n *\n * ## Custom Element\n * `<umd-element-quote>`\n *\n * ## Slots\n * - `quote` - The quote text content (required, accepts: text elements)\n * - `attribution` - Person or source of the quote (optional, accepts: text elements)\n * - `attribution-sub-text` - Additional attribution info like title or affiliation (optional, accepts: text elements)\n * - `image` - Portrait or related image (optional, accepts: img)\n * - `actions` - Call-to-action links (optional, accepts: a, button)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `maryland` - University brand colors\n * - `data-visual` - Visual styling options:\n * - `transparent` - Transparent background\n * - `size-large` - Larger text size for emphasis\n * - `data-display` - Layout variant:\n * - `featured` - Featured quote with enhanced styling\n * - Default - Inline quote layout\n *\n * @example\n * ```html\n * <!-- Basic inline quote -->\n * <umd-element-quote>\n * <blockquote slot=\"quote\">\n * \"The University of Maryland has provided me with countless opportunities\n * to grow both academically and personally.\"\n * </blockquote>\n * <cite slot=\"attribution\">Sarah Johnson</cite>\n * <span slot=\"attribution-sub-text\">Class of 2024</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Featured quote with image -->\n * <umd-element-quote data-display=\"featured\" data-visual=\"size-large\">\n * <img slot=\"image\" src=\"alumnus.jpg\" alt=\"John Smith\" />\n * <blockquote slot=\"quote\">\n * \"My education at Maryland prepared me to tackle real-world challenges\n * and make a difference in my community.\"\n * </blockquote>\n * <cite slot=\"attribution\">John Smith</cite>\n * <span slot=\"attribution-sub-text\">CEO, Tech Innovations Inc.</span>\n * <a slot=\"actions\" href=\"/alumni-stories\">Read More Alumni Stories</a>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Large quote with dark theme -->\n * <umd-element-quote data-theme=\"dark\" data-visual=\"size-large\">\n * <blockquote slot=\"quote\">\n * \"Research at the University of Maryland is pushing the boundaries\n * of what's possible in quantum computing.\"\n * </blockquote>\n * <cite slot=\"attribution\">Dr. Michelle Lee</cite>\n * <span slot=\"attribution-sub-text\">Director, Quantum Research Lab</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Maryland theme testimonial -->\n * <umd-element-quote data-theme=\"maryland\" data-visual=\"transparent\">\n * <blockquote slot=\"quote\">\n * \"The diversity of perspectives and experiences at UMD enriches\n * every classroom discussion and research project.\"\n * </blockquote>\n * <cite slot=\"attribution\">Professor David Chen</cite>\n * <span slot=\"attribution-sub-text\">Department of Sociology</span>\n * <a slot=\"actions\" href=\"/diversity\">Learn About Our Community</a>\n * </umd-element-quote>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n});\n\nexport default registration;\n"],"names":["tagName","slots","MakeData","element","isThemeDark","Attributes.isTheme","isThemeMaryland","isTransparent","Attributes.isVisual","Markup.create.SlotWithDefaultStyling","Slots","createComponent","isSizeLarge","Attributes.isDisplay","Composite","registration","Register.webComponent","display_default"],"mappings":";;;;AASA,MAAMA,IAAU,qBAwFVC,IAA2B;AAAA,EAC/B,OAAO;AAAA,IACL,UAAU;AAAA,EAAA;AAEd,GAEMC,IAAW,CAAC,EAAE,SAAAC,QAAwC;AAC1D,QAAMC,IAAcC,EAAmB,KAAK,EAAE,SAAAF,GAAS,GACjDG,IAAkBD,EAAmB,SAAS,EAAE,SAAAF,GAAS,GACzDI,IAAgBC,EAAoB,YAAY,EAAE,SAAAL,GAAS;AAEjE,SAAO;AAAA,IACL,OAAOM,EAAqC;AAAA,MAC1C,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,OAAOD,EAAqC;AAAA,MAC1C,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK,OAAO;AAAA,IAAA,CAC5B;AAAA,IACD,aAAaD,EAAqC;AAAA,MAChD,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,oBAAoBD,EAAqC;AAAA,MACvD,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,QAAQA,EAAM,QAAQ,QAAQ,EAAE,SAAAP,GAAS;AAAA,IACzC,eAAAI;AAAA,IACA,aAAAH;AAAA,IACA,iBAAAE;AAAA,EAAA;AAEJ,GAEMK,IAA2C,CAACR,MAAY;AAC5D,QAAMS,IAAcJ,EAAoB,UAAU,EAAE,SAAAL,GAAS;AAG7D,SAFuBU,EAAqB,SAAS,EAAE,SAAAV,GAAS,IAGvDW,EAAU,MAAM,SAAS;AAAA,IAC9B,GAAGZ,EAAS,EAAE,SAAAC,GAAS;AAAA,IACvB,aAAAS;AAAA,EAAA,CACD,IAGIE,EAAU,MAAM,OAAO;AAAA,IAC5B,GAAGZ,EAAS,EAAE,SAAAC,GAAS;AAAA,IACvB,aAAAS;AAAA,EAAA,CACD;AACH,GAwFMG,IAAsCC,EAAsB;AAAA,EAChE,SAAAhB;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAU;AACF,CAAC;AAED,IAAOM,IAAQF;"}
|
|
1
|
+
{"version":3,"file":"display-BAWPSZWk.js","sources":["../source/api/quote/display.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots } from 'model';\nimport { Markup } from 'utilities';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-quote';\n\n/**\n * Quote Display\n *\n * A component for displaying quotes, testimonials, and pull quotes with attribution.\n * Supports both inline and featured layouts with optional imagery and call-to-action.\n * Perfect for highlighting testimonials, expert opinions, or memorable statements.\n *\n * ## Custom Element\n * `<umd-element-quote>`\n *\n * ## Slots\n * - `quote` - The quote text content (required, accepts: text elements)\n * - `attribution` - Person or source of the quote (optional, accepts: text elements)\n * - `attribution-sub-text` - Additional attribution info like title or affiliation (optional, accepts: text elements)\n * - `image` - Portrait or related image (optional, accepts: img)\n * - `actions` - Call-to-action links (optional, accepts: a, button)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `maryland` - University brand colors\n * - `data-visual` - Visual styling options:\n * - `transparent` - Transparent background\n * - `size-large` - Larger text size for emphasis\n * - `data-display` - Layout variant:\n * - `featured` - Featured quote with enhanced styling\n * - Default - Inline quote layout\n *\n * @example\n * ```html\n * <!-- Basic inline quote -->\n * <umd-element-quote>\n * <blockquote slot=\"quote\">\n * \"The University of Maryland has provided me with countless opportunities\n * to grow both academically and personally.\"\n * </blockquote>\n * <cite slot=\"attribution\">Sarah Johnson</cite>\n * <span slot=\"attribution-sub-text\">Class of 2024</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Featured quote with image -->\n * <umd-element-quote data-display=\"featured\" data-visual=\"size-large\">\n * <img slot=\"image\" src=\"alumnus.jpg\" alt=\"John Smith\" />\n * <blockquote slot=\"quote\">\n * \"My education at Maryland prepared me to tackle real-world challenges\n * and make a difference in my community.\"\n * </blockquote>\n * <cite slot=\"attribution\">John Smith</cite>\n * <span slot=\"attribution-sub-text\">CEO, Tech Innovations Inc.</span>\n * <a slot=\"actions\" href=\"/alumni-stories\">Read More Alumni Stories</a>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Large quote with dark theme -->\n * <umd-element-quote data-theme=\"dark\" data-visual=\"size-large\">\n * <blockquote slot=\"quote\">\n * \"Research at the University of Maryland is pushing the boundaries\n * of what's possible in quantum computing.\"\n * </blockquote>\n * <cite slot=\"attribution\">Dr. Michelle Lee</cite>\n * <span slot=\"attribution-sub-text\">Director, Quantum Research Lab</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Maryland theme testimonial -->\n * <umd-element-quote data-theme=\"maryland\" data-visual=\"transparent\">\n * <blockquote slot=\"quote\">\n * \"The diversity of perspectives and experiences at UMD enriches\n * every classroom discussion and research project.\"\n * </blockquote>\n * <cite slot=\"attribution\">Professor David Chen</cite>\n * <span slot=\"attribution-sub-text\">Department of Sociology</span>\n * <a slot=\"actions\" href=\"/diversity\">Learn About Our Community</a>\n * </umd-element-quote>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst slots: SlotConfiguration = {\n quote: {\n required: true,\n },\n};\n\nconst MakeData = ({ element }: { element: HTMLElement }) => {\n const isThemeDark = Attributes.isTheme.dark({ element });\n const isThemeMaryland = Attributes.isTheme.maryland({ element });\n const isTransparent = Attributes.isVisual.transparent({ element });\n\n return {\n quote: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.QUOTE,\n }),\n image: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.assets.image,\n }),\n attribution: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.ATTRIBUTION,\n }),\n attributionSubText: Markup.create.SlotWithDefaultStyling({\n element,\n slotRef: Slots.name.ATTRIBUTION_SUB_TEXT,\n }),\n action: Slots.actions.default({ element }),\n isTransparent,\n isThemeDark,\n isThemeMaryland,\n };\n};\n\nconst createComponent: CreateComponentFunction = (element) => {\n const isSizeLarge = Attributes.isVisual.sizeLarge({ element });\n const isTypeFeatured = Attributes.isDisplay.featured({ element });\n\n if (isTypeFeatured) {\n return Composite.quote.featured({\n ...MakeData({ element }),\n isSizeLarge,\n });\n }\n\n return Composite.quote.inline({\n ...MakeData({ element }),\n isSizeLarge,\n });\n};\n\n/**\n * Quote Display\n *\n * A component for displaying quotes, testimonials, and pull quotes with attribution.\n * Supports both inline and featured layouts with optional imagery and call-to-action.\n * Perfect for highlighting testimonials, expert opinions, or memorable statements.\n *\n * ## Custom Element\n * `<umd-element-quote>`\n *\n * ## Slots\n * - `quote` - The quote text content (required, accepts: text elements)\n * - `attribution` - Person or source of the quote (optional, accepts: text elements)\n * - `attribution-sub-text` - Additional attribution info like title or affiliation (optional, accepts: text elements)\n * - `image` - Portrait or related image (optional, accepts: img)\n * - `actions` - Call-to-action links (optional, accepts: a, button)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `maryland` - University brand colors\n * - `data-visual` - Visual styling options:\n * - `transparent` - Transparent background\n * - `size-large` - Larger text size for emphasis\n * - `data-display` - Layout variant:\n * - `featured` - Featured quote with enhanced styling\n * - Default - Inline quote layout\n *\n * @example\n * ```html\n * <!-- Basic inline quote -->\n * <umd-element-quote>\n * <blockquote slot=\"quote\">\n * \"The University of Maryland has provided me with countless opportunities\n * to grow both academically and personally.\"\n * </blockquote>\n * <cite slot=\"attribution\">Sarah Johnson</cite>\n * <span slot=\"attribution-sub-text\">Class of 2024</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Featured quote with image -->\n * <umd-element-quote data-display=\"featured\" data-visual=\"size-large\">\n * <img slot=\"image\" src=\"alumnus.jpg\" alt=\"John Smith\" />\n * <blockquote slot=\"quote\">\n * \"My education at Maryland prepared me to tackle real-world challenges\n * and make a difference in my community.\"\n * </blockquote>\n * <cite slot=\"attribution\">John Smith</cite>\n * <span slot=\"attribution-sub-text\">CEO, Tech Innovations Inc.</span>\n * <a slot=\"actions\" href=\"/alumni-stories\">Read More Alumni Stories</a>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Large quote with dark theme -->\n * <umd-element-quote data-theme=\"dark\" data-visual=\"size-large\">\n * <blockquote slot=\"quote\">\n * \"Research at the University of Maryland is pushing the boundaries\n * of what's possible in quantum computing.\"\n * </blockquote>\n * <cite slot=\"attribution\">Dr. Michelle Lee</cite>\n * <span slot=\"attribution-sub-text\">Director, Quantum Research Lab</span>\n * </umd-element-quote>\n * ```\n *\n * @example\n * ```html\n * <!-- Maryland theme testimonial -->\n * <umd-element-quote data-theme=\"maryland\" data-visual=\"transparent\">\n * <blockquote slot=\"quote\">\n * \"The diversity of perspectives and experiences at UMD enriches\n * every classroom discussion and research project.\"\n * </blockquote>\n * <cite slot=\"attribution\">Professor David Chen</cite>\n * <span slot=\"attribution-sub-text\">Department of Sociology</span>\n * <a slot=\"actions\" href=\"/diversity\">Learn About Our Community</a>\n * </umd-element-quote>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n});\n\nexport default registration;\n"],"names":["tagName","slots","MakeData","element","isThemeDark","Attributes.isTheme","isThemeMaryland","isTransparent","Attributes.isVisual","Markup.create.SlotWithDefaultStyling","Slots","createComponent","isSizeLarge","Attributes.isDisplay","Composite","registration","Register.webComponent","display_default"],"mappings":";;;;AASA,MAAMA,IAAU,qBAwFVC,IAA2B;AAAA,EAC/B,OAAO;AAAA,IACL,UAAU;AAAA,EAAA;AAEd,GAEMC,IAAW,CAAC,EAAE,SAAAC,QAAwC;AAC1D,QAAMC,IAAcC,EAAmB,KAAK,EAAE,SAAAF,GAAS,GACjDG,IAAkBD,EAAmB,SAAS,EAAE,SAAAF,GAAS,GACzDI,IAAgBC,EAAoB,YAAY,EAAE,SAAAL,GAAS;AAEjE,SAAO;AAAA,IACL,OAAOM,EAAqC;AAAA,MAC1C,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,OAAOD,EAAqC;AAAA,MAC1C,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK,OAAO;AAAA,IAAA,CAC5B;AAAA,IACD,aAAaD,EAAqC;AAAA,MAChD,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,oBAAoBD,EAAqC;AAAA,MACvD,SAAAN;AAAA,MACA,SAASO,EAAM,KAAK;AAAA,IAAA,CACrB;AAAA,IACD,QAAQA,EAAM,QAAQ,QAAQ,EAAE,SAAAP,GAAS;AAAA,IACzC,eAAAI;AAAA,IACA,aAAAH;AAAA,IACA,iBAAAE;AAAA,EAAA;AAEJ,GAEMK,IAA2C,CAACR,MAAY;AAC5D,QAAMS,IAAcJ,EAAoB,UAAU,EAAE,SAAAL,GAAS;AAG7D,SAFuBU,EAAqB,SAAS,EAAE,SAAAV,GAAS,IAGvDW,EAAU,MAAM,SAAS;AAAA,IAC9B,GAAGZ,EAAS,EAAE,SAAAC,GAAS;AAAA,IACvB,aAAAS;AAAA,EAAA,CACD,IAGIE,EAAU,MAAM,OAAO;AAAA,IAC5B,GAAGZ,EAAS,EAAE,SAAAC,GAAS;AAAA,IACvB,aAAAS;AAAA,EAAA,CACD;AACH,GAwFMG,IAAsCC,EAAsB;AAAA,EAChE,SAAAhB;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAU;AACF,CAAC;AAED,IAAOM,IAAQF;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Atomic as c } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { g as d, a, i as u, b as o, s as i } from "./shared/model-
|
|
3
|
-
import { w as y } from "./shared/utilities-
|
|
2
|
+
import { g as d, a, i as u, b as o, s as i } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as y } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
const { actions: r } = c, m = "umd-element-call-to-action", x = {
|
|
5
5
|
text: {
|
|
6
6
|
allowedElements: ["a", "button"]
|
|
@@ -44,4 +44,4 @@ var w = b;
|
|
|
44
44
|
export {
|
|
45
45
|
w as d
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=display-
|
|
47
|
+
//# sourceMappingURL=display-DvhD-oDO.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-
|
|
1
|
+
{"version":3,"file":"display-DvhD-oDO.js","sources":["../source/api/actions/display.ts"],"sourcesContent":["import { Atomic } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots } from 'model';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\n\nconst { actions } = Atomic;\n\n/**\n * Tag name for the call-to-action web component\n */\nconst tagName = 'umd-element-call-to-action';\n\n/**\n * Slot configuration for the call-to-action component\n */\nconst slots: SlotConfiguration = {\n text: {\n allowedElements: ['a', 'button'],\n },\n plainText: {\n deprecated:\n 'Use \"text\" instead. This attribute will be removed in version 2.0.',\n allowedElements: ['a', 'button'],\n },\n};\n\n/**\n * Creates a call-to-action component from the host element\n */\nconst createComponent: CreateComponentFunction = (element) => {\n const interactiveElement = element.querySelector('button, a:not([slot])');\n const plainTextSlot = element.querySelector(\n `[slot=\"plain-text\"]`,\n ) as HTMLElement;\n const textSlot = element.querySelector(`[slot=\"text\"]`) as HTMLElement;\n\n if (!interactiveElement) {\n throw new Error('Component requires a button or link');\n }\n\n const optionProps = {\n element: interactiveElement.cloneNode(true) as HTMLElement,\n isTypeOutline: Attributes.isDisplay.outline({ element }),\n isTypePrimary: Attributes.isDisplay.primary({ element }),\n isTypeSecondary: Attributes.isDisplay.secondary({ element }),\n isSizeLarge: Attributes.isVisual.sizeLarge({ element }),\n isThemeDark: Attributes.isTheme.dark({ element }),\n isThemeGold: Attributes.isTheme.gold({ element }),\n elementStyles: Attributes.getValue.styleProps({ element }),\n };\n\n if (plainTextSlot || textSlot) {\n const plainText =\n Slots.deprecated.plainText({ element }) ||\n Slots.text.default({ element });\n\n return actions.options({\n ...optionProps,\n plainText,\n });\n }\n\n return actions.options({\n ...optionProps,\n });\n};\n\n/**\n * Call-to-Action\n *\n * A web component that enhances buttons and links with consistent UMD styling.\n *\n * ## Custom Element\n * `<umd-element-call-to-action>`\n *\n * ## Slots\n * - `text` - Additional text content for links (optional, accepts: a)\n * - `plainText` - Deprecated: Use `text` slot instead\n *\n * ## Attributes\n * - `data-display` - Display style options:\n * - `primary` - Primary button style (red background)\n * - `secondary` - Secondary button style\n * - `outline` - Outline button style\n * - `data-visual-size` - Size options:\n * - `large` - Larger button size\n * - `data-theme` - Theme options:\n * - `dark` - Dark theme variant\n * - `gold` - Gold theme variant\n *\n * @example\n * ```html\n * <!-- Primary button -->\n * <umd-element-call-to-action data-display=\"primary\">\n * <button>Apply Now</button>\n * </umd-element-call-to-action>\n * ```\n *\n * @example\n * ```html\n * <!-- Large secondary link -->\n * <umd-element-call-to-action data-display=\"secondary\" data-visual-size=\"large\">\n * <a href=\"/learn-more\">Learn More</a>\n * </umd-element-call-to-action>\n * ```\n *\n * @example\n * ```html\n * <!-- Outline button with dark theme -->\n * <umd-element-call-to-action data-display=\"outline\" data-theme=\"dark\">\n * <button>Contact Us</button>\n * </umd-element-call-to-action>\n * ```\n *\n * @example\n * ```html\n * <!-- Link with additional text -->\n * <umd-element-call-to-action>\n * <a href=\"/admissions\" slot=\"text\">View admission requirements</a>\n * </umd-element-call-to-action>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n});\n\nexport default registration;\n"],"names":["actions","Atomic","tagName","slots","createComponent","element","interactiveElement","plainTextSlot","textSlot","optionProps","Attributes.isDisplay","Attributes.isVisual","Attributes.isTheme","Attributes.getValue","plainText","Slots","registration","Register.webComponent","display_default"],"mappings":";;;AAQA,MAAM,EAAE,SAAAA,MAAYC,GAKdC,IAAU,8BAKVC,IAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,iBAAiB,CAAC,KAAK,QAAQ;AAAA,EAAA;AAAA,EAEjC,WAAW;AAAA,IACT,YACE;AAAA,IACF,iBAAiB,CAAC,KAAK,QAAQ;AAAA,EAAA;AAEnC,GAKMC,IAA2C,CAACC,MAAY;AAC5D,QAAMC,IAAqBD,EAAQ,cAAc,uBAAuB,GAClEE,IAAgBF,EAAQ;AAAA,IAC5B;AAAA,EAAA,GAEIG,IAAWH,EAAQ,cAAc,eAAe;AAEtD,MAAI,CAACC;AACH,UAAM,IAAI,MAAM,qCAAqC;AAGvD,QAAMG,IAAc;AAAA,IAClB,SAASH,EAAmB,UAAU,EAAI;AAAA,IAC1C,eAAeI,EAAqB,QAAQ,EAAE,SAAAL,GAAS;AAAA,IACvD,eAAeK,EAAqB,QAAQ,EAAE,SAAAL,GAAS;AAAA,IACvD,iBAAiBK,EAAqB,UAAU,EAAE,SAAAL,GAAS;AAAA,IAC3D,aAAaM,EAAoB,UAAU,EAAE,SAAAN,GAAS;AAAA,IACtD,aAAaO,EAAmB,KAAK,EAAE,SAAAP,GAAS;AAAA,IAChD,aAAaO,EAAmB,KAAK,EAAE,SAAAP,GAAS;AAAA,IAChD,eAAeQ,EAAoB,WAAW,EAAE,SAAAR,GAAS;AAAA,EAAA;AAG3D,MAAIE,KAAiBC,GAAU;AAC7B,UAAMM,IACJC,EAAM,WAAW,UAAU,EAAE,SAAAV,GAAS,KACtCU,EAAM,KAAK,QAAQ,EAAE,SAAAV,GAAS;AAEhC,WAAOL,EAAQ,QAAQ;AAAA,MACrB,GAAGS;AAAA,MACH,WAAAK;AAAA,IAAA,CACD;AAAA,EACH;AAEA,SAAOd,EAAQ,QAAQ;AAAA,IACrB,GAAGS;AAAA,EAAA,CACJ;AACH,GA4DMO,IAAsCC,EAAsB;AAAA,EAChE,SAAAf;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AACF,CAAC;AAED,IAAOc,IAAQF;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Composite as e } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { h as i, a as m, s, g as d } from "./shared/model-
|
|
3
|
-
import { w as c, h as l, N as p } from "./shared/utilities-
|
|
2
|
+
import { h as i, a as m, s, g as d } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as c, h as l, N as p } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
import "@universityofmaryland/web-styles-library";
|
|
5
5
|
const u = "umd-element-tabs", f = {
|
|
6
6
|
tabs: {
|
|
@@ -35,4 +35,4 @@ var S = C;
|
|
|
35
35
|
export {
|
|
36
36
|
S as d
|
|
37
37
|
};
|
|
38
|
-
//# sourceMappingURL=display-
|
|
38
|
+
//# sourceMappingURL=display-HZowWri1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-D2GEPqCW.js","sources":["../source/api/tab/display.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots, Lifecycle } from 'model';\nimport { Markup } from 'utilities';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-tabs';\n\n/**\n * Tabs Display\n *\n * A tabbed interface component that organizes content into selectable panels.\n * Supports responsive behavior with automatic overflow handling and sticky positioning.\n * Ideal for organizing related content into easily navigable sections.\n *\n * ## Custom Element\n * `<umd-element-tabs>`\n *\n * ## Slots\n * - `tabs` - Container with tab structure (required, accepts: div with specific markup)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `data-sticky-position` - Top position offset for sticky behavior (in pixels)\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of tab layout\n *\n * ## Tab Structure\n * The tabs slot expects a specific HTML structure:\n * ```html\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"tab1\">Tab 1 Label</div>\n * <div class=\"tab\" data-tab=\"tab2\">Tab 2 Label</div>\n * <div class=\"panel\" data-panel=\"tab1\">Tab 1 Content</div>\n * <div class=\"panel\" data-panel=\"tab2\">Tab 2 Content</div>\n * </div>\n * ```\n *\n * @example\n * ```html\n * <!-- Basic tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"overview\">Overview</div>\n * <div class=\"tab\" data-tab=\"requirements\">Requirements</div>\n * <div class=\"tab\" data-tab=\"curriculum\">Curriculum</div>\n *\n * <div class=\"panel\" data-panel=\"overview\">\n * <h3>Program Overview</h3>\n * <p>Learn about our comprehensive program...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"requirements\">\n * <h3>Admission Requirements</h3>\n * <ul>\n * <li>Bachelor's degree</li>\n * <li>3.0 GPA minimum</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"curriculum\">\n * <h3>Course Curriculum</h3>\n * <p>Our curriculum includes...</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme with sticky positioning -->\n * <umd-element-tabs data-theme=\"dark\" data-sticky-position=\"80\">\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"about\">About</div>\n * <div class=\"tab\" data-tab=\"research\">Research</div>\n * <div class=\"tab\" data-tab=\"publications\">Publications</div>\n * <div class=\"tab\" data-tab=\"contact\">Contact</div>\n *\n * <div class=\"panel\" data-panel=\"about\">\n * <h2>About the Lab</h2>\n * <p>Our research lab focuses on...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"research\">\n * <h2>Current Research</h2>\n * <p>We are investigating...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"publications\">\n * <h2>Recent Publications</h2>\n * <ul>\n * <li>Publication 1 (2024)</li>\n * <li>Publication 2 (2023)</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"contact\">\n * <h2>Contact Information</h2>\n * <p>Email: lab@umd.edu</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Course information tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"description\">Description</div>\n * <div class=\"tab\" data-tab=\"objectives\">Learning Objectives</div>\n * <div class=\"tab\" data-tab=\"schedule\">Schedule</div>\n * <div class=\"tab\" data-tab=\"assignments\">Assignments</div>\n *\n * <div class=\"panel\" data-panel=\"description\">\n * <h3>Course Description</h3>\n * <p>This course introduces students to...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"objectives\">\n * <h3>Learning Objectives</h3>\n * <ol>\n * <li>Understand fundamental concepts</li>\n * <li>Apply theoretical knowledge</li>\n * <li>Develop practical skills</li>\n * </ol>\n * </div>\n * <div class=\"panel\" data-panel=\"schedule\">\n * <h3>Course Schedule</h3>\n * <table>\n * <tr><td>Week 1</td><td>Introduction</td></tr>\n * <tr><td>Week 2</td><td>Core Concepts</td></tr>\n * </table>\n * </div>\n * <div class=\"panel\" data-panel=\"assignments\">\n * <h3>Assignments</h3>\n * <p>All assignments due by 11:59 PM on specified dates.</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst slots: SlotConfiguration = {\n tabs: {\n required: true,\n },\n};\n\nconst attributes = Attributes.handler.common.resize((element) =>\n element.events?.resize(),\n);\n\nconst createComponent: CreateComponentFunction = (element) => {\n const isThemeDark = Attributes.isTheme.dark({ element });\n const slot = Markup.create.Node.slot({ type: Slots.name.TABS });\n const markup = element.querySelector(`[slot=\"${Slots.name.TABS}\"]`);\n\n const modifyDom = () => {\n if (!markup) return;\n\n const updateDom = Composite.tabs.elements.DomStrcuture.ModifyElement({\n markup,\n });\n\n markup.innerHTML = '';\n markup.appendChild(updateDom);\n };\n\n modifyDom();\n\n return Composite.tabs.standard({\n isThemeDark,\n tabsContainer: markup?.children[0] as HTMLElement,\n shadowContent: slot,\n topPosition: Attributes.getValue.topPosition({\n element,\n }),\n });\n};\n\n/**\n * Tabs Display\n *\n * A tabbed interface component that organizes content into selectable panels.\n * Supports responsive behavior with automatic overflow handling and sticky positioning.\n * Ideal for organizing related content into easily navigable sections.\n *\n * ## Custom Element\n * `<umd-element-tabs>`\n *\n * ## Slots\n * - `tabs` - Container with tab structure (required, accepts: div with specific markup)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `data-sticky-position` - Top position offset for sticky behavior (in pixels)\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of tab layout\n *\n * ## Tab Structure\n * The tabs slot expects a specific HTML structure:\n * ```html\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"tab1\">Tab 1 Label</div>\n * <div class=\"tab\" data-tab=\"tab2\">Tab 2 Label</div>\n * <div class=\"panel\" data-panel=\"tab1\">Tab 1 Content</div>\n * <div class=\"panel\" data-panel=\"tab2\">Tab 2 Content</div>\n * </div>\n * ```\n *\n * @example\n * ```html\n * <!-- Basic tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"overview\">Overview</div>\n * <div class=\"tab\" data-tab=\"requirements\">Requirements</div>\n * <div class=\"tab\" data-tab=\"curriculum\">Curriculum</div>\n *\n * <div class=\"panel\" data-panel=\"overview\">\n * <h3>Program Overview</h3>\n * <p>Learn about our comprehensive program...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"requirements\">\n * <h3>Admission Requirements</h3>\n * <ul>\n * <li>Bachelor's degree</li>\n * <li>3.0 GPA minimum</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"curriculum\">\n * <h3>Course Curriculum</h3>\n * <p>Our curriculum includes...</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme with sticky positioning -->\n * <umd-element-tabs data-theme=\"dark\" data-sticky-position=\"80\">\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"about\">About</div>\n * <div class=\"tab\" data-tab=\"research\">Research</div>\n * <div class=\"tab\" data-tab=\"publications\">Publications</div>\n * <div class=\"tab\" data-tab=\"contact\">Contact</div>\n *\n * <div class=\"panel\" data-panel=\"about\">\n * <h2>About the Lab</h2>\n * <p>Our research lab focuses on...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"research\">\n * <h2>Current Research</h2>\n * <p>We are investigating...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"publications\">\n * <h2>Recent Publications</h2>\n * <ul>\n * <li>Publication 1 (2024)</li>\n * <li>Publication 2 (2023)</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"contact\">\n * <h2>Contact Information</h2>\n * <p>Email: lab@umd.edu</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Course information tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"description\">Description</div>\n * <div class=\"tab\" data-tab=\"objectives\">Learning Objectives</div>\n * <div class=\"tab\" data-tab=\"schedule\">Schedule</div>\n * <div class=\"tab\" data-tab=\"assignments\">Assignments</div>\n *\n * <div class=\"panel\" data-panel=\"description\">\n * <h3>Course Description</h3>\n * <p>This course introduces students to...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"objectives\">\n * <h3>Learning Objectives</h3>\n * <ol>\n * <li>Understand fundamental concepts</li>\n * <li>Apply theoretical knowledge</li>\n * <li>Develop practical skills</li>\n * </ol>\n * </div>\n * <div class=\"panel\" data-panel=\"schedule\">\n * <h3>Course Schedule</h3>\n * <table>\n * <tr><td>Week 1</td><td>Introduction</td></tr>\n * <tr><td>Week 2</td><td>Core Concepts</td></tr>\n * </table>\n * </div>\n * <div class=\"panel\" data-panel=\"assignments\">\n * <h3>Assignments</h3>\n * <p>All assignments due by 11:59 PM on specified dates.</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n attributes: [attributes],\n afterConnect: Lifecycle.hooks.loadOnConnect,\n});\n\nexport default registration;\n"],"names":["tagName","slots","attributes","Attributes.handler","element","createComponent","isThemeDark","Attributes.isTheme","slot","Markup.create.Node","Slots","markup","updateDom","Composite","Attributes.getValue","registration","Register.webComponent","Lifecycle.hooks","display_default"],"mappings":";;;;AASA,MAAMA,IAAU,oBAuIVC,IAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAEd,GAEMC,IAAaC,EAAmB,OAAO;AAAA,EAAO,CAACC,MACnDA,EAAQ,QAAQ,OAAA;AAClB,GAEMC,IAA2C,CAACD,MAAY;AAC5D,QAAME,IAAcC,EAAmB,KAAK,EAAE,SAAAH,GAAS,GACjDI,IAAOC,EAAmB,KAAK,EAAE,MAAMC,EAAM,KAAK,MAAM,GACxDC,IAASP,EAAQ,cAAc,UAAUM,EAAM,KAAK,IAAI,IAAI;AAalE,UAXkB,MAAM;AACtB,QAAI,CAACC,EAAQ;AAEb,UAAMC,IAAYC,EAAU,KAAK,SAAS,aAAa,cAAc;AAAA,MACnE,QAAAF;AAAA,IAAA,CACD;AAED,IAAAA,EAAO,YAAY,IACnBA,EAAO,YAAYC,CAAS;AAAA,EAC9B,GAEA,GAEOC,EAAU,KAAK,SAAS;AAAA,IAC7B,aAAAP;AAAA,IACA,eAAeK,GAAQ,SAAS,CAAC;AAAA,IACjC,eAAeH;AAAA,IACf,aAAaM,EAAoB,YAAY;AAAA,MAC3C,SAAAV;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH,GAuIMW,IAAsCC,EAAsB;AAAA,EAChE,SAAAhB;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAI;AAAA,EACA,YAAY,CAACH,CAAU;AAAA,EACvB,cAAce,EAAgB;AAChC,CAAC;AAED,IAAOC,IAAQH;"}
|
|
1
|
+
{"version":3,"file":"display-HZowWri1.js","sources":["../source/api/tab/display.ts"],"sourcesContent":["import { Composite } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots, Lifecycle } from 'model';\nimport { Markup } from 'utilities';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-tabs';\n\n/**\n * Tabs Display\n *\n * A tabbed interface component that organizes content into selectable panels.\n * Supports responsive behavior with automatic overflow handling and sticky positioning.\n * Ideal for organizing related content into easily navigable sections.\n *\n * ## Custom Element\n * `<umd-element-tabs>`\n *\n * ## Slots\n * - `tabs` - Container with tab structure (required, accepts: div with specific markup)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `data-sticky-position` - Top position offset for sticky behavior (in pixels)\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of tab layout\n *\n * ## Tab Structure\n * The tabs slot expects a specific HTML structure:\n * ```html\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"tab1\">Tab 1 Label</div>\n * <div class=\"tab\" data-tab=\"tab2\">Tab 2 Label</div>\n * <div class=\"panel\" data-panel=\"tab1\">Tab 1 Content</div>\n * <div class=\"panel\" data-panel=\"tab2\">Tab 2 Content</div>\n * </div>\n * ```\n *\n * @example\n * ```html\n * <!-- Basic tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"overview\">Overview</div>\n * <div class=\"tab\" data-tab=\"requirements\">Requirements</div>\n * <div class=\"tab\" data-tab=\"curriculum\">Curriculum</div>\n *\n * <div class=\"panel\" data-panel=\"overview\">\n * <h3>Program Overview</h3>\n * <p>Learn about our comprehensive program...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"requirements\">\n * <h3>Admission Requirements</h3>\n * <ul>\n * <li>Bachelor's degree</li>\n * <li>3.0 GPA minimum</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"curriculum\">\n * <h3>Course Curriculum</h3>\n * <p>Our curriculum includes...</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme with sticky positioning -->\n * <umd-element-tabs data-theme=\"dark\" data-sticky-position=\"80\">\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"about\">About</div>\n * <div class=\"tab\" data-tab=\"research\">Research</div>\n * <div class=\"tab\" data-tab=\"publications\">Publications</div>\n * <div class=\"tab\" data-tab=\"contact\">Contact</div>\n *\n * <div class=\"panel\" data-panel=\"about\">\n * <h2>About the Lab</h2>\n * <p>Our research lab focuses on...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"research\">\n * <h2>Current Research</h2>\n * <p>We are investigating...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"publications\">\n * <h2>Recent Publications</h2>\n * <ul>\n * <li>Publication 1 (2024)</li>\n * <li>Publication 2 (2023)</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"contact\">\n * <h2>Contact Information</h2>\n * <p>Email: lab@umd.edu</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Course information tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"description\">Description</div>\n * <div class=\"tab\" data-tab=\"objectives\">Learning Objectives</div>\n * <div class=\"tab\" data-tab=\"schedule\">Schedule</div>\n * <div class=\"tab\" data-tab=\"assignments\">Assignments</div>\n *\n * <div class=\"panel\" data-panel=\"description\">\n * <h3>Course Description</h3>\n * <p>This course introduces students to...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"objectives\">\n * <h3>Learning Objectives</h3>\n * <ol>\n * <li>Understand fundamental concepts</li>\n * <li>Apply theoretical knowledge</li>\n * <li>Develop practical skills</li>\n * </ol>\n * </div>\n * <div class=\"panel\" data-panel=\"schedule\">\n * <h3>Course Schedule</h3>\n * <table>\n * <tr><td>Week 1</td><td>Introduction</td></tr>\n * <tr><td>Week 2</td><td>Core Concepts</td></tr>\n * </table>\n * </div>\n * <div class=\"panel\" data-panel=\"assignments\">\n * <h3>Assignments</h3>\n * <p>All assignments due by 11:59 PM on specified dates.</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst slots: SlotConfiguration = {\n tabs: {\n required: true,\n },\n};\n\nconst attributes = Attributes.handler.common.resize((element) =>\n element.events?.resize(),\n);\n\nconst createComponent: CreateComponentFunction = (element) => {\n const isThemeDark = Attributes.isTheme.dark({ element });\n const slot = Markup.create.Node.slot({ type: Slots.name.TABS });\n const markup = element.querySelector(`[slot=\"${Slots.name.TABS}\"]`);\n\n const modifyDom = () => {\n if (!markup) return;\n\n const updateDom = Composite.tabs.elements.DomStrcuture.ModifyElement({\n markup,\n });\n\n markup.innerHTML = '';\n markup.appendChild(updateDom);\n };\n\n modifyDom();\n\n return Composite.tabs.standard({\n isThemeDark,\n tabsContainer: markup?.children[0] as HTMLElement,\n shadowContent: slot,\n topPosition: Attributes.getValue.topPosition({\n element,\n }),\n });\n};\n\n/**\n * Tabs Display\n *\n * A tabbed interface component that organizes content into selectable panels.\n * Supports responsive behavior with automatic overflow handling and sticky positioning.\n * Ideal for organizing related content into easily navigable sections.\n *\n * ## Custom Element\n * `<umd-element-tabs>`\n *\n * ## Slots\n * - `tabs` - Container with tab structure (required, accepts: div with specific markup)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `data-sticky-position` - Top position offset for sticky behavior (in pixels)\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of tab layout\n *\n * ## Tab Structure\n * The tabs slot expects a specific HTML structure:\n * ```html\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"tab1\">Tab 1 Label</div>\n * <div class=\"tab\" data-tab=\"tab2\">Tab 2 Label</div>\n * <div class=\"panel\" data-panel=\"tab1\">Tab 1 Content</div>\n * <div class=\"panel\" data-panel=\"tab2\">Tab 2 Content</div>\n * </div>\n * ```\n *\n * @example\n * ```html\n * <!-- Basic tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"overview\">Overview</div>\n * <div class=\"tab\" data-tab=\"requirements\">Requirements</div>\n * <div class=\"tab\" data-tab=\"curriculum\">Curriculum</div>\n *\n * <div class=\"panel\" data-panel=\"overview\">\n * <h3>Program Overview</h3>\n * <p>Learn about our comprehensive program...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"requirements\">\n * <h3>Admission Requirements</h3>\n * <ul>\n * <li>Bachelor's degree</li>\n * <li>3.0 GPA minimum</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"curriculum\">\n * <h3>Course Curriculum</h3>\n * <p>Our curriculum includes...</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme with sticky positioning -->\n * <umd-element-tabs data-theme=\"dark\" data-sticky-position=\"80\">\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"about\">About</div>\n * <div class=\"tab\" data-tab=\"research\">Research</div>\n * <div class=\"tab\" data-tab=\"publications\">Publications</div>\n * <div class=\"tab\" data-tab=\"contact\">Contact</div>\n *\n * <div class=\"panel\" data-panel=\"about\">\n * <h2>About the Lab</h2>\n * <p>Our research lab focuses on...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"research\">\n * <h2>Current Research</h2>\n * <p>We are investigating...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"publications\">\n * <h2>Recent Publications</h2>\n * <ul>\n * <li>Publication 1 (2024)</li>\n * <li>Publication 2 (2023)</li>\n * </ul>\n * </div>\n * <div class=\"panel\" data-panel=\"contact\">\n * <h2>Contact Information</h2>\n * <p>Email: lab@umd.edu</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @example\n * ```html\n * <!-- Course information tabs -->\n * <umd-element-tabs>\n * <div slot=\"tabs\">\n * <div class=\"tab\" data-tab=\"description\">Description</div>\n * <div class=\"tab\" data-tab=\"objectives\">Learning Objectives</div>\n * <div class=\"tab\" data-tab=\"schedule\">Schedule</div>\n * <div class=\"tab\" data-tab=\"assignments\">Assignments</div>\n *\n * <div class=\"panel\" data-panel=\"description\">\n * <h3>Course Description</h3>\n * <p>This course introduces students to...</p>\n * </div>\n * <div class=\"panel\" data-panel=\"objectives\">\n * <h3>Learning Objectives</h3>\n * <ol>\n * <li>Understand fundamental concepts</li>\n * <li>Apply theoretical knowledge</li>\n * <li>Develop practical skills</li>\n * </ol>\n * </div>\n * <div class=\"panel\" data-panel=\"schedule\">\n * <h3>Course Schedule</h3>\n * <table>\n * <tr><td>Week 1</td><td>Introduction</td></tr>\n * <tr><td>Week 2</td><td>Core Concepts</td></tr>\n * </table>\n * </div>\n * <div class=\"panel\" data-panel=\"assignments\">\n * <h3>Assignments</h3>\n * <p>All assignments due by 11:59 PM on specified dates.</p>\n * </div>\n * </div>\n * </umd-element-tabs>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n attributes: [attributes],\n afterConnect: Lifecycle.hooks.loadOnConnect,\n});\n\nexport default registration;\n"],"names":["tagName","slots","attributes","Attributes.handler","element","createComponent","isThemeDark","Attributes.isTheme","slot","Markup.create.Node","Slots","markup","updateDom","Composite","Attributes.getValue","registration","Register.webComponent","Lifecycle.hooks","display_default"],"mappings":";;;;AASA,MAAMA,IAAU,oBAuIVC,IAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAEd,GAEMC,IAAaC,EAAmB,OAAO;AAAA,EAAO,CAACC,MACnDA,EAAQ,QAAQ,OAAA;AAClB,GAEMC,IAA2C,CAACD,MAAY;AAC5D,QAAME,IAAcC,EAAmB,KAAK,EAAE,SAAAH,GAAS,GACjDI,IAAOC,EAAmB,KAAK,EAAE,MAAMC,EAAM,KAAK,MAAM,GACxDC,IAASP,EAAQ,cAAc,UAAUM,EAAM,KAAK,IAAI,IAAI;AAalE,UAXkB,MAAM;AACtB,QAAI,CAACC,EAAQ;AAEb,UAAMC,IAAYC,EAAU,KAAK,SAAS,aAAa,cAAc;AAAA,MACnE,QAAAF;AAAA,IAAA,CACD;AAED,IAAAA,EAAO,YAAY,IACnBA,EAAO,YAAYC,CAAS;AAAA,EAC9B,GAEA,GAEOC,EAAU,KAAK,SAAS;AAAA,IAC7B,aAAAP;AAAA,IACA,eAAeK,GAAQ,SAAS,CAAC;AAAA,IACjC,eAAeH;AAAA,IACf,aAAaM,EAAoB,YAAY;AAAA,MAC3C,SAAAV;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH,GAuIMW,IAAsCC,EAAsB;AAAA,EAChE,SAAAhB;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAI;AAAA,EACA,YAAY,CAACH,CAAU;AAAA,EACvB,cAAce,EAAgB;AAChC,CAAC;AAED,IAAOC,IAAQH;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { s, b as e, j as o, i, a as r } from "./shared/model-
|
|
2
|
-
import { w as l } from "./shared/utilities-
|
|
1
|
+
import { s, b as e, j as o, i, a as r } from "./shared/model-CHS3WnCo.js";
|
|
2
|
+
import { w as l } from "./shared/utilities-CZHe-tKs.js";
|
|
3
3
|
import { Atomic as n } from "@universityofmaryland/web-elements-library";
|
|
4
4
|
const c = "umd-element-stat", d = {
|
|
5
5
|
stat: s.element.allowed.subHeadline,
|
|
@@ -24,4 +24,4 @@ var f = u;
|
|
|
24
24
|
export {
|
|
25
25
|
f as d
|
|
26
26
|
};
|
|
27
|
-
//# sourceMappingURL=display-
|
|
27
|
+
//# sourceMappingURL=display-yOrx8Qu7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-
|
|
1
|
+
{"version":3,"file":"display-yOrx8Qu7.js","sources":["../source/api/stat/display.ts"],"sourcesContent":["import { Attributes, Register, Slots } from 'model';\nimport {\n CreateComponentFunction,\n ComponentRegistration,\n SlotConfiguration,\n} from '../../_types';\nimport { Atomic } from '@universityofmaryland/web-elements-library';\n\n/**\n * Tag name for the statistic display web component\n */\nconst tagName = 'umd-element-stat';\n\n/**\n * Slot configuration for the statistic display component\n */\nconst slots: SlotConfiguration = {\n stat: Slots.element.allowed.subHeadline,\n 'sub-text': Slots.element.allowed.text,\n};\n\n/**\n * Creates a statistic display component with the provided configuration\n */\nconst createComponent: CreateComponentFunction = (element) => {\n const isDisplayBlock = Attributes.isDisplay.block({ element });\n\n return Atomic.text.stat({\n isThemeDark: Attributes.isTheme.dark({ element }),\n isDisplayBlock: isDisplayBlock,\n isSizeLarge: isDisplayBlock || Attributes.isVisual.sizeLarge({ element }),\n hasLine: Attributes.hasDecoration.line({ element }) || false,\n stat: Slots.text.stat({ element }) as HTMLElement,\n text: Slots.text.default({ element }) as HTMLElement,\n subText: Slots.text.subText({ element }) as HTMLElement,\n });\n};\n/**\n * Statistic Display\n *\n * A component for displaying key statistics, metrics, and numerical data with\n * supporting context. Supports various display styles and sizes to emphasize\n * important numbers and achievements.\n *\n * ## Custom Element\n * `<umd-element-stat>`\n *\n * ## Slots\n * - `stat` - The statistic value or number (optional, accepts: span, strong, em, b)\n * - Default slot - Descriptive text for the statistic (optional, accepts: text elements)\n * - `sub-text` - Additional context or details (optional, accepts: text elements)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n * - `data-display` - Display style variant:\n * - `block` - Block-level display\n * - `data-visual-size` - Size of the statistic display:\n * - `large` - Prominent size\n * - `data-decoration-line` - Add decorative line element:\n * - When present - Shows accent line\n *\n * @example\n * ```html\n * <!-- Basic block statistic -->\n * <umd-element-stat data-display=\"block\">\n * <span slot=\"stat\">40,000+</span>\n * <p>Students Enrolled</p>\n * </umd-element-stat>\n * ```\n *\n * @example\n * ```html\n * <!-- Block statistic with sub-text and large size -->\n * <umd-element-stat data-display=\"block\" data-visual-size=\"large\">\n * <span slot=\"stat\">$500M</span>\n * <p>Annual Research Funding</p>\n * <p slot=\"sub-text\">Supporting groundbreaking discoveries across all disciplines</p>\n * </umd-element-stat>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme block with accent line -->\n * <umd-element-stat data-display=\"block\" data-theme=\"dark\" data-decoration-line>\n * <span slot=\"stat\">#1</span>\n * <p>Public University in Maryland</p>\n * <p slot=\"sub-text\">According to U.S. News & World Report</p>\n * </umd-element-stat>\n * ```\n *\n * @example\n * ```html\n * <!-- Block statistics group -->\n * <div class=\"stats-row\">\n * <umd-element-stat data-display=\"block\">\n * <span slot=\"stat\">12:1</span>\n * <p>Student-Faculty Ratio</p>\n * </umd-element-stat>\n * <umd-element-stat data-display=\"block\">\n * <span slot=\"stat\">300+</span>\n * <p>Academic Programs</p>\n * </umd-element-stat>\n * <umd-element-stat data-display=\"block\">\n * <span slot=\"stat\">90%</span>\n * <p>Job Placement Rate</p>\n * </umd-element-stat>\n * </div>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n slots,\n createComponent,\n});\n\nexport default registration;\n"],"names":["tagName","slots","Slots","createComponent","element","isDisplayBlock","Attributes.isDisplay","Atomic","Attributes.isTheme","Attributes.isVisual","Attributes.hasDecoration","registration","Register.webComponent","display_default"],"mappings":";;;AAWA,MAAMA,IAAU,oBAKVC,IAA2B;AAAA,EAC/B,MAAMC,EAAM,QAAQ,QAAQ;AAAA,EAC5B,YAAYA,EAAM,QAAQ,QAAQ;AACpC,GAKMC,IAA2C,CAACC,MAAY;AAC5D,QAAMC,IAAiBC,EAAqB,MAAM,EAAE,SAAAF,GAAS;AAE7D,SAAOG,EAAO,KAAK,KAAK;AAAA,IACtB,aAAaC,EAAmB,KAAK,EAAE,SAAAJ,GAAS;AAAA,IAChD,gBAAAC;AAAA,IACA,aAAaA,KAAkBI,EAAoB,UAAU,EAAE,SAAAL,GAAS;AAAA,IACxE,SAASM,EAAyB,KAAK,EAAE,SAAAN,EAAA,CAAS,KAAK;AAAA,IACvD,MAAMF,EAAM,KAAK,KAAK,EAAE,SAAAE,GAAS;AAAA,IACjC,MAAMF,EAAM,KAAK,QAAQ,EAAE,SAAAE,GAAS;AAAA,IACpC,SAASF,EAAM,KAAK,QAAQ,EAAE,SAAAE,GAAS;AAAA,EAAA,CACxC;AACH,GA6EMO,IAAsCC,EAAsB;AAAA,EAChE,SAAAZ;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAE;AACF,CAAC;AAED,IAAOU,IAAQF;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Atomic as a } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { h as u, a as D, s as o } from "./shared/model-
|
|
3
|
-
import { w as p, h as f, c as r, a as S } from "./shared/utilities-
|
|
2
|
+
import { h as u, a as D, s as o } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as p, h as f, c as r, a as S } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
import "@universityofmaryland/web-styles-library";
|
|
5
5
|
const h = "umd-element-events-date", _ = u.common.resize(
|
|
6
6
|
(t) => t.events?.size()
|
|
@@ -39,4 +39,4 @@ var E = v;
|
|
|
39
39
|
export {
|
|
40
40
|
E as e
|
|
41
41
|
};
|
|
42
|
-
//# sourceMappingURL=event-lockup-
|
|
42
|
+
//# sourceMappingURL=event-lockup-DJPiglgR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"event-lockup-
|
|
1
|
+
{"version":3,"file":"event-lockup-DJPiglgR.js","sources":["../source/api/text/event-lockup.ts"],"sourcesContent":["import { Atomic } from '@universityofmaryland/web-elements-library';\nimport { Attributes, Register, Slots, Lifecycle } from 'model';\nimport * as Utilities from 'utilities';\nimport { CreateComponentFunction, ComponentRegistration } from '../../_types';\n\nconst tagName = 'umd-element-events-date';\n\n/**\n * Event Date Lockup\n *\n * A text component that displays event information with a formatted date sign.\n * Automatically creates a visual date display from ISO date strings and pairs it\n * with event headlines. Responsive sizing adjusts based on viewport.\n *\n * ## Custom Element\n * `<umd-element-events-date>`\n *\n * ## Slots\n * - `headline` - Event title or headline (optional, accepts: heading elements)\n * - `date-start-iso` - Event start date in ISO format (optional, accepts: time element)\n * - `date-end-iso` - Event end date in ISO format (optional, accepts: time element)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of date element sizes\n *\n * @example\n * ```html\n * <!-- Basic event with date -->\n * <umd-element-events-date>\n * <h3 slot=\"headline\">Spring Commencement</h3>\n * <time slot=\"date-start-iso\" datetime=\"2024-05-22\">May 22, 2024</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Multi-day event -->\n * <umd-element-events-date>\n * <h2 slot=\"headline\">Orientation Week</h2>\n * <time slot=\"date-start-iso\" datetime=\"2024-08-26\">August 26, 2024</time>\n * <time slot=\"date-end-iso\" datetime=\"2024-08-30\">August 30, 2024</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme event -->\n * <umd-element-events-date data-theme=\"dark\">\n * <h3 slot=\"headline\">Guest Lecture: Future of AI</h3>\n * <time slot=\"date-start-iso\" datetime=\"2024-04-15T18:00:00\">April 15, 2024 6:00 PM</time>\n * <time slot=\"date-end-iso\" datetime=\"2024-04-15T20:00:00\">April 15, 2024 8:00 PM</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Event without date (text only) -->\n * <umd-element-events-date>\n * <h3 slot=\"headline\">Ongoing Exhibition: Art of the Americas</h3>\n * </umd-element-events-date>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst attributes = Attributes.handler.common.resize((element) =>\n element.events?.size(),\n);\n\nconst createComponent: CreateComponentFunction = (element) => {\n const isThemeDark = Attributes.isTheme.dark({ element });\n\n const headline = Slots.headline.default({ element });\n const startDateSlot = element.querySelector(\n `[slot=\"${Slots.name.DATE_START_ISO}\"]`,\n );\n const endDateSlot = element.querySelector(\n `[slot=\"${Slots.name.DATE_END_ISO}\"]`,\n );\n const startDate = Utilities.Markup.event.createDate({\n element: startDateSlot,\n });\n const endDate = Utilities.Markup.event.createDate({ element: endDateSlot });\n\n if (!startDate) {\n return Atomic.textLockup.date({\n headline,\n isThemeDark,\n });\n }\n\n const EventSignData = Utilities.Markup.event.createDetailsData({\n startDate,\n endDate,\n });\n const dateSign = Atomic.events.sign({\n ...EventSignData,\n isThemeDark,\n });\n\n return Atomic.textLockup.date({\n headline,\n dateSign,\n isThemeDark,\n });\n};\n\n/**\n * Event Date Lockup\n *\n * A text component that displays event information with a formatted date sign.\n * Automatically creates a visual date display from ISO date strings and pairs it\n * with event headlines. Responsive sizing adjusts based on viewport.\n *\n * ## Custom Element\n * `<umd-element-events-date>`\n *\n * ## Slots\n * - `headline` - Event title or headline (optional, accepts: heading elements)\n * - `date-start-iso` - Event start date in ISO format (optional, accepts: time element)\n * - `date-end-iso` - Event end date in ISO format (optional, accepts: time element)\n *\n * ## Attributes\n * - `data-theme` - Color theme of the component:\n * - `dark` - Dark background with light text\n *\n * ## Observed Attributes\n * - `resize` - Triggers recalculation of date element sizes\n *\n * @example\n * ```html\n * <!-- Basic event with date -->\n * <umd-element-events-date>\n * <h3 slot=\"headline\">Spring Commencement</h3>\n * <time slot=\"date-start-iso\" datetime=\"2024-05-22\">May 22, 2024</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Multi-day event -->\n * <umd-element-events-date>\n * <h2 slot=\"headline\">Orientation Week</h2>\n * <time slot=\"date-start-iso\" datetime=\"2024-08-26\">August 26, 2024</time>\n * <time slot=\"date-end-iso\" datetime=\"2024-08-30\">August 30, 2024</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme event -->\n * <umd-element-events-date data-theme=\"dark\">\n * <h3 slot=\"headline\">Guest Lecture: Future of AI</h3>\n * <time slot=\"date-start-iso\" datetime=\"2024-04-15T18:00:00\">April 15, 2024 6:00 PM</time>\n * <time slot=\"date-end-iso\" datetime=\"2024-04-15T20:00:00\">April 15, 2024 8:00 PM</time>\n * </umd-element-events-date>\n * ```\n *\n * @example\n * ```html\n * <!-- Event without date (text only) -->\n * <umd-element-events-date>\n * <h3 slot=\"headline\">Ongoing Exhibition: Art of the Americas</h3>\n * </umd-element-events-date>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nconst registration: ComponentRegistration = Register.webComponent({\n tagName,\n createComponent,\n attributes: [attributes],\n afterConnect: Lifecycle.hooks.loadOnConnect,\n});\n\nexport default registration;\n"],"names":["tagName","attributes","Attributes.handler","element","createComponent","isThemeDark","Attributes.isTheme","headline","Slots","startDateSlot","endDateSlot","startDate","Utilities.Markup.event.createDate","endDate","Atomic","EventSignData","Utilities.Markup.event.createDetailsData","dateSign","registration","Register.webComponent","Lifecycle.hooks","event_lockup_default"],"mappings":";;;;AAKA,MAAMA,IAAU,2BAgEVC,IAAaC,EAAmB,OAAO;AAAA,EAAO,CAACC,MACnDA,EAAQ,QAAQ,KAAA;AAClB,GAEMC,IAA2C,CAACD,MAAY;AAC5D,QAAME,IAAcC,EAAmB,KAAK,EAAE,SAAAH,GAAS,GAEjDI,IAAWC,EAAM,SAAS,QAAQ,EAAE,SAAAL,GAAS,GAC7CM,IAAgBN,EAAQ;AAAA,IAC5B,UAAUK,EAAM,KAAK,cAAc;AAAA,EAAA,GAE/BE,IAAcP,EAAQ;AAAA,IAC1B,UAAUK,EAAM,KAAK,YAAY;AAAA,EAAA,GAE7BG,IAAYC,EAAkC;AAAA,IAClD,SAASH;AAAA,EAAA,CACV,GACKI,IAAUD,EAAkC,EAAE,SAASF,GAAa;AAE1E,MAAI,CAACC;AACH,WAAOG,EAAO,WAAW,KAAK;AAAA,MAC5B,UAAAP;AAAA,MACA,aAAAF;AAAA,IAAA,CACD;AAGH,QAAMU,IAAgBC,EAAyC;AAAA,IAC7D,WAAAL;AAAA,IACA,SAAAE;AAAA,EAAA,CACD,GACKI,IAAWH,EAAO,OAAO,KAAK;AAAA,IAClC,GAAGC;AAAA,IACH,aAAAV;AAAA,EAAA,CACD;AAED,SAAOS,EAAO,WAAW,KAAK;AAAA,IAC5B,UAAAP;AAAA,IACA,UAAAU;AAAA,IACA,aAAAZ;AAAA,EAAA,CACD;AACH,GAgEMa,IAAsCC,EAAsB;AAAA,EAChE,SAAAnB;AAAA,EACA,iBAAAI;AAAA,EACA,YAAY,CAACH,CAAU;AAAA,EACvB,cAAcmB,EAAgB;AAChC,CAAC;AAED,IAAOC,IAAQH;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Composite as u } from "@universityofmaryland/web-elements-library";
|
|
2
|
-
import { h as i, s, a as d, g as r, l as f } from "./shared/model-
|
|
3
|
-
import { w as c, h as p } from "./shared/utilities-
|
|
2
|
+
import { h as i, s, a as d, g as r, l as f } from "./shared/model-CHS3WnCo.js";
|
|
3
|
+
import { w as c, h as p } from "./shared/utilities-CZHe-tKs.js";
|
|
4
4
|
import * as n from "@universityofmaryland/web-feeds-library";
|
|
5
5
|
const h = "umd-element-slider-events", T = i.common.resize(
|
|
6
6
|
(e) => e.events?.size()
|
|
@@ -48,4 +48,4 @@ export {
|
|
|
48
48
|
$ as d,
|
|
49
49
|
N as f
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=feed-
|
|
51
|
+
//# sourceMappingURL=feed-D5nqCXw5.js.map
|