@oslokommune/punkt-elements 12.2.0 → 12.3.1

package/src/components/messagebox/index.ts

@@ -0,0 +1,63 @@
+import { PktElement } from '../element'
+import { PktSlotController } from '../../controllers/pkt-slot-controller'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { html, nothing } from 'lit'
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property } from 'lit/decorators.js'
+import '../icon'
+
+@customElement('pkt-messagebox')
+export class PktMessagebox extends PktElement {
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+  }
+
+  @property({ type: Boolean, reflect: true })
+  closable = false
+  @property({ type: Boolean, reflect: true })
+  compact = false
+  @property({ type: String, reflect: true })
+  title = ''
+  @property({ type: String, reflect: true })
+  skin = 'beige'
+  @property({ type: Boolean, reflect: true })
+  isDisplayed = true
+  @property({ type: Function, reflect: true })
+  onClose?: () => void
+
+  handleClose() {
+    this.isDisplayed = false
+    if (this.onClose) {
+      this.onClose()
+    }
+  }
+
+  render() {
+    const classes = {
+      'pkt-messagebox': true,
+      'pkt-messagebox--compact': this.compact,
+      [`pkt-messagebox--${this.skin}`]: this.skin,
+      'pkt-messagebox--closable': this.closable,
+    }
+
+    if (!this.isDisplayed) return nothing
+
+    return html`<div class=${classMap(classes)}>
+      ${this.closable
+        ? html`<div class="pkt-messagebox__close">
+            <button
+              @click=${this.handleClose}
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
+            >
+              <pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
+            </button>
+          </div>`
+        : nothing}
+      ${this.title ? html`<div class="pkt-messagebox__title">${this.title}</div>` : nothing}
+      <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
+    </div>`
+  }
+}

package/src/components/tag/index.ts

@@ -0,0 +1,110 @@
+import { classMap } from 'lit/directives/class-map.js'
+import { customElement, property, state } from 'lit/decorators.js'
+import { html, nothing } from 'lit'
+import { PktElement } from '../element'
+import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { ref } from 'lit/directives/ref.js'
+import { Ref, createRef } from 'lit/directives/ref.js'
+import specs from 'componentSpecs/tag.json'
+
+import '../icon'
+
+type TagSize = 'small' | 'medium' | 'large'
+type TagSkin = 'blue' | 'green' | 'red' | 'yellow'
+
+export interface IPktTag {
+  closeTag?: boolean
+  size?: TagSize
+  skin?: 'blue' | 'green' | 'red' | 'yellow'
+  textStyle?: string
+  iconName?: string
+  type?: string
+  ariaLabel?: string
+}
+
+@customElement('pkt-tag')
+export class PktTag extends PktElement {
+  slotController: PktSlotController
+  defaultSlot: Ref<HTMLElement> = createRef()
+
+  constructor() {
+    super()
+    this.slotController = new PktSlotController(this, this.defaultSlot)
+    this._isClosed = false
+  }
+
+  /**
+   * Element attributes
+   */
+  @property({ type: Boolean, reflect: true }) closeTag: boolean = specs.props.closeTag.default
+  @property({ type: String, reflect: true }) size: TagSize = specs.props.size.default as TagSize
+  @property({ type: String, reflect: true }) skin: TagSkin = specs.props.skin.default as TagSkin
+  @property({ type: String, reflect: true }) textStyle: string = specs.props.textStyle.default
+  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
+  @property({ type: String, reflect: true }) type: string = specs.props.type.default
+  @property({ type: String, reflect: true }) ariaLabel: string = specs.props.ariaLabel.default
+
+  /**
+   * Element state
+   */
+  @state() _isClosed: boolean = false
+
+  /**
+   * Element functions
+   */
+  private close = (event: MouseEvent) => {
+    this._isClosed = true
+    this.dispatchEvent(
+      new CustomEvent('onClose', {
+        detail: { origin: event },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  render() {
+    const classes = {
+      'pkt-tag': true,
+      [`pkt-tag--${this.size}`]: !!this.size,
+      [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
+    }
+
+    const btnClasses = {
+      'pkt-tag': true,
+      'pkt-btn': true,
+      'pkt-btn--tertiary': true,
+      [`pkt-tag--${this.size}`]: !!this.size,
+      [`pkt-tag--${this.skin}`]: !!this.skin,
+      [`pkt-tag--${this.textStyle}`]: !!this.textStyle,
+      'pkt-btn--icons-right-and-left': this.closeTag && !!this.iconName,
+    }
+
+    if (this.closeTag) {
+      return !this._isClosed
+        ? html`
+            <button
+              class=${classMap(btnClasses)}
+              type=${this.type}
+              aria-label=${this.ariaLabel}
+              @click=${this.close}
+            >
+              ${this.iconName &&
+              html`<pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon>`}
+              <span ${ref(this.defaultSlot)}></span>
+              <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+            </button>
+          `
+        : nothing
+    } else {
+      return html`
+        <span class=${classMap(classes)}>
+          ${this.iconName &&
+          html` <pkt-icon class="pkt-tag__icon" name=${this.iconName}></pkt-icon> `}
+          <span ${ref(this.defaultSlot)}> </span>
+        </span>
+      `
+    }
+  }
+}

package/dist/components/calendar/index.d.ts

@@ -1,59 +0,0 @@
-import { PktElement } from '../element';
-export declare class PktCalendar extends PktElement {
-    /**
-     * Element attributes
-     */
-    date: Date;
-    selected: string[];
-    excludeweekdays: string[];
-    excludedates: Date[];
-    earliest: Date | null;
-    latest: Date | null;
-    weeknumbers: boolean;
-    withcontrols: boolean;
-    multiple: boolean;
-    range: boolean;
-    /**
-     * Strings
-     */
-    dayStrings: string[];
-    monthStrings: string[];
-    weekString: string;
-    prevMonthString: string;
-    nextMonthString: string;
-    /**
-     * Private properties
-     */
-    private _selected;
-    private year;
-    private month;
-    private week;
-    private rangeHovered;
-    /**
-     * Runs on mount, used to set up various values and whatever you need to run
-     */
-    connectedCallback(): void;
-    /**
-     * Component functionality and render
-     */
-    render(): import('lit-html').TemplateResult<1>;
-    private renderDayNames;
-    private renderMonthNav;
-    private renderCalendarBody;
-    private isExcluded;
-    private formatISODate;
-    isPrevMonthAllowed(): boolean;
-    private prevMonth;
-    isNextMonthAllowed(): boolean;
-    private nextMonth;
-    private changeMonth;
-    private isInRange;
-    private isRangeAllowed;
-    private emptySelected;
-    private addToSelected;
-    private removeFromSelected;
-    private toggleSelected;
-    private handleRangeSelect;
-    private handleRangeHover;
-    private handleDateSelect;
-}

package/dist/components/component-template/index.d.ts

@@ -1,34 +0,0 @@
-import { PktElement } from '../element';
-export declare class PktComponent extends PktElement {
-    /**
-     * Element attributes => props
-     * Example:
-     * <pkt-el-component string="hei" strings="hei,og,hallo" darkmode>
-     *  Hei!
-     * </pkt-el-component>
-     */
-    string: string;
-    strings: string[];
-    darkmode: boolean;
-    /**
-     * Private properties, for internal use only
-     */
-    private _list;
-    /**
-     * Runs on mount, used to set up various values and whatever you need to run
-     */
-    connectedCallback(): void;
-    /**
-     * Render functions
-     */
-    render(): import('lit-html').TemplateResult<1>;
-    private renderList;
-    /**
-     * Add other functionality under here
-     */
-    private doStuff;
-    /**
-     * Handlers for returning data from the component
-     */
-    private handleGreeting;
-}

package/dist/components/element/index.d.ts

@@ -1,24 +0,0 @@
-import { LitElement } from 'lit';
-import { Ref } from 'lit/directives/ref.js';
-import { PktSlotController } from '../../src/controllers/pkt-slot-controller';
-export declare class PktElement extends LitElement {
-    /**
-     * Runs on mount, used to set up various values and whatever you need to run
-     */
-    connectedCallback(): void;
-    /**
-     * Make sure the component renders in light DOM instead of shadow DOM
-     */
-    createRenderRoot(): this;
-    /**
-     * Add support for Hot Module Reloading in dev mode
-     */
-    hotReplacedCallback(): void;
-    /**
-     * Set up slot support for Light DOM
-     */
-    slotController: PktSlotController;
-    defaultSlot: Ref<HTMLElement>;
-    namedSlot: Ref<HTMLElement>;
-    constructor();
-}

package/dist/components/icon/index.d.ts

@@ -1,29 +0,0 @@
-import { LitElement } from 'lit';
-export declare class PktIcon extends LitElement {
-    /**
-     * Element attributes
-     */
-    name: string;
-    path: string;
-    private icon;
-    /**
-     * Make sure the component renders in light DOM instead of shadow DOM
-     */
-    createRenderRoot(): this;
-    /**
-     * Add support for Hot Module Reloading in dev mode
-     */
-    hotReplacedCallback(): void;
-    /**
-     * Runs on mount, used to set up various values and whatever you need to run
-     */
-    connectedCallback(): Promise<void>;
-    /**
-     * Runs every time a property changes
-     */
-    update(changedProperties: Map<string, unknown>): Promise<void>;
-    /**
-     * Component functionality and render
-     */
-    render(): import('lit-html').TemplateResult<1>;
-}

package/dist/components/index.d.ts

@@ -1,3 +0,0 @@
-export { PktCalendar } from './calendar';
-export { PktIcon } from './icon';
-export { PktComponent } from './component-template';

package/dist/controllers/pkt-slot-controller.d.ts

@@ -1,11 +0,0 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
-import { Ref } from 'lit/directives/ref.js';
-export declare class PktSlotController implements ReactiveController {
-    host: LitElement & ReactiveControllerHost;
-    nodes: Element[];
-    slots: Ref<HTMLElement>[];
-    constructor(host: LitElement & ReactiveControllerHost, ...slots: Ref<HTMLElement>[]);
-    hostUpdate(): void;
-    hostUpdated(): void;
-    private nodeFromElement;
-}

package/dist/converters-Bi8tmNvQ.cjs

@@ -1,5 +0,0 @@
-"use strict";const s=require("./directive-DfhMJ1ie.cjs");/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const d=s.e(class extends s.i{constructor(t){var e;if(super(t),t.type!==s.t.ATTRIBUTE||t.name!=="class"||((e=t.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){var i,a;if(this.st===void 0){this.st=new Set,t.strings!==void 0&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter(r=>r!=="")));for(const r in e)e[r]&&!((i=this.nt)!=null&&i.has(r))&&this.st.add(r);return this.render(e)}const n=t.element.classList;for(const r of this.st)r in e||(n.remove(r),this.st.delete(r));for(const r in e){const o=!!e[r];o===this.st.has(r)||(a=this.nt)!=null&&a.has(r)||(o?(n.add(r),this.st.add(r)):(n.remove(r),this.st.delete(r)))}return s.R}}),h={hi:"Hei!"},c={days:["Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag","Søndag"],daysShort:["Man","Tir","Ons","Tor","Fre","Lør","Søn"],months:["Januar","Februar","Mars","April","Mai","Juni","Juli","August","September","Oktober","November","Desember"],monthsShort:["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"],week:"Uke",prevMonth:"Forrige måned",nextMonth:"Neste måned"},u={example:h,dates:c},g=t=>{if(Array.isArray(t))return t;if(typeof t=="string")return t.split(",")},p=t=>t?new Date(t):void 0,l=t=>{if(typeof t=="string")return t.split(",").map(e=>new Date(e));if(Array.isArray(t))return t.map(e=>new Date(e))};exports.Rt=d;exports.csvToArray=g;exports.stringToDate=p;exports.stringsToDate=l;exports.translations=u;

package/dist/converters-DMveycvc.js

@@ -1,100 +0,0 @@
-import { e as o, i as d, t as h, R as c } from "./directive-C7mkmyiy.js";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const m = o(class extends d {
-  constructor(t) {
-    var e;
-    if (super(t), t.type !== h.ATTRIBUTE || t.name !== "class" || ((e = t.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
-  }
-  render(t) {
-    return " " + Object.keys(t).filter((e) => t[e]).join(" ") + " ";
-  }
-  update(t, [e]) {
-    var n, i;
-    if (this.st === void 0) {
-      this.st = /* @__PURE__ */ new Set(), t.strings !== void 0 && (this.nt = new Set(t.strings.join(" ").split(/\s/).filter((r) => r !== "")));
-      for (const r in e) e[r] && !((n = this.nt) != null && n.has(r)) && this.st.add(r);
-      return this.render(e);
-    }
-    const s = t.element.classList;
-    for (const r of this.st) r in e || (s.remove(r), this.st.delete(r));
-    for (const r in e) {
-      const a = !!e[r];
-      a === this.st.has(r) || (i = this.nt) != null && i.has(r) || (a ? (s.add(r), this.st.add(r)) : (s.remove(r), this.st.delete(r)));
-    }
-    return c;
-  }
-}), p = {
-  hi: "Hei!"
-}, u = {
-  days: [
-    "Mandag",
-    "Tirsdag",
-    "Onsdag",
-    "Torsdag",
-    "Fredag",
-    "Lørdag",
-    "Søndag"
-  ],
-  daysShort: [
-    "Man",
-    "Tir",
-    "Ons",
-    "Tor",
-    "Fre",
-    "Lør",
-    "Søn"
-  ],
-  months: [
-    "Januar",
-    "Februar",
-    "Mars",
-    "April",
-    "Mai",
-    "Juni",
-    "Juli",
-    "August",
-    "September",
-    "Oktober",
-    "November",
-    "Desember"
-  ],
-  monthsShort: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "Mai",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Okt",
-    "Nov",
-    "Des"
-  ],
-  week: "Uke",
-  prevMonth: "Forrige måned",
-  nextMonth: "Neste måned"
-}, f = {
-  example: p,
-  dates: u
-}, l = (t) => {
-  if (Array.isArray(t)) return t;
-  if (typeof t == "string") return t.split(",");
-}, y = (t) => t ? new Date(t) : void 0, b = (t) => {
-  if (typeof t == "string")
-    return t.split(",").map((e) => new Date(e));
-  if (Array.isArray(t))
-    return t.map((e) => new Date(e));
-};
-export {
-  m as R,
-  b as a,
-  l as c,
-  y as s,
-  f as t
-};