@gyldendal/kobber-components - npm Package Compare versions

Comparing version 0.3.10 to 0.3.11

package.json

 {
   "name": "@gyldendal/kobber-components",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

react/index.d.ts

 import * as _lit_react from '@lit/react';
-import { G as Grid, a as GridColumn, C as Checkbox, P as ProgressBar, b as ProgressBarItem } from '../ProgressBarItem-93419e6d.js';
-export { E as Example, c as ExampleProps } from '../ProgressBarItem-93419e6d.js';
+import { G as Grid, a as GridColumn, b as GridColumnAspectRatio, C as Checkbox, P as ProgressBar, c as ProgressBarItem } from '../ProgressBarItem-323cef04.js';
+export { E as Example, d as ExampleProps } from '../ProgressBarItem-323cef04.js';
 import 'react';
 import 'lit-html';
 import 'lit';
+import '@lit/context';
 
 declare const KobberGrid: _lit_react.ReactWebComponent<Grid, {}>;
 declare const KobberGridColumn: _lit_react.ReactWebComponent<GridColumn, {}>;
+declare const KobberGridColumnAspectRatio: _lit_react.ReactWebComponent<GridColumnAspectRatio, {}>;
 declare const KobberCheckbox: _lit_react.ReactWebComponent<Checkbox, {}>;
@@ -14,2 +16,2 @@ declare const KobberProgressBar: _lit_react.ReactWebComponent<ProgressBar, {}>;
 
-export { KobberCheckbox, KobberGrid, KobberGridColumn, KobberProgressBar, KobberProgressBarItem };
+export { KobberCheckbox, KobberGrid, KobberGridColumn, KobberGridColumnAspectRatio, KobberProgressBar, KobberProgressBarItem };

react/index.js

@@ -7,4 +7,9 @@ import {
   ProgressBar,
-  ProgressBarItem
-} from "../chunks/chunk-BBQXWCF6.js";
+  ProgressBarItem,
+  StyledLitElement,
+  __decorateClass,
+  mapResponsiveCssValue,
+  responsiveValueConverter,
+  stringifyStyleObject
+} from "../chunks/chunk-WUEVKSGH.js";
 
@@ -14,2 +19,141 @@ // src/index.react.tsx
 import * as React from "react";
+
+// src/grid/GridColumnAspectRatio.ts
+import { css as css2, html as html2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+
+// src/aspect-ratio/AspectRatio.ts
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var defaultAspectRatio = "16/9";
+var AspectRatio = class extends StyledLitElement {
+  constructor() {
+    super(...arguments);
+    this.aspectRatio = defaultAspectRatio;
+  }
+  cssAspectRatioToPadding(ratioValue) {
+    const [width, height] = ratioValue.split("/").map((string) => string.trim());
+    if (import.meta.env.DEV) {
+      if (width === "" || height === "") {
+        console.error(
+          "Ratio must be in the format of x/y where x and y are valid css values.",
+          ratioValue,
+          "is not valid."
+        );
+        return `calc(${defaultAspectRatio} * 100%)`;
+      }
+    }
+    return `calc((${height} / ${width}) * 100%)`;
+  }
+  render() {
+    const paddingValues = mapResponsiveCssValue(
+      this.aspectRatio,
+      (ratioValue) => this.cssAspectRatioToPadding(ratioValue)
+    );
+    const { aspectRatio, ...styles } = this.getStyles({
+      paddingTop: paddingValues
+    });
+    const hostStyles = stringifyStyleObject(":host", styles);
+    return html`
+      <style>
+        ${hostStyles}
+      </style>
+      <div class="absolute">
+        <slot />
+      </div>
+    `;
+  }
+};
+AspectRatio.styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    .absolute {
+      display: grid;
+      position: absolute;
+      inset: 0;
+    }
+  `;
+__decorateClass([
+  property({ converter: responsiveValueConverter, attribute: "aspect-ratio" })
+], AspectRatio.prototype, "aspectRatio", 2);
+AspectRatio = __decorateClass([
+  customElement("kobber-aspect-ratio")
+], AspectRatio);
+
+// src/grid/GridColumnAspectRatio.ts
+var GridColumnAspectRatio = class extends GridColumn {
+  constructor() {
+    super(...arguments);
+    this.getSpanCssVariable = () => stringifyStyleObject(":host", {
+      ["--span"]: this.span ? this.span.toString() : "1"
+    });
+  }
+  render() {
+    const {
+      padding,
+      paddingBlock,
+      paddingBlockEnd,
+      paddingBlockStart,
+      paddingInline,
+      paddingInlineEnd,
+      paddingInlineStart,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      aspectRatio,
+      ...rest
+    } = this.getStyles(this.context.config?.gridColumnAspectRatioProperties);
+    const paddingStyles = stringifyStyleObject(".padding", {
+      padding,
+      paddingBlock,
+      paddingBlockEnd,
+      paddingBlockStart,
+      paddingInline,
+      paddingInlineEnd,
+      paddingInlineStart,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft
+    });
+    const hostStyles = stringifyStyleObject(":host", rest);
+    return html2`
+      <style>
+        ${this.getGridColumnStyles()}
+        ${hostStyles}
+        ${paddingStyles}
+        ${this.getSpanCssVariable()}
+      </style>
+      <div class="padding">
+        <kobber-aspect-ratio aspect-ratio=${JSON.stringify(aspectRatio)}>
+          <slot />
+        </kobber-aspect-ratio>
+      </div>
+    `;
+  }
+};
+GridColumnAspectRatio.styles = css2`
+    :host {
+      display: grid;
+    }
+
+    .padding {
+      display: grid;
+    }
+  `;
+__decorateClass([
+  property2()
+], GridColumnAspectRatio.prototype, "--span", 2);
+__decorateClass([
+  property2({ converter: responsiveValueConverter, attribute: "aspect-ratio" })
+], GridColumnAspectRatio.prototype, "aspectRatio", 2);
+GridColumnAspectRatio = __decorateClass([
+  customElement2("kobber-grid-column-aspect-ratio")
+], GridColumnAspectRatio);
+
+// src/index.react.tsx
 var KobberGrid = createComponent({
@@ -25,2 +169,7 @@ tagName: "kobber-grid",
 });
+var KobberGridColumnAspectRatio = createComponent({
+  tagName: "kobber-grid-column-aspect-ratio",
+  elementClass: GridColumnAspectRatio,
+  react: React
+});
 var KobberCheckbox = createComponent({
@@ -46,4 +195,5 @@ tagName: "kobber-checkbox",
   KobberGridColumn,
+  KobberGridColumnAspectRatio,
   KobberProgressBar,
   KobberProgressBarItem
 };

web-components/index.d.ts

@@ -1,3 +0,3 @@
-import { c as ExampleProps } from '../ProgressBarItem-93419e6d.js';
-export { C as Checkbox, G as Grid, a as GridColumn, P as ProgressBar, b as ProgressBarItem } from '../ProgressBarItem-93419e6d.js';
+import { d as ExampleProps } from '../ProgressBarItem-323cef04.js';
+export { C as Checkbox, G as Grid, a as GridColumn, P as ProgressBar, c as ProgressBarItem } from '../ProgressBarItem-323cef04.js';
 import * as lit from 'lit';
@@ -9,2 +9,3 @@ import { LitElement } from 'lit';
 import 'react';
+import '@lit/context';
 
@@ -11,0 +12,0 @@ declare const Example: new (...params: any[]) => HTMLElement & ExampleProps;

web-components/index.js

@@ -9,4 +9,7 @@ import {
   __decorateClass,
+  c,
+  e,
+  n,
   propNames
-} from "../chunks/chunk-BBQXWCF6.js";
+} from "../chunks/chunk-WUEVKSGH.js";
 
@@ -23,153 +26,2 @@ // src/example/web-component.ts
 import { LitElement as LitElement2, css, html as html2, unsafeCSS } from "lit";
-
-// ../../node_modules/@lit/context/lib/context-request-event.js
-var s = class extends Event {
-  constructor(s4, t2, e3) {
-    super("context-request", { bubbles: true, composed: true }), this.context = s4, this.callback = t2, this.subscribe = e3 ?? false;
-  }
-};
-
-// ../../node_modules/@lit/context/lib/create-context.js
-function n(n2) {
-  return n2;
-}
-
-// ../../node_modules/@lit/context/lib/controllers/context-consumer.js
-var s2 = class {
-  constructor(t2, s4, i2, h) {
-    if (this.subscribe = false, this.provided = false, this.value = void 0, this.t = (t3, s5) => {
-      this.unsubscribe && (this.unsubscribe !== s5 && (this.provided = false, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = t3, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = true, this.callback && this.callback(t3, s5)), this.unsubscribe = s5;
-    }, this.host = t2, void 0 !== s4.context) {
-      const t3 = s4;
-      this.context = t3.context, this.callback = t3.callback, this.subscribe = t3.subscribe ?? false;
-    } else
-      this.context = s4, this.callback = i2, this.subscribe = h ?? false;
-    this.host.addController(this);
-  }
-  hostConnected() {
-    this.dispatchRequest();
-  }
-  hostDisconnected() {
-    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
-  }
-  dispatchRequest() {
-    this.host.dispatchEvent(new s(this.context, this.t, this.subscribe));
-  }
-};
-
-// ../../node_modules/@lit/context/lib/value-notifier.js
-var s3 = class {
-  get value() {
-    return this.o;
-  }
-  set value(s4) {
-    this.setValue(s4);
-  }
-  setValue(s4, t2 = false) {
-    const i2 = t2 || !Object.is(s4, this.o);
-    this.o = s4, i2 && this.updateObservers();
-  }
-  constructor(s4) {
-    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
-      for (const [s5, { disposer: t2 }] of this.subscriptions)
-        s5(this.o, t2);
-    }, void 0 !== s4 && (this.value = s4);
-  }
-  addCallback(s4, t2, i2) {
-    if (!i2)
-      return void s4(this.value);
-    this.subscriptions.has(s4) || this.subscriptions.set(s4, { disposer: () => {
-      this.subscriptions.delete(s4);
-    }, consumerHost: t2 });
-    const { disposer: h } = this.subscriptions.get(s4);
-    s4(this.value, h);
-  }
-  clearCallbacks() {
-    this.subscriptions.clear();
-  }
-};
-
-// ../../node_modules/@lit/context/lib/controllers/context-provider.js
-var e = class extends Event {
-  constructor(t2) {
-    super("context-provider", { bubbles: true, composed: true }), this.context = t2;
-  }
-};
-var i = class extends s3 {
-  constructor(s4, e3, i2) {
-    super(void 0 !== e3.context ? e3.initialValue : i2), this.onContextRequest = (t2) => {
-      const s5 = t2.composedPath()[0];
-      t2.context === this.context && s5 !== this.host && (t2.stopPropagation(), this.addCallback(t2.callback, s5, t2.subscribe));
-    }, this.onProviderRequest = (s5) => {
-      const e4 = s5.composedPath()[0];
-      if (s5.context !== this.context || e4 === this.host)
-        return;
-      const i3 = /* @__PURE__ */ new Set();
-      for (const [s6, { consumerHost: e5 }] of this.subscriptions)
-        i3.has(s6) || (i3.add(s6), e5.dispatchEvent(new s(this.context, s6, true)));
-      s5.stopPropagation();
-    }, this.host = s4, void 0 !== e3.context ? this.context = e3.context : this.context = e3, this.attachListeners(), this.host.addController?.(this);
-  }
-  attachListeners() {
-    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
-  }
-  hostConnected() {
-    this.host.dispatchEvent(new e(this.context));
-  }
-};
-
-// ../../node_modules/@lit/context/lib/decorators/provide.js
-function e2({ context: e3 }) {
-  return (n2, i2) => {
-    const o = /* @__PURE__ */ new WeakMap();
-    if ("object" == typeof i2)
-      return i2.addInitializer(function() {
-        o.set(this, new i(this, { context: e3 }));
-      }), { get() {
-        return n2.get.call(this);
-      }, set(t2) {
-        return o.get(this)?.setValue(t2), n2.set.call(this, t2);
-      }, init(t2) {
-        return o.get(this)?.setValue(t2), t2;
-      } };
-    {
-      n2.constructor.addInitializer((n3) => {
-        o.set(n3, new i(n3, { context: e3 }));
-      });
-      const r = Object.getOwnPropertyDescriptor(n2, i2);
-      let s4;
-      if (void 0 === r) {
-        const t2 = /* @__PURE__ */ new WeakMap();
-        s4 = { get: function() {
-          return t2.get(this);
-        }, set: function(e4) {
-          o.get(this).setValue(e4), t2.set(this, e4);
-        }, configurable: true, enumerable: true };
-      } else {
-        const t2 = r.set;
-        s4 = { ...r, set: function(e4) {
-          o.get(this).setValue(e4), t2?.call(this, e4);
-        } };
-      }
-      return void Object.defineProperty(n2, i2, s4);
-    }
-  };
-}
-
-// ../../node_modules/@lit/context/lib/decorators/consume.js
-function c({ context: c2, subscribe: e3 }) {
-  return (o, n2) => {
-    "object" == typeof n2 ? n2.addInitializer(function() {
-      new s2(this, { context: c2, callback: (t2) => {
-        this[n2.name] = t2;
-      }, subscribe: e3 });
-    }) : o.constructor.addInitializer((o2) => {
-      new s2(o2, { context: c2, callback: (t2) => {
-        o2[n2] = t2;
-      }, subscribe: e3 });
-    });
-  };
-}
-
-// src/button/Button.ts
 import { customElement as customElement2, property as property2 } from "lit/decorators.js";
@@ -207,3 +59,3 @@
 __decorateClass([
-  e2({ context: themeContext }),
+  e({ context: themeContext }),
   property({ attribute: false })
@@ -494,59 +346,1 @@ ], ThemeContextProvider.prototype, "theme", 2);
 };
-/*! Bundled license information:
-
-@lit/context/lib/context-request-event.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/create-context.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/controllers/context-consumer.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/value-notifier.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/controllers/context-provider.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/context-root.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/provide.js:
-  (**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/consume.js:
-  (**
-   * @license
-   * Copyright 2022 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136248

increased by108.71%

Lines of code

3324

increased by86.85%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes