@duetds/components 6.0.2 → 6.0.4

package/lib/dist-custom-elements/p-266411cf.js

@@ -0,0 +1,307 @@
+/*!
+ * Built with Duet Design System
+ */
+const colorWarning = "rgb(247, 178, 40)";
+const colorGrayDarker = "rgb(101, 119, 135)";
+const colorGrayLighter = "rgb(245, 248, 250)";
+const colorCategoryHome = "rgb(211, 36, 131)";
+const colorPrimary = "rgb(0, 119, 179)";
+const colorCategoryVehicle = "rgb(54, 74, 129)";
+const colorSuccess = "rgb(0, 135, 90)";
+const colorCategoryFamily = "rgb(11, 114, 136)";
+const colorPrimaryLightest = "rgb(243, 249, 252)";
+const colorPrimaryLighter = "rgb(230, 242, 248)";
+const colorBrandBlue = "rgb(0, 161, 212)";
+const colorPrimaryDark = "rgb(0, 77, 128)";
+const colorGrayLightest = "rgb(255, 255, 255)";
+const colorCategoryFinance = "rgb(122, 1, 196)";
+const colorGrayDark = "rgb(144, 149, 153)";
+const colorGrayLight = "rgb(225, 227, 230)";
+const colorSecondary = "rgb(0, 41, 77)";
+const colorCategoryPet = "rgb(168, 1, 78)";
+const colorPrimaryLight = "rgb(205, 229, 241)";
+const colorCategoryTravel = "rgb(213, 66, 3)";
+const colorGray = "rgb(207, 210, 212)";
+const colorDanger = "rgb(222, 35, 98)";
+const colorGrayDarkerTurva = "rgb(68, 68, 69)";
+const colorGrayLighterTurva = "rgb(245, 245, 247)";
+const colorCategoryHomeTurva = "rgb(161, 10, 78)";
+const colorPrimaryTurva = "rgb(198, 12, 48)";
+const colorCategoryVehicleTurva = "rgb(23, 28, 58)";
+const colorSuccessTurva = "rgb(8, 135, 78)";
+const colorPrimaryLightestTurva = "rgb(252, 243, 244)";
+const colorCategoryFamilyTurva = "rgb(199, 12, 112)";
+const colorCategoryUnionTurva = "rgb(169, 69, 124)";
+const colorPrimaryLighterTurva = "rgb(249, 230, 234)";
+const colorPrimaryDarkTurva = "rgb(148, 9, 37)";
+const colorGrayLightestTurva = "rgb(255, 255, 255)";
+const colorGrayDarkTurva = "rgb(116, 116, 117)";
+const colorGrayLightTurva = "rgb(228, 228, 230)";
+const colorBrandGrayTurva = "rgb(178, 180, 179)";
+const colorSecondaryTurva = "rgb(23, 28, 58)";
+const colorPrimaryLightTurva = "rgb(244, 207, 214)";
+const colorCategoryTravelTurva = "rgb(9, 129, 148)";
+const colorGrayTurva = "rgb(207, 207, 209)";
+const colorDangerTurva = "rgb(224, 42, 13)";
+const colorWarningTurva = "rgb(250, 164, 15)";
+const colorData07 = "rgb(192, 101, 247)";
+const colorData08 = "rgb(0, 105, 191)";
+const colorData09 = "rgb(19, 120, 53)";
+const colorData10 = "rgb(179, 60, 24)";
+const colorData11 = "rgb(13, 163, 166)";
+const colorData01 = "rgb(122, 1, 196)";
+const colorData12 = "rgb(11, 114, 136)";
+const colorData02 = "rgb(0, 155, 204)";
+const colorData13 = "rgb(179, 137, 24)";
+const colorData03 = "rgb(27, 171, 75)";
+const colorData14 = "rgb(128, 98, 17)";
+const colorData04 = "rgb(255, 86, 34)";
+const colorData15 = "rgb(0, 41, 77)";
+const colorData05 = "rgb(245, 76, 154)";
+const colorData06 = "rgb(194, 21, 101)";
+const fontWeightExtraBold = "800";
+const letterSpacingHeading = "-0.01rem";
+const fontFamilyHeadingTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyTextTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyHeading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyText = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontWeightBold = "700";
+const fontWeightNormal = "400";
+const fontWeightSemiBold = "600";
+const fontSizeXxxxLarge = "4.5rem";
+const fontSizeXxxLarge = "3rem";
+const fontSizeXxLarge = "2.25rem";
+const fontSizeXLarge = "1.5rem";
+const fontSizeLarge = "1.25rem";
+const fontSizeMedium = "1rem";
+const fontSizeSmall = "0.875rem";
+const fontSizeXSmall = "0.75rem";
+const radiusSharp = "0";
+const radiusDefault = "4px";
+const radiusCircle = "50%";
+const radiusPill = "20rem";
+const shadowTooltipTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.13)";
+const shadowDefault = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
+const shadowTooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
+const shadowCardTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowModal = "0 2px 20px 0 rgba(0, 0, 0, 0.2)";
+const shadowCard = "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowHoverTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.15)";
+const shadowHover = "0 2px 10px 0 rgba(0, 41, 77, 0.1)";
+const shadowDefaultTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13)";
+const spaceXxSmall = "4px";
+const spaceLarge = "20px";
+const spaceXSmall = "8px";
+const spaceXxxSmall = "2px";
+const spaceSmall = "12px";
+const spaceMedium = "16px";
+const spaceXxLarge = "36px";
+const spaceXxxxLarge = "72px";
+const spaceXxxxxLarge = "94px";
+const spaceXxxLarge = "48px";
+const spaceXLarge = "28px";
+const sizeIconXxLarge = "48px";
+const sizeFormBorder = "1px";
+const sizeStepMedium = "40px";
+const sizeButtonMinWidth = "8rem";
+const sizeHeader = "4rem";
+const sizeIconXxxLarge = "72px";
+const sizeIconXLarge = "36px";
+const sizeIconXxSmall = "10px";
+const sizeStepSmall = "30px";
+const sizeNavigation = "3rem";
+const sizeIconLarge = "30px";
+const sizeLayoutMaxWidth = "1110px";
+const sizeTappableSquare = "48px";
+const sizeIconXSmall = "16px";
+const sizeIconXxxSmall = "7px";
+const sizeButtonBorder = "2px";
+const sizeButtonTinyBorder = "1px";
+const sizeIconMedium = "24px";
+const sizeIconSmall = "20px";
+const opacity85 = "0.85";
+const opacity75 = "0.75";
+const opacity50 = "0.50";
+const opacity30 = "0.30";
+const zIndexMaskButtons = "250";
+const zIndexDropdown = "600";
+const zIndexSpinner = "800";
+const zIndexDefault = "1";
+const zIndexToast = "500";
+const zIndexPopup = "950";
+const zIndexModal = "900";
+const zIndexSticky = "300";
+const zIndexMasked = "100";
+const zIndexDeep = "-999999";
+const zIndexOverlay = "700";
+const zIndexMask = "200";
+const zIndexHeader = "400";
+const lineHeightMedium = "1.5";
+const lineHeightSmall = "1.25";
+const lineHeightXSmall = "1.1";
+const transitionQuickly = "300ms ease";
+const transitionSlowly = "600ms ease";
+const mediaQueryXxxLarge = "'(min-width: 106.25em)'";
+const mediaQueryXLarge = "'(min-width: 64.0625em)'";
+const mediaQueryMedium = "'(min-width: 48em)'";
+const mediaQueryLarge = "'(min-width: 62em)'";
+const mediaQueryXxLarge = "'(min-width: 76.25em)'";
+const mediaQueryXSmall = "'(max-width: 35.9375em)'";
+const mediaQueryXxxSmall = "'(max-width: 20.5em)'";
+const mediaQuerySmall = "'(min-width: 36em)'";
+const mediaQueryXxSmall = "'(max-width: 22.5em)'";
+
+const tokens = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	colorWarning: colorWarning,
+	colorGrayDarker: colorGrayDarker,
+	colorGrayLighter: colorGrayLighter,
+	colorCategoryHome: colorCategoryHome,
+	colorPrimary: colorPrimary,
+	colorCategoryVehicle: colorCategoryVehicle,
+	colorSuccess: colorSuccess,
+	colorCategoryFamily: colorCategoryFamily,
+	colorPrimaryLightest: colorPrimaryLightest,
+	colorPrimaryLighter: colorPrimaryLighter,
+	colorBrandBlue: colorBrandBlue,
+	colorPrimaryDark: colorPrimaryDark,
+	colorGrayLightest: colorGrayLightest,
+	colorCategoryFinance: colorCategoryFinance,
+	colorGrayDark: colorGrayDark,
+	colorGrayLight: colorGrayLight,
+	colorSecondary: colorSecondary,
+	colorCategoryPet: colorCategoryPet,
+	colorPrimaryLight: colorPrimaryLight,
+	colorCategoryTravel: colorCategoryTravel,
+	colorGray: colorGray,
+	colorDanger: colorDanger,
+	colorGrayDarkerTurva: colorGrayDarkerTurva,
+	colorGrayLighterTurva: colorGrayLighterTurva,
+	colorCategoryHomeTurva: colorCategoryHomeTurva,
+	colorPrimaryTurva: colorPrimaryTurva,
+	colorCategoryVehicleTurva: colorCategoryVehicleTurva,
+	colorSuccessTurva: colorSuccessTurva,
+	colorPrimaryLightestTurva: colorPrimaryLightestTurva,
+	colorCategoryFamilyTurva: colorCategoryFamilyTurva,
+	colorCategoryUnionTurva: colorCategoryUnionTurva,
+	colorPrimaryLighterTurva: colorPrimaryLighterTurva,
+	colorPrimaryDarkTurva: colorPrimaryDarkTurva,
+	colorGrayLightestTurva: colorGrayLightestTurva,
+	colorGrayDarkTurva: colorGrayDarkTurva,
+	colorGrayLightTurva: colorGrayLightTurva,
+	colorBrandGrayTurva: colorBrandGrayTurva,
+	colorSecondaryTurva: colorSecondaryTurva,
+	colorPrimaryLightTurva: colorPrimaryLightTurva,
+	colorCategoryTravelTurva: colorCategoryTravelTurva,
+	colorGrayTurva: colorGrayTurva,
+	colorDangerTurva: colorDangerTurva,
+	colorWarningTurva: colorWarningTurva,
+	colorData07: colorData07,
+	colorData08: colorData08,
+	colorData09: colorData09,
+	colorData10: colorData10,
+	colorData11: colorData11,
+	colorData01: colorData01,
+	colorData12: colorData12,
+	colorData02: colorData02,
+	colorData13: colorData13,
+	colorData03: colorData03,
+	colorData14: colorData14,
+	colorData04: colorData04,
+	colorData15: colorData15,
+	colorData05: colorData05,
+	colorData06: colorData06,
+	fontWeightExtraBold: fontWeightExtraBold,
+	letterSpacingHeading: letterSpacingHeading,
+	fontFamilyHeadingTurva: fontFamilyHeadingTurva,
+	fontFamilyTextTurva: fontFamilyTextTurva,
+	fontFamilyHeading: fontFamilyHeading,
+	fontFamilyText: fontFamilyText,
+	fontWeightBold: fontWeightBold,
+	fontWeightNormal: fontWeightNormal,
+	fontWeightSemiBold: fontWeightSemiBold,
+	fontSizeXxxxLarge: fontSizeXxxxLarge,
+	fontSizeXxxLarge: fontSizeXxxLarge,
+	fontSizeXxLarge: fontSizeXxLarge,
+	fontSizeXLarge: fontSizeXLarge,
+	fontSizeLarge: fontSizeLarge,
+	fontSizeMedium: fontSizeMedium,
+	fontSizeSmall: fontSizeSmall,
+	fontSizeXSmall: fontSizeXSmall,
+	radiusSharp: radiusSharp,
+	radiusDefault: radiusDefault,
+	radiusCircle: radiusCircle,
+	radiusPill: radiusPill,
+	shadowTooltipTurva: shadowTooltipTurva,
+	shadowDefault: shadowDefault,
+	shadowTooltip: shadowTooltip,
+	shadowCardTurva: shadowCardTurva,
+	shadowModal: shadowModal,
+	shadowCard: shadowCard,
+	shadowHoverTurva: shadowHoverTurva,
+	shadowHover: shadowHover,
+	shadowDefaultTurva: shadowDefaultTurva,
+	spaceXxSmall: spaceXxSmall,
+	spaceLarge: spaceLarge,
+	spaceXSmall: spaceXSmall,
+	spaceXxxSmall: spaceXxxSmall,
+	spaceSmall: spaceSmall,
+	spaceMedium: spaceMedium,
+	spaceXxLarge: spaceXxLarge,
+	spaceXxxxLarge: spaceXxxxLarge,
+	spaceXxxxxLarge: spaceXxxxxLarge,
+	spaceXxxLarge: spaceXxxLarge,
+	spaceXLarge: spaceXLarge,
+	sizeIconXxLarge: sizeIconXxLarge,
+	sizeFormBorder: sizeFormBorder,
+	sizeStepMedium: sizeStepMedium,
+	sizeButtonMinWidth: sizeButtonMinWidth,
+	sizeHeader: sizeHeader,
+	sizeIconXxxLarge: sizeIconXxxLarge,
+	sizeIconXLarge: sizeIconXLarge,
+	sizeIconXxSmall: sizeIconXxSmall,
+	sizeStepSmall: sizeStepSmall,
+	sizeNavigation: sizeNavigation,
+	sizeIconLarge: sizeIconLarge,
+	sizeLayoutMaxWidth: sizeLayoutMaxWidth,
+	sizeTappableSquare: sizeTappableSquare,
+	sizeIconXSmall: sizeIconXSmall,
+	sizeIconXxxSmall: sizeIconXxxSmall,
+	sizeButtonBorder: sizeButtonBorder,
+	sizeButtonTinyBorder: sizeButtonTinyBorder,
+	sizeIconMedium: sizeIconMedium,
+	sizeIconSmall: sizeIconSmall,
+	opacity85: opacity85,
+	opacity75: opacity75,
+	opacity50: opacity50,
+	opacity30: opacity30,
+	zIndexMaskButtons: zIndexMaskButtons,
+	zIndexDropdown: zIndexDropdown,
+	zIndexSpinner: zIndexSpinner,
+	zIndexDefault: zIndexDefault,
+	zIndexToast: zIndexToast,
+	zIndexPopup: zIndexPopup,
+	zIndexModal: zIndexModal,
+	zIndexSticky: zIndexSticky,
+	zIndexMasked: zIndexMasked,
+	zIndexDeep: zIndexDeep,
+	zIndexOverlay: zIndexOverlay,
+	zIndexMask: zIndexMask,
+	zIndexHeader: zIndexHeader,
+	lineHeightMedium: lineHeightMedium,
+	lineHeightSmall: lineHeightSmall,
+	lineHeightXSmall: lineHeightXSmall,
+	transitionQuickly: transitionQuickly,
+	transitionSlowly: transitionSlowly,
+	mediaQueryXxxLarge: mediaQueryXxxLarge,
+	mediaQueryXLarge: mediaQueryXLarge,
+	mediaQueryMedium: mediaQueryMedium,
+	mediaQueryLarge: mediaQueryLarge,
+	mediaQueryXxLarge: mediaQueryXxLarge,
+	mediaQueryXSmall: mediaQueryXSmall,
+	mediaQueryXxxSmall: mediaQueryXxxSmall,
+	mediaQuerySmall: mediaQuerySmall,
+	mediaQueryXxSmall: mediaQueryXxSmall
+});
+
+export { mediaQueryLarge as a, mediaQueryXLarge as b, mediaQueryXxLarge as c, mediaQueryXxxLarge as d, mediaQuerySmall as e, sizeHeader as f, colorGrayLightest as g, colorBrandGrayTurva as h, colorPrimaryTurva as i, colorBrandBlue as j, colorGrayTurva as k, colorPrimary as l, mediaQueryMedium as m, colorGray as n, sizeNavigation as s, tokens as t };

package/lib/dist-custom-elements/p-3d987b87.js

@@ -0,0 +1,75 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { g as getColorByName } from './p-86faf728.js';
+
+const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;top:50%;left:50%;z-index:800;max-width:100%}:host(.duet-theme-default) .duet-spinner{color:#0077b3 !important}:host(.duet-theme-turva) .duet-spinner{color:#c60c30 !important}:host(.duet-custom-color){color:inherit}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-spinner{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:800;width:24px;height:24px;color:#0077b3;border:2px solid transparent;border-left:2px solid currentColor;border-radius:50%;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%;animation:duetRotate 0.6s linear infinite}.duet-spinner::after{position:absolute;top:50%;left:50%;z-index:200;box-sizing:content-box;width:100%;height:100%;overflow:hidden;content:\"\";border:2px solid currentColor;border-radius:50%;opacity:0.3;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium::after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large::after{border-width:8px}@keyframes duetRotate{0%{transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}";
+
+const DuetSpinner = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Color of the spinner, as a design token entered in camelCase or kebab-case.
+     * Example: "color-primary". This property can also be set to "currentColor"
+     * which forces the icon to use the CSS text color of parent element instead.
+     * Useful when you want to control the color in stylesheet instead.
+     */
+    this.color = "gray-lightest";
+    /**
+     * Size variation of the spinner.
+     */
+    this.size = "small";
+    /**
+     * Theme of the spinner. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
+    return (h(Host, { class: {
+        "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
+        "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
+        "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
+      } }, h("div", { class: {
+        "duet-spinner": true,
+        [this.size]: true,
+      }, style: { color }, "aria-label": this.accessibleLabel })));
+  }
+  static get style() { return duetSpinnerCss; }
+}, [1, "duet-spinner", {
+    "accessibleLabel": [1, "accessible-label"],
+    "color": [1],
+    "size": [1],
+    "theme": [1025]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "duet-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DuetSpinner);
+      }
+      break;
+  } });
+}
+
+export { DuetSpinner as D, defineCustomElement as d };