// ../src/components/byline/byline.tsx
import { Fragment as Fragment2 } from "preact/jsx-runtime";

// ../src/helpers/formatClassString.ts
var formatClassString = (classesArray) => {
  return classesArray.filter((x) => !!x).join(" ");
};

// ../src/foundations/icons/sprite.svg
import { h } from "preact";
import { jsx, jsxs } from "preact/jsx-runtime";

// ../src/components/icon-sprite/icon-sprite.tsx
import { jsx as jsx2 } from "preact/jsx-runtime";
var IconUse = ({ iconName, classNames, attributes }) => {
  const componentClassName = "ds-icon";
  const classes = formatClassString([
    componentClassName,
    `${componentClassName}--sprite`,
    `${componentClassName}--${iconName}`,
    classNames
  ]);
  return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
};

// ../src/components/spinner/spinner.tsx
import { jsx as jsx3 } from "preact/jsx-runtime";
var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
  const componentClassName = "ds-spinner";
  const classes = formatClassString([
    `${componentClassName}`,
    `${componentClassName}--${variant}`,
    `${componentClassName}--${size}`,
    forcePx && "ds-force-px",
    classNames
  ]);
  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
};

// ../src/components/button/button-base.tsx
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
  let optionalHtml;
  if (!isIconButton && attributes["aria-label"]) {
    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
  } else if (!isIconButton) {
    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
  }
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
    optionalHtml,
    icon,
    loadingHtml
  ] });
};
var ToggleWrapper = ({
  selected = false,
  disabled = false,
  attributes,
  classes,
  onChild,
  offChild,
  loadingHtml
}) => {
  return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
    loadingHtml
  ] });
};
var ButtonBase = ({
  text,
  disabled = false,
  variant = "primary",
  size = "md",
  fullWidth = false,
  mobileFullWidth = false,
  iconPosition = "none",
  iconName,
  loading = false,
  type = "button",
  href,
  classNames,
  attributes = {},
  forcePx = false,
  isIconButton = false,
  selected = false,
  isToggle = false,
  selectedIconName,
  selectedText
}) => {
  if (isIconButton && text && !attributes["aria-label"]) {
    attributes["aria-label"] = text;
  } else if (isToggle && text && selectedText && !attributes["aria-label"]) {
    attributes["aria-label"] = selected ? selectedText : text;
  }
  let spinnerVariant = "secondary";
  if (variant === "staticWhite" || variant === "transparent") {
    spinnerVariant = "staticBlack";
  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
    spinnerVariant = "primary";
  }
  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
  let icon;
  if (iconName && (iconPosition != "none" || isIconButton == true)) {
    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
  }
  const classNamePrefix = "ds-btn--";
  const classes = formatClassString([
    "ds-btn",
    `${classNamePrefix}${variant}`,
    `${classNamePrefix}${size}`,
    isToggle && selected && `${classNamePrefix}selected`,
    fullWidth && `${classNamePrefix}full-width`,
    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
    isIconButton && `${classNamePrefix}icon-only`,
    isToggle && `${classNamePrefix}toggle`,
    loading && "ds-loading",
    forcePx && "ds-force-px",
    classNames
  ]);
  let buttonToRender;
  if (isToggle) {
    let onChild, offChild;
    if (isIconButton && iconName && selectedIconName) {
      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
    } else {
      onChild = /* @__PURE__ */ jsx4("span", { children: text });
      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
        /* @__PURE__ */ jsx4("span", { children: selectedText })
      ] });
    }
    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
  } else {
    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
    if (href) {
      const params = { ...buttonParams, loadingHtml: null };
      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
    } else {
      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
    }
  }
  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
};

// ../src/components/button-toggle/button-toggle.tsx
import { jsx as jsx5 } from "preact/jsx-runtime";
var ButtonToggle = ({
  selected = false,
  text,
  selectedText,
  disabled = false,
  variant = "primary",
  size = "md",
  fullWidth = false,
  mobileFullWidth = false,
  isIconButton = false,
  iconName,
  selectedIconName,
  loading = false,
  attributes = {},
  classNames,
  forcePx = false
}) => {
  return /* @__PURE__ */ jsx5(
    ButtonBase,
    {
      ...{
        selected,
        text,
        disabled,
        variant,
        size,
        fullWidth,
        mobileFullWidth,
        isIconButton,
        iconName,
        selectedIconName,
        loading,
        classNames,
        attributes,
        forcePx,
        isToggle: true,
        selectedText,
        type: "button"
      }
    }
  );
};
var button_toggle_default = ButtonToggle;

// ../src/components/byline-list/byline-list.tsx
import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
var BylineList = ({
  bylines,
  attributes,
  showBorderOnLastItem = false,
  forcePx,
  classNames
}) => {
  const componentClassName = "ds-byline-list__item";
  const classes = formatClassString(["ds-byline-list", forcePx && "ds-force-px", classNames]);
  return /* @__PURE__ */ jsx6("ul", { className: classes, ...attributes, children: bylines && bylines.map((byline, index) => {
    const { name, authorId, authorPageUrl, bylineImage, role, followable } = byline;
    const linkAttributes = {
      "data-link-category": "article author",
      "data-index": `${index}`,
      "data-label": name,
      "data-id": authorId
    };
    const shouldShowBorder = showBorderOnLastItem || index !== bylines.length - 1;
    return /* @__PURE__ */ jsxs3(
      BylineListInner,
      {
        ...{ ...byline, forcePx },
        linkAttributes,
        border: shouldShowBorder,
        followable,
        authorPageUrl,
        children: [
          bylineImage && /* @__PURE__ */ jsx6("div", { className: `${componentClassName}__portrait`, children: bylineImage }),
          /* @__PURE__ */ jsx6(
            Title,
            {
              title: name,
              role,
              authorPageUrl: followable ? authorPageUrl : "",
              attributes: followable && authorPageUrl ? linkAttributes : void 0
            }
          )
        ]
      },
      `byline-list-${index}`
    );
  }) });
};
var BylineListInner = ({
  disabled,
  attributes,
  linkAttributes,
  authorPageUrl,
  listItemClassNames,
  buttonAttributes,
  buttonClassNames,
  followable,
  followed,
  border = true,
  forcePx,
  children
}) => {
  const componentClassName = "ds-byline-list__item";
  const classes = formatClassString([componentClassName, listItemClassNames, border && `${componentClassName}--border`]);
  const isLink = authorPageUrl && !followable;
  return /* @__PURE__ */ jsx6("li", { className: classes, ...attributes, children: isLink ? /* @__PURE__ */ jsxs3("a", { href: authorPageUrl, className: `${componentClassName}__content`, ...linkAttributes, children: [
    children,
    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__icon-right`, children: IconUse({ iconName: "arrow_forward" }) })
  ] }) : /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__content`, children: [
    children,
    followable && /* @__PURE__ */ jsx6(
      button_toggle_default,
      {
        ...{
          text: "F\xF6lj",
          selectedText: "F\xF6ljer",
          variant: "secondaryFilled",
          size: "sm",
          selected: followed,
          disabled,
          forcePx,
          attributes: buttonAttributes,
          classNames: buttonClassNames
        }
      }
    )
  ] }) });
};
var Title = ({ title, role, authorPageUrl, attributes }) => {
  const componentClassName = "ds-byline-list__item";
  const titleClasses = formatClassString([`${componentClassName}__title`]);
  return /* @__PURE__ */ jsxs3("div", { className: `${componentClassName}__titles`, children: [
    authorPageUrl ? /* @__PURE__ */ jsx6("a", { href: authorPageUrl, className: titleClasses, ...attributes, children: title }) : /* @__PURE__ */ jsx6("span", { className: titleClasses, ...attributes, children: title }),
    /* @__PURE__ */ jsx6("span", { className: `${componentClassName}__role`, children: role })
  ] });
};

// ../src/components/button/button.tsx
import { jsx as jsx7 } from "preact/jsx-runtime";
var Button = ({
  text,
  disabled = false,
  variant = "primary",
  size = "md",
  fullWidth = false,
  mobileFullWidth = false,
  iconPosition = "none",
  iconName,
  loading = false,
  type = "button",
  href,
  isIconButton = false,
  classNames,
  attributes,
  forcePx = false
}) => {
  return /* @__PURE__ */ jsx7(
    ButtonBase,
    {
      ...{
        text,
        disabled,
        variant,
        size,
        fullWidth,
        mobileFullWidth,
        iconPosition,
        iconName,
        loading,
        type,
        href,
        isIconButton,
        classNames,
        attributes,
        forcePx
      }
    }
  );
};
var button_default = Button;

// ../src/components/modal/modal.tsx
import { jsx as jsx8, jsxs as jsxs4 } from "preact/jsx-runtime";
var Modal = ({
  title,
  modalType = "standard",
  primaryButton,
  secondaryButton,
  classNames,
  attributes,
  forcePx,
  children
}) => {
  const componentClassName = "ds-modal";
  const classes = formatClassString([
    componentClassName,
    modalType === "sheet" && `${componentClassName}--sheet`,
    forcePx && "ds-force-px",
    classNames
  ]);
  const hasButtons = primaryButton || secondaryButton;
  return /* @__PURE__ */ jsx8("div", { className: classes, children: /* @__PURE__ */ jsx8("dialog", { className: `${componentClassName}__inner`, ...attributes, children: /* @__PURE__ */ jsxs4("div", { className: `${componentClassName}__content`, children: [
    modalType === "standard" && /* @__PURE__ */ jsx8(
      button_default,
      {
        ...{
          variant: "transparent",
          size: "sm",
          iconName: "close",
          isIconButton: true,
          attributes: {
            "aria-label": "st\xE4ng"
          },
          classNames: "ds-modal__close ds-modal__close--icon"
        }
      }
    ),
    title && /* @__PURE__ */ jsx8("h2", { children: title }),
    children,
    hasButtons && /* @__PURE__ */ jsxs4("div", { className: "ds-modal__buttons", children: [
      secondaryButton && /* @__PURE__ */ jsx8(
        button_default,
        {
          ...{
            text: secondaryButton.text,
            size: "lg",
            variant: "secondaryOutline",
            href: secondaryButton.href,
            classNames: [
              "ds-modal__secondary-button",
              secondaryButton.isCloseButton && "ds-modal__close",
              secondaryButton.classNames
            ].join(" "),
            attributes: secondaryButton.attributes,
            forcePx,
            mobileFullWidth: true
          }
        }
      ),
      primaryButton && /* @__PURE__ */ jsx8(
        button_default,
        {
          ...{
            text: primaryButton.text,
            size: "lg",
            variant: "primaryBlack",
            href: primaryButton.href,
            classNames: ["ds-modal__primary-button", primaryButton.classNames].join(" "),
            attributes: primaryButton.attributes,
            forcePx,
            mobileFullWidth: true
          }
        }
      )
    ] })
  ] }) }) });
};

// ../src/components/byline/byline.tsx
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "preact/jsx-runtime";
var Byline = ({
  bylines,
  bylineTitle,
  largeByline = false,
  hideBylineImages = false,
  hideBorder = false,
  renderBylineModal = false,
  showNameAsLink = false,
  classNames,
  attributes
}) => {
  const componentClassName = "ds-byline";
  const classes = formatClassString([
    componentClassName,
    largeByline ? `${componentClassName}--large` : "",
    !hideBylineImages ? `${componentClassName}--show-images` : "",
    hideBorder ? `${componentClassName}--no-border` : "",
    classNames
  ]);
  const shouldRenderModal = !!bylines.length && renderBylineModal && !showNameAsLink;
  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
    /* @__PURE__ */ jsx9("div", { className: classes, ...attributes, children: bylines.length === 1 ? /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__inner`, children: [
      !hideBylineImages && /* @__PURE__ */ jsx9(
        "div",
        {
          className: largeByline ? `${componentClassName}__portrait--large` : `${componentClassName}__portrait`,
          children: bylines[0].bylineImage
        }
      ),
      /* @__PURE__ */ jsxs5(
        "div",
        {
          className: `${componentClassName}__info ${!bylineTitle ? `${componentClassName}__info--no-title` : ""}`,
          children: [
            bylineTitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
            /* @__PURE__ */ jsx9(
              "a",
              {
                href: bylines[0].authorPageUrl || "#",
                className: `${componentClassName}__name`,
                "data-link-category": "article author",
                "data-id": bylines[0].authorPageUrl,
                "data-index": "1",
                "data-label": bylines[0].name,
                children: bylines[0].name
              }
            )
          ]
        }
      )
    ] }) : /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__inner ${componentClassName}__inner--multiple`, children: [
      !hideBylineImages && bylines.map((byline, index) => /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__portrait`, children: byline.bylineImage }, `byline-portrait-${index}`)),
      /* @__PURE__ */ jsxs5("div", { className: `${componentClassName}__info`, children: [
        bylineTitle && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__role`, children: bylineTitle }),
        bylines.map((byline, index) => {
          const { authorPageUrl } = byline;
          const isLast = index === bylines.length - 1;
          return /* @__PURE__ */ jsxs5(Fragment2, { children: [
            isLast && /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__and`, children: "och " }),
            /* @__PURE__ */ jsx9(
              AuthorName,
              {
                renderLink: showNameAsLink && !!authorPageUrl,
                byline,
                componentClassName,
                index: index + 1,
                showComma: index < bylines.length - 2
              }
            ),
            " "
          ] }, `byline-name-${index}`);
        })
      ] })
    ] }) }),
    shouldRenderModal && /* @__PURE__ */ jsx9(Modal, { modalType: "sheet", classNames: "ds-modal--byline", children: /* @__PURE__ */ jsx9(BylineList, { bylines }) })
  ] });
};
var AuthorName = ({ renderLink, byline, componentClassName, index, showComma }) => {
  const { authorPageUrl, name } = byline;
  if (renderLink) {
    return /* @__PURE__ */ jsxs5(
      "a",
      {
        href: authorPageUrl,
        className: `${componentClassName}__name`,
        "data-link-category": "article author",
        "data-id": authorPageUrl,
        "data-index": index,
        "data-label": name,
        children: [
          name,
          showComma ? "," : ""
        ]
      }
    );
  } else {
    return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__name`, children: [
      name,
      showComma ? "," : ""
    ] });
  }
};
export {
  Byline
};
//# sourceMappingURL=byline.js.map
