cclkit4svelte 2.0.5 → 2.0.7

package/dist/RadioButton.svelte

@@ -1,69 +1,99 @@
-<script>import { CCLVividColor } from "./const/config";
-export let value;
-export let group;
-export let label = "";
-export let color = CCLVividColor.SODA_BLUE;
-export let disabled = false;
-let circleColor = "white";
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  /**
+   * ラジオボタンの選択値
+   * @type {any}
+   */
+  export let value: any;
+
+  /**
+   * どのラジオボタンが選択されているかを保持する変数
+   * @type {any}
+   */
+  export let group: any;
+
+  /**
+   * ラジオボタンのラベル
+   * @default ''
+   * @type string
+   */
+  export let label: string = '';
+
+  /**
+   * ラジオボタンの色
+   * @default CCLVividColor.SODA_BLUE
+   * @type string
+   */
+  export let color: string = CCLVividColor.SODA_BLUE;
+
+  /**
+   * 非活性状態
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = false;
+
+  let circleColor: 'white' = 'white';
 </script>
 
 <label class="radioWrapper" class:disabled>
-	<input type="radio" bind:group {value} {disabled} aria-label={label} />
-	<span class="customRadio" style="--bg-color: var({color});">
-		{#if group === value}
-			<span class="innerCircle" style="--circle-color: {circleColor};" />
-		{/if}
-	</span>
-	{#if label}
-		<span class="label">{label}</span>
-	{/if}
+  <input type="radio" bind:group {value} {disabled} aria-label={label} />
+  <span class="customRadio" style="--bg-color: var({color});">
+    {#if group === value}
+      <span class="innerCircle" style="--circle-color: {circleColor};" />
+    {/if}
+  </span>
+  {#if label}
+    <span class="label">{label}</span>
+  {/if}
 </label>
 
 <style>
-	.radioWrapper {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-		margin-bottom: 8px;
-		position: relative;
-	}
-	.radioWrapper.disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-	.radioWrapper input[type='radio'] {
-		border: 0;
-		clip: rect(0 0 0 0);
-		clip-path: inset(50%);
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		padding: 0;
-		position: absolute;
-		white-space: nowrap;
-		width: 1px;
-	}
-	.customRadio {
-		width: 20px;
-		height: 20px;
-		border: 2px solid var(--bg-color);
-		border-radius: 50%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		transition: background-color 0.2s;
-	}
-	.radioWrapper input[type='radio']:checked + .customRadio {
-		background-color: var(--bg-color);
-	}
-	.innerCircle {
-		width: 10px;
-		height: 10px;
-		background-color: var(--circle-color);
-		border-radius: 50%;
-	}
-	.label {
-		margin-left: 8px;
-		font-size: 16px;
-	}
+  .radioWrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 8px;
+    position: relative;
+  }
+  .radioWrapper.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .radioWrapper input[type='radio'] {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .customRadio {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--bg-color);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.2s;
+  }
+  .radioWrapper input[type='radio']:checked + .customRadio {
+    background-color: var(--bg-color);
+  }
+  .innerCircle {
+    width: 10px;
+    height: 10px;
+    background-color: var(--circle-color);
+    border-radius: 50%;
+  }
+  .label {
+    margin-left: 8px;
+    font-size: 16px;
+  }
 </style>

package/dist/RadioButton.svelte.d.ts

@@ -1,40 +1,42 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * ラジオボタンの選択値
-             * @type {any}
-             */ value: any;
-        /**
-             * どのラジオボタンが選択されているかを保持する変数
-             * @type {any}
-             */ group: any;
-        /**
-             * ラジオボタンのラベル
-             * @default ''
-             * @type string
-             */ label?: string;
-        /**
-             * ラジオボタンの色
-             * @default CCLVividColor.SODA_BLUE
-             * @type string
-             */ color?: string;
-        /**
-             * 非活性状態
-             * @default false
-             * @type boolean
-             */ disabled?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const RadioButton: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ラジオボタンの選択値
+       * @type {any}
+       */ value: any;
+    /**
+       * どのラジオボタンが選択されているかを保持する変数
+       * @type {any}
+       */ group: any;
+    /**
+       * ラジオボタンのラベル
+       * @default ''
+       * @type string
+       */ label?: string;
+    /**
+       * ラジオボタンの色
+       * @default CCLVividColor.SODA_BLUE
+       * @type string
+       */ color?: string;
+    /**
+       * 非活性状態
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioButton = InstanceType<typeof RadioButton>;
+export default RadioButton;

package/dist/Select.svelte

@@ -1,64 +1,105 @@
-<script>import { CCLVividColor } from "./const/config";
-export let label = "";
-export let options = [];
-export let value = "";
-export let borderColor = CCLVividColor.STRAWBERRY_PINK;
-export let disabled = false;
-export let id = "ccl-select";
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  /**
+   * オプションの型定義
+   */
+  export type SelectOption = { value: string; label: string };
+
+  /**
+   * ラベルのテキスト
+   * @default ''
+   * @type string
+   */
+  export let label: string = '';
+
+  /**
+   * 選択肢のリスト
+   * @type SelectOption[]
+   */
+  export let options: SelectOption[] = [];
+
+  /**
+   * 選択された値
+   * @default ''
+   * @type string
+   */
+  export let value: string = '';
+
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string = CCLVividColor.STRAWBERRY_PINK;
+
+  /**
+   * 非活性状態にするか
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * コンポーネントのID
+   * @default 'ccl-select'
+   * @type string
+   */
+  export let id: string = 'ccl-select';
 </script>
 
 <div class="select-wrapper">
-	{#if label}
-		<label for={id} class="select-label">{label}</label>
-	{/if}
-	<select
-		{id}
-		bind:value
-		{disabled}
-		class="select-field"
-		style="--border-color: var({borderColor})"
-	>
-		{#each options as option}
-			<option value={option.value}>{option.label}</option>
-		{/each}
-	</select>
+  {#if label}
+    <label for={id} class="select-label">{label}</label>
+  {/if}
+  <select
+    {id}
+    bind:value
+    {disabled}
+    class="select-field"
+    style="--border-color: var({borderColor})"
+  >
+    {#each options as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
 </div>
 
 <style>
-	.select-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
+  .select-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
 
-	.select-label {
-		font-size: 14px;
-		color: var(--wrap-grey);
-	}
+  .select-label {
+    font-size: 14px;
+    color: var(--wrap-grey);
+  }
 
-	.select-field {
-		padding: 10px 15px;
-		border-radius: 8px;
-		border: 2px solid var(--border-color);
-		font-size: 16px;
-		outline: none;
-		transition: border-color 0.2s;
-		background-color: white; /* 背景色を白に設定 */
-		appearance: none; /* デフォルトの矢印を非表示 */
-		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4L146.2%20208.6%205.4%2069.4h281.6z%22%2F%3E%3C%2Fsvg%3E'); /* カスタム矢印 */
-		background-repeat: no-repeat;
-		background-position: right 10px center;
-		background-size: 12px;
-		cursor: pointer;
-	}
+  .select-field {
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid var(--border-color);
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.2s;
+    background-color: white; /* 背景色を白に設定 */
+    appearance: none; /* デフォルトの矢印を非表示 */
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4L146.2%20208.6%205.4%2069.4h281.6z%22%2F%3E%3C%2Fsvg%3E'); /* カスタム矢印 */
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 12px;
+    cursor: pointer;
+  }
 
-	.select-field:focus {
-		border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
-	}
+  .select-field:focus {
+    border-color: var(--ccl-focus-color, var(--soda-blue)); /* フォーカス時の色を定義 */
+  }
 
-	.select-field:disabled {
-		background-color: var(--cloud-grey);
-		cursor: not-allowed;
-		border-color: var(--cloud-grey);
-	}
+  .select-field:disabled {
+    background-color: var(--cloud-grey);
+    cursor: not-allowed;
+    border-color: var(--cloud-grey);
+  }
 </style>

package/dist/Select.svelte.d.ts

@@ -1,49 +1,51 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * ラベルのテキスト
-             * @default ''
-             * @type string
-             */ label?: string;
-        /**
-             * 選択肢のリスト
-             * @type SelectOption[]
-             */ options?: {
-            value: string;
-            label: string;
-        }[];
-        /**
-             * 選択された値
-             * @default ''
-             * @type string
-             */ value?: string;
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor?: string;
-        /**
-             * 非活性状態にするか
-             * @default false
-             * @type boolean
-             */ disabled?: boolean;
-        /**
-             * コンポーネントのID
-             * @default 'ccl-select'
-             * @type string
-             */ id?: string;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ラベルのテキスト
+       * @default ''
+       * @type string
+       */ label?: string;
+    /**
+       * 選択肢のリスト
+       * @type SelectOption[]
+       */ options?: {
+        value: string;
+        label: string;
+    }[];
+    /**
+       * 選択された値
+       * @default ''
+       * @type string
+       */ value?: string;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor?: string;
+    /**
+       * 非活性状態にするか
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+    /**
+       * コンポーネントのID
+       * @default 'ccl-select'
+       * @type string
+       */ id?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/ServiceCard.svelte

@@ -1,78 +1,85 @@
-<script>export let serviceName;
-export let description;
-export let imageUrl;
-export let altText;
-export let linkUrl = void 0;
-export let borderColor = "--strawberry-pink";
-const Tag = linkUrl ? "a" : "div";
+<script lang="ts">
+  export let serviceName: string;
+  export let description: string;
+  export let imageUrl: string;
+  export let altText: string;
+  export let linkUrl: string | undefined = undefined;
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string = '--strawberry-pink';
+
+  const Tag = linkUrl ? 'a' : 'div';
 </script>
 
 <svelte:element
-	this={Tag}
-	href={linkUrl}
-	class="service-card"
-	target={linkUrl ? '_blank' : undefined}
-	rel={linkUrl ? 'noopener noreferrer' : undefined}
-	style="--card-border-color: var({borderColor});"
+  this={Tag}
+  href={linkUrl}
+  class="service-card"
+  target={linkUrl ? '_blank' : undefined}
+  rel={linkUrl ? 'noopener noreferrer' : undefined}
+  style="--card-border-color: var({borderColor});"
 >
-	<div class="image-container">
-		<img src={imageUrl} alt={altText} class="service-image" />
-	</div>
-	<div class="text-container">
-		<h3 class="service-name">{serviceName}</h3>
-		<p class="service-description">{description}</p>
-	</div>
+  <div class="image-container">
+    <img src={imageUrl} alt={altText} class="service-image" />
+  </div>
+  <div class="text-container">
+    <h3 class="service-name">{serviceName}</h3>
+    <p class="service-description">{description}</p>
+  </div>
 </svelte:element>
 
 <style>
-	.service-card {
-		display: flex;
-		align-items: center;
-		background-color: white;
-		border: 1px solid var(--card-border-color);
-		border-radius: 8px;
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		padding: 16px;
-		margin: 16px;
-		max-width: 500px;
-		text-decoration: none;
-		color: inherit;
-		transition: all 0.2s ease-in-out;
-	}
+  .service-card {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border: 1px solid var(--card-border-color);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    margin: 16px;
+    max-width: 500px;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s ease-in-out;
+  }
 
-	.service-card:hover {
-		transform: translateY(-4px);
-		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-	}
+  .service-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  }
 
-	.image-container {
-		flex-shrink: 0;
-		width: 120px;
-		height: 120px;
-		margin-right: 16px;
-	}
+  .image-container {
+    flex-shrink: 0;
+    width: 120px;
+    height: 120px;
+    margin-right: 16px;
+  }
 
-	.service-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		border-radius: 4px;
-	}
+  .service-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+  }
 
-	.text-container {
-		flex-grow: 1;
-	}
+  .text-container {
+    flex-grow: 1;
+  }
 
-	.service-name {
-		font-size: 1.25rem;
-		font-weight: bold;
-		color: var(--wrap-grey);
-		margin: 0 0 8px 0;
-	}
+  .service-name {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: var(--wrap-grey);
+    margin: 0 0 8px 0;
+  }
 
-	.service-description {
-		font-size: 1rem;
-		color: black;
-		margin: 0;
-	}
+  .service-description {
+    font-size: 1rem;
+    color: black;
+    margin: 0;
+  }
 </style>