@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.10

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/SKF-Internal/ui-components/issues"
   },
   "engines": {
-    "node": ">=20",
+    "node": ">=22",
     "pnpm": ">=10"
   },
   "engineStrict": true,
@@ -17,8 +17,9 @@
       "import": "./dist/index.js"
     },
     "./components/*": "./dist/components/*",
-    "./react/*": "./dist/react/*",
-    "./styles/*.css": "./dist/styles/*.css"
+    "./styles/*.css": "./dist/styles/*.css",
+    "./translations/*": "./dist/translations/*",
+    "./utilities/*": "./dist/utilities/*"
   },
   "homepage": "https://github.com/SKF-Internal/ui-components",
   "license": "UNLICENSED",
@@ -34,66 +35,54 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.0",
+  "version": "1.0.2-beta.10",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "@js-temporal/polyfill": "^0.4.4"
+    "@floating-ui/dom": "^1.7.1",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@shoelace-style/localize": "^3.2.1",
+    "@skf-design-system/ui-assets": "0.1.3-beta.16",
+    "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/js": "^9.22.0",
-    "@playwright/test": "^1.51.1",
-    "@skf-design-system/ui-assets": "0.1.3-beta.4",
-    "@storybook/addon-a11y": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/manager-api": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.7",
-    "@storybook/web-components": "^8.6.7",
-    "@storybook/web-components-vite": "^8.6.7",
-    "@types/node": "^22.13.10",
+    "@eslint/js": "^9.29.0",
+    "@storybook/addon-a11y": "^9.0.13",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/web-components-vite": "^9.0.13",
+    "@types/node": "^24.0.4",
+    "@wc-toolkit/jsx-types": "^1.2.2",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/storybook-helpers": "^1.0.4",
+    "@wc-toolkit/storybook-helpers": "^9.0.1",
     "@wc-toolkit/type-parser": "^1.0.3",
-    "concurrently": "^9.1.2",
+    "concurrently": "^9.2.0",
     "custom-element-jet-brains-integration": "^1.7.0",
-    "custom-element-jsx-integration": "^1.6.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-wc": "^2.2.0",
-    "express": "^4.21.2",
+    "eslint": "^9.29.0",
+    "eslint-plugin-lit": "^2.1.1",
+    "eslint-plugin-lit-a11y": "^5.0.1",
+    "eslint-plugin-storybook": "9.0.13",
+    "eslint-plugin-wc": "^3.0.1",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0",
-    "lit": "^3.2.1",
+    "lint-staged": "^16.1.2",
     "postcss-styled-syntax": "^0.7.1",
-    "prettier": "3.5.3",
-    "storybook": "^8.6.7",
-    "stylelint": "^16.16.0",
-    "stylelint-config-standard": "^37.0.0",
+    "prettier": "3.6.1",
+    "storybook": "^9.0.13",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard": "^38.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
-    "stylelint-order": "^6.0.4",
+    "stylelint-order": "^7.0.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tsc-alias": "^1.8.11",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.35.0",
+    "vite": "^7.0.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "peerDependencies": {
-    "@skf-design-system/ui-assets": "0.1.3-beta.1",
-    "lit": "^3.1.3"
-  },
   "scripts": {
     "analyze": "cem analyze",
     "dev": "vite",
@@ -108,9 +97,6 @@
     "lint:eslint": "eslint \"**/*.{js,ts}\" --ignore-pattern .gitignore",
     "lint:prettier": "prettier \"**/*.{js,ts}\" --check --ignore-path .gitignore --log-level warn",
     "lint:stylelint": "stylelint \"**/*.{css,ts}\" --quiet --ignore-path .gitignore",
-    "serve:storybook-static": "pnpm build && pnpm storybook build && node ./build/serve.js",
-    "storybook": "concurrently \"storybook dev -p 9009\" \"pnpm analyze --watch\"",
-    "test": "npx playwright test",
-    "test:ui": " npx playwright test --ui"
+    "storybook": "concurrently \"storybook dev -p 6006\" \"pnpm analyze --watch\""
   }
 }

package/dist/components/accordion/accordion.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/checkbox/checkbox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/collapse/collapse.component.d.ts

@@ -1,40 +0,0 @@
-import '../icon/icon.js';
-import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
-import type { CSSResultGroup } from 'lit';
-/**
- * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
- *
- * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
- *
- * @event {CustomEvent} skf-collapse-toggle - Event emitted when toggled
- *
- * @slot - Main content
- *
- * @tagname skf-collapse
- */
-export declare class SkfCollapse extends SkfElement {
-    static styles: CSSResultGroup;
-    /** If true, will animate the expand/collapse state */
-    animated: boolean;
-    /** If true, will set the collapse to be expanded by default */
-    expanded: boolean;
-    /** Heading for the collapse */
-    heading?: string;
-    /**
-     * Defines which heading element will be rendered
-     * @type { "h2" | "h3" | "h4" }
-     */
-    headingAs: Exclude<HeadingType, 'h1'>;
-    /** If true, renders the small version */
-    small: boolean;
-    /** If true, will truncate the heading in collapsed state */
-    truncate: boolean;
-    /** Class method as alternative to manipulate attribute */
-    setClose(): void;
-    /** Class method as alternative to manipulate attribute */
-    setOpen(): void;
-    /** @internal */
-    private _toggle;
-    render(): import("lit").TemplateResult;
-}

package/dist/components/collapse/collapse.component.js

@@ -1,86 +0,0 @@
-import "../icon/icon.js";
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import h from "../../styles/component.styles.js";
-import { property as s } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { unsafeStatic as d, html as u } from "lit/static-html.js";
-import _ from "./collapse.styles.js";
-var y = Object.defineProperty, a = (i, n, r, g) => {
-  for (var t = void 0, l = i.length - 1, p; l >= 0; l--)
-    (p = i[l]) && (t = p(n, r, t) || t);
-  return t && y(n, r, t), t;
-};
-const o = class o extends c {
-  constructor() {
-    super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
-      this.dispatchEvent(
-        new CustomEvent("skf-collapse-toggle", {
-          bubbles: !0,
-          composed: !0,
-          cancelable: !0
-        })
-      ), this.expanded = !this.expanded;
-    };
-  }
-  /** Class method as alternative to manipulate attribute */
-  setClose() {
-    this.expanded = !1;
-  }
-  /** Class method as alternative to manipulate attribute */
-  setOpen() {
-    this.expanded = !0;
-  }
-  render() {
-    return u`
-			<div class=${m({
-      collapse: !0,
-      "collapse--animated": this.animated,
-      "collapse--expanded": this.expanded,
-      "collapse--small": this.small,
-      "collapse--truncate": this.truncate
-    })}>
-				<${d(this.headingAs)} class="collapse__heading">
-					<button
-						@click=${this._toggle}
-						aria-controls="main"
-						aria-expanded=${f(this.expanded ? "true" : "false")}
-						class="collapse__btn"
-						type="button"
-					>
-						<span class="collapse__label">${this.heading}</span>
-						<skf-icon class="collapse__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
-					</button>
-				</${d(this.headingAs)}>
-				<div class="collapse__body">
-					<div class="collapse__main" data-testid="main" id="main">
-						<slot></slot>
-					</div>
-				</div>
-			</div>
-		`;
-  }
-};
-o.styles = [h, _];
-let e = o;
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "animated");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "expanded");
-a([
-  s()
-], e.prototype, "heading");
-a([
-  s({ attribute: "heading-as" })
-], e.prototype, "headingAs");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "small");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "truncate");
-export {
-  e as SkfCollapse
-};

package/dist/components/collapse/collapse.d.ts

@@ -1,8 +0,0 @@
-import { SkfCollapse } from './collapse.component.js';
-export * from './collapse.component.js';
-export default SkfCollapse;
-declare global {
-    interface HTMLElementTagNameMap {
-        'skf-collapse': SkfCollapse;
-    }
-}

package/dist/components/collapse/collapse.js

@@ -1,6 +0,0 @@
-import { SkfCollapse as e } from "./collapse.component.js";
-e.define("skf-collapse");
-export {
-  e as SkfCollapse,
-  e as default
-};

package/dist/components/collapse/collapse.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/components/collapse/collapse.styles.js

@@ -1,77 +0,0 @@
-import { css as a } from "lit";
-const s = a`
-	/* stylelint-disable selector-class-pattern */
-	@layer components {
-		.collapse {
-			background: var(--skf-bg-color-neutral-1);
-			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
-		}
-
-		.collapse__heading {
-			font-size: var(--_skf-collapse-heading-size, var(--skf-font-size-100));
-			font-weight: var(--_skf-collapse-heading-weight, normal);
-
-			.collapse--small & {
-				--_skf-collapse-heading-size: var(--skf-font-size-75);
-				--_skf-collapse-heading-weight: var(--skf-font-weight-medium);
-			}
-		}
-
-		.collapse__btn {
-			align-items: center;
-			display: flex;
-			padding-block: var(--_skf-collapse-button-padding-block, var(--skf-spacing-50));
-			padding-inline: var(--skf-spacing-75);
-			width: 100%;
-
-			&:focus-visible {
-				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
-				outline-offset: -2px;
-			}
-
-			.collapse--small & {
-				--_skf-collapse-button-padding-block: var(--skf-spacing-25);
-			}
-		}
-
-		.collapse__label {
-			.collapse--truncate:not(.collapse--expanded) & {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
-
-		.collapse__icon {
-			margin-inline-start: auto;
-		}
-
-		.collapse__body {
-			display: grid;
-			grid-template-rows: var(--_skf-collapse-body-height, 0fr);
-			padding-inline: var(--skf-spacing-75);
-
-			.collapse--animated & {
-				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
-					var(--skf-motion-easing-ease-in);
-			}
-
-			.collapse--expanded & {
-				--_skf-collapse-body-height: 1fr;
-			}
-		}
-
-		.collapse__main {
-			overflow: hidden;
-
-			&::after {
-				content: '';
-				display: block;
-				padding-block-end: var(--skf-spacing-100);
-			}
-		}
-	}
-`;
-export {
-  s as default
-};

package/dist/components/collapse/collapse.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/date-picker/datepicker.component.js

@@ -1,261 +0,0 @@
-import "../button/button.js";
-import { dateFormatter as l, is as v } from "../date-picker-input/datepicker-input.helpers.js";
-import { SkfElement as R } from "../../internal/components/skf-element.js";
-import { watch as p } from "../../internal/helpers/watch.js";
-import S from "../../styles/component.styles.js";
-import { html as D } from "lit";
-import { property as o, state as m } from "lit/decorators.js";
-import "./datepicker.js";
-import { getDateParts as g, assertISODate as $, earliestDate as T, latestDate as C, compareDates as c, doAnimate as b } from "./datepicker.helpers.js";
-import { styles as k } from "./datepicker.styles.js";
-var F = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (w, e, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? E(e, t) : e, r = w.length - 1, d; r >= 0; r--)
-    (d = w[r]) && (s = (a ? d(e, t, s) : d(s)) || s);
-  return a && s && F(e, t, s), s;
-};
-const y = class y extends R {
-  constructor() {
-    super(...arguments), this.locale = "en-CA", this.date = (/* @__PURE__ */ new Date()).toLocaleDateString(this.locale), this.id = "", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
-      start: null,
-      end: null
-    }, this._datePlusOneMonth = new Date(
-      new Date(this.date).getFullYear(),
-      new Date(this.date).getMonth() + 1,
-      1
-    ), this._handleCalendarView = (e) => {
-      this._handleChangeCalendarView(e.detail);
-    }, this._handleSelectedDate = (e) => {
-      var t;
-      if (this.selectedDate = e.detail.date, console.log("selectedDate", this.selectedDate), this.range) {
-        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("skf-datepicker-calendar"), s = this.selectedDateRange, r = s.start && this.selectedDate < s.start;
-        if (!!(s.start && s.end) || r)
-          this.selectedDateRange = {
-            start: this.selectedDate,
-            end: null
-          };
-        else {
-          const f = !!s.start ? { end: e.detail.date } : { start: e.detail.date };
-          this.selectedDateRange = {
-            ...s,
-            ...f
-          };
-        }
-        this._onRangeCompleteEmitEvent(), a != null && a.length && [...a].forEach((h) => {
-          h.selectedDateRange = this.selectedDateRange;
-        });
-      }
-      this.emit("skf-datepicker-selected", {
-        detail: { date: this.range ? this.selectedDateRange : this.selectedDate }
-      }), this.requestUpdate();
-    }, this._handleTodayClick = () => {
-      const { month: e, year: t } = g(), { month: a, year: s } = g(this.date);
-      if (a === e && s === t && (this.selectedDateRange.start || this.selectedDate)) {
-        this.date = l(this.selectedDateRange.start ?? this.selectedDate), this.emit("update-calendar-view", {
-          detail: this.date
-        });
-        return;
-      }
-      if (this.range) {
-        this.emit("update-calendar-view", {
-          detail: l(/* @__PURE__ */ new Date())
-        });
-        return;
-      }
-      this.date = l(/* @__PURE__ */ new Date());
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("update-calendar-view", this._handleCalendarView), this.addEventListener("selected-date-changed", this._handleSelectedDate);
-  }
-  firstUpdated() {
-    (this.selectedDateRange.start ?? this.selectedDate) && this._onRangeCompleteEmitEvent();
-    const t = this.selectedDate ?? this.selectedDateRange.start;
-    t instanceof Date && this.gotoDate(t);
-  }
-  clearSelection() {
-    this.selectedDateRange = {
-      start: null,
-      end: null
-    }, this.selectedDate = void 0;
-  }
-  /** @internal */
-  _onRangeCompleteEmitEvent() {
-    if (!this.selectedDateRange.start || !this.selectedDateRange.end) return;
-    const e = Math.abs(
-      this.selectedDateRange.end.getTime() - this.selectedDateRange.start.getTime()
-    ), t = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
-    this.emit("selected-date-range-changed", {
-      detail: {
-        ...this.selectedDateRange,
-        days: t,
-        id: this.id
-      }
-    });
-  }
-  _handleRangeChange() {
-    this.style.setProperty("--max-width", this.range ? "43em" : "21em");
-  }
-  _handleDateChange() {
-    console.log("%cdate changed", "color:red", this.date), this.date = this.date && $(this.date) ? this.date : l(/* @__PURE__ */ new Date()), this.date = T(
-      C(this.date, this.selectableFrom ?? this.date),
-      this.selectableTo ?? this.date
-    ), this._date = new Date(this.date), this._datePlusOneMonth = new Date(this._date.getFullYear(), this._date.getMonth() + 1, 1);
-  }
-  _handleSelectedDateRangeChange() {
-  }
-  _handleSelectedDateChange() {
-    console.log("selected date changed", this.selectedDate);
-  }
-  /**
-   * Navigates to the given date.
-   * @param date - The date to navigate to, either a Date object or a string in the format 'yyyy-mm-dd'
-   */
-  gotoDate(e) {
-    if (e instanceof Date)
-      this.date = l(e);
-    else if (v(e).dateISO())
-      this.date = e;
-    else
-      throw new Error("Invalid date format");
-    this.emit("update-calendar-view", {
-      detail: e
-    });
-  }
-  render() {
-    return D`
-			<div class="calendar-container">
-				<skf-datepicker-calendar
-					.date=${this._date ?? /* @__PURE__ */ new Date()}
-					.eventid="${this.id}"
-					.range=${this.range}
-					.selectedDate=${this.selectedDate}
-					.selectedDateRange=${this.selectedDateRange}
-					.selectableFrom=${this.selectableFrom}
-					.selectableTo=${this.selectableTo}
-					.invalidDates=${this.invalidDates}
-					class="start"
-					id=${this.id}
-					locale="${this.locale}"
-				></skf-datepicker-calendar>
-				<skf-datepicker-calendar
-					?hidden=${!this.range}
-					.date=${this._datePlusOneMonth}
-					.eventid="${this.id}"
-					.range=${!0}
-					.selectedDate="${this.selectedDate}"
-					.selectedDateRange=${this.selectedDateRange}
-					.selectableFrom=${this.selectableFrom}
-					.selectableTo=${this.selectableTo}
-					.invalidDates=${this.invalidDates}
-					class="end"
-					id=${`${this.id}-range-end`}
-					locale="${this.locale}"
-				></skf-datepicker-calendar>
-			</div>
-			${this._renderTodayBtn()}
-			<slot></slot>
-			<div class="triangle"></div>
-		`;
-  }
-  /** @internal */
-  _renderTodayBtn() {
-    let e = !1;
-    if (this.selectableTo && c(this.selectableTo, l(/* @__PURE__ */ new Date())) === -1)
-      return D``;
-    if (this.selectableFrom && c(this.selectableFrom, l(/* @__PURE__ */ new Date())) === 1)
-      return D``;
-    const { month: t, year: a } = g(), { month: s, year: r } = g(this.date), d = this.selectedDate ?? this.selectedDateRange.start, h = t === s && a === r, f = d && c(l(/* @__PURE__ */ new Date()), l(d), "months") === 0;
-    return (h && !d || f && h) && (e = !0), D`
-			<div class="today">
-				<skf-button
-					@click=${this._handleTodayClick}
-					?disabled=${e}
-					variant="tertiary"
-					size="sm"
-				>
-					${_(this.date) && (this.selectedDate || this.selectedDateRange.start) && !e ? "Selected date" : "Today"}
-				</skf-button>
-			</div>
-		`;
-    function _(u) {
-      return c(u, l(/* @__PURE__ */ new Date()), "months") === 0;
-    }
-  }
-  /** @internal */
-  _handleChangeCalendarView(e) {
-    const t = c(this.date, e);
-    this._animateView(t, () => {
-      this.date = e;
-    }).then(() => {
-    }).catch((a) => {
-      console.error(a);
-    });
-  }
-  /** @internal */
-  async _animateView(e, t) {
-    if (!this.shadowRoot) return;
-    const a = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
-    return a.length ? (await b(
-      a,
-      [{ opacity: 0, transform: `translateX(calc(16px * ${e.toString()}))` }],
-      { duration: 100, easing: "ease-in", fill: "backwards" }
-    ), t(), await b(
-      a,
-      [
-        { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
-        { opacity: 1, transform: "translateX(0)" }
-      ],
-      { duration: 100, easing: "ease-out", fill: "backwards" }
-    )) : Promise.resolve();
-  }
-};
-y.styles = [S, k];
-let i = y;
-n([
-  o({ reflect: !0 })
-], i.prototype, "locale", 2);
-n([
-  o({ type: String, reflect: !0 })
-], i.prototype, "date", 2);
-n([
-  o({ type: String })
-], i.prototype, "id", 2);
-n([
-  o({ attribute: "invalid-dates" })
-], i.prototype, "invalidDates", 2);
-n([
-  o({ type: Boolean })
-], i.prototype, "range", 2);
-n([
-  m()
-], i.prototype, "selectedDate", 2);
-n([
-  o({ attribute: "selectable-from" })
-], i.prototype, "selectableFrom", 2);
-n([
-  o({ attribute: "selectable-to" })
-], i.prototype, "selectableTo", 2);
-n([
-  m()
-], i.prototype, "selectedDateRange", 2);
-n([
-  m()
-], i.prototype, "_date", 2);
-n([
-  m()
-], i.prototype, "_datePlusOneMonth", 2);
-n([
-  p("range")
-], i.prototype, "_handleRangeChange", 1);
-n([
-  p("date")
-], i.prototype, "_handleDateChange", 1);
-n([
-  p("selectedDateRange")
-], i.prototype, "_handleSelectedDateRangeChange", 1);
-n([
-  p("selectedDate")
-], i.prototype, "_handleSelectedDateChange", 1);
-export {
-  i as SkfDatePicker
-};

package/dist/components/date-picker/datepicker.d.ts

@@ -1,10 +0,0 @@
-import { SkfDatePickerCalendar } from './datepicker.calendar.component.js';
-import { SkfDatePicker } from './datepicker.component.js';
-export * from './datepicker.component.js';
-export default SkfDatePicker;
-declare global {
-    interface HTMLElementTagNameMap {
-        'skf-datepicker': SkfDatePicker;
-        'skf-datepicker-calendar': SkfDatePickerCalendar;
-    }
-}