'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-223abef7.js');
require('./Token-09f9b5d6.js');
const Notice = require('./Notice-e970b490.js');

const SmoothlyDisplayDemo = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.notice = index.createEvent(this, "notice", 7);
  }
  noticeWarning(notice) {
    console.log("emit", notice);
    this.notice.emit(notice);
  }
  render() {
    return [
      index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" }))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
    ];
  }
};

const styleCss$1 = "icon-demo.sc-smoothly-icon-demo{display:block}icon-demo[hidden].sc-smoothly-icon-demo{display:none}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}icon-demo.sc-smoothly-icon-demo>content.sc-smoothly-icon-demo>*.sc-smoothly-icon-demo{margin:1cm}";

const SmoothlyIconDemo = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.page = 0;
  }
  render() {
    return [
      index.h("h1", null, "Icons"),
      index.h("content", null, [
        "add-circle",
        "add",
        "airplane",
        "alarm",
        "albums",
        "alert-circle",
        "alert",
        "american-football",
        "analytics",
        "aperture",
        "apps",
        "archive",
        "arrow-back-circle",
        "arrow-back",
        "arrow-down-circle",
        "arrow-down",
        "arrow-forward-circle",
        "arrow-forward",
        "arrow-redo-circle",
        "arrow-redo",
        "arrow-undo-circle",
        "arrow-undo",
        "arrow-up-circle",
        "arrow-up",
        "at-circle",
        "at",
        "attach",
        "backspace",
        "bandage",
        "barbell",
        "bar-chart",
        "barcode",
        "baseball",
        "basketball",
        "basket",
        "battery-charging",
        "battery-dead",
        "battery-full",
        "battery-half",
        "beaker",
        "bed",
        "beer",
        "bicycle",
        "bluetooth",
        "boat",
        "body",
        "bonfire",
        "bookmarks",
        "bookmark",
        "book",
        "briefcase",
        "browsers",
        "brush",
        "bug",
        "build",
        "bulb",
        "business",
        "bus",
        "cafe",
        "calculator",
        "calendar",
        "call",
        "camera-reverse",
        "camera",
        "card",
        "caret-back-circle",
        "caret-back",
        "caret-down-circle",
        "caret-down",
        "caret-forward-circle",
        "caret-forward",
        "caret-up-circle",
        "caret-up",
        "car-sport",
        "car",
        "cart",
        "cash",
        "cellular",
        "chatbox-ellipses",
        "chatbox",
        "chatbubble-ellipses",
        "chatbubbles",
        "chatbubble",
        "checkbox",
        "checkmark-circle",
        "checkmark-done-circle",
        "checkmark-done",
        "checkmark",
        "chevron-back-circle",
        "chevron-back",
        "chevron-down-circle",
        "chevron-down",
        "chevron-forward-circle",
        "chevron-forward",
        "chevron-up-circle",
        "chevron-up",
        "clipboard",
        "close-circle",
        "close",
        "cloud-circle",
        "cloud-done",
        "cloud-download",
        "cloud-offline",
        "cloud",
        "cloud-upload",
        "cloudy-night",
        "cloudy",
        "code-download",
        "code-slash",
        "code",
        "code-working",
        "cog",
        "color-fill",
        "color-filter",
        "color-palette",
        "color-wand",
        "compass",
        "construct",
        "contract",
        "contrast",
        "copy",
        "create",
        "crop",
        "cube",
        "cut",
        "desktop",
        "disc",
        "document-attach",
        "documents",
        "document",
        "document-text",
        "download",
        "duplicate",
        "ear",
        "earth",
        "easel",
        "egg",
        "ellipse",
        "ellipsis-horizontal-circle",
        "ellipsis-horizontal",
        "ellipsis-vertical-circle",
        "ellipsis-vertical",
        "enter",
        "exit",
        "expand",
        "eyedrop",
        "eye-off",
        "eye",
        "fast-food",
        "female",
        "file-tray-full",
        "file-tray-stacked",
        "file-tray",
        "film",
        "filter",
        "finger-print",
        "fitness",
        "flag",
        "flame",
        "flashlight",
        "flash-off",
        "flash",
        "flask",
        "flower",
        "folder-open",
        "folder",
        "football",
        "funnel",
        "game-controller",
        "gift",
        "git-branch",
        "git-commit",
        "git-compare",
        "git-merge",
        "git-network",
        "git-pull-request",
        "glasses",
        "globe",
        "golf",
        "grid",
        "hammer",
        "hand-left",
        "hand-right",
        "happy",
        "hardware-chip",
        "headset",
        "heart-circle",
        "heart-dislike-circle",
        "heart-dislike",
        "heart-half",
        "heart",
        "help-buoy",
        "help-circle",
        "help",
        "home",
        "hourglass",
        "ice-cream",
        "images",
        "image",
        "infinite",
        "information-circle",
        "information",
        "journal",
        "keypad",
        "key",
        "language",
        "laptop",
        "layers",
        "leaf",
        "library",
        "link",
        "list-circle",
        "list",
        "locate",
        "location",
        "lock-closed",
        "lock-open",
        "log-in",
        "logo-amazon",
        "logo-amplify",
        "logo-android",
        "logo-angular",
        "logo-apple-appstore",
        "logo-apple",
        "logo-behance",
        "logo-bitbucket",
        "logo-bitcoin",
        "logo-buffer",
        "logo-capacitor",
        "logo-chrome",
        "logo-closed-captioning",
        "logo-codepen",
        "logo-css3",
        "logo-designernews",
        "logo-docker",
        "logo-dribbble",
        "logo-dropbox",
        "logo-edge",
        "logo-electron",
        "logo-euro",
        "logo-facebook",
        "logo-firebase",
        "logo-firefox",
        "logo-flickr",
        "logo-foursquare",
        "logo-github",
        "logo-gitlab",
        "logo-google-playstore",
        "logo-google",
        "logo-hackernews",
        "logo-html5",
        "logo-instagram",
        "logo-ionic",
        "logo-ionitron",
        "logo-javascript",
        "logo-laravel",
        "logo-linkedin",
        "logo-markdown",
        "logo-medium",
        "logo-nodejs",
        "logo-no-smoking",
        "logo-npm",
        "logo-octocat",
        "logo-paypal",
        "logo-pinterest",
        "logo-playstation",
        "logo-pwa",
        "logo-python",
        "logo-react",
        "logo-reddit",
        "logo-rss",
        "logo-sass",
        "logo-skype",
        "logo-slack",
        "logo-snapchat",
        "logo-soundcloud",
        "logo-stackoverflow",
        "logo-steam",
        "logo-stencil",
        "logo-tiktok",
        "logo-tumblr",
        "logo-tux",
        "logo-twitch",
        "logo-twitter",
        "logo-usd",
        "log-out",
        "logo-web-component",
        "logo-venmo",
        "logo-whatsapp",
        "logo-vimeo",
        "logo-windows",
        "logo-vk",
        "logo-wordpress",
        "logo-vue",
        "logo-xbox",
        "logo-xing",
        "logo-yahoo",
        "logo-yen",
        "logo-youtube",
        "magnet",
        "mail-open",
        "mail",
        "mail-unread",
        "male-female",
        "male",
        "man",
        "map",
        "medal",
        "medical",
        "medkit",
        "megaphone",
        "menu",
        "mic-circle",
        "mic-off-circle",
        "mic-off",
        "mic",
        "moon",
        "move",
        "musical-notes",
        "musical-note",
        "navigate-circle",
        "navigate",
        "newspaper",
        "notifications-circle",
        "notifications-off-circle",
        "notifications-off",
        "notifications",
        "nuclear",
        "nutrition",
        "open",
        "options",
        "paper-plane",
        "partly-sunny",
        "pause-circle",
        "pause",
        "paw",
        "pencil",
        "people-circle",
        "people",
        "person-add",
        "person-circle",
        "person-remove",
        "person",
        "phone-landscape",
        "phone-portrait",
        "pie-chart",
        "pin",
        "pint",
        "pizza",
        "planet",
        "play-back-circle",
        "play-back",
        "play-circle",
        "play-forward-circle",
        "play-forward",
        "play-skip-back-circle",
        "play-skip-back",
        "play-skip-forward-circle",
        "play-skip-forward",
        "play",
        "podium",
        "power",
        "pricetags",
        "pricetag",
        "print",
        "pulse",
        "push",
        "qr-code",
        "radio-button-off",
        "radio-button-on",
        "radio",
        "rainy",
        "reader",
        "receipt",
        "recording",
        "refresh-circle",
        "refresh",
        "reload-circle",
        "reload",
        "remove-circle",
        "remove",
        "reorder-four",
        "reorder-three",
        "reorder-two",
        "repeat",
        "resize",
        "restaurant",
        "return-down-back",
        "return-down-forward",
        "return-up-back",
        "return-up-forward",
        "ribbon",
        "rocket",
        "rose",
        "sad",
        "save",
        "scan-circle",
        "scan",
        "school",
        "search-circle",
        "search",
        "send",
        "server",
        "settings",
        "shapes",
        "share-social",
        "share",
        "shield-checkmark",
        "shield",
        "shirt",
        "shuffle",
        "skull",
        "snow",
        "speedometer",
        "square",
        "star-half",
        "star",
        "stats-chart",
        "stop-circle",
        "stop",
        "stopwatch",
        "subway",
        "sunny",
        "swap-horizontal",
        "swap-vertical",
        "sync-circle",
        "sync",
        "tablet-landscape",
        "tablet-portrait",
        "tennisball",
        "terminal",
        "text",
        "thermometer",
        "thumbs-down",
        "thumbs-up",
        "thunderstorm",
        "timer",
        "time",
        "today",
        "toggle",
        "trail-sign",
        "train",
        "transgender",
        "trash-bin",
        "trash",
        "trending-down",
        "trending-up",
        "triangle",
        "trophy",
        "tv",
        "umbrella",
        "walk",
        "wallet",
        "warning",
        "watch",
        "water",
        "videocam",
        "wifi",
        "wine",
        "volume-high",
        "volume-low",
        "volume-medium",
        "volume-mute",
        "volume-off",
        "woman",
      ]
        .slice(this.page * 100, 100)
        .map(name => (index.h("smoothly-icon", { name: name, toolTip: name })))),
    ];
  }
};
SmoothlyIconDemo.style = styleCss$1;

const SmoothlyInputDemo = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h("form", { action: "done", style: { position: "relative" } }, index.h("header", null, index.h("h5", null, "Address")), index.h("main", null, index.h("smoothly-input", { type: "text", name: "name" }, "Name"), index.h("smoothly-input", { type: "date", name: "date" }, "Date"), index.h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), index.h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), index.h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), index.h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), index.h("smoothly-radio", { name: "option", value: "1" }, "option 1"), index.h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), index.h("smoothly-radio", { name: "option", value: "3" }, "option 3"), index.h("smoothly-accordion", null, index.h("smoothly-accordion-item", { name: "A", open: true }, index.h("smoothly-radio", { name: "a", value: "1" }, "a 1"), index.h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), index.h("smoothly-radio", { name: "a", value: "3" }, "a 3")), index.h("smoothly-accordion-item", { name: "B" }, index.h("smoothly-radio", { name: "b", value: "1" }, "b 1"), index.h("smoothly-radio", { name: "b", value: "2" }, "b 2"), index.h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), index.h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), index.h("smoothly-checkbox", null), index.h("smoothly-checkbox", { disabled: true }), index.h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), index.h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), index.h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), index.h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), index.h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), index.h("smoothly-input", { type: "phone", name: "phone" }, "Phone")), index.h("footer", null, index.h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), index.h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))));
  }
};

const styleCss = ".sc-smoothly-select-demo-h{display:block}[hidden].sc-smoothly-select-demo-h{display:none}button.sc-smoothly-select-demo:focus{outline:none}";

const SmoothlySelectDemo = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.currencies = ["SEK", "EUR"];
    this.currency = "SEK";
  }
  alertf() {
    var _a;
    console.log(this.quantityElement);
    alert((_a = this.quantityElement) === null || _a === void 0 ? void 0 : _a.value);
  }
  handleSelectionChanged(event) {
    console.log("selectionChanged", event.detail);
  }
  render() {
    return [
      index.h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (index.h("option", { value: option, selected: true }, option)) : (index.h("option", { value: option }, option)))),
      index.h("smoothly-select", { identifier: "language" }, index.h("optgroup", { label: "Nordic" }, index.h("option", { value: "sv" }, "Swedish"), index.h("option", { value: "da", selected: true }, "Danish"), index.h("option", { value: "no" }, "Norwegian")), index.h("optgroup", { label: "Other" }, index.h("option", { value: "en" }, "English"))),
      index.h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, index.h("option", { value: "1" }, "1"), index.h("option", { value: "2" }, "2"), index.h("option", { value: "3" }, "3")),
      index.h("button", { onClick: () => this.alertf() }, "press here"),
      index.h("smoothly-picker", { label: "filter", "empty-menu-label": "Sorry, we're out of options.", multiple: true, options: [
          { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
          { name: "Noble Pig", value: "pig" },
          { name: "Turtle Wax", value: "turtle" },
          { name: "Spider Man", value: "spider" },
          { name: "Phoenix Order", value: "phoenix" },
          { name: "Horse Back", value: "horse" },
          { name: "Unicorn Horn", value: "unicorn" },
          { name: "Talking Parrot", value: "parrot" },
          { name: "Hidden Dragon", value: "dragon" },
          { name: "Scary Kraken", value: "kraken" },
        ] }),
      index.h("br", null),
      index.h("smoothly-picker", { label: "filter", multiple: false, "max-menu-height": "200px", options: [
          { name: "Dog", value: "dog", aliases: ["WOFF"], description: "Woof 🐶" },
          { name: "Cat", value: "cat", aliases: ["moew"] },
          { name: "Pig", value: "pig" },
          { name: "Turtle", value: "turtle" },
          { name: "Spider", value: "spider" },
          { name: "Phoenix", value: "phoenix" },
          { name: "Horse", value: "horse" },
          { name: "Unicorn", value: "unicorn" },
          { name: "Parrot", value: "parrot" },
          { name: "Dragon", value: "dragon" },
          { name: "Kraken", value: "kraken" },
        ] }),
    ];
  }
};
SmoothlySelectDemo.style = styleCss;

exports.smoothly_display_demo = SmoothlyDisplayDemo;
exports.smoothly_icon_demo = SmoothlyIconDemo;
exports.smoothly_input_demo = SmoothlyInputDemo;
exports.smoothly_select_demo = SmoothlySelectDemo;
